I recently was hired to design an icon for a new Mac app that’s soon to be released. In this post I’m going to outline the steps involved in creating that icon, from concept to completion.

The first step I took when designing this icon, was to brainstorm what the icon needed to have in it - what it needed to represent. The application is called “screenshade”, so it’s gotta have some sort of screen, or how about sunglasses! Yes, that’ll do!

After I did that primary design, I didn’t really think the basic idea had much potential - and it looks sort of generic, anyways.

After a day or so of thinking about what I could do with a “shade” icon, I came up with this, marginally better icon.

Ok, never mind. It sucks major butt too. I’m sure I could spend a few days working on it and make something like it look good, but then the problem arises of scaling. It’s going to look mighty odd at 32×32 pixels, or probably anything below 128×128 pixels. So this design gets thrown out, too.

So, I figured, “what else could represent shade? Hmm..”. I came up with something that works quite well. A curtain. So I made a quick test icon, to see if the developer liked it. He did. Here’s what he was shown. You can now see the final icon coming into play.

Now, the concept works. It represents shade, but unfortunately it isn’t very Mac-ish. Most polished Mac icons looks three-dimensional, and are usually shiny, or at least glossy. I needed to figure out a way to incorporate that into this icon.

As you can see, the final icon looks more or less like a standard OS X icon. It’s not too shiny or glossy, it’s 3d, and has a workable color combination. As well, it looks good scaled down to something below 128×128, which the original three icons didn’t do very well. “Hey look, a monitor with a hat!… I think?”

For people who wonder, I did indeed do some sketches in a notebook, as I do with almost all my design. I didn’t include them because, well, I’m not very good with a pencil. They don’t look that great. At all.

Trying many different designs is very important to the design process. In the course of doing things you might get more ideas then if you just made one design, and called an end to it. Also, take a look at photographs involving the keywords in your icon (IE: shade). This can give you good ideas, as well as a color pallete to design off of.

Well, thats it, I guess. The story of how I design an icon. There are probably better ways of doing it, but heck, this works!