Photoshop Template for iPhone Web Design


I’ve created a Photoshop PSD Template for designing for the iPhone. I took these specs right from Apple’s Developer Connection website and I encourage you to read through that document as there is valuable information about how to call iPhone-specific style sheets and more, obviously.

Download the template here.

The template includes the following layers:

  • Input Pane layer folder with:
    • Form assistant layer (Next / Previous / Done buttons that appear when filling out forms)
    • Keyboard layer
  • Standard Browser Panes layer folder with:
    • Status bar (topmost bar with signal strength, AT&T logo, WiFi/EDGE icon, loading status, time and battery meter)
    • Address bar
    • Buttons bar (forward, next, bookmarks, view windows
  • Apple’s recommended font style
  • Initial screen space layer

It should be noted that the iPhone is limited to the following fonts, so you’ll want to specify at least one of them in your style sheet or you’ll end up with Helvetica (I think).

  • American Typewriter
  • American Typewriter Condensed
  • Arial
  • Arial Rounded MT Bold
  • Courier New
  • Georgia
  • Helvetica
  • Marker Felt
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Zapfino

So yeah, some weird ones in there. If only someone would combine Marker Felt with American Typewriter Condensed, we’d be in for a truly righteous website.

Note: I’m having a problem getting the color settings right with Photoshop, on my MacBook Pro, so you’re likely to see some discrepancies between the file on screen and the colors in “Save for Web” – if anyone knows how to fix this please leave me a comment.

People are Talking, Talking 'bout People

  1. [...] You can read the rest of this blog post by going to the original source, here [...]

  2. Thanks for your valuable information on photoshop templates creating

    Georgia web designing

  3. Check out proof colors / setup in photoshop under View. Macintosh RGB is usually what i use.

    Will

  4. Thanks Will, I actually use that system myself. It’s not perfect, but will do until someone at Adobe or Apple sorts out the larger issue. :(

  5. Hey, you should check if saving to sRgb is turned off in preset settings (its located in “save for web” window).

  6. I tried that, StartPanic, but it didn’t seem to make any difference. :(

  7. In the Edit->Color settings i have “Apple RGB” for rgb color space. Probably that makes a trick?

    I had same problem, but switching off this sRGB thingie works fins for me..

Your Turn

Next at bat? Well that'd be you! Swing away...

Your email address will not be published.