Tag Archives: Mockups

Major Update to My Mocktail Shortcut

I’ve made a significant update to Mocktail, my shortcut for creating device-framed screenshots. It now (finally) includes base images for:

  • iPhone 11
  • iPhone 11 Pro
  • iPhone 11 Pro Max
  • iPhone SE
  • iPad Pro Magic Keyboard

There are also more base images available for a number of supported devices. The shortcut has also been updated to be much more reliable and efficient, with around 30 fewer actions than before.

Finally, the shortcut and its required base images are now hosted here. If you have any questions, problems, or feedback, please leave a comment on the shortcut’s page or let me know.

Mocktail: A Shortcut for Creating iOS Device 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.

Apple's product images for marketing aren't particularly exciting.
Apple’s product images for marketing aren’t particularly exciting.

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.

A three-dimensional mockup created using Mocktail.
A three-dimensional mockup created using Mocktail.

Mocktail still performs traditional screenshot framing but includes some additional images to add variety.
Mocktail still performs traditional screenshot framing but includes some additional images to add variety.

Supported devices

Mocktail creates mockups for the following devices:

  • iPad Pro 2018 (11″ and 12.9″)
  • iPad Pro/Air 10.5″
  • iPad (including iPad mini1)
  • 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 sheet2, 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 saved3. 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

You can find your Cloudinary username (cloud name) and API key in the Cloudinary console.

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 them4.

The upload preset can be found in your Cloudinary account's dashboard.
The upload preset can be found in your Cloudinary account’s dashboard.

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.

Every image that would require a screenshot to be distorted was run through Affinity Pro to get the coordinates.
Every image that would require a screenshot to be distorted was run through Affinity Pro to get the coordinates.

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.

  1. Both iPad and iPad mini are the same resolution so iPad mini screenshots are handled as iPad screenshots—there are no iPad mini-specific base images. ↩
  2. At the time of writing, the current version of Shortcuts—2.1.3—has a bug that can prevent image-based action extension shortcuts from working. If Mocktail doesn’t work from the share sheet, run it from within the app. iPad users can also drag-and-drop images into the shortcut. ↩
  3. Federico cleverly uses Base64 encoding to store all images as text within his shortcut. I decided against a similar method because it seemed to severely impact the performance of Shortcuts. Instead, the base images are made available as a ZIP file in my repository that the shortcut downloads and extracts. ↩
  4. Signing uploads would have been a more significant undertaking. I don’t think it’s necessary considering the use case. ↩