Designers guide to creating screenshots for the App Store

We just wrapped up our app Tiiny 2 and wanted to share our methods for preparing screenshots and preview videos for the app store. We hope we can save you a few hours of work with some cool workflow insights.

1. Capture key screenshots from your app

You can showcase up to 5 screenshots from your app, Apple recommends showing 5, but you can get away with as few as 3. If you need some inspiration then I’ve collected a few screenshot examples here.

The best way we found to capture screenshots is by connecting your phone to your machine through USB and using Quicktime (as taught to me by our badass engineer Caleb). Capturing screenshots this way gives you a consistent status bar with a full battery graphic and the magic time of 9:41AM.

Quick step-by-step to recording screenshots and video with quicktime

• Plug in your iphone into your macbook via USB and launch your app
• Start Quicktime
• Choose File > New Movie Recording

• Click the little drop down arrow and select your phone
• You should now see your app being mirrored on your dekstop
• Grab your phone, and create preview images by taking screenshots with your phone only. When you take screenshots with your phone this way you will get a standard status bar across the top with no carrier named, standard 9:41AM time and a full battery.
• Take as many screenshots as you want. You’re going to need them when we create our itunes mocks.
• Tip: use iPhone 6 or 6+ to get the highest resolution image you can.

2. Record an app preview video

Once you have your screenshots, consider also recording a little video. Apple now allows you to create a preview video up to 30 seconds long (We like to keep it around 28 seconds just so we don’t risk getting denied for a video which may be a hair over 30 seconds). Creating a preview video is super simple.

• Connect your iphone to your computer with a usb cable (see step 1)
• Tap record and then navigate your app on your phone to create your movie. Quicktime will record everything your phone does. Hit stop when your finished and save out your .mov file.

Feel free to add a little music, but make sure your video shows just your app, you can read up on what Apple recommends in their app preview guide.

We asked our good friend and Google Ventures filmaker Grahm Hancock to add some music. If you watch closely it looks like people are dancing to the beat.

We are early days on understanding the benefits of app preview videos, but they seem like a great way to communicate the look and feel of an app.

3. Creating app screenshots for iTunes

Creating apps for iOS has gotten a bit more complicated with the introduction of iPhone 6 and 6+ and this complexity carries over to the app store. The App store requires a set of mocks for the following sizes: 4.7-Inch, 5.5-Inch, 4-Inch, 3.5-Inch and optionally iPad.

Lucky for you a good soul named Brenden Mulligan decided to automate this process with a Sketch template he calls “Sketch to App Store”. If you use Sketch app to design your iOS apps then you are in for a real treat. If you are still using Illustrator/Photoshop/Gimp then you can still use Brenden’s template, you may just have a little learning curve with Sketch.

Head over to sketchtoappstore.com and grab his free template. Follow his directions using the assets you created in steps 1 and 2. Sketch to App Store automagically creates and exports all the unqiue screen sizes you need. Here is a sample of the screenshots for Tiiny2 (note, I adjusted background colors manually inside the template to add a little color diversity). What used to take 2–3 hours now takes around 10 minutes.

4. Drag and drop to iTunes Connect

Now that you have all you assets ready to go, head on over to iTunes Connect and upload the app preview video and screenshots to your app and your all Pau!

Note: once you have been approved you cannot change your screenshots or videos. The only way to change your screenshots and videos is by submitting a new version of your app. So double check for typos and errors!

Thanks for reading!

Please let me know if this was helpful to you in prepping your designs for the app store! I would love to hear more about what you think, please reach out to me via twitter @hemeon or feel free to shoot me a note at marchemeon @ gmail

Editing and proofreading props to @charlesgoddard, @calebd, @cocoahero, @kevinrose #teamnorth