iPhone 4 Retina Display, Image © Apple

For the most part, the articles out there about designing (specifically, visual design) for iPhone 4 boil down to one simple rule: use vector. A no-brainer really. Given a choice between Illustrator and Photoshop, it’s apparent that Photoshop has more of the right tools necessary for mobile design, and, to some degree, the translation of that design into development. Here’s what I want to accomplish using Photoshop as my tool of choice:

I want to work on a document that, on my screen at actual pixel depth, parallels the physical dimensions of the actual device itself.
This is important for me, and I imagine other designers as well – working on a document that, physically, measures nearly 7″ across my screen at 100% size, but translates to a 2″ screen, is not very intuitive, or practical. Working in an all-vector space doesn’t seem very intuitive either when it comes to the concept of “actual pixel depth.” Being able to see the 1px grid at all times, and have the tools necessary to properly edit, mark up, and mock up within that grid, is crucial. The convenience of quick edits with pixel tools, and converting them into vector art later is a very productive workflow.

I don’t want to have to worry about making adjustments when I switch between resolutions.
One drawback to using Photoshop to scale vector shapes is the concept of “half-pixels” – unless you have your vector shapes snap-aligned to the grid, you’ll get blurred edges. Granted, you don’t have to worry about half-pixels with Illustrator, but Illustrator doesn’t exactly have a concept of image resize either. The idea of scaling your designs within Illustrator to multiple resolutions just sounds silly, and hardly practical with pixel-precise artwork.

I want to be able to quickly and efficiently experiment on-the-fly (i.e. adjustment layers, a history palette, and pixel editing tools).
With Photoshop, you can quickly create numerous subtle variations on the design using adjustment layers, non-linear history palette, and even quickly sketch ideas with pixel tools. This type of natural experimentation and comparison between states is nearly impossible outside Photoshop.

I want to use layer styles/attributes as a sort of rubric for how it should be implemented.
Photoshop has the added bonus that pretty much any layer effect style you apply has a corollary on the development side of things: if you design using layer styles and vector shapes as the foundation for your styling, it’s much easier to put into terms that can be implemented (e.g. knowing the highlight/shadow colors, angle, distance, and size of a bevel are important details for your developer). Not to mention, layer styles can easily be copied and pasted in Photoshop.

Now that you have the concept, here are some tips to help you get started:

• MOST things can be replicated with vector shapes and/or layer styles. Combinations of gradient overlays, bevels, shadows, patterns and glows can create most effects that can be procedurally generated using C Sharp.
• On the other hand, NOT everything can be vector (obviously). When it comes to items that must be bitmaps, create smart objects that are sized down to at least 50% of the original. This way, when scaled up 2x, images appear crisp.
• If you want to create 1px horizontal/vertical lines, use a pattern layer style – create a 2px pattern, one line that is the color you wish the rule to be, and one line that is transparent. That way, when the image size scales your 1px HR to 2px, the second pixel is transparent.
• Again, keep your shape layers snapped to the grid. I was initially worried that a 200% image size would create nothing but blurred edges, but if everything’s snapped to grid, the output is perfect.

Beyond the workflow issues I’ve addressed here, Photoshop really is more powerful in a number of other ways: better layer management, gradient libraries, adjustment layers, masks…I’ll use Illustrator for my print work and icon design, but I’ll stick with Photoshop for mobile design, thank you.