AppStore Screenshots 101

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.

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”:

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.

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.

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.

AppStore Screenshots 101