{"id":24118505,"url":"https://github.com/fantasyui-com/mockup","last_synced_at":"2025-09-18T07:31:10.975Z","repository":{"id":43790219,"uuid":"71570825","full_name":"fantasyui-com/mockup","owner":"fantasyui-com","description":"Perspective app screens and isometric mock-up tool. Automated high quality, high resolution, marketing art designer for mockups. Written in minimalist Bash using ImageMagick and Love! [Application, Art]","archived":false,"fork":false,"pushed_at":"2020-05-28T15:33:21.000Z","size":93488,"stargazers_count":26,"open_issues_count":1,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-14T21:47:37.322Z","etag":null,"topics":["command-line","imagemagick","mockup","perspective"],"latest_commit_sha":null,"homepage":"","language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fantasyui-com.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-21T14:10:55.000Z","updated_at":"2023-12-15T14:34:35.000Z","dependencies_parsed_at":"2022-09-09T13:10:28.982Z","dependency_job_id":null,"html_url":"https://github.com/fantasyui-com/mockup","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fantasyui-com%2Fmockup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fantasyui-com%2Fmockup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fantasyui-com%2Fmockup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fantasyui-com%2Fmockup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fantasyui-com","download_url":"https://codeload.github.com/fantasyui-com/mockup/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233456776,"owners_count":18679074,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["command-line","imagemagick","mockup","perspective"],"created_at":"2025-01-11T08:19:47.731Z","updated_at":"2025-09-18T07:31:01.523Z","avatar_url":"https://github.com/fantasyui-com.png","language":"Shell","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mockup\nPerspective app screens, and isometric mock-up designs.\nFree Open Source automated high quality, high resolution, marketing art designer for mockup images.\nWritten in minimalist Bash using ImageMagick and Love!\n\nThis is a UNIX/Linux program first, you give it a screenshot of your program and it gives you that same screenshot carefully positioned in various scenarios, iPhone, TV, Laptop, etc... It exists because people and dribbbles keep bothering us about portfolios and we don't have time, the only time we do have is for a couple of commands, which is what mockup is great for.\n\n![all](/docs/all.jpg)\n\n## Installation\n\nThe current v2 is in development, it will be an rpm package, or now fork the repository, and use ./mockup\n\n## Usage and Command Reference\n\n### Image Based Templates\n\nOutput format is up to you, change hand1-demo.jpg to hand1-demo.png for PNG formatted image data.\n\n```sh\n\nmockup --template hand1 --input sample/image1.png --output hand1-demo.jpg\n\nmockup --template laptop1 --input sample/image1.png --output laptop1-demo.jpg\n\nmockup --template tablet1 --input sample/image1.png --output tablet1-demo.jpg\n\nmockup --template tv1 --input sample/image1.png --output tv1-demo.jpg\n\n```\n\n### Synthetic/Generative Designs\n\nNote the use of optional --background flag.\n\n```sh\n\nmockup --template stack2 --background '#002b36' --input sample/image1.png sample/image2.png --output stack2-demo.jpg\n\nmockup --template stack3 --background '#002b36' --input sample/image1.png sample/image2.png sample/image3.png --output stack3-demo.jpg\n\n```\n\n### A Promise of Simplicity\n\nKI.S.S., I will keep it sweet and simple, but we need dependency management to automatically install ImageMagick/GraphicsMagick, getopt and bc (and whatever else may come) to keep the dependency tree clean should the program be removed.\n\n### Theory of Operation\n\n1. Take royalty free source immage, add alpha (turn it into a standard png)\n2. Punch a hole in it wherever there was a screen.\n3. Now, take your image, distort it to fit that hole, layer the two, flatten the whole.\n4. Export as jpg.\n5. Upload it to your portfolio, blog, website, etc...\n\n### Future Ahead\n\nI wanted a simple an easy four point transform (aka. four point distort), but ImageMagick/GraphicsMagick seem to do exactly what we need, and come with extras that will help with slight image tweaks like desaturation, or adding noise. So, it makes no sense not to use those two.\n\n### Programming Style\n\nBash is what it is, though I probably need to, I don't want to [generate argument parsing code](https://github.com/matejak/argbash), I want things to be plain and simple, I want the Bash to be redable.\n\n#### 2.x The New Version\n\nNOTE: Visit https://github.com/fantasyui-com/mockup/tree/v1 for the original sources.\n\nI will provide an rpm that will include dependency handling and the next release will work like this\n\n```shell\n\n\nmockup --template laptop1 --output ~/the-result.png --input ~/Desktop/my-image1.png ~/Desktop/my-image2.png\n\nmockup -t laptop1 -o ~/the-result.png -i ~/Desktop/my-image1.png ~/Desktop/my-image2.png\n\n```\n\nThere maybe some interactive questions along the way if the user fails to name a valid template.\n\n#### Bash 3 and Bash 4\n\nI can't destroy the program because Apple is dragging behind, so I am going to aim for Bash 4, and use the new features to future proof the program.\n\n#### Graphic GUI\n\nIt is possible to use Electron and ImageMagick/GraphicsMagick module, so that could be a neat experiment, but this is really meant to run on the command line, this is supposed to be a Juggernaut that takes a folder with screenshots and crunches through them to give you ready to use results. It is supposed to be done by the time programs like Electron begin starting up.\n\n#### Graphic GUI Alternative: Raspberry PI\n\nFor people without a Linux computer. Microsoft and Apple make it difficult to publish software on their platforms, it will only get worse. On the Linux site, things only get better, it is a booming ecosystem of beautiful applications and powerful scripts.\n\nI hope to create a simple way to install mockup on a $35 Raspberry PI, I will publish an article about the setup and use. And help you to your first Linux.\n\n## Roadmap\n\n- Each image will get a separate bash file (ex: mockup-tablet.sh, mockup-bigtv.sh) no more tv1 tv2.\n- I would like the library of source images to be separated-out into mockup-library but it seems better to keep everything in one place for now.\n- I will present a JSON pr easy to parse file, file for other languages implementations.\n\n\n## Mockup Demos\n\n\nhand1 preset\n![hand1](/docs/hand1.jpg)\n\nlaptop1 preset\n![laptop1](/docs/laptop1.jpg)\n\ntablet1 preset\n![tablet1](/docs/tablet1.jpg)\n\ntv1 preset\n![tv1](/docs/tv1.jpg)\n\n### Synthetic/Generative\n\nlong1 preset\n![long1](/docs/long1.jpg)\n\nstack2 preset\n![stack2](/docs/stack2.jpg)\n\nstack3 preset\n![stack3](/docs/stack3.jpg?)\n\n\nActual size close-up (resulting images are print quality)\n![quality](/docs/quality.jpg)\n\n## Requirements\n\n- [ImageMagick](https://imagemagick.org)\n\n## Quick Installation\n\n    mkdir ~/GitHub; cd ~/GitHub;\n    git clone git@github.com:fantasyui-com/mockup.git\n    cd mockup;\n    ./mockup --template hand1 --input Photos/face.jpg --output wow.jpg\n\n## Bonus\n\nHere is a quick script that will create images based on Screen*.png on your ~/Desktop (This may take a while). The program below is meant to help you get started on processing large collections.\n\n```shell\n\n#!/bin/bash\nINDEX=1;\nfind ~/Desktop -maxdepth 1 -type f -iname \"Screen*.png\" | while read NAME\ndo\n  mockup -t hand1 -i  \"${NAME}\" -o ./test-hand1-${INDEX}.png;\n  mockup -t laptop1 -i  \"${NAME}\" -o ./test-laptop1-${INDEX}.png;\n  mockup -t tv1 -i  \"${NAME}\" -o ./test-tv1-${INDEX}.png;\n  mockup -t tablet1 -i  \"${NAME}\" -o ./test-tablet1-${INDEX}.png;\n  INDEX=$((INDEX+1));\ndone;\n\n```\n\n## Changelog\n\n- gray1 preset renamed to stack2\n- added new preset stack3 for 3 images\n\n## Credits\n\n- [Alejandro Escamilla](https://unsplash.com/@alejandroescamilla)\n  - [laptop1](https://unsplash.com/@alejandroescamilla?photo=xII7efH1G6o)\n- [William Iven](https://unsplash.com/@firmbee)\n  - [hand1](https://unsplash.com/@firmbee?photo=dAmHWsRYP9c)\n  - [tablet1](https://unsplash.com/@firmbee?photo=GANqCr1BRTU)\n- [Jens Kreuter](https://unsplash.com/@jenskreuter)\n  - [tv1](https://unsplash.com/@jenskreuter?photo=ngMtsE5r9eI)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffantasyui-com%2Fmockup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffantasyui-com%2Fmockup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffantasyui-com%2Fmockup/lists"}