Der zweite Blick Progressiv, links, analytisch

Dealing with iPhone 4 resolution (@2x) inside of Photoshop

What not so many people know is, that you can actually scale layer style effects in Pho­to­shop right out of the box. It works pretty good. Not per­fect, but it does the major job and you can adjust stuff which doesn’t look like you expec­ted it.

I didn’t try all and maybe I have left some­thing out, but this is what I can say now: As you know, you can’t scale up bit­map images wit­hout making them ugly. Make sure your GUI ele­ments are vector-based (shapes) so it’s easy to scale them up. You have to do two sepa­rate sca­lings: The object (layer) by its­elf and the layer styles which are applied. It doesn’t mat­ter what comes first.

The first one is strai­ght for­ward: Select the layer, dup­li­cate it, hit cmd+T, go into the top opti­ons menu and edit the width sca­ling from 100% to 200%. Then click the »link« but­ton on the side to make sure that the height sca­les, too, and then hit »Enter«.

The layer styles are still the same. Alt­hough the object is twice as big, the layer styles aren’t. This is how you do that:

Enter 200% into the field, hit OK and that’s it. Basically.

Now you have to look at the result and visually com­pare it to your 100%-image. Shadows may need a little adjust­ment and if there is a pat­tern applied, you usually need to re-downscale it, because pat­terns are bit­map gra­phics and pro­bably look weird after sca­ling. You do that in the Layer Style set­tings of pat­tern over­lays (like in the next image). You can put more detail into your work if you want because more pixels are avail­able now.

That’s it. Let me know if you find some­thing more out.

It’s very inte­res­ting to see what hap­pens when you pre­pare your gra­phics for the iPhone 4 inter­face. Every gra­phic need to have the »@2x« added bet­ween the name and the data for­mat. E.g. »arrow@2x.png«.

(Just to be clear: Not on web­sites — this arti­cle is about native Inter­face deve­lop­ment with Cocoa touch)

This is one of my results.