Creating iPhone App Icons

Like most developers I tend to be artistically challenged.  I’m not sure if it is a right brain verse left brain thing or if I traded my inner Van Gogh for dry erase whiteboard markers.  Anyway like most techies I feel more at home at the command line then in Photoshop. 

Unfortunately when developing an iPhone app battleship grey just wont cut it.  One look at Interface Builder, or any of the featured apps and you will know visual appeal is more of a requirement than an option.

Never to shy away from a challenge it is time to build my application icon.

Knowing that Apple has guidelines for everything I first wondered what format was required.  It ends up they actually need two images in different format.

  1. The first image you need is a 57px by 57px png.  This image must be called Icon.png and is used in your mobile App Store listing.
  2. Next you need a 517px x 517px jpg.  This image is used to list your application in iTunes.  Although your image must be in jpg format, the file is simply called iTunesArtwork with no file extension.

I recommend reviewing all of the details in the "The Application Bundle” iPhone Dev Center document.  You should also review the iPhone Human Interface Guidelines, and Creating Custom Icons and Images for iPhones for more details.

Given a lack of artistic talent I tried several “Online iPhone Icon Creators”.  They provided some beautiful 57px by 57px png icons.  The only catch was a 57px image no matter how good will not scale to a 512px resolution.

Having wasted a few hours on resolution issues, is seems best to create a 512px image then scale down to a 57px png.  This allows you to scale your resolution correctly.  Unfortunately to you are on your own in creating a 512px icon.  Below are a few Photoshop templates to get you started.

Handy Photoshop Templates 

  • keepthewebWEIRD has a psd template for the 57x57 application icon available here.
  • command-tab has a psd template for the 512x512 AppStore icon available here.
  • NotLost has a psd template for the 512x512 AppStore icon available here.

If you are just experimenting with an icon and wish to see what it will look like in iTunes or the AppStore I recommend trying Midnight Mobility’s iPhone Icon Polisher available here.  They provide a preview of what your standard icon will look like after the Apple process has applied “polish” to your images.  I just wish they provided for downloads in the Apple "application bundle” formats.

I’m still finishing up my icon but will post more shortly.


Post a Comment