
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.
(Thanks to Finn O’Hara for the photo)
You guys are awesome, thank you so much for these wonderful UI documents!
Thank you so much! Your stencils are a joy to use for mockups with or without pixel perfection.
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!
Hah! 4:20
Thanks for this! Very much appreciate all of the time & effort you put into this.
Looks spectacular, thank you!
Hah, good work including the “no flash” question-mark icon! Thanks for this, great resource.
Thanks guys! Great work, again!
Thanks for sharing! Very useful for me.
Truly magical and revolutionary. Thanks!
Where I found the fonts???
Awesome job! Thank you for sharing.
Must resist urge to call 416-340-8666. Thanks for the hard work!
AWESOME! Thanks so much!
Awesome work thanks a lot!
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
Thanks guys!
/People at Awkward, Stockholm.
Like everyone who uses your stuff, eternally grateful, thanks for letting us have it for gratis! You guys are Great!
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
Thanks! Looking forward to the retina display version.
Thanks for the template. Makes my job so much easier!
Thank you very much! Amazing work.
Dear guys, thank you very much for building and sharing these wonderful resources. Greetings from Germany!
Thank you! The quality is amazing
Precious, you are so precious!
Thank you very much!
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!
شكراً لكم
Thank you
Please keep the good work.
Greetings from Egypt!
You are simply the best!
Many thanks for sharing this, it’s just what I was looking for to display my iPhone wallpapers beautifully.
love it so much
Thank you! Thank you! Thank you!
I like it very much…. Thanks! More and more people getting your works on their hands! Great job on our planet!
Thank you for sharing.
Great work!
Greetings from Japan
Awesome! Thx a lot!
Greetings from China
Thanks so much!
Thanks guys!
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 !
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?
Thank you very much!
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?
Beautiful.
Thanks guys! Your work is much appreciated. Seriously saving me some time in working this out myself. :)
Thanks for all the hard work!
When do you come up with the HD Resolution-Version?
This is a great asset. Much appreciated.
Things that could be added…
Keep Rawkin!
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?
Awesome thanks so so so much dudes :)
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.
You guys have done wonderful work for rest of designers. Many thanks for this.
These are great, so useful and totally saved my bacon with Uni work x
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!
Great stuff, thank you so much for putting this together!
Hello, I would llike to know if version have a visual of the horizontal Media Playback controls? Thanks!
You guys rock. Thanks much. Any update on when a higher resolution gui package will be available for the retina display?
Best!
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!
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
Does anyone know where I can get the iPhone Movie control GUI/interface?
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
These things are a life saver, and incredibly well done. Many thanks, and keep up the good work!
Many thanks guys! Very cool.
I got a request.. do somebody have the iAd muck up? I mean.. the frame in PSD..
thanks!
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
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.
I am from INDIA, u people did really great job, its helpful for all the UI Designer around the world. Many Thanks.
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..
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!
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.
I can’t find a standard text input area on this PSD. Am I just being a retard and not finding it?
Effing awesome. Muchas gracias
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.
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.