AppStore Screenshots 101

AppStore Screenshots 101

Written by Bob Koon

Topics: AppStore

Since I’m a game developer, I pay more attention to the games category in the AppStore than any other. The iPhone AppStore has been open to developers for over 3 years now so I’m still amazed at how developers can get their screenshots so wrong.

I only see the problem with landscape-only apps: the screenshots are portrait. Why? You’re forcing the viewer to turn their head sideways to see them properly. This is not the way to make a good first impression. You want to convert viewers into customers. It’s hard to do that when all you get is a text blurb and few images. It’s harder still when your app is hampered by low-quality images.

It’s not like there are just one or two apps that do this either; I see it all the time. But here’s the troubling part: orienting your screenshots is really easy. Perhaps the developers that have poor images don’t know how to fix them. Perhaps they don’t care. (And if you don’t care, why are you bothering to release an app at all?)

So here’s a refresher course on how to have high-quality screenshots for your app!

The Process

I suspect the reason that images are the wrong orientation is because the process starts on the device. You run your app on the device, take a few screen grabs using the Sleep+Home button combinations, download them to your Mac, and then finally upload them to iTunes Connect.

That’s all well and good (and I recommend taking screenshots on the device instead of taking a screen grab from the Simulator; it’s the only way to get the shots 100% pixel-accurate), but you have to do more than this in order to solve the problem.

On the iPhone, all of the shots are always portrait oriented. That’s a problem if your app is landscape-only. Here’s how you fix it: load the image into Preview, and use Command-L or Command-R to rotate your image left or right, and save it out. Yeah, that’s all there is to it. (I told you it was easy!)

Uploading to iTunes Connect

Here’s something to keep in mind when it’s time to upload your shots to iTunes Connect. If you have more than one image, you need to upload them in reverse order if you want them to appear in the order you intended. A little screwy I know, but it’s one of the quirks of iTunes Connect.

Also, you have to upload the images all at the same time. You can’t upload one, and then upload another, then another. You have to specify all of them at the same time (again, in reverse order) and then click the Upload File button just once.

iTC Image Uploader

iTC Image Uploader

By the way, if you don’t have more than one image, why not? You’re given 5 image slots (a total of 10 if your app is a Universal Binary; 5 for iPhone, and 5 for iPad) and each one serves as an ad for your game. Take advantage of the space!

Get Creative

Now that you’re a pro with the process, you can get creative with your screenshots. These images are just that, images. They can be whatever you want. There’s nothing saying that they have to be full-screen grabs of your app. There’s also nothing forcing you to have them all be one orientation or the other. You can mix-and-match, so why not try to do something special?

I’ll use my own games as the first examples. Pudge was our first iPhone game, and our shots show an example of the “Plain Way”:

Pudge Screenshots

Pudge Screenshots

You can see that the shots are full-screen grabs and they mix orientations. This is good, but more can be done.

In our next game, Polyhedra, we took a slightly different approach to our shots. This is an example of “Billboard” shots. That is, we treated each one as a billboard ad for our game.

Polyhedra Screenshots

Polyhedra Screenshots

You can see what we’ve done here. We made composite images from several screenshots (in this case, they are stills from a promotional video we shot) and made the text prominent. It’s such a colorful game that can be played in any orientation (indeed, most of the gameplay experience comes from orienting the device as it’s played) so we felt that 5 images weren’t enough to show this.

A Master Class on Screenshot Creativity

Imohoo created the next sets of examples and I’m always impressed with how they were done. This developer gets really creative with their shots: they treat the 5 images as one long image and they cut it up to make the separate images. The idea is super-simple but the result is really effective.

See for yourself. Truly stunning work! May favorite is Starry Night. I love how the horizon winds its way through each image.

iShark Screenshots

iShark Screenshots

Multilingual Converter! Screenshots

Multilingual Converter! Screenshots

Starry Night Screenshots

Starry Night Screenshots

The Take-away

The concept I want you to take away with you after reading this post is that having good images for your app is really simple to do. If you don’t care enough to present your app in the best possible way, the consumer won’t care enough to purchase your app. Most likely they’ll still download the app if it’s free anyway, but that’s not an excuse to take a slapdash approach to app presentation. All you need to do is take a little extra time for the attention to details. Your consumers will notice and appreciate it.

3 Comments Comments For This Post I'd Love to Hear Yours!

  1. From a freelance hack standpoint, devs should realise that if they do this kind of ‘clever’ stuff, they MUST provide easy-to-access assets for journos, otherwise we will hate you. In fact, a lack of assets (and contact details) is the number-one reason why I change my mind about covering an app.

    From a consumer standpoint, I want to see what an app does and is, not some tiny thumbnail on a pretty background. To that end, I think iShark and Starry Night are awful. Polyhedra’s OK, since it shows what the app does and has a reason for messing with the more basic layout that Pudge used. That said, I still think any dev not offering at least one ‘normal’ grab is missing a trick. Also, the first grab should be something exciting and in-game or in-app, not the title screen. Don’t make people scroll/swipe to get to the good stuff, because many people won’t.

    • Bob Koon says:

      Thanks for the great feedback, Craig!

      You bring up a great point (well-made), and one that I overlooked in my zeal for creative screenshots: they need to convey to the potential customer what the app is about and how it looks (showing UX aspects or what-have-you). Similar to a font (graffiti comes to mind) that chooses to look good over being readable, there’s a fine line between functional and compelling from a design perspective.

      I think there can be a happy medium where both sides of the same coin can be represented.

      You also bring up a good point that the first one or two shots should be the ‘hook’ shots because those are the two (or one, at least) that will always be seen.

  2. Tue Damkaer says:

    I love the concept, but as you both mention in the comments, maybe leaving one or two original images as the first ones in the row, is the best approach.

    What I like about the polyhedra shots, is that as a customer you can see the game on the actual device. Not only do you get a feel as to how you handle the game, but you also get a sense of no nonsense screenshots “meaning no photoshop enhancements”.

    As an artist I can def. see the potential and know that it is possible to implement the idea better by using bigger screenshots in the collage, while still being able to communicate a certain feel.

Leave a Comment Here's Your Chance to Be Heard!