NB

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.

Step 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 one - choose the file

Step two

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

Step two

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 three

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 four

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 five

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.

Step six

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