What are some resources for designing slick iPhone UI graphics?

Question

I am currently working the graphics for my iPhone app and would like to take in some tutorials and info about how to make it look as polished as possible.

I can only find resources about iteraction design or tutorials on drawing an actual iPhone in photoshop, which are not what I'm after. I can quite get the correct search terms to find what I'm after!

I need to know how to make the buttons look glossy, how to make the borders around elements look good, how to make text fit in well with a graphic background - all that kind of stuff.

What resources are out there to teach me this?

Answer 1

First of all I think you need to get familiar with the iPhone GUI guidelines. Apple offers great documentation and tutorials (like http://developer.apple.com/videos/iphone/#video-essentials-uidesign) about it. A great book that let you understand what would make a successful interface is Tapworthy (http://oreilly.com/catalog/0636920001133).

Answer 2

Learn to use Photoshop - making graphics look good on the iPhone is no different than making graphics look good for anything else.

To conform to the standards for iPhone apps, read the Apple guidelines. It's all right there in the documentation you received when you join the app developer program.

Answer 3

Consider hiring a talented visual/UI designer to work with you. iPhone apps tend to need to live up to a slightly higher standard of UI polish. The best way to handle that is to hire someone that is a visual UI designer.

Answer 4

You may find this set of tutorials useful as it goes into a lot of detail about how to create a variety of iPhone icons:

• Create a Detailed, Vector-based iPhone Illustration, Part 1
• Create a Detailed, Vector-based iPhone Illustration, Part 2

However, as others have suggested, it's best to learn how to use Photoshop or a similar graphics program and to read Apple's guidelines.

Answer 5

Are you after tutorials on specific lighting, shading and texture techniques in Photoshop? If so, there's quite a few articles online, if you know where to look.

Apple's own iOS HIG is an essential read.

Smashing Magazine has lots of tutorials and info about designing for iPhone/iOS:

In terms of overall design patterns and UX, I recommend taking a look at this article: iPhone application design patterns.

If you want to learn a little about the code, this may be worth a look (the first tutorial is free): Design Then Code. A bit of Xcode and Objective-C knowledge can be a great thing for designers.

Sebastiaan de With has created a great iOS icon template that a lot of designers use.

There may be some good tutorials on PSD Tuts, although I haven't read many of them (I've been using PS for over 20 years, so I... umm... don't really need most tutorials).

Like Davide Di Cillo, I highly recommend Tapworthy as well. Josh knows what he's talking about. I think even experienced designers would get a lot out of the book.

I recommend installing Developer Picker, which lets you copy colours in a format that are native to Cocoa. Very handy when designing iOS apps.

I've also written some articles on the topic. They're usually more technical than creative — they're not about achieving specific UI looks, but more about setting your Photoshop documents up to be scalable, remain editable and be easier to export.

Here's some articles I've written that may be of interest:

• Noise and textures
• Gradients
• Designing for Retina display
• Designing for Retina display, part two
• Exporting from Photoshop

Oh, and definitely make sure you set up Photoshop so colours don't get altered when exporting: Setting up Photoshop for web and iOS development. Absolutely essential.