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


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.

Source : Link , Question Author : zakgottlieb , Answer Author : AndroidHustle

Leave a Comment