01 Feb iPhone / iPad icon PSD template

Update: Get the updated version.

As there’s a tendency lately to release lots of (often less-than-pixel-accurate) PSD templates of iPad UI elements, I’ve decided to work with my good friend, Sean Patrick O‘Brien to create a PSD based off the exact overlays, outlines, and masks the iPhone and iPad OS use to mask icons.

This lets you preview the pre-supplied gloss, or modify it. It’s made up entirely of shape layers and layer effects and should be completely pixel-accurate. If you use it, credit is welcome — it’s not required, though.

I’d appreciate it if you let others know about the PSD if you grab it. Tweet this or blog it. Thank you!

iPhone Resource will obviously have templates like this with actual sample icons (and some recreated Apple icons) once it’s out. Consider this a small goodie until iPhone Resource and Composition is out (yes, the latter is in development, but it’ll take much longer than expected).

Related:

    iPhone 4 icon PSD file

    I've updated the iPhone / iPad icon PSD I released not too long ago with some fixes and a 114x114 pixel icon template for designing icons for...

    Here, Icon Icon!

    A while ago Buck Wilson, the designer in a small team of Portland-bound guys, contacted me about icon design for Here, File File!, an iPhone app...

    Designing Warships

    Warships, a game designed by me and developed by the Canadian Edovia is now available on the App Store. It's a great, simple game of naval...

    Composition

    As I alluded to earlier today, Sean Patrick O‘Brien and I are working on the very first Mac application that will be released under the Cocoia...

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

47 Responses

  1. 1
    sebastiaan 

    By the way, its contents are:

    - 512 pixels, iTunes Store style (Caution: very ugly. Talk to Apple about that, not me.)
    - 512 pixels, iPad style (either have different overlays. Who’d have thought?)
    - 512 pixels, iPhone style.
    - 72 pixels for iPad home screen.
    - 57 pixels for iPhone home screen.
    - 48 pixels for iPad Spotlight (with Spotlight background).
    - 29 pixels for iPad / iPhone Settings and iPhone Spotlight (with both backgrounds).

  2. 2
    Armin 

    This is amazing. Thanks so much!

  3. 3
    nanochrome 

    Thanks so very much, amazing!

  4. Great work!

  5. Awesome! I was just about to try and find a template like this or put one together myself.

  6. Thank you so much, much appreciated!

  7. 7
    riddle 

    I love Layer Styles on vector shapes. I wish people would only use them, but I understand it takes some skill to do a “dynamic” version of a bitmap.

  8. 8
    Joshua 

    This is awesome! Can’t wait to use this!

  9. 9
    Bandar 

    i thought you were making a desktop app for that? no?

  10. 10
    Andy 

    Any iPhone designer/developer really needs to check out a Mac graphics app called ‘Opacity’. It has live previews of all the icon styles, and will generate all the sizes from one document. Can’t recommend it enough.

  11. 11
    Marcel 

    Wow, this is gold. :-)

    Thanks, Sebastiaan.

  12. 12
    Bob Vork 

    Hi Sebastiaan,

    Great set, but I’m having some trouble with the iPhone icon. I used the vector mask to preview my icon, but the final image on the iphone has slightly different corners. Not sure if I can embed pics here, but here is an url to a small example (and a shameless plug for our iPhone app ;) )

    http://img.skitch.com/20100202-rux4dmkxmi23h3m2rg59sd7qrw.jpg

  13. 13
    sebastiaan 

    Bob: This is due to the rounded rectangle’s corners being cut twice. I suggest making the icon square, and then letting iPhone OS cut it out for you. These masks simply allow you to preview.

  14. 14
    Armin2 

    Wow…Nice!
    Do you could publish the psd wihout groups or sets? ‘Cause I only own PSE, I have not so much money to buy me Photoshop.

    Thanx.

  15. 15
    sebastiaan 

    Armin: You can get the Photoshop trial from the Adobe website for free and reduce the groups for a fraction of the work I put into this PSD. Just a tip!

  16. 16
    Andre 

    Wow, awesome! Great work, Sebastiaan! Thanks for sharing.

    I would like to ask you one question: I always believed, icons or the whole interface for the iPhone should have a 163 dpi (3G and 3GS) resolution instead of the normal 72 dpi?
    Am I right with this?

    Thanks for answering!

  17. 17
    Jesse 

    Andre, it doesn’t matter. Think of dpi only mattering for print. Yes the iPhone has a denser screen than say your monitor (which is still probably much higher than 72ppi), but changing the dpi won’t affect anything. Just worry about the pixels.

    Thanks Sebastiaan and Sean for the PSD!

  18. 18
    Calvin 

    This is an awesome resource, and I appreciate you making it free for us. It’s a nice gesture, and makes it even more likely that I’ll be signing up on the IconResource! By the way, do you have any libraries of icons/images related to shopping? I’d like to present my users some icons that describe different shopping categories, but I don’t want to design them all myself! :-) Thanks!

  19. 19
    Bruno 

    Thanks for this psd Sebastiaan, very helpful.

  20. 20
    shod4n 

    Oh yea, this is what I was looking for. Thx for this!

  21. 21
    Ian 

    Great work, thanks a lot!

  22. 22
    Bryan 

    Thanks for the template! It helps a lot esp. this is the 1st time I work on an iPhone icon project.

    Do you have plans to update it for iPhone 4 icons? Hope so ;)

  1. [...] Tremendous: 3-Minute iPad Keynote The clean energy potential in our backyarddeliciousCocoia Blog iPhone / iPad icon PSD templateObamas 2011 Budget Proposal, Department by Department – NYTimes.com20 Years of Adobe Photoshop | [...]

  2. [...] 4) iPhone/iPad icon PSD template – free [...]

  3. [...] iPhone / iPad icon PSD template I’ve decided to work with my good friend, Sean Patrick O‘Brien to create a PSD based off the exact overlays, outlines, and masks the iPhone and iPad OS use to mask icons. [...]

  4. 26
    UI Design für das iPad (via Pingback)

    [...] (wobei diese derzeit nur zum Wireframing verwendet werden sollte). Im Cocoia Blog gibt es ein iPad Icon Template sowie einen schönen UI [...]

  5. [...] iPhone / iPad icon PSD templateEin Template für iPhone/iPad-Icons. [...]

  6. [...] iPad GUI PSD | iPhone / iPad icon PSD template [...]

  7. [...] the PSD template file from Cocoia [...]

  8. [...] via Cocoia Blog [...]

  9. [...] Cocoia has been generous enough to share a downloadable Photoshop PSD template for iPhone and iPad icons, [...]

  10. [...] · Reply · View karjalankarhu: Here’s something look for iPad icon templates http://blog.cocoia.com/2010/iphone-ipad-icon-psd-template/ 2010-02-05 22:40:03 · Reply · View kalfields: @MzDommie Really nigga? You really [...]

  11. [...] Next, Cocoia has been generous enough to share a downloadable Photoshop PSD template for iPhone and iPad icons, everything from giant 512×512 to standard iPad and iPhone sizes, to iPad Spotlight and menubar variants. [...]

  12. [...] Cocoia Blog » iPhone / iPad icon PSD template – [...]

  13. [...] pack of iPhone and iPad icons templates from Cocoia which is helpful to be able to check how your icons will look exactly in iTunes and on device. The pack consists of (citing from Cocoia): – 512 pixels, iTunes Store style (Caution: very ugly. Talk to Apple about that, not me.) – 512 pixels, iPad style (either have different overlays. Who’d have thought?) – 512 pixels, iPhone style. – 72 pixels for iPad home screen. – 57 pixels for iPhone home screen. – 48 pixels for iPad Spotlight (with Spotlight background). – 29 pixels for iPad / iPhone Settings and iPhone Spotlight (with both backgrounds). [...]

  14. [...] Ipad Icon PSD [...]

  15. [...] Cocoia – iPhone/iPad icon design template [...]

  16. [...] Templates (not for production, thanks to Nick Lockwood for the .psd templates): iPad icon template: http://blog.cocoia.com/2010/iphone-ipad-icon-psd-template/ iPad GUI template: http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/ iPad Omnigraffle [...]

  17. [...] / iPad icon PSD template Cocoia posts the good stuff, as [...]

  18. [...] wir heute Mittag auf das iPad-PSD verwiesen (praktisch für die Anfertigung von PR-Material), und hier im cocoia-Blog gibt es eine Photoshop-Vorlage zum Bau eines iPad-kompatiblen Icons. This lets you preview the [...]

  19. [...] Interface Designer Sebastiaan de With hat in seinem Blog cocoia zusätzlich ein PSD-Template für iPad/iPhone-Icons bereitgestellt. Dort findet man zusätzlich eine lehrreiche Zusammenstellung von Informationen [...]

  20. [...] if you want to create an icon for your theoretical app, here’s the icon PSD; Apple’s design elements are also available as a vector kit. Obviously, I didn’t [...]

  21. [...] man sich ein wenig Zeit beim Gestalten des Icons für die eigene iPad-App sparen will, bekommt bei blog.cocoia.com ein kostenloses Template. Zum [...]

  22. [...] Here’s a handy template for your iPhone and iPad icon design needs: [...]

  23. [...] 原網址 : http://blog.cocoia.com/2010/iphone-ipad-icon-psd-template/ [...]

  24. [...] http://blog.cocoia.com/2010/iphone-ipad-icon-psd-template/ [...]

  25. [...] iPhone / iPad Icon Kit [...]

