Screencast 1: App Icon Design and Resolution Independence

By Mike Berg / June 30th, 2010 / Game Art for Devs / 6 Comments

My debut entry to the iDevBlogADay… phenomenon? Thanks to @mysterycoconut for setting this up and organizing it. We’re in excellent company. Check out the links in the sidebar for more iPhone dev goodness.

Helping iPhone developers hate using Photoshop a little less with simple tricks that make workflows more efficient. View the rest of the screencasts in the “Photoshop for Devs” series.

This screencast covers making your App Store icon in Photoshop (I’m using CS3):

  • Using a template to start your icon right
  • How to use vector layers and position them precisely
  • Creating icons at each of the required sizes and what to watch for
  • Using Smart Layers for resolution independent files
  • Using a preview window when working on small icons

Please excuse the fan noise, and forgive the voice, I’ve had a cold. Head over to the YouTube page for the nice big HD version, if it’s hard to see.

Also note that the rectangle and rounded rectangle shape tools have this somewhat-hidden checkbox that helps to ensure your shape edges are right on the pixel-edge:

Download the PSD files referenced in the video. But if you want the right corner radius for every size, check out this great template.

Here’s the documentation on adding icons (and other graphics) at different resolutions to support the new hardware.