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.
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
Adding the device frame, background and title
- 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?
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).