Advertisement


Scale layers in a psd file by 200% for retina iPad


Question

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.

2012/08/23
1
4
8/23/2012 7:07:00 AM

Accepted Answer

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

2012/08/23
2
8/23/2012 7:07:00 AM

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

2012/08/25