Frame android screenshots with ImageMagick

Frame android screenshots with ImageMagick.md

Prerequisites

1. A screenshot with the correct aspect ratio
2. A device frame PNG with a transparent area where the screenshot will be placed See Facebook's Device Art
3. GraphicsMagick / ImageMagick
4. That's it.

Instructions

1. Modify variables in the shell script accordingly
2. Run it

Notes

Screenshots for Google Pixel 3 XL with Notch

1. Create a new AVD with no skin, with screen dimensions 1440x2960, using API 28
2. Boot the AVD and go to Developer Options
   1. Settings -> System -> About Emulated Device -> Tap on 'Build Number' until Developer Options is enabled.
   2. Settings -> [Search icon]
   3. Search for 'cutout'
   4. Choose 'Simulate a display with a cutout'
   5. Set it to a Tall display cutout

sample.sh

#!/usr/bin/env bash
SCREENSHOT="../Desktop/Screenshot_1544684939.png"
OUTPUT_FILE="out.png"
FRAMEFILE="Google Pixel 3 XL/Device/Google Pixel 3 XL - Clearly White.png"
FRAMEFILE_SCREEN_GEOMETRY="1440x2960"
FRAMEFILE_TOP_LEFT_OFFSET="+150+150"
convert "${FRAMEFILE}" \( "${SCREENSHOT}" -scale ${FRAMEFILE_SCREEN_GEOMETRY} \) -geometry ${FRAMEFILE_TOP_LEFT_OFFSET} -compose DstOver -composite "${OUTPUT_FILE}"

Sample Files:

Screenshot, frame and output

These are full-size images you can use to test the sample.sh script. Just right-click and save.