iPad GUI PSD

Geoff Teehan
Feb 1 118

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.

Download The iPad GUI PSD Here (24MB)

(Thanks to Finn O’Hara for the photo)

118

Comments

Feb 1 12:14 pm
Satish said:

Thanks gents.

Feb 1 12:14 pm
Fernando said:

Cool!

Feb 1 12:20 pm
Richard Earney said:

If you did it in vectors does that mean there is an Illustrator version?

Feb 1 12:21 pm
Jay said:

Thanks!! Would love to see this as a Fireworks PNG, too. ;-)

Feb 1 12:29 pm
PaRnanZio Gun said:

AWESOME!!

Feb 1 12:56 pm
Goobi said:

Oh thanks a bunch for this. Will come in handy for sure!

Feb 1 12:59 pm
David Lesue said:

Thank you!

Feb 1 1:01 pm
Alex Giron said:

Thank you so much for releasing this. Very useful and much needed for iPad/iPhone App Designers.

Cheers!

Feb 1 1:04 pm
Tom Gooden said:

Well done, thanks for this great resource!

Feb 1 1:15 pm
iPad Forums said:

Wow, you guys are quick! This is exactly what I’ve been waiting for. Thanks!

Feb 1 1:15 pm
Sebastiaan said:

Why is the active state on the tab bar plain white?

Feb 1 1:58 pm
Matt Sanders said:

Thanks for releasing this but why is the active state on the tab bar just white?

Feb 1 1:59 pm
Plugo said:

Great stuff. Thanks.

Feb 1 2:03 pm
Paco_91 said:

Fantastic !!! Thanks

Feb 1 2:04 pm
andrew said:

The first thing I did was pretend to use the keyboard. I for one am tired of thumb typing! Thanks for the file.

Feb 1 2:18 pm
frijole said:

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!

Feb 1 2:21 pm
John Ellenich said:

Thanks guys! You rock!

Feb 1 2:26 pm
Juan said:

It’s great thanks!

Feb 1 2:46 pm
MacBookNero said:

Fantastic! Thank you

Feb 1 2:53 pm
yoyo said:

awesome, thanks!

Feb 1 3:02 pm
Mustafa said:

Heed this advice when using this: http://mrgan.tumblr.com/post/365509182/teehan-laxs-ipad-gui-psd

It’s utter trash.

Feb 1 3:30 pm
iPad GUI for Designers | Department of Internets said:

[...] they released its iPad counterpart; iPad GUI PSD. The PSD was constructed using vectors, so it’s fully editable and scalable. You’ll notice [...]

Feb 1 3:35 pm
Dudu Figueiredo said:

good job, keep with the updates.. ! thanks.

Feb 1 4:01 pm
Teehanlax do another bang up job with an… « Paul M. Watson said:

[...] do another bang up job with an… Teehanlax do another bang up job with an iPad GUI PSD. [...]

Feb 1 4:04 pm
Bruno said:

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!

Feb 1 4:07 pm
Start designing your iPad UI! « your usability blog said:

[...] 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, [...]

Feb 1 4:15 pm
Geoff Teehan said:

@ 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.

Feb 1 5:22 pm
iPad GUI PSD | Teehan+Lax | Daily Hot Topic said:

[...] more here: iPad GUI PSD | Teehan+Lax Posted in iPad | Tags: apple, for-it-, iPad, ipad introduction, officially-released, [...]

Feb 1 5:31 pm
Cris said:

Thank you very much! Very nice job ;-)

Feb 1 5:37 pm
Pol Moneys said:

you’ve becomed a classic. thanks for sharing.

Feb 1 6:04 pm
dave said:

Funny, the clock STILL says 4:20!

Feb 1 6:04 pm
Xande Macedo said:

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!

Feb 1 7:13 pm
denhartenweg said:

Awesome, thank you.

Feb 1 7:30 pm
oneplusinfinity » Blog Archive » iPad GUI PSD said:

[...] 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 [...]

Feb 1 7:32 pm
links for 2010-02-01 - NOWUSEIT.COM said:

[...] 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) [...]

Feb 1 9:09 pm
Peteski said:

link just downloads:

