Creating perfect App Store screenshots of your iOS App

Leonid Zverugo

wrote this on Авг 17, 2015

App Store screenshots are the first thing in convincing people to install/buy your app. But many apps do screenshots totally wrong. Here’s a review of tips and methods to generate nice screenshots compiled by Felix Krause.

Manually create screenshots on all devices and all languages

It’s evident that it takes much time and decreases the quality of screenshots. As it’s not automated, screenshots will differ a little bit from one another on various devices and languages.

 

Create screenshots on one device type, put it into frames and resize them

Create 5 screenshots per language on one device type and put them into frames. If you put the screenshot into various frames, the tool that you use can resize the image to match the iTunes Connect requirements.

But using a web service that does these kind of frames is a nice and simple way to get beautiful screenshots for the App Store.

 

The problems with the techniques:

• wrongly scaled screenshots result in a blurry font.
• using wrong device frames for various screen sizes.
• a screenshot doesn't show the screen a user will actually see.
• no landscape support.
• no Mac App Support.

 

Using correct screenshots for all device types and languages ("The Right Way")

Here’s a checklist for really great screenshots:

• screenshots localised in all languages your app supports.
• various screenshots for different device types to have the correct font in your screenshots.
• same content in all languages and device types.
• no loading/scrolling indicators should be visible, not even in the status bar.
• a clean status bar: Full battery, full Wifi and of course 9:41.
• localized titles above your screenshots.
• a device in screenshots actually matches the device of the user (except for the color).
• a nice looking background behind the frames.

 

 

Clean Statusbar

Pay attention to the following things:

• 9:41 AM (or just 9:41).
• all 5 dots (formerly known as bars).
• full WiFi signal.
• full battery.

 

How does the magic work?

Creating the Screenshots

You can make localised screenshots on all device types with the help of snapshot completely automatically. Provide a JavaScript UI Automation file to tell snapshot how to navigate in your app and where to take the screenshots. It will help you to create raw screenshots for all languages and devices.

 

Adding the device frame, background and title

frameit was originally designed to add device frames around the screenshots. frameit 2.0  allows to add device frames, a custom background and a title to your screenshots.

• custom backgrounds.
• use a keyword + title to make the screen look more colourful.
• use your own fonts.
• customise the text colors.
• support for both portrait and landscape screenshots.
• support for iPhone, iPad and Mac screenshots.
• use .strings files to provide translated titles.

 

How to start?

Felix Krause also prepared an open source setup showing how to use frameit to create beautiful screenshots, available on GitHub.

The interesting parts are:

• Framefile.json (font family, font color and background image).
• Each language folder (keyword.strings and title.strings, containing the localised text for the title).