Tag: Mockups

Update 2020-05-04: Mocktail has been updated and is now available on my site—it is no longer hosted on GitHub.

I last updated my shortcut for creating device-framed screenshots in December 2017 by adding support for iPhone X. I’ve been meaning to add more device frames for a while now but, since becoming a father six months ago, free time has been a precious commodity.

In the meantime, Federico Viticci released his impressive Apple Frames shortcut which does a fantastic job at framing screenshots for different devices. I still wanted to update my shortcut though it now seemed redundant to simply add more frames. Instead, I decided to start from scratch and approach the concept of screenshot framing differently.

My original shortcut, like Federico’s, makes use of Apple’s marketing product images—high-resolution images of devices for use in marketing or promotional material—that are ideal for screenshot framing. However, there’s no variety in what’s available, only flat images of devices and usually in Space Gray.

Instead of framing screenshots using just these images, I wanted to create mockups using different product images that are more distinctive and, in some cases, three-dimensional. The result is Mocktail, a shortcut that creates framed iOS screenshots using various device images I’ve sourced from Apple’s website (e.g., product landing pages or the online store). Where necessary, Mocktail applies perspective distortion to screenshots using Cloudinary, an online image manipulation API.

Supported devices

Mocktail creates mockups for the following devices:

• iPad Pro 2018 (11″ and 12.9″)
• iPad Pro/Air 10.5″
• iPad (including iPad mini¹)
• iPhone XS and XS Max
• iPhone 8 and 8 Plus
• Apple Watch Series 4 (40mm and 44mm)
• Apple Watch Series 3 (38mm and 42mm)

Notably absent is the iPhone XR. There aren’t yet any usable images of the device to create mockups with (the only ones I could find aren’t a high enough resolution) nor has Apple created a product marketing image for it. I hope to support the iPhone XR sometime in the future.

Using the shortcut

Mocktail can be run as a normal shortcut, accepts images from the share sheet², or using drag-and-drop, and performs the following steps:

1. Checks if any images were shared to the shortcut via the share sheet (or using drag-and-drop). If not, the shortcut displays a list of recent screenshots for you to select from. Multiple images can be shared to create a batch of mockups all at once.
2. Checks that the required base images are available in iCloud Drive. If not (i.e., the shortcut is run for the first time), they are automatically downloaded and saved³. The shortcut then continues.
3. Calculates the pixel count of the screenshot by multiplying its width and height. This is used to determine what device the screenshot was taken on.
4. Determines the orientation of the screenshot (either landscape or portrait).
5. Using the device information and orientation, the shortcut displays a list of suitable base images for you to select from.
6. Applies rounded corners if the device requires it (e.g., iPad Pro or iPhone XS). For iPhone XS and XS Max, a notch is also added to the screenshot.
7. For flat base images, the screenshot is overlaid onto the base image. For three-dimensional base images, Mocktail uses Cloudinary to apply perspective distortion to the screenshot, then overlays it onto the base image.
8. Certain base images have a significant amount of white space. Where necessary, the shortcut crops the completed mockup.
9. The completed mockup is saved to iCloud Drive. Each mockup is saved in a folder corresponding to the name of the device, such as /Shortcuts/Mocktail/iPhone XS Max.

Distorting images with Cloudinary

Mocktail uses Cloudinary’s upload and image manipulation APIs to apply perspective distortion to screenshots. You need to create a free Cloudinary account to use Mocktail. The free pricing tier is more than sufficient as you would need to run this shortcut several thousand times a month before you would exceed the free plan.

When you first launch the shortcut, it asks you to provide the following information about your Cloudinary account which can be found in the Dashboard:

• Username (your Cloudinary “cloud name”, not email address)
• API key
• Upload preset

By default, Cloudinary requires uploads to be signed with the account’s secret key. Mocktail doesn’t do this so you need to enable unsigned uploads and specify the upload preset in the shortcut. This randomly generated value is used to upload images without needing to sign them⁴.

Once you have provided your Cloudinary details, you can begin using Mocktail to generate mockups.

Mocktail is one of the most complex shortcuts I’ve created and it makes extensive use of dictionaries to store information. To figure out how screenshots should be distorted, I used Affinity Photo to draw lines along the sides of the display. I then added horizontal and vertical guides at the location where these lines intersected, providing me with the necessary X,Y coordinates required by Cloudinary.

Mocktail is available from my GitHub repository of shortcuts. I prefer not to use iCloud links when sharing shortcuts because of they’re one-time use limitation. Rather than generate a new link every time I update the shortcut, I can push an update to GitHub and the existing link still works (there’s also the usual benefits of using a version control system).

Mocktail is now available here.