5

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

|improve this question
  • 2
    Could you link to the article? – JohnB Mar 18 '13 at 13:52
  • Yes, it's this one: bjango.com/articles/designingforretina2 – zakgottlieb Mar 19 '13 at 10:13
  • I want to point out that the bjango page is a little crazy: the author suggests using working at half size and scaling up, but the basic scale up results in exactly the poor quality in the side-by-side comparisons. While scaling down does remove detail and blurs images, RESCALING UP again to show the crappy detail is exactly what working 1x-2x size will get you. A true side-by-side comparison will have the @1 image 1/2 the pixel dimensions as a @2 image. As the author said: PPI does not matter – horatio Mar 19 '13 at 15:10
  • I see. I was presuming he was working only with vector images, however, which I believe is a best practice when designing for retina? – zakgottlieb Mar 20 '13 at 3:27
4

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.

|improve this answer
  • @Zak833 You're very welcome! – AndroidHustle Mar 20 '13 at 9:20
2

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.

|improve this answer
  • Thank you. Any ideas on the easiest way to do a resize of all the elements? – zakgottlieb Mar 19 '13 at 10:14
  • If you are just going to do a generic resize, there's really no need to keep two versions. Create your 2x file, then when you need your non-retina set, open the file, scale everything down 50% and re-export. – DA01 Mar 19 '13 at 14:31
  • Thanks. But how do I scale everything down by 50% at once? Sorry if's quite a beginner question. – zakgottlieb Mar 20 '13 at 3:28
  • In Photoshop go to Document Size, and change it to 50%, then export. Then close the document without saving (so you don't over-write your original PSD file). – DA01 Mar 20 '13 at 14:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.