iPhone Art Specs

[travis dunn]

Hello,

I'm going to commission some game art for iPhone soon, and in the course of preparing guidelines for the artist I gathered a list of resources that touch on some of the platform's specific constraints. Having the list at hand I went ahead and posted it on my blog: http://www.travisdunn.com/iphone-guidelines-and-resources-for-artists. The idea was to compile a practical guide to everything an artist would need to know in order to deliver assets for the iPhone. Maybe some of you will find it useful. I hope I didn't miss anything!

Anyway, here's a copy of the post if you don't want to follow the link, though I'm definitely not reformatting it for posting here.

---------------------------------------------------------------------------------------------------------------

The Basics

Screen Resolution: 320×480 (or 480×320 landscape mode)
Colors: 262,144
Contrast: use higher contrast than normal for art on the iPhone screen
Preferred Graphics Format: .PNG

Fairlady Media has a great instructional post covering a variety of topics about creating iPhone graphics: http://fairladymedia.com/node/10
Application Logo and Icon

In order to distribute an application in the App Store, Apple requires two main  graphics:

(1) A large 512×512 logo, and;

(2) a smaller 57×57 version of the same.

The small logo must resemble the large logo, although there can be minor differences in perspective and detail, or the application may be rejected for inconsistent logo design. The 512×512 logo is what people see when they are browsing iTunes, while the 57×57 logo will be the application’s icon on the iPhone itself.

The App Store and the iPhone will apply additional effects to the app logos by rounding the corners and applying a light gloss. One of the tasks when designing a logo is to ensure that it will look good with the iPhone effects applied.

Jeff Lange has published a photoshop action that does exactly that: http://www.collegekidapp.com/2009/06/iphone-icon-photoshop-action.html

Robert Banagale also published a similar macro here: http://banagale.com/iphone-developer-resource-preview-application-icon-3d-effect.htm
The Tabbar

The tabbar is a native UI element displayed at the bottom of the screen. Each tab button may contain text and an icon. The following guidelines apply for tabbar icons:

    * Use the PNG format.
    * Sized 30×30 (roughly – you have a little leeway, ~25-35)
    * Use pure white with appropriate alpha
    * Do not include a drop shadow.
    * Use anti-aliasing.

There’s a painstakingly informative tutorial at Osmorphis (http://www.travisdunn.com/(http://osmorphis.blogspot.com/2009/02/tab-bar-icons-part-1_4115.html) about the process of creating tabbar icons (summary here: http://tuts.suspendedstudios.com/2009/04/making-tab-bar-icons-for-iphone.html), but the thing that deserves special attention is that the icons must be drawn in B&W alpha, and in negative. The Osmorphis tutorial covers the steps on how do this pretty efficiently in Photoshop.
Layout, Templates, Mockups

The following PSDs contain templates and native iPhone UI elements that you can use as building blocks for your mock ups.

iPhone GUI PSD
http://www.teehanlax.com/blog/?p=1628

iPhone Kit
http://andrewbadger.deviantart.com/art/iPhone-Kit-108089727

Resizable iPhone Shell PSD
http://twotoasters.com/index.php/2009/06/02/resizable-iphone-psd/
Fonts

These are the standard iPhone system fonts available. It’s much harder than it should be to use a custom font on the iPhone.

American Typewriter, AppleGothic, Arial, Arial Rounded MT Bold, Arial Unicode MS, Courier, Courier New, DB LCD Temp, Georgia, Helvetica, Helvetica Neue, Hiragino Kaku Gothic ProN W3, Hiragino Kaku Gothic ProN W6, Marker Felt, STHeiti J, STHeiti K, STHeiti SC, STHeiti TC, Times New Roman, Trebuchet MS, Verdana, or Zapfino.

[Scribblette]

Oo! Thanks for that little compilation.

*is pleased to find his current art scale works well on the iPhone too*

[monteboyd]

It's probably also pertinent to mention that the screen is 163 ppi (or dpi) as opposed to 72dpi for most monitors. This means your individual pixels are smaller on the iPhone screen than on your monitor. Important to think about particularly for legibility of small text.

[travis dunn]

It's probably also pertinent to mention that the screen is 163 ppi (or dpi) as opposed to 72dpi for most monitors. This means your individual pixels are smaller on the iPhone screen than on your monitor. Important to think about particularly for legibility of small text.

Thanks for the refinement, monteboyd. I updated with the DPI spec.

[Scribblette]

I understand that in concept, but I'm not sure how that'd look. My current 22" widescreen LCD monitor says it has 92 DPI. Fully zoomed out, even a sprite in a 64x32 box is pretty small - I'm guessing that'd nearly half that size on an iPhone then.

Wow. Tiny.

[Dusty]

I understand that in concept, but I'm not sure how that'd look. My current 22" widescreen LCD monitor says it has 92 DPI. Fully zoomed out, even a sprite in a 64x32 box is pretty small - I'm guessing that'd nearly half that size on an iPhone then.

Wow. Tiny.

I think it also has a lot to do with resolution. A sprite is going to look smaller on a 19" screen at say... 1280x1024 than on a 19" screen at the resolution of 800x600, no matter how high the dpi is. I'm not sure though, I don't really study this sort of thing.

[Gil]

92 dpi IS the resolution, screen dimensions are something else (resolution is often misused, 800x600 is not a resolution) and not really relevant to pixel size, since a certain dimension on a certain screen means a different resolution (DPI).

[Dr D]

DPI means Dots Per Inch. I suppose it means exactly what it's labeled? (Not a rhetorical question.)

And by dots, do they mean pixels?

[Gil]

Yes, PPI (pixels per inch) is a synonym for DPI

[monteboyd]

Wow. Tiny.

Exactly. That's why I thought it important to mention. Pixels are very small on an iPhone's screen which impacts pixel art greatly.