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
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.
Import the exported background as the fill image here. This will be your master background image.
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 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.
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.comTweet