From the Foreman
Design Services
The Showroom
New Icon Releases
The Warehouse
Icon Cold Storage
The Workshop
How To Make Icons
Understanding Icons
Getting Started
Details, Details

Link of the Week
IconDropper Sites


Let's face it - you love icons! You collect icon sets, spend hours scouring the Web for new releases, and constantly tweak the interface on your Mac to reflect your mood. It's too much fun! However, sometimes you reach a point where collecting icons and icon sets isn't enough. You get an inspiration to make your own. But suppose you have never made an icon before - where do you start?

Don't be discouraged! Each month, this column will provide you with another installment of practical how-to knowledge concerning icon construction, starting at the beginner level and working up to advanced techniques and tricks. We'll walk you through planning your icon, picking the right tools, utilizing drawing techniques and understanding design philosophies. Also, from time to time, we will have special interviews with icon artists and engineers!

So, let's jump right into
Part One: Understanding Icons

What is an icon?
Technically, an icon is a System-level resource that uses a combination of a bitmap graphic and a mask to create a small picture that is attached to a file or program on your Mac. The part of the resource where the bitmap graphic is stored actually contains several versions of the graphic, each one being used by the system depending on how many colors your Mac can display. The mask is literally a mask - the System uses it as a stencil or silhouette to "knock" a hole in the screen's image display that your artwork can be shown through. This is why it's important that the artwork and mask match - otherwise, some parts of your masterpiece might not show up!

On a more basic level, an icon is a tiny pixellated condensation of an idea - reduced to something that is quickly recognized by your eye, perhaps more quickly a file name which must be read. For example, you can probably spot a bright yellow smiley face on your desktop much faster than you can find a folder name that reads "Smiley". Icons can represent anything you want - they can be custom-styled folders or pictures of your favorite Japanese pop star - but ideally they should be able to be understood at a moment's glance.

What's this about "versions" and color display?
Every Mac system from the original Mac 128k to the new iBook has the capability to display a certain amount of color on it's screen. In the case of the Mac 128k it only black or white, or 1-bit color. The Mac II's introduced 16 basic colors, or 4-bit color. The next jump was to 256 colors, then thousands, which are called 8-bit and 16-bit respectively. The Mac operating systems before System 8.5 use a type of icon resource that contains a separate version of the icon art for each bit depth up to 8-bit (Fig. 1), although luckily they all use the same mask.

In addition, there are two ways to view files on a Mac, regardless of System version: Icon View, where you see the 32x32 pixel icons, and List View, which uses a smaller 16x16 version.

So that's 3 bit-depth versions at 2 sizes each, plus a mask for both sizes - 8 pieces of art total - all stored in a resource called an "Icon" resource
(Fig. 2). Never heard of one? Well, if you've ever copied and pasted an icon in the Finder using get info, you've already used "Icon" resources!

Mac OS 8.5 changed all this by beginning the use of a new type of icon resource - the "icns" resource. It can store all 6 of the old-style versions and their masks, plus a new type of icon called 32-bit, which uses millions of colors! The new mask format can also use transparency, enabling the creation of icons with soft edges and dazzling see-though effects (
Fig. 3). The interesting part is that, with this new resource, it is possible to just use one 32-bit version of the artwork and one mask. The only drawback to doing this is that a person using anything less than System 8.5 can't see it. Of course, if you are making your icon just for yourself and you use 8.5 or higher, then you don't have to bother with these lower bit depth versions if you don't want to. It's up to you, but if you include both of these resource types in one icon, then everyone can join the party, no matter what OS they have!

We'll cover this in more detail down the line...

Hey, I just want to make an icon, pal!
Okay, okay - I know this is dry stuff, but it is important to understand how icons work if you want your icon to function correctly - and especially if you plan to release it to the world! Don't forget that an icon is really a tiny piece of software, and if you understand how it does it's job, your icon will be technically competent, regardless of the subject matter.

Do I really have to make all that stuff?

No, not by yourself! To begin your icon, you can easily start with the minimum - the 256-color version at 32x32 pixels. All system versions will be able to see it, and all icon-editing software can quickly create rough approximations of the other bit depth versions, sizes and the mask for you. You can go back and tweak those aspects later when you are more familiar, so we won't worry about them at this stage.

Hmmm... this all sounds harder than I thought!
If you don't fully understand all this, don't fret. These technical issues will become clear as you make your first icon. It really is fairly simple, and we will be guiding you each step of the way. Ready to start? Good!

On to Part Two: Getting Started

The Workshop
A step-by-step guide

Fig. 1: Bit Depths (as viewed in ResEdit)
ICN# is 1-bit, or black & white.

icl8 is 8-bit, or 256 colors.
icl4 is 4-bit, or 16 colors
The Mask is 1-bit, or black & white.
ics resources are the List View versions.

Fig. 2: "Icon" Resource Appearance
This is what the resources look like inside a
ResEdit file. Double-clicking on any of these will
kick you into the built-in icon editor.

Fig. 3: 32-bit vs. 8-bit Masks
Here you can see the difference between a 32-bit
"transparent" mask icon, and the same icon
viewed as an 8-bit/256 color icon. Notice you can
see the desktop *through* the icon?

Quite a difference!

copyright©1999 The Iconfactory, all rights reserved