Neil Berry

Senior UX Designer @cafonline. Previously Senior Designer @newsfromfta. I blog about UX, design, and the latest tech.

Generate App Store images for iPhone, iPad and Android with Sketch

Generate App Store images for iPhone, iPad and Android with Sketch

This week I had the task of creating all the various App Store images for iOS and Android prior to the release of an app I’ve been designing. These days the vast array of devices make this a tiresome process (and that’s even before you get to experience iTunes Connect) but I was lucky to discover this amazing Sketch template by @mulligan.

Designed so you configure just a setup page, the magic happens when over forty other artboards are updated automatically with your custom info. Within minutes, you’ll be able to export 50 screenshot images. That’s pretty cool, not to mention a big timesaver.

How it works

Step one

First up, ensure you are on the EDIT THIS PAGE - Setup page. On the left panel, show/hide colour or photo, then change the background settings for the layers. In my example here I’ve decided to use a photo as the background but you can use just a coloured one.

Use the image fill on Photo Background to change the image (resolution at least 1242 x 2208 for iPhone / 1536 x 2008 for iPad). When you’re done, export it out of Sketch. You’ll be re-importing in next step.

Step two

Import the exported background as the fill image here. This will be your master background image.

Step three

We now need to add our app screenshots and set these images as the fills to the master screenshot artboards. Here I have clicked on Master screenshot 2 image and hit Choose image under the Fill menu.

Step four

Step four is where we add our promotional text for each image. You have to copy and paste each item of text three times per board due to the various device sizes but luckily this doesn’t take too much effort.

Step five

Choose whether you would like white or black iPhones on your images. Select the 5.5 Device Setup artboard and on the left hand menu hide/show the white or black iPhone 6 Plus.

Step six: the export

Finally, go check out the other pages in this document and you’ll see you have screenshots for iPhones, iPads, Androids, as well as only screenshot if you prefer those. Export your artboards as required.

For more details check out http://sketchtoappstore.com

Neil Berry


Senior UX Designer @cafonline. Previously Senior Designer @newsfromfta. I blog about UX, design, and the latest tech.

Do you want to understand the best way to convert visitors to customers in 2018?

Let's design something incredible together.