Two-Tap Screenshots

Building apps often requires sharing a lot of screenshots of your app in action.

I’ve refined the process down to being able to create the framed screenshot you see below with two taps to the back of the phone.

This technique uses the Shortcuts app, triggered by a Back Tap, to take a screenshot and pass it to the PicSew app, which frames it in a device and cleans up the status bar (the time is set to 09:41 and the network and battery bars are set to full).

It is then resized and a free Toolbox Pro shortcut action tags and saves the images to a newly created folder on my Desktop in iCloud.

Let’s dig into each step.

Taking A Screenshot

As of writing, the developer beta of iOS 14.5 includes a new Shortcuts action: ‘Take Screenshot’.

When triggered it takes a screenshot of the device’s current screen and passes that image to the next action (without saving it to the camera roll).

Framing The Screenshot

To frame the screenshot, I make use of the excellent app PicSew. As well as stitching multiple screenshots to create a long, ‘scrollshot’ image, this app also lets you frame a single screenshot in a photo-realistic Apple device.

It has support for the x-callback url scheme, which lets it play nicely with automation in Shortcuts.

Here’s the callback URL I use:

You can learn about the different parameters in PicSew’s documentation.

I use PicSew because I love the way it normalises the status bar to be the same in each image, but if that isn’t a big deal to you, you could skip the app and use Federico Viticci excellent ‘Apple Frames’ shortcut, which does the same kind of framing, right inside Shortcuts.

Saving The Screenshot

By default, Shortcuts can only save files into the ‘Shortcuts’ directory in iCloud Drive. I find this a bit awkward so I use the (free) Bookmarked Folders actions in my app, Toolbox Pro, to save my screenshots directly to dated folders in a ‘Screenshots’ folder on my Desktop instead.

In Toolbox Pro, simply add the folder you wish to use in your automations in the ‘Folder Bookmarks’ section of the Settings tab.

Then in the shortcut we can use Toolbox Pro’s ‘Create Folders’ action to create a dated folder for our screenshots and the ‘Saved Files To Bookmarked Folders’ action to save the screenshot to the folder we’ve just created with a coloured Finder label for good measure.

I actually save four screenshots each time the shortcut is run:

• The original, untouched screenshot
• The full-sized framed screenshot as a PNG with transparency
• Another PNG but scaled down to 500 pixels in width
• A full-sized JPEG, overlaid on a grey background (this is better for posting on Twitter since it doesn’t display images with an alpha channel very well)

Here’s what the final output looks like:

You can easily toggle which screenshots you wish to output in the dictionary at the top of the shortcut:

The Shortcut

You can download my ‘Framed Screenshot’ shortcut here.

Make sure you have PicSew & Toolbox Pro installed and a Folder Bookmark with the name ‘Desktop’ or it won’t run as expected.

At the time of writing, it also requires the developer beta of 14.5.

To trigger the shortcut using a double or triple tap to the back of the device, select the shortcut in Settings.app:

Settings > Accessibility > Touch > Back Tap

Alternatively, you could trigger it with Siri.

Going Further

That’s a lot of legwork being done for us with two taps but we can go further.

Once the screenshots have been saved, I have Hazel monitoring the screenshots folder for changes.

When it detects a new batch of screenshots, it’ll open the 500px versions in ImageOptim to reduce the filesize by about 75% without any noticeable image quality loss.

Here are what those rules look like:

This checks for new folders and runs the other rule on the contents

You could also add a rule to automatically delete screenshots after a certain period of time.