If you’ve been working on upgrading your app from iPhone 4 & iPhone 5 to iPhone 6 and 6+ you’ve probably enjoyed a bunch of fun new challenges. Whether its understanding the screen size (now with downsampling!) or figuring out how the layouts and canvases change there’s all kinds of fun things to figure out.
Right when you think you’ve solved them and you can hang up your stylus and head to the bar you get a call from the submission team.
“We need all of the screenshots in all the new resolutions!” They say.
Crap! You’ve already built these bad boys in iPhone 5 res and made layer comps for each of your 5 screens but now, you need to make two completely new sizes? And for every screenshot!?
First, while the layout and pixel density changes between the two new phones and the old phone, the aspect ratio of the screenshots don’t. So if you aren’t using actual screenshots for your screenshots (IE you are making fancy designed images with your product pitch on them) you only need to rebuild them once for iPhone 6+ resolution (reminder thats 1242×2208) then save them at the alternate resolutions. (Note: This only works if you are ok with having the same screenshots for different devices.)
And you don’t even need to do all the resizing manually. I’ve made a handy script that will take your iPhone 6+ screenshots and save them for iPhone 6 and iPhone 5!
You’ll be done in no time.
Here it is and here’s how to use it.
QUICK LINK -> Download the action here.
(Before you dive in you should know how to use actions. If you don’t, they are super ridiculously simple and it will likely take you less time to learn how to use them then it will to do this single process manually once. Here’s a good overview.)
1. Create (or recreate) your screenshots in iPhone 6+ resolution (1242×2208 – Yep its big!).
2. Create individual layer comps for each screenshot. (I prefer to name mine 1, 2, 3, 4, 5 so the person importing them knows the correct order.)
3. Save your PSD.
4. This action uses the default Layer Comps to Files script so be sure your settings are what you want them to be (I suggest .jpg at quality 8, but I haven’t done a ton of testing. If you have a better setting preference please comment.)
5. SAVE A COPY of your PSD. When we use this PSD we will end up losing some resolution, so you’ll want to keep your original full resolution file. Do this by saving a copy from the Save As dialog.
6. Download and open the action here.
7. Open the Actions folder (if it isn’t in your workspace you can open it in “Window < Actions”
8. Click on “Save Appstore Screenshots”
9. Click the play button.
10. Sit back and relax while the Action runs.
11. Check your destination folder and ensure everything worked correctly. 🙂
If everything worked you should have all of your layer comps as 1242×2208, 750×1334 and 640×1136 like these:
Everything will be in the same folder, each image will be labeled with the appropriate number for sequencing in the AppStore and will also be labeled for which phone it is made for.