Trackbacks

  1. === popurls.com === popular today
  2. iPad Neighborhood » Blog Archive » iPad icons showing up all over the internet
  3. almost effortless » Weekly Digest, 2-1-10
  4. UI Design für das iPad
  5. Linkeria (2. Februar) » der tag und ich
  6. [IPAD] Apple iPadのGUIやアイコンのPSD - mBlog
  7. iPhone & iPad Icon Template from Cocoia | Mac Fanatic
  8. Juan Sanchez» Blog Archive » iPhone/iPad Icon PSD Template
  9. iPad GUI Design Recommendations, Templates, and Galleries | TalkiPhoneNow.Com
  10. »TwGallery.Com » Icon as of February 6, 2010
  11. abouttheiPad.com » Nice iPad GUI design resources
  12. Juan Sanchez» Blog Archive » Bookmarks from February 4th through February 8th
  13. Injoit.com iPhone developers’ blog - iPad GUI PSD template and icon overlay template
  14. Unetik » The Ipad developer’s toolbox
  15. MacWorld Expo 2010 Overview | PHP-Princess.net
  16. iPad UX design, articles, resources & insights | Rick Williams
  17. iPhone / iPad icon PSD template | dv8-designs
  18. iFUN.de/iPhone :: Alles zum iPhone − Photoshop-Tipps und mehr: Apple lässt sich iPad-Applikationen einreichen, besteht auf große Screenshots
  19. iPad: Info-Quellen und Tools für iPad-Entwickler » t3n News
  20. Helpful resource: iPad & iPhone PSDs « NoFilmSchool
  21. Kostenloses Template für iPad Icons | Bonapp.net
  22. Icon template at Under The Bridge
  23. 2Ctalk » Blog Archive » IPhone/IPod ICon psd template – IPhone/IPod 圖標 Psd 版模
  24. iPhoneアプリのデザインに使うPhotoshopテンプレート
  25. iPhone App Design Workflow For Designers | Freelance Web Designer // Authentic Style Blog
Leave a Reply