What not so many people know is, that you can actually scale layer style effects in Photoshop right out of the box. It works pretty good. Not perfect, but it does the major job and you can adjust stuff which doesn’t look like you expected it.
I didn’t try all and maybe I have left something out, but this is what I can say now:
As you know, you can’t scale up bitmap images without making them ugly. Make sure your GUI elements are vector-based (shapes) so it’s easy to scale them up. You have to do two separate scalings: The object (layer) by itself and the layer styles which are applied. It doesn’t matter what comes first.
The first one is straight forward: Select the layer, duplicate it, hit cmd+T, go into the top options menu and edit the width scaling from 100% to 200%. Then click the “link” button on the side to make sure that the height scales, too, and then hit “Enter”.
The layer styles are still the same. Although 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 compare it to your 100%-image. Shadows may need a little adjustment and if there is a pattern applied, you usually need to re-downscale it, because patterns are bitmap graphics and probably look weird after scaling. You do that in the Layer Style settings of pattern overlays (like in the next image). You can put more detail into your work if you want because more pixels are available now.
That’s it. Let me know if you find something more out.
It’s very interesting to see what happens when you prepare your graphics for the iPhone 4 interface. Every graphic need to have the “@2x” added between the name and the data format. E.g. “arrow@2x.png”.
(Just to be clear: Not on websites – this article is about native Interface development with Cocoa touch)
This is one of my results.
