Creating iOS App Store screenshots from Corona Simulator on Windows

Not very long ago you had to upload your App Store screenshots in many different resolutions for all the different iOS devices. A real pain. Fortunately, Apple realized this and simplified the screenshot upload process a lot. Now you only need to upload screenshots for the 5.5" iPhone and 12.9" iPad displays, and automatic scaling will be done for remaining devices with lower resolutions.

It's recommended to grab your screenshots from a physical device, but what do you do if you don't have a 5.5" iPhone? Well, instead of buying a new device or scaling lower resolution graphics you can use the Corona Simulator to get the high resolution screenshots you're looking for.

This is how I do it for my Corona SDK apps on my Windows machine, and my example assumes that your screenshots are taken in portrait mode and that your app is primarily designed for iPhone rather than iPad. You must of course also have a monitor that can handle the resolution of the screenshots. For iPhone 5.5" Retina display, the required screenshot resolution is 1242x2208 in portrait mode.

Let's get started!

In the Corona Simulator, run as custom iOS device with the 1242x2208 resolution required by iTunes Connect. I'm not sure why this resolution doesn't already exist as a predefined device, but it's very easy to set it up yourself. In the menu, just go to: View->View As->Custom Device... and specify your device requirements.

Run your app in the Corona simulator. Rotate the window sideways if necessary to see the whole window. Grab a screen shot by pressing AltGr+PrtSc or use the built-in Windows Snipping Tool to capture the simulator window. This should give you a screenshot with Windows borders looking something like this raw screenshot from Ice Trap:

Raw Ice Trap screenshot from Corona Simulator

Now crop the screenshot to remove the window borders. Any image editing tool will do for this, even Paint is probably ok. Just make sure to get rid of the entire border. There will probably be a 1px thin border to watch out for. After doing this the image should be 1242x2208.

Then use your favorite image editing software to polish your screenshots, add overlay texts etcetera. My preferred tool for this is Inkscape, and after some processing of my screenshot I ended up with this:

Ice Trap iPhone App Store screenshot

If your app looks the same on iPad as it does on iPhone, you can just add some padding to your screenshot and scale it to the required resolution for 12.9" displays, which in portrait mode is 2048x2732. Two ways of doing this are using Inkscape or Imagemagick.

Inkscape

Create a black rectangle 2048x2732. Import your screenshot and scale it to fit the height. Just type in the value 2732 for the height and make sure that aspect ratio width/height is locked to make the image scale horizontally as well. Then center the screenshot within the rectangle (justify and align). Select both objects and export as PNG. Make sure that the final resolution of your PNG is indeed 2048x2732.

Imagemagick (command line)

convert screenshot-iPhone.png -geometry x2732 -gravity center -background black -extent 2048x2732 screenshot-iPad.png

This command first scales the image to a specific height (2732) while maintaining the aspect ratio. Then black padding is added to the left and right of the scaled screenshot to make the output image's resolution 2048x2732.

Most of the time I use Imagemagick, as long as I can remember the exact command to run... :-) If you have a few screenshots to convert to iPad format it's definitely much quicker. This is what the iPad screenshot looks like after running the Imagemagick command on the iPhone screenshot:

Ice Trap iPad App Store screenshot

Voilà! Now it's just to go ahead and upload the screen shots to iTunes Connect!