Automatically add device frames to screenshots

App Store Distribution & Marketing App Store Connect
jkozlowicz OP
Created Oct ’21
Replies 4
Boosts 0
Views 6.2k
Participants 4

I need to add frames to auto-generated screenshots for multiple devices and multiple languages so that I can display these on my app's landing page. I guess it must be quite a standard task so my question is:

Is there anything that can be reused to get this job done?

All screenshot file names contain:

  • language
  • device name
  • generation

I would prefer not to have to manually add frames to 10 screenshots * number_of_devices * number_of_languages.

Right now I actually only need iPhone Pro (not Max) and iPad Pro 12.9 (newest gen), but in the future I might need it for other devices too.

Replies  4
Boosts  0
Views  6.2k
Participants  4
Claude31 OP
Oct ’21

What do you mean by device frame ?

  • a simple border ?

If you have images in Pages, that can be done automatically:

https://support.apple.com/en-gb/guide/pages/tan14a575e90/mac

You could also create your own app to do it automatically.

There are also a lot of free photo editors on Mac you could use for it.

  • The device itself ?

I need this too for documentation. I just do a screen capture of simulator. I open the simulator on a blank page not to be disturbed by background. Nevertheless, there is a shadow effect.

So may be the simplest is:

  • create the frame with screen capture of simulator
  • edit it to erase the shadow effect
  • use to paste each image inside

Yes that is a bit tedious, notably if you have multiple devices, multiple languages… But translations the text that goes with images is fastidious too…

0
jkozlowicz OP
Oct ’21

By device frame I mean the metallic frame with the buttons etc. It is sometimes called "bezel". Please see the attached image.

I ended up doing it semi-manually in Figma. I had screenshots exported automatically for all devices and languages by Xcode UI tests. Then I just added the frame to every screenshot manually.

@Claude31 I can highly recommend investing some time in making UI test generate screenshots for you so that screenshots capture:

  • any new changes
  • any new language added
  • any new devices you need screenshots for

0
MrFix1T OP
Mar ’23

Have you tried using the iFrame Shortcut? (https://www.itecheverything.com/iframes)

1
ElCuervitoOfficial OP
Mar ’24

I would recommend reading this post: https://www.idownloadblog.com/2023/04/21/how-to-add-frame-iphone-ipad-screenshots/

Official Raven

0
Automatically add device frames to screenshots
First post date Last post date
 
 
Q