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.

Answer 1

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.

---

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

Answer 2

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.

Answer 3

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

Answer 4

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.