
Now that Apple has officially released the iPad we want to start designing for it. While Apple’s interface builder is great, it doesn’t really allow us to create custom UI elements on the fly. We decided to take a page from our iPhone GUI PSD and create one for the iPad.
The PSD was constructed using vectors, so it’s fully editable and scalable. You’ll notice there are a few new UI elements as compared to the iPhone interface. The workable screen design is formatted to 768×1024 so anything you design in the Photoshop file can easily be brought over to the SDK.
It’s 1.0 so I’m sure we’ll notice missing elements as we begin to use it. We’ll perodically update it to include new elements as we notice them or as they become available through any SDK updates.
If you like it or use it, help us out by retweeting it.
(Thanks to Finn O’Hara for the photo)
Thanks gents.
Cool!
If you did it in vectors does that mean there is an Illustrator version?
Thanks!! Would love to see this as a Fireworks PNG, too. ;-)
AWESOME!!
Oh thanks a bunch for this. Will come in handy for sure!
Thank you!
Thank you so much for releasing this. Very useful and much needed for iPad/iPhone App Designers.
Cheers!
Well done, thanks for this great resource!
Wow, you guys are quick! This is exactly what I’ve been waiting for. Thanks!
Why is the active state on the tab bar plain white?
Thanks for releasing this but why is the active state on the tab bar just white?
Great stuff. Thanks.
Fantastic
Thanks
The first thing I did was pretend to use the keyboard. I for one am tired of thumb typing! Thanks for the file.
This looks awesome, thanks! I’ve used the iPhone one extensively, and it has been amazingly useful, so I look forward to this doing the same!
Thanks guys! You rock!
It’s great thanks!
Fantastic! Thank you
awesome, thanks!
Heed this advice when using this: http://mrgan.tumblr.com/post/365509182/teehan-laxs-ipad-gui-psd
It’s utter trash.
[…] they released its iPad counterpart; iPad GUI PSD. The PSD was constructed using vectors, so it’s fully editable and scalable. You’ll notice […]
good job, keep with the updates.. ! thanks.
[…] do another bang up job with an… Teehanlax do another bang up job with an iPad GUI PSD. […]
Amazing, thanks!
Though, the “Slide to unlock” bar miss a little button on the right (I guess a “start-slide-show” button or something like that). You can see it at the beginning of the video on Apple website.
Cheers!
[…] 1, 2010 in Uncategorized I just want to share this with you guys as it looks very useful for mocking up iPad UIs. It’s called the iPad GUI PSD, […]
@ Richard Earney: Sorry, the vector elements were created in illustrator and imported in as smart objects in Photoshop. There is no Illustrator version.
@ Sebastiaan: Our mistake, it shouldn’t be white. We’ll change it to blue in the next version along with a few other clean ups.
@Mustafa: Thanks for pointing that post out, we had no idea the iphone one had similar deficiencies as this one. We’d happily clean it up but need a little more detail as to what needs fixing.
@Bruno: Good catch, it’s on the list for the next update.
[…] more here: iPad GUI PSD | Teehan+Lax Posted in iPad | Tags: apple, for-it-, iPad, ipad introduction, officially-released, […]
Thank you very much! Very nice job ;-)
you’ve becomed a classic. thanks for sharing.
Funny, the clock STILL says 4:20!
This is great guys! I have a question: do you know where can I find a similar PSD for the BlackBerry Bold? You would save my day!
Awesome, thank you.
[…] Teehan has released the iPad GUI PSD. These comps are great to have in a designers back pocket. Also make sure you download the iphone […]
[…] iPad GUI PSD | Teehan+Lax Now that Apple has officially released the iPad we want to start designing for it. While Apple’s interface builder is great, it doesn’t really allow us to create custom UI elements on the fly. We decided to take a page from our iPhone GUI PSD and create one for the iPad. (tags: photoshop gui apple resources design ui development app psd ipad) […]
link just downloads:
ipad-gui-psd.html
thnx
what time is it?
You guys rock!!
I like that there is a notorious blue lego included.
Thank you very much! Very nice job ;-)
Whowww.., your up to date. Thanks a bunch!
nice work … well done! thx
[…] UI Vector set fromtheehanlax.com 30 Coding techniques from smashing magazine and todays freebies from Artbeats.com and […]
[…] Via Teehanlax […]
great!! thanks!
[…] iPad GUI for Photoshop […]
Can’t wait for the day where I can edit by the touch of a hand and not the mouse pointer
Very cool set!
May use it on some mobile projects that we are having…
thanks a lot.
[…] iPad GUI PSD | Teehan+Lax Now that Apple has officially released the iPad we want to start designing for it. While Apple’s interface builder is great, it doesn’t really allow us to create custom UI elements on the fly. We decided to take a page from our iPhone GUI PSD and create one for the iPad. (tags: photoshop gui design interface ipad psd resources) […]
[…] for the iPad straight away. They’ve taken a page from their iPhone GUI PSD and created one for the iPad too. So now you can see how your designs will look with a nice shiney gradient bezel around […]
[…] iPad GUI PSD | Teehan+Lax Now that Apple has officially released the iPad we want to start designing for it. While Apple’s interface builder is great, it doesn’t really allow us. Read the original here: iPad GUI PSD | Teehan+Lax […]
[…] Shared iPad GUI PSD. […]
[…] our post about this topic or download the iPad GUI PSD. Share and […]
[…] del.icio.us iPad GUI PSD | Teehan+Lax iPhone CSS?tips for building iPhone websites ? CSS The World is Moving to HTML5 iPhone Source Code […]
Does anyone else have the urge to toke up after seeing the screenshot?
[…] for an iPad GUI PSD? Here you go: http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/ […]
[…] iPad GUI PSD | Teehan+Lax Scalable vector templates for designing iPad UIs? Well, I may just take you up on that. (tags: ipad iphone_development) […]
Thank you soooooooo much
! You are awesome
!
[…] > iPad GUI PSD Download By santin | Posted in Mac, blog, design | Post a comment | Trackback URL « […]
Wow that was quick good stuff!
Thank you very much! Great!
Thanks!
Yes, it’s time to get started with the design and coding. ;)
Perfect and highly appreciated! I’m always using your iPhone PSD as well…
Keep it up! ;)
/Anders
The download Link doesn’t work… :(
After opening tons of Error mennages to be clicked away… hmmm everything with your file allright?
[…] criar muitas customizações a empresa de user experience Teehan+Lax lançou a primeira versão do iPad GUI, uma biblioteca com os elementos de interface do […]
Neat, are landscape views gonna be available in a future release?
Thanks a lot !! :) Awesome !!
It’s like you read my mind! This will see immediate use in my porting of my latest app, TapnScrap – http://tapnscrap.com
Amazing work.
That will be very useful.
Merci!
[…] iPad GUI PSD […]
[…] Read more and/or download here […]
[…] the iPad PSD GUI by […]
[…] Website: http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd […]
Nice, thanks for sharing…
It will be interesting to see how these UI design elements will pop up in unexpected places, outside of the iPad.
The UI of the ipad is not that revolutionary.
You’re fast
[…] Link: http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/ […]
Does anyone know if it’s possible to get this to open properly in GIMP? I can open it, but the buttons don’t display correctly?
[…] iPad GUI Photoshop template […]
10X. You’re Gods
This is awesome!
If they make a stylus for the ipad im SO getting one!! Ive always wanted a cintiq but they are hella expensive!
Thank you! Great work, as always.
Cheers!
Thanks for your new amazing contribution for the designers community. Great job!
Merci! Amazing work.
Awesome
Thank you so much!
Thats good. .so awesome
Just wanted to express my thanks too. keep these GUIs coming guys :)
Andy
Great. Thank you.
Jeff Spicoli quote made my morning… OH, and thanks for the building these GUI psd’s, they make my job much easier. THANK YOU
!
Awesome work! thanks!
I’m ready to use :)
Thanks for this! Well I still don’t know where I am going to use it but I retweet it :)
Link to download does not work. it redirects back to this page
Teşekkürler…
Thanks! Cool
Hopefully these will mostly be used to make fun of this iTurd. ‘Shop on!
wow! very nice :)
Thanxx so much from the guys who are about to bring your genome data onto the iPad this summer. Cheers.
coolio! thanx
would it be possible to get the shadowing for a landscape view?
Wow, thanks. Can’t wait to start designing for iPad…
Thank you for sharing. You just read our mind since we are planning to develop some apps in iPad. This is very handy! Keep up the fabulous work, guys!
Hi, this stuff is cool but I can not download at all. When I click the link or save the linked file it downloads only a couple of KBytes. iPhone’s GUI PSD file also the same. How can I download it? Is link is broken?
Such awesome work, you guys are amazing!
Thanks for sharing ; )
wow awesome!
thx… great work
Thank you! This is great :D
Thanks a lot! This is awesome. I’m quite new to Ps and I learned so much just by taking a look at how you’ve done this GUI.
You guys! Thanks.
Incredible detail. Thank you for this.
You are great Men !! :)
Fantastic.. good for those planing to create their own apps. :-)
Thank you so much! Awsome~
This is really fine stuff. I hope the iPad will be availible in Germany soon!
This is good. Your efforts and generous attitude are an embodiment of the true spirit of the Web. An abundance mentality, rather than scarcity.
Thank you. I’m writing a book and your images help a lot. If it goes to publication, I will certainly record an attribution to you and your Website.
that’s really a fantastic post ! added to my favourite blogs list.. I have been reading your blog last couple of weeks and enjoy every bit. Thanks.
Great work, thank you very much!
Let me just say, I think you are the dopeness. Thank you so very much!
I used your iPhone GUI, so I’m ecstatic that you took the time to do the iPad.
Rock on my Creative gods. Rock on. ;*
you are awesome….
goodworks
thanks a lot.
GREAT!
You even thought of the ‘unsupported flash Lego-block’!!
Seriously. You guys have saved me hours with these GUI psd’s. Can’t thank you enough.
Gracias! Very helpful. Would have paid 20-40 dollars for this.
Great!
And you can use it in combination with this.
Awesome! Thanks
Amazing, this completes my ipad prototyping tools, thanks you soo much!
My blog has some tutorials and a drawings pdf to make a model ipad for paper-prototyping. (you tube: ipad model)
With the GUI template I can finally make a few screens look good, and pre-load the model to get some realistic feedback
cheers!
Any chance someone has the iPad’s video play icon as a png file?
Thanks much! Great work here.
Thanks
Awesome!
Thanks !! Very very thanks
Awesome work! Used it on my wallpapers page.
http://bennihahn.com/wallpapers.html
Used on this Article : http://collegeparenting.com/all-about-the-ipad.html
… ohh man, cannot wait to get an iPad of my own! :) But seriously, thank you guys at teehanlax for this download!
You guys are awesome.
I’m just a kid so don’t lose it on me.
I down load file an open it is photoshop but it is just a flat image. How do I release the layers?
Thanks Dude !! Great Work and Awesome Sharing !!
Thanks as always. Your team really puts out some great template tools.
Do you also have customers asking for work to be done on a BlackBerry? I see iPhone, iPad and Palm Pre templates … it would be great if there was a template for BlackBerry devices as people (myself included) do get requests for BB design work and it would be great if there was such a template.
again. thanks for the template.
This is an excellent template to use and I will be posting some ideas on how to use this on my website this weekend. The gameboy advanced or PSP would be something great to find because I could think of some ways to use this PSD. This is what inspires people to look for new creative ideas on sites like these. Keep up the great work!
This is awesome! Just what I was looking for. Thanks!
Download The iPad GUI PSD Here (24MB) Link is not working
Hi, i work as a UI design this has helped me show clients the finished product. THANKS.
Neat! Thanks.
Thanks so much. Mad respect.
James
Elemental Interactive
Download The iPad GUI PSD Link is not working
The iPad UI PSD download link is no longer working. Do you have a working link or perhaps a 3rd party file sharing service that has the file for download?
Thanks so much for this guys! Huge help is design work for iPad! ;)
Works for me… just tried it.
Those who are having problems, can you open the following link in a new window and attempt the download again?
http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/
As Jon said… it should be working (and is when we test it). Let us know if you’re still having problems
Nice Job guys!! Found one thing it is missing. On the iPad, if you open up the music app, you’ll see the bottom button bar “Songs Artists Albums Genres Composers” It is a light gray gradient bar, with a dark gray button for whichever view is selected.
the time in the status bar should be 9:41am:
http://www.tuaw.com/2010/04/12/9-41-9-42-the-secret-of-apples-reoccurring-numbers/#continued
;)
J
I guess they call it the Segmented Control per the iPad Human Interface guidlines, i.e. pg. 21, 48
where are the pressed states for the buttons
Nice template!. Am just confused about the resolution. The file is set to 72 ppi, but shouldn’t it be 132 ppi? That would change all parameters.
great work, thanks!
EXCELLENT! Thanks!
I opened this in Fireworks and saved it as a PNG. All elements remained editable. This is very cool.
I think http://finnohara.com stole the favicon from http://feltron.com ?
Here is a collection of 6 Photoshop Actions for product designers and UI/UX developers. You feed these Actions your iPad screenshot and it will spit out a glossy hi-res product shot of your app on the iPad. Six angles to choose from, over 36 combinations. Perfect for printing or posting to your website.
http://www.36pix.com/jesuspad-actions-for-photoshop/
Thanks! will be a great time saver!
Thanks this rocks!
good people make good things.
A great, GREAT time saver! thanks!
I second IA’s comment above …
Shouldn’t this file be at 132 ppi instead of 72 ppi?
Changing the ppi is a 5 second change in Photoshop but it’s a meaningless exercise since you still have a fixed number of pixels to work with.
It’s a brilliant file but I seem to be having importing compatability issues in Adobe 7?
yeah would love a true vector file (.ai or .eps)
hard to use this for print since i’m limited to about 5” at 300ppi
Nevermind, found one here: http://kaishinlab.com/free-vector-ipad/
This is amazing! You guys rock.
Amazing!! It will save a lot of time.
What a template! Great job and thanks!
what’s the license on this?
many thanks
!
Amazing……………
Thanks…..
great template
Score! Thanks!!
this is amazin
thank you
I Love you both of you
!
Thanks for Nice Stuff!
Grüße
wow, coooooooolllllllllllllllllllll
thank you :)
This post is featured on 40 iPad tools, tips for designer
Thanks again
Thank you very much for your work!
Good work! Useful file! :D
This will be very helpful in both my website and of course apple development, thanks very much :) top notch
Fantastic thanks
I need a font- helveticanue black. Pls send me :)
Wow, astonishing. Under which license do you offer the file?
Thank you so much! This is great! :)
Ohhhh Yes!!
Are there any costs associated with using this file?
Or license fee?
I saw this statement but want to make sure it’s OK.
“If you like it or use it, help us out by retweeting it.”
Great resource !
@Marcel Thanks for the link !
You are a life saver, We just received this project where we needed to create an application for ipad, and you posted the much necessary source file. Thank you for the effort.
Greenolivz Team (www.greenolivz.com)
awesome, thanks!
GREAT WORK—Thanks for posting!—Kevin
why are you so good to us? thanks! :D
Could we use this as a template to make an App for our Magazine? Is there such a thing as a template app for a magazine? Designing our own from scratch sounds like a very difficult thing to do? Cheers Alex
so good
!!
thanks a LOT for this, you just saved me SO much time!
I would love to see the vector version released.
Also high five for 4:20. Heh.
Thanks this is very useful. Great job !
Brilliant, thanks for posting this – a great help. :)
This is great guys. Could you join our Facebook Group for designers and developers creating content for the iPad? We’d love your input! http://ow.ly/28Y9w
Cheers again dudes, nice work.
I am getting errors (eg: Unknown data has been encountered reading layer “wifi icon” and will be discarded) opening the PSD in Photoshop CS2 9.0 on a WIN-XP machine. Do I need a newer version of PhotoShop?
Thanks for your help.
This was more than useful and I’ve had no problems with the latest version, CS4.
Perfect! Just what I was looking for.
Many thanks
Lewis
These are awesome, Thanks =]
Awesome! So much better than the Apple design interface. Can’t wait to try this out. Thanks again guys!
Nice that we will be able to customize the PSD. What a great looking GUI. Sweet
Thanks a lot for this guys, its brilliant!