Photoshop Template for iPhone Web Design

written 11 Oct 2007 well into the night

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.

Filed Under: how-tos & web design (ing)

7 Comments
RSS Me

7 people chatting it up...

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

- Photoshop Template for iPhone Web Design | 11:32pm 11 Oct 07
Thanks for your valuable information on photoshop templates creating

- Georgia web designing | 04:52am 25 Mar 08
Check out proof colors / setup in photoshop under View. Macintosh RGB is usually what i use.

- Will | 09:45am 24 Oct 08
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.

- nathan | 01:41pm 25 Oct 08
Hey, you should check if saving to sRgb is turned off in preset settings (its located in “save for web” window).

- StartPanic | 04:05pm 12 May 09
I tried that, StartPanic, but it didn’t seem to make any difference.

- nathan | 07:56pm 12 May 09
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..

- StartPanic | 02:53am 13 May 09