Taking the time

Designing icons is more than just making an image and shrinking it down to a couple of standard sizes. There are a lot of things to consider, even after you've decided what the icon should represent. Icons don't just sit there looking pretty, they're user interface elements, which means users don't just look at them, they interact with them. They use them. Icons get dragged, and dropped on. They get displayed in lists or on grids. They go on disks, in docks, in folders, and on toolbars. They can be grouped with other icons made by other people. You have no control over this. All you get to control is your icon, so it's your responsibility to try to make sure it looks good under any of those curcumstances.

I'd like to offer some guidelines which I believe will help you to achieve this goal. Some are more firm and universal than others, but they're all based on experience and observation. The focus here is more conceptual than technical; the actual process of creating an icon file or resource is another topic altogether.

Having said that, the first item on the list is somewhat technical.

Design the sizes separately

In a Mac OS X icon, there are three sizes to worry about: Thumbnail (128), Large (32), and Small (16). Technically, it's possible to add two other sizes, but you won't need them.

The Huge (48) size is not very important because you can almost always just let the system scale down the Thumbnail size and it will look fine. The Mini (16x12) size was only used by the system in a couple of specific places in Mac OS 8 and 9, so you can pretend that just doesn't exist.

Generally you will start with the Thumbnail size, and then shrink it down to the smaller sizes. One of the keys to good icon design is not to just shrink them and leave it at that, but actually go in and tweak them, emphasizing outlines and removing unneeded details, or even totally reconstructing the icon. Otherwise there's no point in adding the smaller sizes at all; you may as well leave them out and let the system shrink them.

Take a look at the OS X Network icon in its various sizes. If you were to take the Thumbnail size and shrink it down, you'd lose all the little lines which are what make the icon say "network" instead of just "globe". Apple's actual 32x32 icon preserves these details. Sometimes you can achieve this by using Photoshop's Sharpen filter to enhance the details, but in many cases that wouldn't work because the details are just gone.

All of the OS X icons that I have designed were done with Photoshop's path tools, which makes it very easy to tweak the small sizes. After I shrink the path, it's often a matter of just nudging a few anchor points to line up with the pixel boundaries, yielding nice clear boundaries. If some of the minor details aren't clearly visible at the smaller size, I just delete the path.

Keep the overall design simple

Having a 128x128-pixel area to work with can be a great freedom, but there is a trap which people sometimes fall into: you get carried away, and end up with something that will be totally unrecognizable when you shrink it down to 16x16.

When you do the initial design, it has to be something that will scale well. Now, this does not mean that you shouldn't put a lot of details in the Thumbnail icon. You can, but they must be details that can be removed without changing the overall design and meaning of the image. For example, you can almost read the text on TextEdit's RTF text document icon. At smaller sizes, the text just becomes little lines, but they still mean the same thing. The design of the icon remains identical at every size, and it's also just as recognizable.

Actually, if you go to an Apple Store, they have high-resolution versions of all the icons in their window displays, and you can find out what the text really says.

Avoid cropping

Maybe this is just one person's opinion, but I think it looks better when a design doesn't call the user's attention to the icon's bounding rectangle. Now, granted, you only have a certain size and shape to work with; that's an unavoidable technical limitation. But there's no reason to remind the user of technical limitations. An icon should look like its shape is defined by its own content, without worrying about imposed limitations.

In particular, it's one of my pet peeves when the Small version of an icon is just a cropped rendition of the Large version. Even if the cropping is carefully chosen (which isn't always the case), it's a sign that the icon could have been better.

Follow the standards

Apple has just about always had guidelines on how icons should look. There are two main reasons to follow them. First, these rules are not arbitrary. They are based on a significant amount of research and experience. Second, a user's first experience will be with Apple's own icons, and they will expect other icons to be consistent with those. So you should seriously consider following the rules, at least in part.

This does not mean that your icons shouldn't stand out, or that they have to look like they were made by Apple. The Aqua icon guidelines focus mainly on composition, which leaves quite a bit open. Here are some of the main points from Apple's guidelines:

