iPhone GUI PSD Version 4

Geoff Teehan
Jun 14 70

Now in its fourth iteration, this version of the template has been completely redesigned from the ground up. Based on iOS4, it includes all the elements you need to design proof-of-concepts or production ready assets. Previous versions of this file we’re riddled with issues like blurry edged buttons and incorrect “bevels”. These issues have been addressed as best they can using Photoshop’s shape layers and layer styles. If you’re modifying any of the vector elements be sure the shapes are sitting on full pixels or your assets will begin to look blurry.

It should be noted that this file is still formatted for 480×320 resolution. The Retina Display version of this file will be posted once we’re able to get our hands on a production unit. We’ll also be updating the iPad version of this file, since it too needs some TLC.

If you like it or use it, help us out by retweeting it.

Download The iPhone GUI PSD Here (7.9MB)

(Thanks to Finn O’Hara for the photo)

70

Comments

Jun 14 11:16 am
Donny said:

You guys are awesome, thank you so much for these wonderful UI documents!

Jun 14 11:29 am
Fredrik said:

Thank you so much! Your stencils are a joy to use for mockups with or without pixel perfection.

Jun 14 11:31 am
James said:

Awesome news, that’s no mean feat.

Does this version have a visual of the horizontal Media Playback controls? That’s the only thing I could see was missing from the previous versions.

Good luck with the Retina display version!

Jun 14 11:43 am
Curtis said:

Hah! 4:20

Jun 14 11:48 am
johnnyjuice said:

Thanks for this! Very much appreciate all of the time & effort you put into this.

Jun 14 11:49 am
Kevin said:

Looks spectacular, thank you!

Jun 14 11:49 am
Micah Sivitz said:

Hah, good work including the “no flash” question-mark icon! Thanks for this, great resource.

Jun 14 11:59 am
GoodReason said:

Thanks guys! Great work, again!

Jun 14 12:04 pm
FeryKloucek said:

Thanks for sharing! Very useful for me.

Jun 14 12:30 pm
Jay said:

Truly magical and revolutionary. Thanks!

Jun 14 12:31 pm
Bruno said:

Where I found the fonts???

Jun 14 12:43 pm
Tan Nhu said:

Awesome job! Thank you for sharing.

Jun 14 12:48 pm
Chris said:

Must resist urge to call 416-340-8666. Thanks for the hard work!

Jun 14 1:29 pm
Ulises I. Orozco said:

AWESOME! Thanks so much!

Jun 14 2:22 pm
inkOne said:

Awesome work thanks a lot!

Jun 14 2:33 pm
david said:

Awesome! And great to see you guys aren’t using bevels for the buttons anymore! ;D One tip for next time, if you build up the glossy elements from a transparent gradient (using only white) you just need to change the fill color of the layer to make all the variations. This will also be more useful/flexible for the designers working with your files.. Apart from this, another fine piece of work!

Cheers from @davidvb

Jun 14 2:34 pm
Awkward Sthlm said:

Thanks guys!

/People at Awkward, Stockholm.

Jun 14 4:27 pm
Antony norton said:

Like everyone who uses your stuff, eternally grateful, thanks for letting us have it for gratis! You guys are Great!

Jun 14 5:54 pm
Andrea Picchi said:

I always appreciated your works and I mentioned in my next book from Apress:

“Pro iPhone and iPad Web Design and Development: HTML5, CSS3, and JavaScript with Safari”

http://www.amazon.com/Pro-iPhone-iPad-Design-Development/dp/1430232463

Jun 14 6:26 pm
Thom Allen said:

Thanks! Looking forward to the retina display version.

Jun 14 8:49 pm
sos media said:

Thanks for the template. Makes my job so much easier!

Jun 15 3:25 am
Jordi said:

Thank you very much! Amazing work.

Jun 16 3:47 am
Volker said:

Dear guys, thank you very much for building and sharing these wonderful resources. Greetings from Germany!

Jun 16 4:09 am
Pieter said:

Thank you! The quality is amazing

Jun 17 3:39 am
stefano said:

Precious, you are so precious!

Thank you very much!

