oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

Creating Photorealistic Icons for Mac OS X
Pages: 1, 2, 3

Icon genres

Applications are classified by role -- user applications, utilities, administrator's tools, and so on -- and each category has its own icon style. Now Apple says that the value for this becomes apparent when you look at icons in juxtaposition, "The Dock, for example, can contain icons of different genres. It is important to provide a clear visual indication of an icon's genre so that the user can easily classify and organize open applications."


Okay, perhaps a good idea for icons that represent files (document icons), but not such a good idea when discussing applications. Reason? If I was an icon (and in my mind I am), I would like to have my individuality represented, instead of wearing the Apple Genre uniform.

An icon is much more than a descriptor of what type of application it is (word processing, 3D, music, etc.), it is also a representation of your brand. Sometimes it represents your corporate logo and sometimes the name of your application. If every word-processing application had a pen and paper icon like TextEdit, you couldn't really distinguish one application from another. I have more to say about Icon Genres, but I am going to wait until after the WWDC.

What you will need for this tutorial

Several sheets of colored construction paper, safety scissors, paste (for snacking), an imaging program that works with pixels (for photo editing) and one that is vector-based (illustration, layering, and speed). There are numerous imaging applications to choose from, however I'll be working with Adobe Photoshop LE 5.0 and a vector-based graphics program, Adobe LiveMotion.

You can use any application you wish, although I recommend you use those that can save a file in Photoshop format. This allows you to work between applications that preserve Photoshop layers, saving you loads of time. Finally, the last thing you'll need, and the most important application that you'll find in your developer folder (at least for this article), is Icon Composer.

Icon tips

Before we start building our first icon, here are a few tips from Apple and myself.

  • Render your icons at 128 x 128. Icons are displayed at different resolutions across the entire system, so you'll want to ensure that your icons can scale well.

  • Simple images work best. Complex images with busy lines and colors will not always scale down without losing so much detail that they bleed together into one giant blur. Stick with consistent tones and gradients if possible.

  • You may want your final image to look like a photograph (the more realistic the better). Apple suggests that you do not start with an actual photograph, and instead use an illustration or 3D image to appear photorealistic (because you can control more lighting, shadow, and gradient effects with an illustration). Since many developers are not illustrators, I say use what you want, but be sure you follow my tips for working with photo-based images.

  • Avoid white icons unless you have an effective shadow surrounding the image, not just a drop shadow. Since white is the most common background color, you will find that some icons lose their detail against an all white background.

  • I do all my final composition in a vector-based imaging program for speed and testing. If the stock image you are working with already has an Alpha channel (transparency layer) you can usually skip Photoshop altogether.

  • While in your vector-based imaging application, be sure to test your icons against a variety of different colored backgrounds.

Color traps

Now that window backgrounds can be any color or pattern, it's possible that when you build your icon, if a user has a window setting the same color, it may bleed into the background making it difficult to see at any size. Your icon can also lose a lot of detail.

Apple suggests that icons should have a 3D look-and-feel with a drop shadow. The problem with some of these drop shadows is that they are commonly cast on one side of the icon. I suggest that you check the edge color of your icon against a background of the same color to make sure it will look okay. If you are determined to use an image where bleeding is possible, you should apply a slight shadow around the entire image.

Check the edge color against a background of the same color to make sure it will look OK.

Transparency traps

One thing I have found when working with any photorealistic icon, is that creating an icon with a transparent background can be deceptive. Again, although your image may look good in your imaging program on a transparent layer, or even against a white background, unless you test it against different-colored backgrounds, you may end up with a noisy, anti-aliased edge. Remember that an icon appearing in the Dock or a window may look good to you, but to another user, the final image could come out awful.

Testing icons against different color backgrounds.

The effects of trimming a few pixels from the image helps with some colors, but not all.

Adding a soft shadow behind the image makes it look good in all backgrounds.

Busy images

Beware of images that have complex patters. They'll look bad at any size, but especially when the system scales them down. Simple images work best.

Simple images work better than those with great detail.

Pages: 1, 2, 3

Next Pagearrow