iPhone and iPod Touch Icon Template

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!

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

iPhone and iPod Touch Icon Template

19 thoughts on “iPhone and iPod Touch Icon Template

  1. Kevin says:

    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?

    Like

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

    Like

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

    Like

  4. Hoodesr says:

    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…

    Like

  5. Spacetrader says:

    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?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s