Photoshop: How do I keep 1x and 2x (for retina display) images in the same document?


I just read on an article about designing for iPhone retina display that you can keep the 2x images in the same document and use a Photoshop Action to scale up the 1x to see how the larger version will look. Other than creating a separate canvas, I'm not sure how this could be done? Would the action be designed to scale up the entire canvas, including all contents, to the larger pixel dimension?

As a secondary question, I'm looking for retina-ready icons for a tab bar at the bottom of the app I'm designing. The only appropriate one I can find is bitmap, and looks blurry compared to the retina-ready vector image to the left of it. Would it be easier to design one like this from scratch or how could I otherwise go in and "clean up" the image to the left to make it ready for retina display?

Thanks so much in advance for any advice with these two (admittedly, beginner) questions.

enter image description here

3/18/2013 11:03:00 AM

Accepted Answer

When designing for a variety of resolutions you want to scale down, not up. Do your design in a @2x resolution (640 x 960 @72ppi) and for the @1x assets you duplicate them to a new document (preferably) and scale them down by 50%. You can set up a Action script for this also to make the process go by faster. To learn a bit about Photoshop action script you can have a look HERE.

As for your second question, HERE YOU GO. The "reload" symbol you were after can be found in that Retina asset sheet, a sheet that is very good to have for anyone who wants to design for iPhone.

3/18/2013 2:21:00 PM

As AndroidHustle states, you typically will create your 2x images, then either use those for both devices, or export a set reduced in size by 50%.

For when you need to maintain two truly separate files, though, you could keep them in the same document. It's just that you'd have one larger than the other. To view them at the same size, you could open a second view of the same file and zoom in 200% on the non-retina version.

As for when you may want to maintain two truly separate files, sometimes you may want to preserve particular detail in the retina version that simply won't scale down clearly.