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/10Application 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.htmlRobert Banagale also published a similar macro here:
http://banagale.com/iphone-developer-resource-preview-application-icon-3d-effect.htmThe 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=1628iPhone Kit
http://andrewbadger.deviantart.com/art/iPhone-Kit-108089727Resizable 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.