Jun 17 6:53 am
Ajay said:

Your iPhone 3 template was massively handly while designing a dating app for a client (http://www.asiand8online.com/mobiledating) but it did have a lot of issues with blurred edges.

I’m really glad all these have been fixed. Great work guys!

Jun 17 9:42 am
طارق منصور said:

شكراً لكم
Thank you

Please keep the good work.

Greetings from Egypt!

Jun 18 10:08 am
Diter dos Santos said:

You are simply the best!

Jun 18 11:20 am
FrApple said:

Many thanks for sharing this, it’s just what I was looking for to display my iPhone wallpapers beautifully.

Jun 18 1:16 pm
salih said:

love it so much

Jun 18 9:36 pm
Renato Carvalho said:

Thank you! Thank you! Thank you!

Jun 19 2:36 am
Asan said:

I like it very much…. Thanks! More and more people getting your works on their hands! Great job on our planet!

Jun 20 8:47 pm
moca said:

Thank you for sharing.
Great work!
Greetings from Japan

Jun 22 1:11 am
Moddz said:

Awesome! Thx a lot!
Greetings from China

Jun 22 1:20 pm
Brian said:

Thanks so much!

Jun 23 1:54 pm
CB said:

Thanks guys!

Jun 25 10:02 am
Nicolas Soret said:

You’r A.W.E.S.O.M.E ! Great work thank you very much. And thanks for sharing this for free !

Greetings from France, Paris !

Jun 26 10:48 am
Becky said:

Hi I am new to Photoshop, can you help me, is there a way to ungroup the layers of the stencils. Love your product and it is excellent for my designs, but really need your help if possible?

Jun 28 2:01 am
SJ Lee said:

Thank you very much!

Jun 28 10:06 am
Joe Turner said:

Hey, nice work on the update!

Are you planning to do a version for the new iPhone 4 screen? i.e with the new 640×960 resolution?

Jun 28 7:36 pm
Devan said:

Beautiful.

Jun 30 12:58 am
Matt Q. said:

Thanks guys! Your work is much appreciated. Seriously saving me some time in working this out myself. :)

Thanks for all the hard work!

Jun 30 6:27 am
Andy said:

When do you come up with the HD Resolution-Version?

Jul 1 9:24 am
Ryan Turner said:

This is a great asset. Much appreciated.

Things that could be added…

  • Rest of the System Buttons
  • Landscape Split View
  • Action Sheet
  • Example Maps

Keep Rawkin!

Jul 2 7:09 am
Sebastian Hill said:

Guys, thank you so much for this amazing PSD

I am understand this correctly, right? The file is free to use and apply, even for commercial web applications? You’re the best!

What I am a bit struggling with is the Iphone4 layer, that doesn’t seem to be editable. I’d love to use only parts of it. Can anyone comment on this?

Jul 2 11:40 am
Lawrence said:

Awesome thanks so so so much dudes :)

Jul 2 7:32 pm
AJ said:

Any reason why it was not created at 163dpi, l know it doesn’t matter much since you are using all shape layers but it seems it would be a bit more accurate.

Jul 6 4:33 am
Sameer Chavan said:

You guys have done wonderful work for rest of designers. Many thanks for this.

Jul 7 1:15 pm
Philip Harper said:

These are great, so useful and totally saved my bacon with Uni work x

Jul 7 10:42 pm
Scott Ruth said:

LOVE these GUI elements! Saved me tons of time designing mockups for my first iPhone app. You can see some screen shots here at my blog:

http://www.myappventure.com/2010/06/07/my-first-app-photoshop-mockups/

Thanks guys!

Jul 8 3:23 am
Mike Tighe said:

Great stuff, thank you so much for putting this together!

Jul 8 3:32 am
Web Talk said:

Hello, I would llike to know if version have a visual of the horizontal Media Playback controls? Thanks!

Jul 8 3:00 pm
Shaun Pendergast said:

You guys rock. Thanks much. Any update on when a higher resolution gui package will be available for the retina display?

Best!

Jul 9 12:03 pm
Dana O said:

Very nice. Thanks for sharing.