• It should be immetiately clear what kind of thing is represented - if it's an application, is it a document-based application, or an accessory, or a utility?
• Icons for document-based applications should indicate the document type and an analogous tool, such as a pencil and paper, or a camera and pictures.
• The icon's perspective (and shadow, if any) should agree with how you deal with the analagous object in real life. Does it hang on the wall or sit on a shelf (at eye level), or sit on a desk (below eye level)?
• Avoid making icons that look like other interface elements. Note that very few of the standard Aqua icons use the "gumdrop" style seen in the Aqua buttons. The exceptions are iTunes and iChat, and I personally would argue that they should be changed to follow this rule.

On the other hand, there are situations where a more non-standard, abstract design is called for. You may have a logo that is very recognizable and tightly associated with your product and its function. For example, the Sherlock icon looks like it's used for examining or finding hats, but the user understands not to take it literally. Or perhaps your product may do something that just doesn't have a real-world counterpart. In such cases it may be a waste of time to force your icon concept to fit into Apple's mold, but that doesn't mean you should ignore all the other guidelines.

Use shadows well

I want to put particular emphasis on one point from those Apple guidelines: if you're going to have a shadow, it must match the three-dimensional shape you're trying to recreate. In many cases, simply applying Photoshop's Drop Shadow layer effect to the entire thing is only going to make it look flatter.

The correct shadow can make all the difference in how an object is perceived. In the illustration to the left, the "sphere" itself is exactly the same in all three versions, but the shadow is doing most of the work of defining the object's shape and its relationship to its environment.

A good on-the-floor shadow takes more work, especially with this sphere that's supposed to look somewhat translucent. The sphere shadows here were done in two layers: one for the base shape, and another to reinforce the edges. The "on a floor" icon also has a third shadow layer to darken it around where the sphere touches the floor.

One last detail to keep in mind is that in OS X, the light source angle is 90°, as if there were a light directly over the user's head (back in the OS X beta, when the Apple was in the middle of the menu bar, they said to think of that as the light source). This is different from the standard in OS 9, where the light came from the top left corner of the screen. Photoshop's default light source is at 120° (which doesn't match either one), so you'll have to remember to change it in every new document.

In practice: Redesigning Icon Machine

My original design for the Icon Machine 3.0 icon was based on the previous 2.0 icon, but drawn in a different style which was easier to adapt to a wide range of sizes. But after a while I realized that there were a few problems with the design. One of them was that it had too many elements, too many things in it. This made the Small size hard to understand, and even at full size you might not know what it was supposed to be if you weren't familiar with the old icon. Another thing that bothered me about it was that almost every element was cut off at the edge of the icon, which made it look confined and constricted. So it was time to try something new.

I decided to make it more like the standard OS X application icon. I had resisted the idea originally because I thought Apple's "paper with a tool on it" rule was too narrow, but in this case it worked out really well. Using a gear as the tool may be a bit questionable, but really it's hard to come up with an image that says "icon editor" without needing any explanation. So I may as well be a little abstract.

This new design solved all of my complaints with the old icon, giving me something that I was much happier with. The design is simpler: basically two elements, the paper and the gear. No more cropping. And the image pretty clearly indicates that it's a somewhat technical graphics or image-editing program, which is about as close to "icon editor" as I can get without losing precious simplicity.

Another plus was that, even though it was a more standard design, it still had a distinctive style - sort of cartoony-illustrative rather than Apple's "photo-illustrative." I once went to an Apple-hosted Icon Design Kitchen, and when the Apple representative there saw my icon, he quickly pointed out to everyone else that a photo-illustrative style is not necessary to make a good icon. Another thing I like about the style I chose is that it reinforces the simplicity rule; if I made something too complex, the style itself makes it look bad event at a large size. Also, having a unique style gave me something to work with as I started making OS X versions of my other products - even though they're not functionally related to Icon Machine at all, I now have a visual style that ties them all together.

And In Conclusion

Of course, the bottom line is they're your icons and you can do what you want. This is art, and there are no absolute rules. But most of the rules work most of the time, and you can usually follow them and still stand out with your own design and style.