Device-Framed Screenshots in Workflow Redux

It's been almost two years since I made a workflow to create device-framed screenshots. Since then, Workflow added an Overlay Image action that allows users to place one image on top of another, making the need to slice up device images redundant. I figured that those wanting to create device-framed screenshots would eventually use this as a replacement for my workflow.

Nonetheless, the original workflow proved to be quite popular and I still get asked about it from time to time. Just last week, I helped someone on Twitter who was having trouble using the old workflow. I've now created a replacement action extension workflow that uses Overlay Image to generate device-framed screenshots for iPhone, iPad, iPhone SE, and Apple Watch.

Device-framed screenshot for Apple Watch

Unlike the old one, this workflow doesn't need you to download image assets manually. The workflow operates as an action extension for images, but if you run it from within Workflow it will automatically download the image assets and save them to iCloud Drive for you.

Run the workflow from within the app to install the device images it needs

The workflow also automatically detects orientation and provides either portrait or landscape device-framed screenshots (excluding Apple Watch).

Device-framed screenshot for iPad

To correctly place the screenshot within the device, the following measurements were taken for each device image1:

  • Height and width of the screen area
  • X and Y distance of the top-left corner of the screen area from the edge of the image (where the image is to be positioned)

When the workflow is run and a device chosen, Workflow resizes the screenshot to the dimensions of the screen area. It then overlays it onto the device image at the appropriate coordinates so as to completely cover the screen area.

This workflow becomes especially useful when coupled with the new screenshot process in iOS 11. Instead of just saving a screenshot to the Camera Roll, iOS now provides an option for annotating and sharing a screenshot before deciding whether to save it. This means you can create a screenshot, annotate it (if needed), then share it and use the workflow to create a device imageā€”all as part of one process. You can then discard the original screenshot without needing to save it.

Annotating screenshots in iOS 11

For use on the web, I highly recommend using my Optimize Image workflow to reduce the file size of the resulting PNG image. You can add a Run Workflow action at the very end of this workflow to pass the image directly into Optimize Image workflow, providing a single process for generating and optimizing device-framed screenshots.

Run workflow

This workflow only includes one color of device (Space Gray), so consider it a starting point for further customization. You can easily add more devices or colors by customizing the workflow and using the same process for all other devices.

  1. I used the Crop tool in Pixelmator to get these dimensions. I'm almost certain there's a better way of doing this, but it worked fine for what I needed.