Along with Apple’s official release of the new iPhone 3.0 software came a number of new graphic GUI elements. We’ve been holding off updating the Photoshop file until we could properly implement the additions. We built it using vectors, so it’s all still fully editable. Apple’s SDK is amazing, but when we need to mock up something quickly for a pitch we turn to this.
Some of the changes and additions in the 3.0 iPhone GUI PSD include:
- Map and map elements including curl
- Copy and paste elements
- Timeline bar editor
- Horizontal iPhone
- Horizontal Panels bars and keyboards
If you like it or use it, help us out by retweeting it.
2 New Versions Available!
iPhone GUI PSD Version 4
iPhone GUI PSD Version 4 – Retina Version
(Thanks to Finn O’Hara for the photo)
written by Geoff Teehan
Brilliant! Very happy to have this, especially with the Step Bros. theme. I used the sh*t out of the last version.
Quick turnaround! Thanks Mister Teehan, we’ll definitely be using this soon.
Dugg, + Tweeted – You guys have made our lives easier once again. Thanks for rocking!!
Hey, just want to point out one little major mistake in the PSD template; Global Lighting is set to 120 degree instead of Apple’s 90 degree.
Also, wondering why you chose Bevel & Emboss in most of the elements instead of 1px nonblurry white drop shadow for embedded look? Drop shadow is more in line with Apple’s drawing style.
Thanks for continually updating this template, it’s too important for iPhone designers to not have :)
@ Adam Betts: Glad you like it. I didn’t go back into the file and look, but if memory serves the global light may is set to 120 degrees but elements that are affected by global light are manually set to 90. As for the Bevel & Emboss – it just seemed like it reproduced the style properly reserving the drop shadow for its intended use. If you have a revised sample that you think is more accurate email it to “us at teehanlax dotcom” and we’ll make the change in the next iteration.
Thank you : )
why did you guys just make this in illustrator? it would still be vector but your file size wouldnt be so freaking huge
Wow guys, now this is something to behold. Exquisite job. The accuracy of these interface elements is stunning.
Thanks.
beautiful!
One great addition would be graphics for the new grayish UISearchBar look in iPhone OS 3.0.
Anyways, it’s already a great help. Thanks for providing the template for us :)
Can you give, or how does one get, a list of fonts that are required for this PSD file so that I can edit without getting warnings?
@ tim: We did it in Photoshop over Illustrator for a number of reasons. The primary being that our designers prefer to work in it.
@ Mark Tomlin: If you’re on a PC your probably colliding with Helvetica Neue. The only fonts used are Helvetica Neue Light, Regular and Bold – all of which are system fonts on a Mac (and the iPhone). GASP! I just found a few instances of Arial. These should be Helvetica Neue too. We’ll swap these out in the next update.
What version of Photoshop was this created in. I have Photoshop CS v 8.0 and I’m getting an error “unknown data has been encountered reading layer” when I try opening it. I can read it only as a composite.
Can you guys suggest what might be wrong?
@sumit It was created in CS4 which could be why you’re having some issues. If anyone else can confirm this we can post up a CS3 version too.
I have the font ‘HelveticaNeue Bold.ttf’ & ‘HelveticaNeue Heavy.ttf’ as apart of my Window’s Font forlder (For when I’ve done some graphic design work, years ago.) but they don’t seem to be the same thing. It would seem that ‘HelveticaNeue’ & ‘Helvetica Neue’ are two different fonts.
I’m a lowly developer who doesn’t get any fancy Adobe tools at work. Any way you could provide this in a friendlier format, like, say, export all the layers to PNG? I tried opening the file in GIMP but some things don’t show correctly.
I too would appreciate a more open format, maybe a eps.
Я извиняюсь, но, по-моему, Вы не правы. Я уверен. Давайте обсудим это. Пишите мне в PM, поговорим.
В этом что-то есть и мне кажется это отличная идея. Полностью с Вами соглашусь.
Я считаю, что Вы не правы. Предлагаю это обсудить. Пишите мне в PM.
Thanks for this great resource. I used an earlier version of this file and it made the design and early prototype process go much faster than if I was just using wireframes or building all the OS elements by hand. My developer also said it helped him get to pixel-perfect code quicker than any iPhone project he’s worked on.
Охотно принимаю. На мой взгляд, это интересный вопрос, буду принимать участие в обсуждении. Вместе мы сможем прийти к правильному ответу. Я уверен.
И как это понимать
Thanks for taking the time to make and release this file, its immensely useful!! Thanks again!
This is by far my most-used psd for getting iPhone elements, but I would love to have a few that seem to be missing.
1) ‘delete’ button (go to SMS, click ‘edit’ — you will see the red circle with minus sign in it)
2) default table background (go to ‘settings’ you will see a striped background)
3) vector “more arrow” chevron (to the right of the labels in the psd)
4) # indicator (the red circle with a number in it, indicating something new, such as that which appears when you have an unread voicemail on the voicemail tab)
5) A vector (or alternatively, a 300dpi version of) the iPhone graphic. I do a lot of large-scale presentations in board rooms, and printing these at the current resolution, scaled to fit a large poster board looks really, really bad. The elements look great, as they are (with the exception of the ‘more arrow’) vector.
“Мне нравятся Ваши посты”
Thank you very much for this! This will help me to make my presentations of the app i am having dev at the moment.
thank you
very much
the earlier file was the starting point for the Pizza Hut app we just finished. Thanks
Your file marked as copyrighted. What does it mean? What kind of restrictions?
Thanks for great job! -:)
The only restrictions are we request attribution and that you link back to the original file. Also you can not resell it or claim rights to it. It is meant for helping designers mock up iPhone apps. Any use beyond that check with us.
Was UITableView left out for any particular reason?
Thank you for being willing to share this. What a timesaver!
I saw that you created this from Illustrator. Any chance you’d share the illustrator file?
Pefection!
love it, thanks :-)
Pardon my complete ignorance here… what should I do with the .psd file ???
(I’m afraid I might know the answer already, but let me hear from you :-)
-Alex
@Geoff Teehan: It should also be noted that your PSD does not contrain the orange gradient for the Airplane mode button. You can find this button in your iphone by going to Settings then turning Airplane mode on. That’s then the color that your missing in your PSD. Thanks for your time.
Share This/Blog ItDownloadSend to MobileAlsomanicho’s profilemanicho’s gallerymanicho’s prints … iPhone PSD for snapshots, icons, etc. Wonderful!
Thank you to dedicate the time to all of us!!
Thank You. Thanks. Thank You.
Absolutely love your work guys!
A related question – I know Apple are known to reject apps using certain Apple specific GUI components…
Does anyone know of a good online resource (blog etc) that discusses what Apple GUI components are acceptable/not acceptable by Apple’s (busy) app approval team?
Download is NOT WORKING!!!
@Moko Design: It sure is, just give it another try.
Thanks SOOoooo much for this PSD – you’ve helped my graphic designers and developers no end! You guys rock!
Nice Job! I like this is=)
Hi Geoff,
i use Photoshop Elements 5.0 using a PC with Windows XP. When I try to open the Template, I too can only open it as a composite. I see that someone else posted about this in June and you kindly offered to upload a different version (CS4??) but I can’t seem to find it posted. Can you guide me to it?
Also, I am self-taught on on Photoshop Elements and, I hate to admit it, but I cannot figure out how to drop my images onto the iPhone immage with the two men on your template but assume there is a way to separate the layers? I am hoping I can replace that image with my iPhone wallpapers (I have about 60 to do) so that my wallpaper image(s) will show through the time ribbon in place of the background that currently shows through.
Can you or another generous person here tell me what menus and commands I use in Photoshop Elements to accomplish this?
Or, am i having this problem only because I am working with the composite image?
THANKS SO MUCH!
Tommi
really creative work there in source file. thanks
I love it! this is very helpful. Thanks!
Thank you very much! Without this, I couldn’t have finished my recent project to meet the deadline.
Copy-paster is a very important element for Iphone. I like it !
What minimum version of Photoshop is needed to use this template?
New Iphone ? Cool!!!!
Excellent work and great attention to detail! You’ve made my life a lot easier- thanks
Such a nice thing to share. Apple should do it themselves :D
Only problem, I think, is that everything is rasterized! I’m having a hard time recreating the different components i “vector” (I mean resizable layers like adjustment layers) so I can sketch me an interface before going into Interface Builder. Could you publish a vector version?
-Mikkel
Thank you kind people.
does this mean I get get PSD on my iphne? I tried downloading it off my iphone and it did not work…
how do I install it
help??
There is a lacked blue gradient on active tab bar button in this psd.
There’s a lot of great effort put into this file. Cheers guys.
One question though, what’s the license/terms of use for this? I can’t seem to find any anywhere.
Is it possible to use the great iPhone GUI in commercial prducts?
thanks for the template and help!
The PSD or elements of the PSD may not be used for commercial purposes. We have had several requests to use it to create wordpress/joomla/drupal themes. We do not allow for the PSD to be used this way. Thank you for asking.
very useful kit. thx a lot. i used it on my post about iphone wallpapers here: http://kn.tl/iphone-wallpapers-of-the-week
Hi,
What’s the cheapest version of Photoshop required to use GUI PSD 3.1?
Thanks.
wonderful work！Thanks for sharing.
its very nice and amazing.
thnks!
This is a accurate, well designed and I can’t make an app without it. Thanks for creating this!
Nicely done.
Saved me hours.
Many many thanks.
cw
is there a 160dpi version? this version is 72dpi.
Hey…great PSD you got here…I’ve had some uses for it in the past but today I needed it badly and I find everytime I open the file, Ps CS4 crashes?!
I don’t have any extensions apart from PixelBender..it used to work before and the only thing I can think of that changed is that I have got more brushes, styles, patterns…
Any help would be appreciated!
Any plans to add the normal (non-rounded) UITableView? (hopefully with accessory views)
Loving the work you did here, guys!
LMFAO I like how the time on the iPhone is 4:20, gotta love designer’s and their stoner/pot mentalities ;p
Amazing job, thanks!
Fantastic work!
If I may – I did not find the alert notifications badge icon which is placed on top of email, SMS, etc. Is it possible to add it?
The amount of detail in this PSD is amazing!
I feel pretty ignorant for even asking this question, but…
Could someone quickly explain the preferred way to use the PSD to build screen mockups? I’m having a hard time figuring out how which groups/layer I need to copy & paste to get the different screen controls into a new document.
A quick screencast on the subject would be immensely helpful!!
Great! Thanks for sharing. Really useful
Wow guys, this is a seriously awesome asset … thanks so much for sharing!
Great design! Very helpful, thanks!
Thanks very much！
Thanks very much！
Great work guys,
Noticed that you do not have an “action sheet” design included with this library, but you DO have the action sheet button templates.
example:
http://mclov.in/images/blog/actionsheet.png
-Your neighbour on Richmond :P
an actually some of you guys give me a mirror? that link seems that doesn’t work.
Not sure if you know, but latest news has confirmed that UK mobile operator 02 plan to allow out-of-contract users to unlock their phones for use on other networks. TheMusicVoid appears to have the scoop – http://bit.ly/6o3mI5
Thanks very much！
Hi really nice share! thank you very much!! really appreciated!
Thanks !!
Great resource, save up a lot of time, thanks!
Thank you for sharing this with the rest of the world. It makes it much easier to design a nice GUI before writing any code :)
coooooooool
Before while I’ve downloaded iPad PSD and start searching this website. And found this great iPhone PSD. Really helpful, thank you.
Thanks for PSD. I will use it for sure!
huge ! Thanks !!
Isn’t “graphic GUI” a redundancy?
Super, THank you.
link to psd does not work
Excelente… muchas gracias.
Thank you so much! This is incredibly helpful!
thanks bro!
Hey, don’t forget the humble Moleskine sketchbook as a great tool for sketching ideas down quickly. And if you own an iPhone UI Stencil it fits really well within the gridded sketchbook. Check out my blog post on the subject : http://blog.lyraspace.com/2010/02/12/using-your-moleskine-for-iphone-ui-design/
Very useful, used it for a user interface design class!
Thanks a lot!
does anyone have a workflow example of how to organise the ideas on developing an iPhone app. I’m presenting an idea to a client and wanted a concise template on how to present the idea and functionality.
Thanks Much,
Doc
StencilsApp (http://www.stencilsapp.com/) is a powerful design tool to sketch or mock up iPhone app ideas directly on the iPhone.
Anyone with an idea for an app can mock up an interactive prototype of their idea on the iPhone itself using StencilsApp, without writing any code.
Sketches can behave like a “live app” by linking multiple screens through touch actions and gestures. Check out this video of a sketch of the iPhone Calendar app : http://www.youtube.com/watch?v=ncpQ4zVy2LY.
A cracking post! very helpful
Hey,
You can also try FlairBuilder for UI interactive prototypes. It just started supporting iPhone prototyping in its latest release: http://www.flairbuilder.com/iphone-prototyping-custom-widgets-custom-icons-and-much-more/
Cheers,
Cristian
Hi,
Thanks for this nice design tool. It’s very helpful.
I have a general question though. Are we allowed to use graphic elements of the iPhone in a Android app for example. I was thinking of the map pin.
thanks
Thnx!
Great help!
LOOOOOVVVEEEEEIIITTTTTT!!!!!!!!!U GUYS RRRRUULLLEEEEEE
it is interesting and informative article. This has been very helpful understanding a lot
of things. I’m sure a lot of other people will agree with me.
Thanks a lot for this great piece of work! Very useful!
Great stuff. Thank you!
It’s AWESOME!!! I would to really THANK YOU!!!! I’m so impressed!!! :))
Awesome! Thank you.
Thanks a lot for this great piece of work! Very useful!
I will definitely be using this soon
You guys are so great! Used it on my wallpapers page.
http://bennihahn.com/wallpapers.html
thnx a lot, but maybe include this in the next release:
http://www.lboro.ac.uk/it/mobile/iphone-images/safari-select-wifi.png
grts!
Thank you so much! This is SO helpful.
Thanks. This is a great tool.
Trying to describe what my iphone app is to a developer is murky to say the least. With this tool, they ‘get it’ straightaway – make it happen and reduce my development time.
You’ve actually put bucks in my pocket.
For that I am very grateful.
Thank you so much!!!! Great tool! I used it all the time to make mockup interface…
Thank you so much! This is SO helpful.
You guys are so great!
What version of Photoshop I need to open the file….
Is it some catch …since I am not able to open at all….
Thanks
Thank you so much! It’s realy great tool!
Brilliant! Extremely happy to have this.
I now really blow clients minds with quickly made mock-ups!
Thank you so much 4 making my life even better ;-)
Thank You. Thanks. Thank You.
This is amazing work. Can’t wait to use it in my next iPhone project
Would it be beneficial to have the color profile of this document set to Apple RGB? Am I right that that’s the preferred profile for designing for the iPhone?
FANTABULOUS!!!!… thankq….. :)
Uaouuuuuu Fantastic psd resource! Thanks
is their any copyright on these pics? I dno`t want to pay thousands of euros to apple, if i use one of their pics.
http://www.markenmagazin.de/apple-abmahnung-vorsicht-bei-der-verwendung-von-iphone-bildern/
cu
Dany
This is an amazing resource! Thank you!
Design is like coding. Make things reusable!
Dear friends, thank you for visiting our website ,we are an international trade company,which specializes in NFL jerseys.We wholesale jerseys at competitive price,Indianapolis Colts Jerseys,such as Arizona Cardinal,Atlanda Falcons ,Baltimore Ravens,etc.You can buy cheap jerseys. Welcome to visist here .
Thanks very much for sharing. It is quite useful.
Makes sense, thanks for this.
Hi guys,
any plans for Android UI related PSD file?
Regards
very coool
THanks a lot
Very Awesome. Good job.
Want some iPad Vesion.
thanks for this.
Thanks for the PSD. Where can windows users get the helveticaneue font?
Just to say : Thank you very much.
Great tool! thanks!
Great iPhone PSD GUI development tool!
The new iPhone is out.
Can you please adapt the GUI for a 960×640 at 326ppi?
Thank you so much for you work! The App Store Developers appreciate it!
:)
Cool, Thank you so much.
When will you release the iPhone 4G GUI
Nicwe tool ..gonna talk about it on my blog!
This is incredibly helpful for mockups and client reviews. Love it. Very helpful and thanks for putting it together!
This is super great! Thanks guys. I used it for some mockups of an iPhone app that I’m working on. I credited you for the GUI elements.
http://www.myappventure.com/2010/06/07/my-first-app-photoshop-mockups/
Thanks again!
-Scott
Hi, you may be interested in trying ForeUI with the iPhone app mockup library:
http://www.foreui.com/blog/?p=826
Best Regards.
Xavier
Hi! This is awesome but I was wondering if there are “Accept” and “Decline” buttons available? Thanks!
Great thanks for this, sure it’ll come in handy!
Thanks for the PSD. Where can windows users get the helveticaneue font?
very good.
Thanks I will be using this soon
Cooooooooooooooool, Very Awesome Thank you so much :)
I used it all the time to make mockup interface…
http://www.anantdesigns.com/
- Ketan
well done – great job
Thanks so much for sharing this!
Thank you so very much. Very kind of you. :-{>