ipad-gui-psd.html

thnx

Feb 1 10:04 pm
James said:

what time is it?

Feb 2 12:34 am
Brendan Wenzel said:

You guys rock!!

Feb 2 1:40 am
David Wieland said:

I like that there is a notorious blue lego included.

Feb 2 3:35 am
Nexus said:

Thank you very much! Very nice job ;-)

Feb 2 3:59 am
Arya said:

Whowww.., your up to date. Thanks a bunch!

Feb 2 4:42 am
michael said:

nice work … well done! thx

Feb 2 4:50 am
- Chad Made Media said:

[...] UI Vector set fromtheehanlax.com 30 Coding techniques from smashing magazine and todays freebies from Artbeats.com and [...]

Feb 2 5:03 am
iPad 界面 GUI PSD 资源 | 1987 - 2017 said:

[...] Via Teehanlax [...]

Feb 2 5:04 am
CuriBOX said:

great!! thanks!

Feb 2 5:27 am
The iPad Situation Room « "…a FinalCutPro user's life" Blog said:

[...] iPad GUI for Photoshop [...]

Feb 2 6:26 am
Phillip Gibb said:

Can’t wait for the day where I can edit by the touch of a hand and not the mouse pointer

Feb 2 7:10 am
Daniel Miguel said:

Very cool set!

May use it on some mobile projects that we are having…

thanks a lot.

Feb 2 7:10 am
links for 2010-02-02 « Köszönjük, Emese! said:

[...] 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) [...]

Feb 2 9:48 am
iPadify » Blog Archive » Start Designing for the iPad today! said:

[...] 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 [...]

Feb 2 10:14 am
iPad GUI PSD | Teehan+Lax | My News Info said:

[...] 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 [...]

Feb 2 2:06 pm
Links and Bits of Activity for February 2nd » Alex Jones said:

[...] Shared iPad GUI PSD. [...]

Feb 2 2:25 pm
iPad & iPhone GUI User Interface Elements for Photoshop Prototyping – Surgeworks — Blog said:

[...] our post about this topic or download the iPad GUI PSD. Share and [...]

Feb 2 6:04 pm
links for 2010-02-02 | Visualrinse | Design and Development by Chad Udell said:

[...] 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 [...]

Feb 2 6:09 pm
J said:

Does anyone else have the urge to toke up after seeing the screenshot?

Feb 2 6:23 pm
Feb 2 7:20 pm
Iona.LABS » links for 2010-02-02 said:

[...] 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) [...]

Feb 3 2:19 pm
tapunited said:

Thank you soooooooo much!!!! You are awesome!!!!

Feb 3 10:41 pm
iPad GUI PSD Download - SaDESIGN #26 said:

[...] > iPad GUI PSD Download By santin | Posted in Mac, blog, design | Post a comment | Trackback URL « [...]

Feb 4 2:26 am
Tristan Botly said:

Wow that was quick good stuff!

Feb 4 3:21 am
Rainer said:

Thank you very much! Great!

Feb 4 4:04 am
Brance said:

Thanks!

Feb 4 6:17 am
Torbjoern Karlevid said:

Yes, it’s time to get started with the design and coding. ;)

Feb 4 9:55 am
Anders Färdigh said:

Perfect and highly appreciated! I’m always using your iPhone PSD as well…

Keep it up! ;)
/Anders

Feb 4 10:07 am
djmuzi said:

The download Link doesn’t work… :(

Feb 4 10:43 am
djmuzi said:

After opening tons of Error mennages to be clicked away… hmmm everything with your file allright?

Feb 4 11:46 am
Rabiscoframe » Guia de interface do iPad said:

[...] 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 [...]

Feb 4 12:33 pm
Tomas Lin said:

Neat, are landscape views gonna be available in a future release?

Feb 4 2:06 pm
Elodie said:

Thanks a lot !! :) Awesome !!

Feb 4 4:57 pm
Nick said:

It’s like you read my mind! This will see immediate use in my porting of my latest app, TapnScrap – http://tapnscrap.com

Feb 4 6:57 pm
Ben said:

Amazing work.
That will be very useful.
Merci!

