Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I have a PSD file that my designer gave me fitted for iPad dimensions. I need to support the retina iPad as well. What's the best way to create the 2x retina images? Should I scale up the layers by 200% and then cut the PNG file? I imagine this would be better than just scaling up the PNG file itself. If so, what's the best way to scale layers in photoshop? I've tried the Image -> Image Size but that seems to produce jagged edges as well. "Content-aware scale" also distorts some of the straight lines in the icon.

Thanks.

share|improve this question
2  
Sometimes just providing a single image at 150% will work. iOS will automatically size up (without too much quality loss) for retina, and size down for normal iPad (provided you've set the images up to be a specific size in IB). –  Dan Hanly Aug 23 '12 at 12:53
add comment

4 Answers 4

up vote 2 down vote accepted

"Content-aware scale" is for stretching rather than scaling up. So thats not an option.

It really depends on how your Photoshop file is set up, if e.g. there are textures that need to not be scaled or if everything in designed in layerstyles.

So, the best quick and dirty method would be using Image Interpolation: Nearest Neighbor as this would simply duplicate all pixels. But the quality can simply be described as "not blurry". But there won't be jagged lines.

The long way to quality is to try to scale it up (maybe also check scale layer styles) and then fix issues like textures, layerstyles that are off, or font sizes. Again, it will heavily depend on how scalable the photoshop file is built. But this is the type of work a designer is good at, if I may say so.

share|improve this answer
    
Thanks. The "Image Interpolation" is when you do "Image -> Image Size..."? –  Z S Aug 23 '12 at 8:36
    
Yes, but you can also change this in the Settings (Cmd+K) for it to work on e.g. transformation. –  KMSTR Aug 23 '12 at 9:09
add comment

The absolute best way to work is create the document using only vector shapes, layer styles and (if you have to) Smart Objects that are high enough resolution to cover the @2x size.

If constructed properly, your document can be scaled up and down with no loss at all — Photoshop will rerender shapes and layer styles at size, so they'll be as good as possible, with two caveats:

  1. Layer style properties have values that are integers. Scaling down will round them. A blur radius of 3 will become 2 when scaled down 50%, because 1.5 is not possible. Oh, and make sure you have Scale Styles turned on when you scale the document.

  2. Shape mask feathering isn't scaled when you scale the document.

If you need textures, these can be done with pattern layers (with a vector shape mask), or a pattern layer style, or a Smart Object that has a vector mask.

You should avoid bitmap scaling at all costs. This means you shouldn't ever scale the final PNG assets... you need the Photoshop document to be built properly and you'll need to re-export all assets.

Here's a comparison between two common forms of bitmap scaling and scaling properly using vector shape layers and layer styles.

enter image description here


I've written more about designing for Retina here: Designing for Retina display

share|improve this answer
add comment

Unfortunately, for raster data, upsizing will always result in a quality loss.

If the .psd is set up with vector or shape layers, then there should be little issue upsizing. Image > Image Size and input 200%.

It is preferable to work with vector or shape layers whenever possible and to work at the retina (2x) size.

Reducing raster data will generally maintain (and perhaps improve) appearance.

Your best bet may be to go back to the designer and explain the issue and ask for a larger file with proper quality.

share|improve this answer
add comment

These are all great tips. One more thing my designer told me to do was to: 1) duplicate the relevant layer out into a new file 2) now convert the layer into a Smart Object 3) then, do the Image Size scaling up to 2x 4) export to PNG as before

This produces remarkably better results than just changing the image size directly. Maybe if I look very very closely, I'll be able to see some imperfection, but it looks just fine to the naked eye on the device.

share|improve this answer
    
Be careful with Smart Objects created in Photoshop — they scale as a bitmap within the document, so they're no better than a bitmap layer. (They scale as vectors/bitmaps/layer styles if you open the Smart Object up though.) –  Marc Edwards Sep 2 '12 at 4:18
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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