One question though: can the next version you create have the highlights appearing to come from the same direction on the portrait and landscape views?

Right now, it looks like the landscape version is just the portrait rotated 90 degrees.

thanks again!

Jul 11 3:30 am
MyStur said:

Can somebody explan me why cant i extract the image in parts
with photoshop
help me with that
mystur@gmail.com

p.s. great awsome work

Jul 13 5:13 pm
Chris said:

Does anyone know where I can get the iPhone Movie control GUI/interface?

Jul 13 6:57 pm
Oliver Morgan said:

Hi,

Thanks a lot for all this, i’m in the process of creating a iphone web framework to use webkit gradients and alike to entirely re-create the iphone UI, without the use of a single image. Why? Because it doesn’t pixilate between devices with different screen resolutions eg. iPhone 3G and iPhone 4, and is much more compact and brings a significant performance boost, especially with webkit transitions and animations.

So far the project has worked well, porting across the background style profiles directly has achieved a very high quality product, and it won’t be long till i am able to release it.

Having said all that, there are a number of pitfalls, pitfalls due to mistakes in the original PSD which i’ve had to compensate for. Below are a few i’ve picked up, but i’m sure there are more.

1) The switch should have a thin border.
2) The tabs should have a border and a light shadow.
3) The left active tab should have a slightly curved gradient background.
4) No large plain buttons (the ones without the black background) such as the delete contact button.

Again, thank you for your work, its greatly appreciated!

Regards,
Olly

Jul 15 10:59 am
Marcel said:

These things are a life saver, and incredibly well done. Many thanks, and keep up the good work!

Jul 16 7:56 am
Alistair Stiegmann said:

Many thanks guys! Very cool.

Jul 19 10:48 am
Chino Chico said:

I got a request.. do somebody have the iAd muck up? I mean.. the frame in PSD..

thanks!

Jul 19 1:13 pm
matt said:

Thanks, guys. You may be interested to see how I reworked your Cancel button for iOS 4:

http://dribbble.com/shots/36381-Custom-iOS-4-navigation-bar-button

Jul 20 10:51 am
Adam said:

Anyone who is desinging for the retina display can simply scale the image to 200%. Most of the graphics they have used are vector anyways. If you don’t have the exact Helvetica font they used, you will have to change it manually, but this is something you would likely be doing anyways if you had to change from their default button labels etc.

Jul 21 2:13 am
Syed Haroon said:

I am from INDIA, u people did really great job, its helpful for all the UI Designer around the world. Many Thanks.

Jul 23 3:11 pm
justplainGerald said:

Well a Huge Kudo’s to your gang for this, I’m currently developing interface for the iPhone and this jump started me on the project. Now Reading the Interface Guidelines (not a fun read). Thanks again..

Jul 23 3:20 pm
syed muhammed sabir said:

It was my first iphone project. you guys guided me to finished it superbly..
please add Donate button to your blog…
Again, thank you for your work, its greatly appreciated!

Jul 24 12:19 am
OM said:

This is fantastic. Thanks so much!

Does anyone know where I can find screen of Google Maps? This PSD only has the “maps loading” screen, not a shot of a map itself.

I have not been able to find the 3.0 PSD that did include a map screen shot.

Jul 25 8:18 am
Heyall said:

I can’t find a standard text input area on this PSD. Am I just being a retard and not finding it?

Jul 27 1:00 pm
AK said:

Effing awesome. Muchas gracias

Jul 27 2:59 pm
Rhys Dadabhoy said:

Really cool i have used it well, i have created an iPad 2 and iDock w/ MacBoard and Trackpad visit http://www.flickr.com/photos/45515362@N03/4834749575/ to see it.

Jul 27 6:37 pm
Justin said:

Just wanted to drop by and say thanks for the hard work. Been using your stuff for quite some time now.

I look forward to future updates.

Post Your Comment




Client Login Access our review area to see the great work we're doing. Login
Why Choose Us? Our 5 minute presentation will give you 5 good reasons. View the Presentation
labs.teehanlax.com A showcase of our ideas + executions outside of everyday client work. Enter the Lab