How do I make the right screenshot for the app?
The Gamasutra resource regularly publishes articles by developers, art directors and game designers about the industry. We choose the most interesting ones and share them with you.
Journalist Simon Hill talked about how to make the right screenshot for the application.
Creating an app or a game is only half the success. You also need to make sure that people will find and download your project. You need to be able to sell it to a capricious App Store buyer.
We have already talked about how to compose a good description for the application. Now let’s try to figure out how to make the right screenshot, and also briefly discuss the video preview.
Why do I need a screenshot?
When a potential buyer sees your app, the first thing they pay attention to are screenshots. If the buyer does not like them, then he will most likely pass by.
Correct screenshot:
- explains what your app can do;
- stands out from the general mass;
- demonstrates your game / application in the most favorable light.
How many screenshots do I need?
You must upload at least one screenshot for each application. The maximum number of images is five. You should always try to download the full set, because the more screenshots, the more detailed you will be able to tell about your application.
Think of the first screenshot as an opportunity to make a first impression. This is the most important screenshot, because it will always be visible on the page of your application.
When you are preparing to upload your first five screenshots, you need to put them side by side, evaluate the overall appearance, and then arrange them from the most significant to the least significant. Be based primarily on what features of the application they demonstrate – but do not forget about aesthetics.
What size should I choose?
If your target is an iPhone and you want your app to match the four available screen sizes, then you will need four sets of screenshots. The status bar, according to Apple’s requirements, should not be visible, so here are your options:
- 3.5-inch display in portrait position: 640 x 920 or 640 x 960
- 3.5-inch in landscape arrangement: 960 x 600 or 960 x 640
- 4-inch display in portrait position: 640 x 1096 or 640 x 1136
- 4-inch in landscape arrangement: 1136 x 600 or 1136 x 640
- 4.7-inch display in portrait position: 750 x 1334
- 4.7-inch in landscape arrangement: 1334 x 750
- 5.5-inch display in portrait position: 1242 x 2208
- 5.5-inch in landscape arrangement: 2208 x 1242
If your project is for iPad, then the sizes are as follows:
- Landscape: 1024 x 748 or 1024 x 768
- Portrait: 768 x 1004 or 768 x 1024
- Landscape in high resolution: 2048 x 1496 or 2048 x 1536
- High resolution portrait: 1536 x 2008 or 1536 x 2048
When you choose how the picture should be oriented, then think about how the application will be used and on which device. If your game changes position along with the screen rotation, then choose the position in which it looks most advantageous. Obviously, if your game or application is confused by the landscape location, then it is necessary to adhere to it in the screenshots.
Usually, on the iPhone, the image is expected to be seen in a portrait arrangement, and on the iPad – in a landscape one, but on the new iPhone 6 Plus, applications look good in a landscape version. Remember that most people will search for the app by holding the phone vertically.
If you need a suitable device to remove the status bar from the screenshot, then use the free Status Barred program.
Do I need text over the image?
If the screenshot does not express what you want to say, then feel free to add text. Don’t overdo it, a few words are enough.
The text in the screenshots should serve the following purposes:
- emphasize one of the features of the application;
- explain how to use the app;
- report details about the app;
- talk about the number of downloads/show recommendations.
Sometimes it is possible to achieve several goals at once with just one line. For example, an application for broadcasting music can be accompanied by this text: “Choose from 15 million tracks using a swipe.” Three of the four goals have been achieved.
There are two options for the location of the text:
- directly on top of the screenshot. Make sure that the text color contrasts with the main background and that it is readable. You can highlight it with a separate color or place a strip of a different color behind it;
- above/below the screenshot on the device image or on a background of a different color.
Before going into detail on the second point, we mention that the App Store Marketing Guidelines say the following about it: “Screenshots should display what the user will see on the screen while the application is running. Do not place images of Apple products on screenshots posted in the App Store.”
Many games and apps ignore this rule, and I haven’t heard of anyone being removed for it, but it’s still better to keep it in mind.
Screenshots on device images or on a background of a different color
Screenshots are often placed on an iPhone or iPad image. A “real” image is a great way to show what your app is for and how to use it.
You can overlay your screenshot on top of another image. This will again create space for the text, and also help to emphasize the theme of your application or game.
By placing the image at an angle, you can emphasize its original style and dynamism, especially if the screenshot itself is nothing special. Just don’t overdo it – you still need the screenshot to be clear.
Localize your screenshots
You can include different sets of screenshots for each language that your app supports – and you need to do that. Screenshots in the main language will be enabled by default, but localizing screenshots in other languages is worth the effort. As I have already written, translation into other languages will help to significantly increase the number of downloads.
If there is no text in the screenshot, then you can do with one set of images. If you plan to overlay the text later, then create a basic version of the screenshot in the format that can be edited later. Then other languages can be added later.
Always translate the text with the help of professional translators.
Creating screenshots
If you are going to overlay text, put an image on the background, add photos or otherwise change the image, then you will need a good image editor. There is a rich choice here, although Adobe Photoshop is out of competition. However, buying this editor or subscribing to it will cost you a pretty penny.
An alternative to Photoshop is the GNU Image Manipulation Program (GIMP). It doesn’t have many additional features, but it’s free and you can use it to create great screenshots. Here you will find instructional videos .
Apple requires the image format to be PNG or JPEG, the resolution is 72 dots per inch (dpi), and the image mode is RGB. The screenshot should not contain layers or be transparent.
Screenshot preview
Let’s say your screenshot looks great by itself. But how will it look on the iPhone or iPad screen?
Use the free online service AddLingo StoreFront to make sure that the screenshots of your application look exactly as intended.
Make sure that the colors match each other, and that all screenshots are different from each other. Like the UI, it is better to take screenshots in one common color scheme.
If desired, you can arrange the screenshots in a diptych, so that two screenshots placed side by side look like one image.
What to avoid
Here are a few common mistakes that are found everywhere in the App Store – although they are very easy to avoid.
- Do not overload the screenshot – an image with an excess of details looks unattractive.
- A small amount of text looks good. “Fence” of letters – will alienate the buyer.
- Do not use random pictures found on the web, hand-drawn images or the start screen instead of the real application interface.
- Make sure that all images are high-resolution: a blurry screenshot is unlikely to appeal to the buyer.
- If you combine several images, then combine them properly, otherwise it will look cheap and dull.
- Test the screenshots on someone who has never seen them before and make sure that it is clear from the images what you meant.
A few words about the video preview
The opportunity to include a 15-30-second video in the description of the application should not be missed. If you have OS X Yosemite installed on your iOS 8 or Mac mobile device, then you can connect using the Lightning connector and make a QuickTime video.
Shoot in the main language, since only one video can be uploaded for each screen size. Technical parameters for App Previews can be found in the iOS Developer Library.
Videos are a great way to show the features of your app or the gameplay of the game. You can use the same text overlay techniques that we discussed above, or add an audio track with a description. Just remember that there is no way to localize the video yet.
Another important thing to remember is to choose a preview image wisely, as it will be constantly displayed on your app’s page in the App Store. This can be done in QuickTime: find the desired frame, and then stop the video, open the View menu and select “Set Poster Frame”.
Once you’re done, return the slider to the beginning and save the video file.
Let’s summarize the results
When creating a screenshot or video preview for the application, make sure that you have reflected all the key features – so that customers can easily determine what exactly you are offering them.
The right picture or video is worth a thousand words.
Other materials on the topic:
