Frame Screenshots

Prettify you screenshots, with hundreds of devices and colors available, or use your own frames


Description

UPDATE 2021-11-29: Facebook Design has silently updated their frame collection recently. They've included high resolution (2x, 3x, 4x) versions for many devices, and they've also added many additional devices. Unfortunately they've used some problematic filenames that stop the shortcut. I'll have to investigate to make this part of the shortcut work again.


iOS 15: Everything works in iOS 15.1 iOS 15: Everything works in iOS 15.1, although the downloading of FD frames is uncomfortably slow. Also there are a lot of permissions to give the first time the shortcut is used:

  • Access to the "Shortcuts" folder
  • Running another shortcut (in fact it only runs itself)
  • Show notifications
  • Show numbers, images, and folders in notifications
  • Connect to www.atnbueno.com (to download the default frame set)
  • Connect to design.facebook.com and fbcdn.net (to get the big .zip with the frames)
  • Save dozens of numbers, images, and "(null)" in a file (no idea what the last one is about)
  • Save a contact (not really a contact, but an option from the menu) in a file
  • Delete a file (a JSON file created by the shortcut and used as download queue for the FD frames)

iOS 14: iOS 14 users can still use the fully working version 1.4.2


Original description

It's surprising how much better screenshots look when framed in the device they were made.

This shortcut allows to add a variety of frames to your screenshots. You will be initially offered to download a small set of frames: all the sizes and colors of iPhone 12/13, and the iPad Pro 12.9". Those can be rotated by the shortcut so you can easily have portrait and landscape frames:

"Generate landscape frames" option in the Configuration Menu ·

But that's only the beginning. The two main advantages of this shortcut over others similar to it are:

You can add your own frames

You can add your own device frames without having to edit the shortcut. Add your watermarks, show your own hand holding the device, or show the device in your table. Your imagination is the limit!

Prepare your frame, give it the proper name*, copy it to the Shortcuts/Screenshot Frames/ folder in your iCloud Drive, and run the "Scan frames folder" option in the Configuration menu of the shortcut.

"Scan frames folder" option in the Configuration Menu ·

(*) The "proper" name would be something like this:

1125x2436+100+90 iPhone 12 mini - Blue.png

The 1125x2436+100+90 part is the geometry of the screenshot: 1125x2436 is the resolution of the screenshot to be used with the frame. +100+90 is where the screenshot should be positioned in the frame. The rest of the filename (iPhone 12 mini - Blue in the example) is the label to identify the frame and it can be anything you want, as long as it doesn't contain periods (a technical limitation).

But what about devices with a scaled screen? For example, the iPhone 12 mini generates 1125x2436 screenshots, but its screen is only 1080x2340 pixels (96% of the screenshot). This shortcut also supports those frames with a variation of the filename described above:

1125x2436~1080x2340+160+160 Apple iPhone 12 Mini - Blue.png

In this case the geometry of the screenshot is the initial resolution (1125x2436) followed by the final resolution (1080x2340) and its position in the frame (+160+160).

If you have one of these devices it's your choice to use a non-scaled or a scaled frame. One shows the screenshot at the maximum quality, and the other may be more suitable when the device relative size is significant.

Use the Facebook Design frame collection

Montage of frames from Facebook Design

You can browse, select and download frames from the amazing collection of device frames made available by the Facebook Design team. It includes frames for many more Apple devices and even for some non-Apple ones.

"Get frames from Facebook Design" option in the Configuration Menu ·

The shortcut lets you browse that collection, select the frames you want (frames with and without shadow, iPads with and without Pencil, watches with and without bands, ...) and download them, adding them with the proper name to your frame collection. The process can be a bit slow (the collection is a 250 MB zip file with more than 400 folders and more than 1600 files), but the shortcut does all the work for you.

And if your device is not in the collection, you may find a similar one (e.g. iPhone SE instead of iPhone 6, or iPad Mini instead of iPad 6th Gen).

Unsupported resolution error message, with frame suggestion

Future plans

I want to modify the Facebook Design part, so it doesn't have to download the full set to get a single frame (but at the same time I want to comply with FD's request of not repackaging and redistributing the assets).

I'm even considering separating that part into its own shortcut 🤔


Latest Release Notes

1.5.2 - Oct. 25, 2021, 8:53 p.m.

Fixed bug when downloading FD frames


Version history