What Goes into the Sausage - The Creation of an Icon

By Michael Shephard

12/ 1/2011

Any software professional with an internet connection probably sees at least a hundred icons a day. They’re small and they’re everywhere - icons, not software professionals - little visual morsels of meaning sewn into the digital terrain like jewels on a robe. As a result, I think most of us tend to take them for granted, but the fact is that a surprising amount of work goes into the good ones. That crisp and shiny final image is, more often than not, the descendant of a dubious lineage of awful, mediocre, or just-not-quite-good-enough ideas, all of which get left on the cutting room floor.

What is, theoretically, a linear transition from idea to execution…

Abracadabra!

…is usually something a little more convoluted:

Chasing the dragon...

What you see above is what goes into making the sausage. A lot of experimenting, a lot of trial-and-error, and ultimately something more akin to survival-of-the-fittest than let-there-be-light.

In this case I was trying to create an icon that looked like a holographic display. I’ve always loved the challenge of rendering “special effects”: glowing things, iridescent things, things bristling with electricity. These are the kinds of images that require obsessive adjustments of color and transparency in order to get from “cheesy” to “wow”.

After the first quick digital concept, I actually went back to my sketchbook:

I totally drew them in a perfect grid just like this...

I won’t be the first or last to emphasize the value of sketching by hand. The obvious advantage is that most basic shapes are just quicker to draw (albeit roughly) than to create in Photoshop or Illustrator. The less obvious advantage, paradoxically, is that sketching out more complicated forms is usually slower - an almost meditative process which allows you to come up with a second idea half-way through drawing the first.

Then I jumped back into Photoshop and got to work creating some rough drafts of different designs. Since I felt pretty confident about the holographs themselves, I started out by focusing on the design of the projection device. Experience has taught me that the ideas I like initially will not necessarily be the strongest candidates, so I try not to get too attached to anything. One of the things I wanted to make sure to get right was the “technology” of the projection screen. My first idea, a grid of glowing bulbs set beneath glass, eventually gave way to a matrix of glowing pixels contained within glass:

A subtle distinction...

But the element that ended up giving me the most trouble was the base of the device. The original concept was to make it very futuristic, like maybe something Apple would be selling in the year 2050. I wanted it to imply a whole aesthetic of product design in whatever future world or alien spaceship it existed in. However, at some point during the course of my experimentation I had created a simple cylindrical disc, and the more I looked at it, the more I realized that all the detail I was putting into the others was going to crowd out the focus - the luminous glow of the projection and the holograph itself.

I shared a couple of the more developed ideas with my coworkers and I wasn’t too surprised when most people favored a shallow, slightly tapering metal base. It needed more personality, but it was clearly the strongest design.

Just say no to bad ideas.

I tweaked the color and shape, added some subtle (but essential) details to the metal and the projection grid, and spent the rest of the time refining the look of the holograph. I was careful at this point to make sure that whatever treatment I came up with was something I could duplicate with multiple shapes. The final product is a set of icons featuring the same device but with different holographic projections depending on the hard drive:

Collect all six!

I’m pretty happy with the results. If you want to check them out, the icons are available for download.

Download Icons