Anatomy of an Icon

Since releasing some icons of my own, I’ve received quite a few messages asking “how do you create an icon?”. Well, I can’t tell you how to create an icon — but I can tell you the steps I take to create an icon. There may be easier ways. There may be better ways. Here’s a quick look at the methods and techniques I used to create an icon from the Overcast set.

Our goal is to create an icon in two standard sizes: 16×16 and 32×32 (pictured, right). I choose to create the smaller version first, then double the size and clean it up (more on that later).

Set the Canvas and Zoom

So to begin, start with a canvas of 16 pixels by 16 pixels (Photoshop is my image editor of choice). Zoom way in on it. This should be somewhat obvious, but it’s incredibly difficult to draw with pixels when viewing at 100%. One could go blind attempting this on a regular basis.

Outline the Form

Next, I’ll outline the basic shape of whatever I’m attempting to create using the pencil tool set to 1px width. In this case, we’re going for a triangular-shaped warning sign. I’m using a medium-toned grey here as a base color.

Note: The figures used in this article are zoomed in so that they’re easier to view.

Gradients are Key

Now that we have a basic outline, let’s add some dimension by applying a gradient (gradient tool, pictured right). First, I’ll choose a lighter shade of the grey that we used for the outline as the foreground color. Then I’ll make sure the gradient tool is set to flow from the foreground color to transparent.

Selecting the magic wand tool, I’ll select the white that sits inside the outline. This will allow us to fill in the gradient only within the outline.

Now with the inside of the shape selected, take the gradient tool and stretch it diagonally across the selected area from the bottom right corner of the outline to the top left. This gives us a light source that’s coming at the icon from the top left (about 10:00).

Hightlight Edges for Subtle Dimension

Now that we have a base, I like to take white (or a light variation of the base color) and outline the top and left inside edges. Similarly, you could also use a darker color to outline the inside edges of the right and bottom. This adds a really subtle (almost unnoticable) dimension to the icon, making it appear to be slightly rounded off the canvas.

The steps mentioned up until this point were used to create just about all of the icons in the Overcast set: draw the shape, apply the gradient, lighten the edges. When creating a uniform set, you’ll get nice results when you stick to a routine for the beginning stages of an icon’s birth.

Add the Details

Our next step is to add the remaining details to this particular icon. We’re adding an exclamation point in the middle using the medium grey base color.

We’ll also use a slightly darker shade for the outside right and bottom edges to give a little more dimension to the outline as well.

Next, we’ll add that same darker shade to the left side of the exclamation point, giving it the appearance that the exclamation is “sunken” into the icon. The light source hits the “lip” and creates a slight shadow on its inside edge.

And finally, if the icon will be sitting on a pre-determined background color, you could also add a very light shadow at the bottom and right edges around the icon. It should be offset by at least a pixel, to keep it in line with the light source coming from top left.

The steps outlined above will give us the finished 16×16 version of the icon. Now to double it in size.

Double the Size

Using the Image › Image Size... menu, we’ll change the pixel dimensions to 32×32 — the important thing here to set the “Resample Image” dropdown to “Nearest Neighbor”. This will keep all of our precious pixels intact.

Now we’ll have a 32×32 icon — but every line will be twice as thick as we’d like them to be. The remaining steps in creating the larger version involve erasing pixels to remove the double-thickness. I’ll also erase the gradient background and redo it at this larger size. It’ll come out much smoother this way. A lot of work, but doubling the smaller version at least ensures that the proportions will remain the same for both icons, and you’ll have a good framework to build from.

Happy Pixel Pushing

I certainly haven’t covered everything there is to know about designing icons, nor am I even armed with that knowledge. But perhaps these techniques will help you give you some ideas to get the pixels pushing.

I’ve somewhat glossed over the steps necessary to create the larger icon, but I need to save these mysteries so that I’ll have something to talk about in the future.