Feb 5 12:40 am
Feb 5 4:41 am
Apple iPad GUI in PSD Format using Vectors | Design You Trust said:

[...] Read more and/or download here [...]

Feb 5 5:53 am
iA » iPad Stencil for Omnigraffle said:

[...] the iPad PSD GUI by [...]

Feb 5 11:06 am
Jim Munro said:

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.

Feb 5 2:08 pm
Apple ipad Forum said:

The UI of the ipad is not that revolutionary.

Feb 5 7:09 pm
Grace said:

You’re fast!!!

Feb 6 4:09 am
Robb said:

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?

Feb 6 8:06 am
Best of the Week #105 said:

[...] iPad GUI Photoshop template [...]

Feb 6 9:39 am
Djordje said:

10X. You’re Gods

Feb 6 12:15 pm
Joanna Pena-Bickley said:

This is awesome!

Feb 6 3:26 pm
JMB said:

If they make a stylus for the ipad im SO getting one!! Ive always wanted a cintiq but they are hella expensive!

Feb 6 5:13 pm
Jack said:

Thank you! Great work, as always.

Cheers!

Feb 6 8:48 pm
Jordi Manuel said:

Thanks for your new amazing contribution for the designers community. Great job!

Feb 6 11:02 pm
Agudo said:

Merci! Amazing work.

Feb 7 11:22 am
Adrian said:

Awesome!!!

Thank you so much!

Feb 7 1:50 pm
Dinar arieka said:

Thats good. .so awesome

Feb 7 7:40 pm
Andy Shaw said:

Just wanted to express my thanks too. keep these GUIs coming guys :)

Andy

Feb 8 8:57 am
Sveatoslav said:

Great. Thank you.

Feb 8 12:29 pm
Tyrus said:

Jeff Spicoli quote made my morning… OH, and thanks for the building these GUI psd’s, they make my job much easier. THANK YOU!!!!

Feb 8 12:35 pm
Markdvl said:

Awesome work! thanks!
I’m ready to use :)

Feb 8 1:01 pm
djavupixel said:

Thanks for this! Well I still don’t know where I am going to use it but I retweet it :)

Feb 8 1:58 pm
terol said:

Link to download does not work. it redirects back to this page

Feb 8 4:21 pm
syPhone said:

Teşekkürler…

Feb 8 10:27 pm
Terapon said:

Thanks! Cool

Feb 9 6:28 am
SomeDude said:

Hopefully these will mostly be used to make fun of this iTurd. ‘Shop on!

Feb 9 6:51 am
zur4ik said:

wow! very nice :)

Feb 10 5:46 am
Portable Genomics said:

Thanxx so much from the guys who are about to bring your genome data onto the iPad this summer. Cheers.

Feb 11 6:05 am
chribri said:

coolio! thanx

Feb 12 8:32 am
Jake said:

would it be possible to get the shadowing for a landscape view?

Feb 12 9:20 am
americanwhore said:

Wow, thanks. Can’t wait to start designing for iPad…

Feb 12 6:35 pm
Dulce said:

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!

Feb 14 4:01 am
Iskender said:

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?

Feb 18 12:45 am
Claude Gelinas said:

Such awesome work, you guys are amazing!

Thanks for sharing ; )

Feb 18 4:19 pm
werner said:

wow awesome!
thx… great work

Feb 24 4:46 pm
Wynne said:

Thank you! This is great :D

Feb 24 5:52 pm
Boris said:

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.

Feb 25 11:07 pm
Jorge said:

You guys! Thanks.

Mar 2 12:20 pm
Chris said:

Incredible detail. Thank you for this.

Mar 3 6:25 am
shyamal said:

You are great Men !! :)

Mar 4 5:10 am
flashout said:

Fantastic.. good for those planing to create their own apps. :-)

Mar 5 1:18 am
jimmy kim said:

Thank you so much! Awsome~

Mar 6 6:53 pm
Rose said:

This is really fine stuff. I hope the iPad will be availible in Germany soon!

Mar 9 3:34 am
chandra said:

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.

Mar 10 6:29 am
UI Design said:

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.

Mar 10 1:36 pm
beefon said:

Great work, thank you very much!

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