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:
Monday, 1. February 2010
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).
Monday, 1. February 2010
This is amazing. Thanks so much!
Monday, 1. February 2010
Thanks so very much, amazing!
Monday, 1. February 2010
Great work!
Monday, 1. February 2010
Awesome! I was just about to try and find a template like this or put one together myself.
Monday, 1. February 2010
Thank you so much, much appreciated!
Monday, 1. February 2010
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.
Tuesday, 2. February 2010
This is awesome! Can’t wait to use this!
Tuesday, 2. February 2010
i thought you were making a desktop app for that? no?
Tuesday, 2. February 2010
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.
Tuesday, 2. February 2010
Wow, this is gold. :-)
Thanks, Sebastiaan.
Tuesday, 2. February 2010
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
Tuesday, 2. February 2010
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.
Friday, 5. February 2010
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.
Friday, 5. February 2010
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!
Saturday, 13. February 2010
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!
Thursday, 25. February 2010
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!
Thursday, 25. February 2010
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!