Over the past few months we’ve had to create a few iPhone mock ups for presentations. The problem we’ve encountered is the lack of resources to help us design something efficiently. Up until now we’ve used a nice PSD from 320480.com but we still found ourselves having to build out additional assets or heavily modifying bitmap based buttons and widgets.
Since we know we’ll be doing more of this, we created our own Photoshop file that has a fairly comprehensive library of assets – all fully editable.
Version 1.3 now available
* Addition of confirm dialog
* Addition of 3G icon in top bar
* Addition of SMS screens – including small and large “To:” and “Message Fileds”
* Larger canvas to account for additional elements
2 New Versions Available!
iPhone GUI PSD Version 4
iPhone GUI PSD Version 4 – Retina Version
written by Geoff Teehan
This is great. Thanks!
Thanks! Super rad.
Did you guys use the Yahoo stencils for this?
Thank you so much. Much appreciated. I’ll be using this to create mockups for an app I’m planning on dev’ing.
@ Jason Kolb: We didn’t use the Yahoo stencil, though I see it has some additional elements we should recreate for the PSD.
Thanks!!!
Was just about to start an iPhone mockup, timing couldn’t be better.
Very cool and even cool of you to post it for everyone. Way to go on the act of kindness!
Thanks guys. I’ve been hacking up GUI elements from flat files… this is a big help.
FYI, from what I’ve gathered, graphics for iPhone applications need to be set to 160ppi. Do you think you could recreate this at 160ppi instead of 72?
Hello and thanks for sharing this wonderful resource with the community.
I’ve featured you in my blog.
Do you guys have any insight on what resolution to design for when designing custom interfaces for the iPhone. I’ve searched and searched, and to the best of my knowledge we should be designing for 320×480 at 160ppi. Any input on this as your file is only at 72ppi?
Thanks for sharing,
Chance
Re: 160ppi vs 72ppi
Good point, we’ll update the PSD so it’s set to 160ppi. That said, I don’t think much will really change other than the document width and height in inches. The pixel dimensions need to remain the same since the iphone screen size needs to remain at 320 x 480.
Hi guys,
You did a wonderful job on your template. I too wanted to use vectors, but I just haven’t had time to develop more of the template. Yours looks very good.
Thanks for providing free tools to the design community.
DC – http://www.320480.com
Thanks, just what I needed for my office!
Thx. This will save some time for the mobile version of our deal engine.
Is there an easy way to be notified when you update the files?
Perfect timing! I just started designing a iPhone application. This should be useful. Thank you.
thankyouverymuch!
thanks – know I can create mocks for my ever-pending mobile app.
Don’t CATFOTFIC
(Complain about the flavor of the free ice cream)
I don’t care what resolution this is, thanks for sharing.
HUGE thanks for this! Life savers.
Awesome! Thanks for sharing!
Man, o man. Talk about spanking it with some serious love just when it was needed. You’ve been added to my Christmas list.
This is neat! Thanks.
Hey guys, this is awesome. Thank you!
Thank you very much guys…really helpful.
Thanks for sharing, maybe it’ll be useful someday.
Thanks very much, guys. I’m sure this’ll come in handy.
This couldn’t have come at a better time, thank you Gentlemen.
Great! Thank you!
ok, if I have a iPhone.
I love my iphone
Your article is very interesting and valuable, at first for all iPhone actual and potential clients.
Detail information about it, is very helpful and useful.
Thanks
This is great, thanks
Excellent!
thank you so much
Very handy – thanks!
Did no one notice beside me what time was on the phone? Too funny…
Thanks guys you have saved me hours and hours of work ;)
Chinese job made easy
fake iphone!
lol @ the time listed on the phone–420 ftw
hah, i’m not the only one who see the 420 sign on the display )))
would appreciate if you guys would rename some of the layers to something more understandable.
Awesome!!! Thx for this file, probably i will need in next months!!!
Does anybody have the time?
Great idea!!! This will same me a ton of tome today!
Was the time 4:20 on purpose?
Thanks for sharing the iPhone skin.
There’s also a very nice stencil of this on graffletopia.com for omnigraffle (mac only)
AND this is awesome. Thanks for publishing it.
This is great, thanks for posting this guys!
Four Twenty Dood
Great, thank you for sharing this mock-up!
Dan
Geoff! It’s Brad from the Saturday meets, very cool work!
Is there a reason you wouldn’t just use the free Xcode environment for building mockups? The iPhone SDK is free. Interface Builder doesn’t require any programming, is drag-and-drop easy, and uses the original graphics found on the iPhone. Editing menu options is a double-click away, elements can be resized as if in an image editing program, and you can even put in some limited interactivity for an impromptu demo.
@ Christopher Drum: A few people have brought this up on other blogs. I think there are a couple of factors that can determine the right tool for the job.
The first factor is the person. For designers in our company, working through the initial design process in a tool like Photoshop provides them the quickest way to get their ideas out (outside of whiteboards and sketch pads). Photoshop also gives us the most flexibility to design custom things that go outside of what may be provided in Interface Builder. Others in our company who are more focused on development would be quicker to open Interface Builder. Obviously the tool we created lends itself more to the designers.
The second factor would be what the end use of the mock up would be. If we’re creating a pitch and needed to include a screen or two of an iphone application, then simply mocking up a screen or two in Photoshop will suffice. If the pitch IS an iphone application then maybe mocking up a prototype is the way to go.
Haha stumbled on to this, love how the clock is at 4:20
Heh…4:20 eh?
Great resource! Thanks!
Nice work indeed
Thanks for the kit. Also comes in handy if you want to build your own “unlock slider” as an UISlider.
Exelent to make fakes :P, thanks!
simply awesome :) thanks
Thanks so much! Great job!
Thank you for this.
My work is much easier with this little handy tool of wonder.
Hmm… interesting choice of time on the clock.. this just happens to be my favorite time of the day as well…. :)
Hi there, looks really great!
A few days ago I started an open project creating some iPhone’s UI as Rich Symbols for Adobe Fireworks hosted on Google Code. Mockups will be faster and easier!
check it out and help improve it
http://jcorrea.es/2008/08/07/iphone-gui-as-rich-symbols-for-fireworks/
It’s been mentioned above, but I’ll chime in too. This may be a cool set of Photoshop widgets, but if you’re considering using them, please consider using the Interface Builder app that comes with the iPhone SDK. All free, and it’s the actual tool that real iPhone developers use to build interfaces.
Extending an element is as easy as dragging it out; adding another icon to a toolbar automatically redistributes the others. Everything auto-snaps to build a GUI that follows Apple guidelines — it’s easier than Photoshop!
Just as designing a website in Photoshop gives you very little insight into how a website is actually built, designing an iPhone app in Photoshop is not going to help you understand how that’s going to work either. Interface Builder can be daunting, but for mockups it’s dead easy:
1. File > New… and make a new Cocoa Touch application.
2. Window > Library and drag objects into the window.
3. Double-click on buttons to change their text.
4. Window > Inspector and use the first section (Attributes) to change colours/styles if needed.
5. When you’re done, File > Simulate Interface and it’ll appear in the iPhone Simulator.
6. Command-shift-4, then press space. Click on the simulator to grab a pixel-accurate screenshot of your iPhone app, with shadow.
Thank you, that saves hours of potential work in the future.
Thanks very much for doing this. A suggestion for version 1.2: The numberpad/keypad? And make the a ‘blank’ key layer too for that, as the bottom left key can be customized.
Keep up the great work!
Maybe this was mentioned already, but you can just download the iPhone Developer and use Interface builder to make mockups.
Haven’t read through this thread of comments, but wanted to thank you for posting this PSD — was lookin for this in the SDK, this just shaves a couple hours off of day tomorrow. Killer!
thanks! you’ve made life a little easier for so many people!
This is going to come in superhandy – thanks!
Merci !!!
Thank you for this, saved me a lot of time, I greatly appreciate it! I’ll be happy to footnote your team when I get my first app up!
heh nice time on the clock in the picture :P
Great info, thanks a lot!
wow thanks..
Very nice… I’ve been thinking of designing a theme, but this might be the next best thing to keep me busy.
Hi
I’ve downloaded the psd file (thanks for making it !!!) but I get an ‘error’ when I open it in my older version of photoshop.
After it opens I see one layer… not multiple ones. Is it possible to save the file with backwards compability?
Thanks again
Bye
C
Thank, great job.
éžå¸¸ä¸é”™ï¼Œè°¢è°¢ï¼
Nice job!THX!
Is the new iphone set to compete against all the other phones in the market? I wonder, because with better resolution and Windows, the upcoming xperia x1 looks like sizable competition.
Well wicked innit!
How can i find HelveticaNeue Bold ??????????
Ta!
thanks this is super. will help me enhance the looks of my site…
Hi,
I guess I’m the only one here wondering :
How do you use it ?
When I open it up with Photoshop, the layer is locked…
Impossible to unlock…
Beautiful though !
this is an amazing time saver and many thanks. is there any plans for the developments of a similar file for the landscape orientation of the iphone, taking into consideration the subtle differences with the padding between keys on the keyboard, wider buttons, etc?
@ deamb: The file was created in CS3. Pehaps it’s doesn’t load the layers correctly in older versions of Photoshop.
@ david: The landscape stuff would be easy enough to recreate. If we ever need it for a concept it will give us an excuse to build it out for this file and repost.
awesome!!!! thanks!
^____^
Thanks for this, it’s very useful. Much appreciate your work on this and allowing it to be downloaded.
Excellent!!! now i can depend on my own designs for my iphone!!
Many THanks!
Great news! now we can create our own designs the easy way.
Thanks for this! And all the people who are mentioning that the file DPI is incorrect are making me laugh! Silly designers.
Thanks for sharing guys!
Tried downloading and the file downloads automatically as gybrish in notepad. what am I doing wrong?
Thanks
@ ruth: It’s a Photoshop CS3 file. It may not open properly in older version.
thanks for sharing, it is really good, save a lot of my time.
Thanks for sharing but it’s so slow on my 2.16GHz MacBook Pro with 3GB ram with PS3 that I simply can’t use it. What kind of machine do you have?
wow, this is exactly what i needed for some mockups today… you guys rock.
Great. Thank you very much!!!!
My Mac Is having problems and is not working!!!!
So Im Left Using A windows (Damn)
You Guys Should Release One For Windows!!!
I just wanted to say thanks to T+L
this is AWESOME !!
…and also get on the list before this page reaches 1000 responses
\m/ rok on \m/
OMG YOU GUYS TOTALLY SMOKE POT.
P.S. tabindex=”4″
What can I say, except that I am putting a proposal together where I need to show mockups… and that you guys kick ass!!! Thank you. Thanks for sharing your 1337-ness.
Thanks for the file guys! A must have for a designer!
thank alot for this :)
Just twittered this, but seriously… Can’t thank you guys enough for putting this together. HUGE leg up when mocking up some screens this week.
This is a very accurate, high-quality reproduction of the iPhone interface. Thank you very much for letting us use it!
Very awesome. Especially glad that everything is done in shape layers. There is one error – the back/forward navigation item buttons are not pixel aligned :)
Any chance you will add the iPhone pop-up dialog?
thanks~
So you are pretty much godlike in my eyes this day.
Photoshop iPhone GUI PSD for developers…check it out!!
Nice!
is there a “quick and easy” way to take these layers etc etc and convert them into omnigraffle stencils?
-J
@ Joerg: I know a stencil already exists. I can’t speak for importing into it, perhaps someone else can chime in. I’ve tried the stencil and it’s decent but Photoshop allows me to create custom elements easily – it’s pretty much impossible to create an new interface element in Omnigraffle.
Thanks for the fast response! :)
The existing stencils (2 or 3 of them) are all mostly made from screenshots and don’t fit properly together (different sizes of elements vs size of screen space etc etc) so I am looking for a more precise and better looking way to do so.
Ah we’ll see.. if I found out a way to properly create a set of stencils out of your .psd, would I be allowed to do so (referring to you as the original creators of course)?
-J
@ Joerg: Of course, feel free to create a stencil based on it. Just let us know when it’s done so we keep up this sharing thing.
Thanks heaps guys, really appreciate you sharing this. I had started down this track myself and decided to go looking when it started becoming a lot of work, found yours searching for ‘iphone vector’ on Google Images which led to a post in http://www.knowtebook.com. Thanks again.
Great PSD! Thank you very much
so i discovered this lovely file a few months ago and quickly rebuilt everything in illustrator. Something about the vector are and how it treats layers I just prefer it over photoshop. So, to share the love, you can grab a pdf or ai file of the iphone template:
http://dfarkasdesign.blogspot.com/2008/11/mobile-templates.html
as a fun bonus, i have a blackberry storm on the same post,.ai and pdf. even the phones are rendered, just because i like everything to be in the same visual language.
- df
F-ing awesome.
You guys deserve the nobel peace prize for this. :D
Ha! Looks like YUI ;)
Not to be a spoilsport, but this file uses Apple’s promotional image of the iPhone, from the Apple PR website . The image use agreement states:
Subject to the terms of this Agreement, you may use the Image solely in whole for editorial use by press and/or industry analysts. This right to use is personal to you and is not transferable by you to another party. The Image cannot be used to promote or sell any product or technology (such as on advertising, brochures, book-covers, stock photos, t-shirts, or other promotional merchandise). You may not alter, or modify the Image, in whole or in part, for any reason.
An excellent resource for any type of designer. Thank you.
This is going to prove very useful. Thanks for the time you’ve spent on it!
Suggestion for the next version: the addition of the striped gray background.
Thank you, a truly useful resource. Much appreciated.
Meticulous work, thanks!
Awesome job guys!
Thanks. This is great. I am sure it will help us in our webapps.
Thts like a pro would actually do for them really. I always thought this was only possible in illustrator but I think I have to change my mind now.
Thank you! This has saved me sooo much time searching for an image, this is perfect. Thanks for your time!
It’s difficlt to understand..
The 420 thing. Was that on purpose?
haha – yep – that 420 HAD to be deliberate – nice touch ;)
Mind blowing psd file thanks
Cheers, awesome resource!
thanx for teh vector… i wil be using it in
http://bmobile.in/
Awesome. Thank you very much.
Very cool. How much time did it take to create that?
Just had to say you guys are the bomb, so kind of you – much love and good vibes coming your way. Peas.
hi can u tell can how can i change the keyboard lay out ?
Very cool! Already downloaded :)
Lovely. Thank you very much for your effort!
a bathrobe warrior salute to you guys for an awesome creation!
i luv it X)
Thx for sharing.
Thanks for sharing. We owe you one..
Yoink! Thank you very much, this is an excellent resource. Well, actually I haven’t opened it yet, but it certainly looks like an excellent resource.
Excellent work. Thanks for making this free.
Many thanks!!
Hey, thx for sharing this helpfull work!
nice one on the 4:20 timing!
Thanks for this! I hope you don’t mind, I’ve included this in a recent post of my own: http://iphoneized.com/?p=287
Cheers,
Chris
This is really great stuff!
Just one request, if I can: would you be able to add the “details” icon? It is the one with the blue circle like the “Add” icon, but with the “>” inside it. It would be a great help for the stuff I’m currently working on!
Thanks.
This is awesome I have been looking for phone templates to help my UI design job lots faster – thank you so much for making this resources available for us interaction designers =)
Hey is this for windows or Mac ?
Great job! Thanx a lot!
Geoff/Jon – this is a phenomenal resource! I was so inspired based on a project I was working on, to add to the iPhone app-building love, I created a matching Visio Wireframe toolkit that compliments your .PSD. I have posted the wireframe toolkit here:
http://www.bretteddy.com/iphone/
For anyone who does rapid wireframe iterations before building glossies, hopefully my toolkit will be handy (includes Drag and Drop goodness).
All my best. And thanks for making it available to the UX community.
Brett
so cool, i will share my site, http://www.iphonewallpapershome.com
does anyone else notice the shameless “420″ on the phone? no accident…. haha
Thank you very much.
This is a good start, but still you cannot really click through the screens. If you are interested in this, read more about our solution here: http://unitid.nl/2009/04/prototyping-for-the-iphone-using-fireworks-cs3/
Can your iphone render be used on a commercial website?
Thanks
Ame
As long as it appears attributed and is used for non-commercial purposes.
Man, I love Google…. Just what I was looking for, and found it on the first click. Thank you!!
What I was looking for, thanks! I just digged this!
Thanks for the link. I’ve been trying to orientate myself around mobile but finding limited resources.
thanks, guys! this just made my Memorial Day deadline a lot easier…
Uhh This is from Smashing Magazine, NOT your source: http://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/
Jeremy,
Before you go accusing us of stealing from Smashing mag you could have at least read the comments on the smashing post or even checked the dates on the blog posts. Both reveal that ours was available a few weeks earlier. Having never opened up the Smashing one I find it hard to believe the elements are the same. From what I’m told only a few elements on that one are editable. Can anyone confirm?
Geoff,
The Smashing one is pretty bad, almost nothing is vectorized or even editable.
Yours is by far the highest quality out there, and thank you for releasing it.
Do you have a license for this content? We would very much like to integrate this in a large open source project, but to do so we would require something like a Creative Commons licenese to back us up.
Any help in this regard?
Thanks
Jacob
Süpersiniz, gerçekten çok iyi bir comment olmuş, ellerinize sağlık :) benim aslında buraya yazı yazma amacım belli malum. Teşekkürler, thanks all!
This is totally rad! I’ll definitely be using this. Thanks!
We are about to launch an eBook about iPhone App Creation for Entreprenures and we’d love to include this image. Can you please email us and let us know if that’s acceptable? Of course we will credit and link it back to you guys. =) Thanks!
Thanks for this, made my day ^^
Thanks Teehan Lax ! you’ve made life a little easier for so many people!
Regards
Irfan Abdul sattar
Hello thank you very much for PSD file! Nice post!
Koji
ecover software |
ecover action scripts
SO.. i have been going NUTS trying to find not the iphone photo, but an apple MONITOR photo.. I am developing some computer applications, and i want to mock it up on an apple monitor or imac.. i just cant find a high res picture!!
ANY IDEAS???
I’m a UX consultant and a couple of my clients were getting frustrated trying to play with the psd. I guess Photoshop is not for everyone! So it inspired me to create a version of the template in Keynote and Powerpoint, which are more widespread and easier to use for most people. I posted an example of a mock-up at my website http://mockapp.com. I’ll post the template / library of vector elements later this week (cleaning it up a bit right now).
Hello,
First of all congratulations for your amazing work …
I’ve got a little question … where are the search field in your iPhone os 3 release ?
Thank you
Hello,
You have done such a great job! Congratulations!
I’m the Product Manager of a prototyping tool called Justinmind Prototyper and I really like to use your PSD to make a widgets library but only if you agree. It is ok if we create an iPhone library for our product based on your PSD?
Thanks and regards!
Not bad but you should try the mockup application called Balsamiq Mockup.
It has HEAPS of fast starts for doing ophone apps plus a website where developers contribute free addons.
Here it is http://www.balsamiq.com
Very nice PSD even it’s old article, thank you.
Thank you so much for the generosity.. you guys are much appreciated!
The 3GS version is here:
http://www.teehanlax.com/blog/2008/08/19/iphone-gui-psd/
Thanks so much for this great resource! Any chance of including the calendar element in a future revision? Great work
I’m very like that,thank you very much
Thanks for a great feature that’s very useful for music.
However, it was all discount louboutins about THOSE shoes. Sky high beige daffodil Christian Louboutin Pumps Louboutins transformed the dress from a summer’s day look Christian Louboutin Sandals to a night out. Coleen also had a matching beige Chanel clutch bag and wore diamond studded earrings which added Christian Louboutin Slingbacks a touch of elegance to her look.With Coleen it’s all about the hair, and last night she went with curled ends with classic sides up with a some serious back combing.