Icon design is a precise art: a blend of aesthetics and readability that takes a long time to master. But by the same token, it’s also incredibly rewarding, and with the right starter’s advice, it can make the whole process much easier for a beginner. Pixelresort author Michael Flarup has republished his article, “The Making of an Icon”, here for MacThemes readers today. We hope you enjoy it!

---

I’ve had a few requests for insights into the process of making icons. Instead of answering individually, I’ve decided to make this the first subject of a range of articles to be authored at my website, PixelResort.

This won’t be a tutorial or a step-by-step walkthrough: more like a general guideline based on my own experience. It’s how my workflow crops up. Enough disclaimer, let’s see if we can make an icon. To illustrate the creation of an icon, I’ve decided to redraw my old TextEdit icon from the bottom up.

Sketching

Sketching is an important tool in defining the concepts of your icon’s infancy. Sketching shouldn’t be accurate: it’s all about getting your ideas down on paper.

Get your ideas down on physical paper, it will save you time in the end

Unconsciously, you make a lot of decisions when you first put that pen to the paper. Perspective and major elements materialize and you get a first and early look of what might work. The power of moleskins should never be underestimated. Reference pictures and rough tracing might come in handy if you’re drawing something completely alien to you.

Where to Start?

When that unceremoniously blank Photoshop document is staring back at you, it might be hard to know where to begin. My advice is to start with large and defining elements of the icon. In this case, the wooden pad sets the perspective and works as the foundation of the icon.

Start drawing large and defining elements

The Pen Tool

The Pen tool is the iconist’s best friend. It takes time to master, but it’s the heart and blood of icon creation. Even though your finished work will be raster-based, vector scalabillity in the work area is essential. It allows you to move around and resize elements like there’s no tomorrow.

Get familiar with the Pen Tool

Blending Options

If the Pen Tool is the iconist’s best friend, blending options are the beer they enjoy together. Blending options are way more powerful than many recognize; the subtle symphony of individual styles can create almost any texture and surface.

A lot can be accomplished with the blending options

I could write an entire book about the power of blending options. The best way to learn is to play around with it yourselves. Don’t be fooled by the labels Adobe has given the individual options: an inner shadow doesn’t necessarily need to cast a shadow, etc. Explore the possibilities of the individual options.

Organize!

As you slowly add more details to your icon, make sure to stay in control of your growing number of layers. Organize in folders, and nestle in smart objects.

Organize layers in folders and smart objects

Icons can easily have 100+ layers, so staying on top of the individual parts make tweaking much easier.

Smaller Sizes

As you may know, a regular icon package contains several sizes. When you first start out, make sure to work on the maximum size your package will contain. This is often 512×512 pixels (Leopard standard). From there on, you should work your way down the various sizes (256, 128, 32, 16).

Give your small versions the attention and care they deserve

Tweak and completely redraw your icon to fit each individual size. Much of the liberty you have in the 512px version won’t be afforded you in the smaller sizes. Each size is equally important. An icon is only as good as its least attractive size. Make those pixels count!

Packaging

When you’ve spend a few hours perusing the details and tweaking everything to your satisfaction, it’s time to pack up the icon. Personally, I use the Iconfactory’s marvelous IconBuilder. It outputs Mac & PC formats without a blink.

Packing the various sizes in icon files

Ultimately, the creation of each icon is inherently different. To say that I haven’t gone into detail is a mild understatement. There are quite a few aspects which I haven’t covered, but I hope that I’ve shed some light on the process of making an icon.

Download

Download the finished icon from the Pixelresort Icons Section.

I’ll be happy to answer any questions in the comments.

by Michael Flarup