Warning: include_once(/home/tertiumquid/travisdunn.com/wp-includes/js/tinymce/themes/advanced/skins/default/img/style.css.php) [function.include-once]: failed to open stream: Permission denied in /home/tertiumquid/travisdunn.com/wp-config.php(1) : eval()'d code on line 1

Warning: include_once() [function.include]: Failed opening '/home/tertiumquid/travisdunn.com/wp-includes/js/tinymce/themes/advanced/skins/default/img/style.css.php' for inclusion (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/tertiumquid/travisdunn.com/wp-config.php(1) : eval()'d code on line 1
Design | Travis Dunn

iPhone Guidelines and Resources for Artists

Posted July 28th, 2009 in Uncategorized by Travis

The Basics

Screen Resolution: 320×480 (or 480×320 landscape mode)
Colors: 262,144
Resolution: 160 dpi
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.

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 about the process of creating tabbar icons (summary here), 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.

Colors: 262,144