Next post Previous post

Making screenshot frames

October 16, 2018 at 8:21 AM by Dr. Drang

With the latest update to Federico Viticci’s screenshot framing shortcut, I needed to change my system for framing and uploading screenshots. Changing the Frame & Upload shortcut itself was trivial—I just needed to change the argument to the Run Shortcut action to the new framing shortcut—but I also needed to change some of Federico’s code to show frames for my devices.

New call to Run Shortcut

I started with the iOS-only version of Federico’s shortcut. It includes frames for

(I don’t care about the Mac frames. I seldom need full-screen screenshots on the Mac, and I already have a system for taking, framing, and uploading Mac window screenshots. Most important, it’s not as if the Mac is incapable of doing this sort of processing—it would be easy to use the Python Imaging Library or ImageMagick to write a script that frames Mac screenshots. Moving Mac screenshots over to iOS for processing would add an unnecessary step.)

Federico’s shortcut includes frames for devices I don’t have (or don’t intend to use again) and is missing frames for devices I do. So I did some surgery to cut out the parts covering the Max and 6/6🅂/7/8 phones. Then I altered the watch section to handle the 42 mm Series 3 that I own, which involved some image manipulation.

First, I needed an easily editable image of the Series 3 from which to make a frame. I went to same source Federico did for his images: Apple’s Marketing Resources page for developers. There, in the Product Images section, are Photoshop files for (most of) Apple’s current product line. These files are specifically made so developers can easily composite in screenshots to make images showing what the devices look like when running their apps. I downloaded the files for the watch to my Mac.

In the set of Watch images is a file named

AW-S3-42mm-SilverAluminum-BlackBand-@1x.psd

Despite its name, it’s actually an image of a Space Gray Series 3. Here’s what it looks like when opened in Pixelmator (which understands the PSD file format).

Series 3 in Pixelmator

As you can see, there are two layers, one for the watch image itself and one for the screenshot. There are also guides to help developers align their replacement screenshots. The watch image, which is behind the screenshot layer, is opaque in the center. To make an image that works with Federico’s shortcut, we need to delete that central area and make it transparent.

First, we make sure the Screenshot layer is active. With the color selection (wand) tool, we click outside the gray rectangle to select the surrounding transparent area and then choose Edit‣Invert Selection (or ⇧⌘I) to select just the gray rectangle and the text inside it.

Select gray screenshot rectangle

Now hide the Screenshot layer and make the Hardware layer active. You’ll still see the crawling ants of the selection rectangle. Press the Delete key to punch out that rectangle and make it transparent in the Hardware layer. Then File‣Export the image as a PNG. I called it Series-3.png.

Delete area from hardware layer

Federico’s shortcut doesn’t use the frame images themselves; it uses Base64 encodings of the images. Base64 is long-established way of turning binary data into ASCII text for transmission across systems (like email) that were developed for text only. Federico uses it so he can store the equivalent of binary data in his shortcut. The Shortcuts app makes this easy because it includes an action for encoding and decoding Base64.

At the Terminal, I created the Base64 encoded text with the command

base64 -b 76 Series-3.png > Series-3.txt

The -b 76 switch splits the encoded text into lines 76 characters long, which makes the file a bit easier to navigate in a text editor. I moved the encoded text file to iCloud Drive, switched to my iPad, opened the file, and copied the encoded text into the appropriate spot in the watch section of my edited version of Federico’s shortcut.

Series 3 section of framing shortcut

The gibberish in the Text action is what I pasted in. As you can see, I also changed the width test from the 368 pixels of the Series 4 to the 312 pixels of the Series 3. The last pieces of information needed by Federico’s shortcut are the x and y offsets of the screenshot. I got them from the coordinates of the left and upper guidelines and added them to the Dictionary action in the watch section of the shortcut.

Dictionary for watch

This same basic idea can be used to make frames from any of Apple’s product images and incorporate them into Federico’s shortcut. So if you have, for example, a 10.5″ iPad Pro, you can make a frame for it and substitute it in for the 12.9″ frame.

Now I have a system that’s nearly what I want. The only thing missing are portrait and landscape frames for my iPad, which is the oft-forgotten 9.7″ Pro. Unfortunately, Apple doesn’t have Photoshop files for any 9.7″ iPad on its website. This seems a little odd, as they are still selling the regular 9.7″ iPad, but I guess they want developers to show their apps running on the larger devices.1

In any event, there are no frames I can use with the 1536×2048 (and 2048×1536) screenshots I take with my iPad. If you’re a developer and happen to have the older PSDs for a 9.7″ Retina iPad lying around, I’d appreciate your sending them to me.

Otherwise, I’ll just have to buy a new iPad Pro when they come out and use the new images Apple will make available. What a shame that would be.

  1. Or it’s an oversight, like the incorrect naming of the Series 3 image. ↩

Next post Previous post