Framer will composite a screenshot onto a device frame, by intelligently finding the space for the screenshot.
Built in Rust.
Usage: framer [OPTIONS] <DEVICE_FRAME_PATH> <SCREENSHOT_PATH>
Arguments:
<DEVICE_FRAME_PATH> Path to device frame image
<SCREENSHOT_PATH> Path to screenshot image
Options:
-o <OUTPUT_PATH> Path to composited output image [default: result.png]
-x, --x-perc <percent> How far, as a percentage, from the left edge that the screenshot area is at [default: 50]
-y, --y-perc <percent> How far, as a percentage, from the top edge that the screenshot area is at [default: 50]
--oxipng-level <level> The level of optimization to use with oxipng (0-6), lower is faster [default: 4]
--pngquant-speed <speed> The level of optimization to use with pngquant (1-10), higher is faster [default: 4]
-h, --help Print help
-V, --version Print version
Then you can create your frame with marketing text around it once, and run framer
in a script to automatically put in updated screenshots.
Our first example is an Android device with some marketing text already created. We can then run framer
to put in a screenshot, which produces the composited image:
Of course framer
is agnostic to the actual device, so an iPhone frame and an iPhone screenshot will work just as well:
We can even go further and use framer
to composite web screenshots onto a laptop frame: