Photoshop Template for iPhone Web Design

Dig the Free  Download? Glad I could help!  Care to  return the favor?  Check out my project on Kickstarter

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.

Up Next: Ponoko Goes Live