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!

Overview

hand1 preset

laptop1 preset

gray1 preset

Actual size close-up (resulting images are print quality)

• ImageMagick

mkdir ~/GitHub; cd ~/GitHub;
git clone [email protected]:fantasyui-com/mockup.git mockup;

Fork this repository anywhere you like, open up your terminal execute: mockup/use PRESET-NAME OUTPUT-IMAGE YOUR-INPUT-IMAGE(S) (Note that output comes before input, we can be sure there is a single output but some presets will accept multiple images.)

~/GitHub/mockup/use laptop1 ~/the-result.png ~/Desktop/my-image1.png ~/Desktop/my-image2.png

mockup/use hand1 hand-demo.png my-file.png;

mockup/use laptop1 laptop-demo.png my-file.png;

mockup/use tv1 tv-demo.png my-file.png;

mockup/use tablet1 tablet-demo.png my-file.png;

mockup/use gray1 gray-demo.png my-file1.png my-file2.png;

Here 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.

#!/bin/bash
INDEX=1;
find ~/Desktop -maxdepth 1 -type f -iname "Screen*.png" | while read NAME
do
  ~/GitHub/mockup/use hand1 ./test-hand1-${INDEX}.png "${NAME}";
  ~/GitHub/mockup/use laptop1 ./test-laptop1-${INDEX}.png "${NAME}";
  ~/GitHub/mockup/use tv1 ./test-tv1-${INDEX}.png "${NAME}";
  ~/GitHub/mockup/use tablet1 ./test-tablet1-${INDEX}.png "${NAME}";
  INDEX=$((INDEX+1));
done;

• Alejandro Escamilla
  • laptop1
• William Iven
  • hand1
  • tablet1
• Jens Kreuter
  • tv1

• Each image will get a separate bash file (ex: mockup-tablet.sh, mockup-bigtv.sh)
• Library of source images will be separated-out into mockup-library and present a JSON file for other languages.