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:
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).
This is amazing. Thanks so much!
Thanks so very much, amazing!
Great work!
Awesome! I was just about to try and find a template like this or put one together myself.
Thank you so much, much appreciated!
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.
This is awesome! Can’t wait to use this!
i thought you were making a desktop app for that? no?
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.
Wow, this is gold. :-)
Thanks, Sebastiaan.
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
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.
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.
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!
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!
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!
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!
Thanks for this psd Sebastiaan, very helpful.
Oh yea, this is what I was looking for. Thx for this!
Great work, thanks a lot!
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 ;)