Saturday, September 20th, 2008 at 5:09 PM
While working on some iPhone and iPod Touch apps, I found that the iPhone OS automatically masks and overlays your application icon for quick and easy development. You supply a square 57×57 pixel image, and it rounds off the corners and overlays the Mac-like gloss to create a consistent look.
When developing an icon for a Touch-based application, it’s handy to be able to see what your rendered creation will look like without going through the hassle of exporting your icon, compiling your code, and running your software every time a change is made. To that end, I present a small Photoshop file which very closely mimics the iPhone-applied mask and gloss, which you can place over top of your in progress icon layers to approximate the final result. Also, if you dislike the gloss, or have something special in mind, you can set a certain flag in the application’s Info.plist to disable the gloss… I hope my Photoshop file will help others create great looking Touch app icons!
April 4, 2009 Update
By request, I’ve added a 512×512 version of the template as well, so you can get a good feel for what your icon will look like when displayed in iTunes. Both files are now combined in a zip archive, downloadable below.
This entry was posted
on Saturday, September 20th, 2008 at 5:09 pm and is filed under Apps, Photoshop, iPod.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, trackback from your own site, or 
Stumble it!.
fmTuner: Last.fm for WordPress 
ADB Mouse Conversion 
iPod Super
Great template.
Thanks!
[...] they provided it but don’t really want you to use it.This default behavior requires designers to “fake” the glossy look on the icon and export it without that layer in PNG [...]
Hey, think you could make a 512×512 version of this as well? It would be great to add on to promotional artwork.
@Amber: I’ve updated the post to include a 512×512 version as well. Enjoy!
[...] they provided it but don’t really want you to use it.This default behavior requires designers to “fake” the glossy look on the icon and export it without that layer in PNG [...]
Great work, thank you!
[...] why I changed top colors in the end, the red was just ugly with the automatic highlight. I used these iPhone icon templates for [...]
This doesn’t seem to include the one pixel “edge” it puts all the way around the outside of the icon. Unless I’m missing something?
[...] Oorspronkelijk geplaatst door Hans2728 Ik denk dat er iets veranderd moet worden in de playlist van de applicaties. Zit ook al weken te google te zoeken, heb zelfs "thememakers" om raad gevraagd, maar tot dusver geen reactie. Ik heb uiteindelijk maar een Photoshop template gedownload, om custom icoontjes van een custom achtergrond te voorzien. Check MacThemes Forum / [PSD]iPhone Icon Template of iPhone and iPod Touch Icon Template | Command-Tab [...]
Wow thanks. Just what I was looking for =)
First of all: Very Great Job, Thanks!
Just a little thing more: the apple shiny also add a 3D effect to the iTunes icon.
So in the mask layer add the Bevel and Emboss, Outer bevel, Chisel hard, Direction Down, Size 10 px, Soften 1 px
Awesome! Thanks! But, when I saved it as .png and convertet to .ico i still got the “black frame” if you know what I mean, but I earsed background where was black in .png and it’s ok now…
Yeah, Thanks a lot !
Super useful, thanks! I ended up using this to create a standalone version for use on my blog.
When you submit the app they use the 512 x 512 icon to create the itunes store app front icon, I think the reduce the icon to 175 x 175 or something like this. Do you know what is the size of the icon on the itunes app store?
Great Template!!! Thanks.