One of the most important aspects of a website / application is it’s icon. It’s what the public is going to associate with your website. If your icon sucks, then the perception of your website will suffer along with it.

The first thing you need to ask yourself when you create your icon, is what do you want the “theme” of your icon to be? Usually, you want it to reflect what your website or product does. For example, if you have a website called “painters international”, you might have a globe that’s actually a paint can, or have a paint brush painting a map of the world.

I can’t stress enough how important it is to design your icon around a good theme. If your icon makes no sense, people won’t know what your website does. Same goes for application icons. If you have a shiny USB key as your icon, and your app is a web browser, people won’t know what to do.

Taking a look at some well-designed icons

The first icon we’ll take a look at is the icon for Times, a RSS reader for OS X.

The Times icon is a great example of good icon design. Just from looking at it, you get a good idea of what the app does. In this case, it displays RSS feeds in a newspaper-like format.

As well, the icon is polished, with no visible errors. Too often you end up seeing icons with jagged edges, or stray pixels around the edges. Not so here, you can tell a great deal of work has gone into it.

Finally, this icon follows Apple’s Human Interface Guidelines. The icon is framed properly, and pretty much square. It looks as if the camera was on a 30 degree angle from the ground plane. Also, the reflections are correct, and the icon looks to be 3d, so it blends in with other Apple icons.

Next we’ll be taking a peek at one of the new icons in Leopard - Time Machine’s icon.

This icon is one of my favorites from Leopard. It displays it’s purpose quite clearly, seen in the “roll back the clock” in the middle. The stars in the background emulate the look of Time Machine when it’s running.

Unfortunately, the perspective of this icon is a bit different then Apple’s other icons, with the camera seemingly parallel to the ground plane.

Another Apple icon that’s quite cool, but not as widely known, is the XCode icon.

XCode’s icons is another one of my favourites in OS X. It represents what it means to code an application. It shows the “planning” phase, with the blueprint in the back, and then the creation phase, with the hammer in front.

Unlike the icon for Time Machine, XCode’s icon is the proper perspective.

Very few people that I talk to have ever seen this icon, although it’s arguably better then then XCode’s main icon.

Once again, it works because it’s a metaphor for what it represents. In this case, documentation. As well, it’s consistent with the rest of the icons in Apple’s developer set. It’s glossy, but not too glossy. It’s got that 30 degree perspective, etc.

Here’s a couple other icons that work really well. Try to figure out why yourself.

Part 2 - The creation of your icon.

With your theme in mind, grab your sketchbook and just start doodling. I find working out your basic design in a sketchbook is much faster then working in Photoshop. You also use different thought processes while working in a sketchbook, so you might come up with ideas you didn’t have otherwise.

Don’t just draw up one icon, though! Once you have something you like, try making a few variations on that design, place things in different locations, try a different scale, try different colors, etc. Then, ask other people what they think, which design they like best. Remember, just because you like or understand something, doesn’t mean other people will get it. The key to a successful icon is something that everyone likes, not just a few people. Get some constructive criticism from your critics. Make a tally of the different like and dislikes. What I tend to do is address the issues that get more then 3 votes, and leave ones that get less then that, because they’re more of a show of a personal preference, and not a genuine issue.

Taking your Icon from Paper to PSD

This is where your icon finally starts to take shape. You get to make any tweaks that you couldn’t do in the paper stage, and you can finally get to real, concrete criticism.

There are two routes you can take here. The first is to scan your sketches, and then create your icon using the pen tool / lasso tool to make an outline which you then fill in, shade, and color. Or, you can do it completely by eye, doing the transfer by simply looking at the sketch, and then drawing the icon on the screen. I recommend taking the first route if your sketch looks pretty much like your final icon. Use the second route if your sketch sort of sucks.

As an example, here are the steps I took while creating the Screen Shade icon.

As you can see, there are quite a few tweaks you need to make while creating the base of the icon. Shading being one of the most important. If your shading and shadows are not correct, then your icon won’t look right. It would make no sens having a shadow below your icon, but having the shading indicate that your light source is to the left the icon.

For the artistically challenged - Use Blender

If you can’t sketch your icon well enough to use it as a template in Photoshop, but you can’t quite get the PSD freehand version to look right, use a 3d modeler to create the basic outline of your icon. The model doesn’t have to be exact, just good enough for you to get the basic shapes down.

Proper Perspective & Color - The key to fitting in.

This is another thing that is usually overlooked during icon design. You’ve got your theme, and your basic design, but it still might not work. Why? Because of perspective and color. Take for example icons for OS X. Most of them look as if the “camera” was shooting the ground plane from a 30 degree angle. When you spot an icon amongst all the others that doesn’t follow this route, it tends to stick out, or look odd.

Another major issue that contributes to off-looking icons is color. Make sure you pick colors that either go with the rest of the site (in the case of a website icon) or colors that don’t clash with the operating system / other icons (in the case of an application icon). A prime example of clashing colors is my black screenshade icon. It looks OK by itself, but when you plop it in the dock with all of the other icons, it just looks out of place.

Final Words

I hope I didn’t disappoint with this article - I debated whether it should be a tutorial about designing a specific icon, but decided against it. I think it’s better to learn the principles behind a specific type of design, then just showing you how to build one standard icon. To use an over-used cliche`, give a man a fish and he eats for a day. Teach him how to fish, and he’ll eat forever. At least until he gets scurvy and dies from the lack of vegetables. You can figure out what that means on your own.

Thanks.