Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Aspects of Icon Making

Let's consider purely technical aspects of icon design

1. Lines, slopes

One of the vital elements of the composition is the framework of the object, i.e. rough border, which separates the object from the background. When working with large-scale graphics, the artist rarely cares about defining objects with additional lines. This is unnecessary because of the scale: even low contrast objects do not blur into a single whole. Icon graphics is other story. Two solutions are available: either object and background colors must be from opposite sides of the color wheel, or the object must be divided from the background by contrast lines and shadows. I would like to discuss lines deeper.

If we think again to the big-size images, we see that in order to define edges, we can use all (even the most complicated) angles, Bezier splines and edges. In any case, the line will look perfect thanks to anti-aliasing. When shrinking the graphic dimensions to the size of an icon, situation changes greatly. When each particular pixel is equally valuable and can ruin the overall appearance of the composition, anti-aliasing is simply not applicable. It comes that you have to think about the possible line angles.

The angle you choose for the line, determines the step for this line. This means that every line consists of primary elements, the combination of which determines its accuracy and esthetics.

For instance, a 18-degree slope consists of many tiny 3-pixel lines combined with a 1-pixel downshift:
Lines and pixels

This is how almost each line looks like. Basic element followed by joining followed by another basic element. However, not each angle makes the line look attractive and not annoying.

For example, here are 25 and 20-degree angles:

It can be easily known which line is more attractive. The 25-degree slope produses a line containing equal 2-pixel basic elements. The 20-degree slope has a basic element containing of three lines: 3-pixel, 3-pixel and 2-pixel. The slope is more complicated, therefore, if not combined by additional visual effects, it brings a feeling of untidiness: the primary elements have contrast which is too obvious to hide from the human sight.

Here we can come to the first rule. The most "appropriate" slopes have to make as plain primary elements as possible. therefore, the ideal angles are 0 and 90 degrees. In those, 1-pixel primary elements are combined without any shift and produce even lines. Less perfect are slopes which form basic elements of 1, 2, 3 pixel with 1-pixel downshift. Of course, the lines can not be smooth, but the human brain will process the picture and provide to the user what you intended to show to him. Also, the following slopes can be considered correct (but at a stretch): slopes with primary elements consisting of different lines shifted by more than 1 pixel.

For example:

Now we can move to another issue. In the last paragraph, I intentionally defined angles with primary elements of 1, 2 and 3 pixels as correct. Such small lines, especially when a large number of them is combined, look like a single whole. But what do we see if we increase the primary elements to 10 or 20 pixels?

Here is an example:
Low quality line

It can be clearly noticed that the line loses its integrity. It is not a single line anymore; it is a set of different lines, located near one another. Hardly any artist wants its creation to look inconsistent. So, we come to another conclusion: if you use small angles, which make long basic elements, it has to be reasoned and used with maximum attention.

And, finally, the last thing I wanted to mention about lines. I already wrote that the primary element has to be as simple as it can.

For example, a 25-degree slope can be drawn in the two (of course more of them exists) following ways:
25-degree angles

In the first case the basic element is a 2-pixel line. In the other picture, it is made of three elements: 3-pixel, 2-pixel and 1-pixel. The same angle but the look is different. The complicated primary element made the line messy.

This examples can be made for almost any angle, so in your projects, make sure to simplify everything.

2. Color

It can be said without an overstatement that the color is the leading element of your work; not suiting or badly balanced colors can kill even the most creative idea. What can we say about the color in icon graphics?

First, there is a clear rule: if the image looks bad when reduced to grayscale, it means the colors that were used are wrong. This rule is valid not exclusively for icons but for the whole graphic design.

Second, you will probably unable to use common RGB. Sure, you can use internet colors only, but this limits you greatly. Gradients, shadows, blending and many other effects will not be available to you.

Third, try to enlarge the areas of "plain" color. The more consistently colored parts without blurring and jumps your composition has, the more neat it appears. Icons are too small and the over usage of complex filters makes the picture look messy.

Fourth, gradients. This is a wonderful tool which can change the appearance of any composition. Other than visuals, gradients are an ideal way to get rid of the "broken line" effect (lines with too long basic elements). But be attentive when using them since too much gradients can ruin the plain color, and be unable to fit into the gif palette.

Fifth, shadows and flares. All rules for applying shades and highlights in icon making are totally the same to the rules of the overall graphic design. The only ine I have to note: create everything by hand. Don't use filters, make all shadows and highlights in a separate layer and after that edit its transparency. If using effects, you almost never can predict what the result will be. It is bad when you can't control the process of creating of a project. It is worse if you can't control it when creating miniatures.

And, finally, sixth. Nuancing is the main detail of pictogram creation, which greatly results the esthetic look of the image. When the green human eye in the picture is sized 1 pixel, increase the color saturation. For example, instead of 0, 131, 159 choose 71, 195, 242. It doesn't matter that the human eye can't have this color; in the first example it will appear like a gray dot, and in the second case it will definitely be a green eye.

Thoroughly control the image, do not let the visual illusions to ruin your work. It is acceptable if objects is not perfect from the technical point of view, but the whole picture must be perfect.

As an example, I pictured the packet of juice located before me. The picture has plain color, gradients with broken lines, shades and highlights and nuances.

3. Text

If I talked about something bigger than miniature design, this chapter wouldn't fit into a whole book, but the resolution of pictures ;limits fonts too.

The size of symbols is the leading aspect as opposed to their fineness. Almost in any case, unless the letters are the main part of the composition, the text size must be reduced to the greatest extent possible.

In principle, virtually any graphic studio has its exclusive font with tiny characters. This font can be created in a couple of hours. You can browse the web and collect your own collection of very nice fonts. First of all, I would recommend you to get the DS Pixel and Seventen 7Vedi webpage and the entire set of fonts from the Lakmus Lab website.

If you don't want a new font, tiny typesizes of Arial and Verdana will do. As a last resort, you can create the necessary letters yourself.

There are not many rules there. First, characters cannot be less than 5 pixels high or less than 3 pixels wide.



Second, letters cannot use anti-aliasing. It turns the text into an unrecognizable set of pixels.

However, there are no rules without exceptions and the 5-point Arial looks rather readable.

Popular Icon editors
Icon Perfect Toolbar Icons is a collection of ready-made icons for use in business and private software and websites. The icons have a bright color palette, smooth and well-rounded edges. A variety of formats and resolutions is provided.

Icon Enhance your financial or business-oriented application with readily accessible professional Business Toolbar Icons. Over two hundred of wonderfully designed and carefully created icons picturing different financial objects and currencies are included.

Icon IconLover is our pick. It enables you to create and alter any kind of images required in the software development cycle, including icons, static and animated cursors and interface elements - all these types of images can now be created in a single program.

Icon Icon Processor is an icon converter. It creates icons from your images. It's easy to convert 256-color images into True Color icons and XP icons.

Icon ICL-Icon Extractor will scan your files, archives, directories and all local disks for icons. It can download icons from the Internet and customize Windows icons.

Icon Perfect Icon creates icon from any image file (PNG, JPEG, BMP, TIFF, WMF and more) in just seconds. Create great icons for Windows Vista. Easily change, colorize and save icons that Windows uses to display standard objects, folders, files.