Free Download for Designers: One PSD & Action for iPhone 6+, iPhone 6 & iPhone 5 Appstore Screenshots

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.

(Ed note: If you are in the process of relaying out I recommend these two posts – iPhone 6 Screen Sizes Demystified & Designing from iPhone 5 to iPhone 6 and 6+. I wrote the second one.)

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!?

Good news:

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!).

tour_6plus__0000_1

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.)

Screenshot 2014-09-18 12.49.11

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.)

Screenshot 2014-09-18 12.51.03

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.

Screenshot 2014-09-18 12.51.49

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”

Screenshot 2014-09-18 12.57.01

8. Click on “Save Appstore Screenshots”

Screenshot 2014-09-18 12.57.56

9. Click the play button.

10. Sit back and relax while the Action runs.

11. Check your destination folder and ensure everything worked correctly. 🙂

Screenshot 2014-09-18 12.59.34

If everything worked you should have all of your layer comps as 1242×2208, 750×1334 and 640×1136 like these:

iPhone 5

tour_5__0004_5

iPhone 6

tour_6__0004_5

iPhone 6+

tour_6plus__0004_5

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.

Celebrate by snagging yourself an amazing Ghostly Ruler or Katy Perry Prismatic Refraction Glasses. 🙂

Hopefully it all worked for you! Hit me up @aten or @merchbar if you have any questions, ideas or troubles.

We are hiring.

Download Merchbar here. 

Advertisements

One thought on “Free Download for Designers: One PSD & Action for iPhone 6+, iPhone 6 & iPhone 5 Appstore Screenshots

Comments are closed.