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
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
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.
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
- 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
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
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
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.