Command-Tab

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 57x57 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 512x512 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.