Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Aspects of Icon Making

Let's discuss strictly technical details of icon creation

1. Lines, angles

One of the most important elements of the composition is the outline of the object, i.e. rough linear marking, which limits the object from the background. When creating large-scale images, the designer occasionally thinks about highlighting of objects with complementary lines. This is not needed because of the scale: even low contrast objects do not blend into a one. Icon graphics is other story. Two variants are available: either foreground and background colors must be from opposite sides of the color chart, or the object must be divided from the background by visible lines and shadows. I would like to discuss lines deeper.

If we return again to the large scale graphics, we see that in order to define edges, we can use all (including the most complex) angles, Bezier splines and edges. In any case, the line will look ideal thanks to anti-aliasing. When shrinking the graphic dimensions to the small icon size, situation changes greatly. When each particular pixel is vitally valuable and can ruin the overall appearance of the icon, anti-aliasing is just not applicable. It means that you should consider the possible line angles.

The angle you select for the line, determines the step for this line. Because each line is made of basic elements, the combination of which determines its accuracy and esthetics.

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

This is how nearly each line looks like. Primary element followed by joining and second primary element. Unfortunately, not every angle creates lines that look look attractive and not messy.

For example, look at 25 and 20-degree angles:

It can be easily known which line is more appealing. The 25-degree slope produses a line consisting of even 2-pixel basic elements. The 20-degree angle has a primary element consisting of three parts: 3-pixel, 3-pixel and 2-pixel. The slope is more complex, thus, if not supported by other visual effects, it creates a feeling of untidiness: the primary elements have contrast which is too obvious to escape the human eye.

Now we can see the first conclusion. The most "appropriate" slopes must make as plain basic elements as they can. Thus, the ideal slopes are 0 and 90 degrees. In those, 1-pixel basic elements are combined without downshift and form even lines. Less perfect are angles which form primary elements of 1, 2, 3 pixel with 1-pixel downshift. Of course, the lines can not be even, but the human sight will process the picture and provide to the user what you meant to show to him. Also, the mentioned angles can be considered correct (but at a stretch): slopes with basic elements made of different lines shifted by more than 1 pixel.

For example:

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

Here is an example:
Low quality line

It can be clearly noticed that the line doesn't have solidness. It is not a single line now; it is a set of several lines, situated near one another. Rarely any artist wants its composition to look inconsistent. So, we have another rule: if you use small angles, which produse long primary elements, it must be reasoned and used with great caution.

And, finally, the third aspect I wanted to tell about lines. I did write that the basic element has to be as plain as possible.

For instance, a 25-degree angle can be drawn in the two (of course more of them are possible) following ways:
25-degree angles

In the first picture the basic element is a 2-pixel line. In the second case, it consists of three elements: 3-pixel, 2-pixel and 1-pixel. The same slope but the look is different. The complex primary element produced the line messy.

Such examples can be made for about any slope, so in your projects, make sure to simplify everything.

2. Color

It can be stated without an exaggeration that the color is the main aspect of your work; not suiting or badly balanced colors can ruin even the most creative idea. What can we say about the color in miniature graphics?

First, there is a certain rule: if the image looks bad when converted to grayscale, then the colors that were selected are incorrect. This rule is true not only for icons but for the entire graphic design.

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

Third, try to increase the portion of "plain" color. The more evenly colored areas without blurring and jumps your composition has, the more clear it looks. Icons are too small and the over usage of special filters makes the image look messy.

Fourth, gradients. This is a great instrument which can improve the appearance of any composition. Other than visuals, gradients are an ideal way to abolish the "broken line" effect (lines with too long basic elements). But be careful when applying them since too much gradients can ruin the plain color, and be not suitable for the gif palette.

Fifth, shadows and highlights. All aspects of applying shadows and highlights in icon design are totally identical to the aspects of the overall graphic design. The only thing I would like to mention: draw everything by hand. Don't use effects, make all shades and flares in a separate layer and after that edit its transparency. When applying filters, you almost never know what the result will be. It is unfavorable when you can't control the making of a composition. It is worse if you can't control it when creating icons.

And, lastly, sixth. Tinting is the key detail of icon creation, which largely results the esthetic look of the composition. When the green human eye in the image is sized 1 pixel, increase the color saturation. For example, instead of 0, 131, 159 make 71, 195, 242. It doesn't matter that the human eye can't have such color; in the first example it will look like a gray dot, but in the second example it will definitely be a blue eye.

Thoroughly control the image, do not allow the visual tricks to ruin your work. It is acceptable if objects is not perfect technically, but the whole composition must be flawless.

As an example, I pictured the pack of juice standing in front of me. The picture has plain color, gradients with broken lines, shadows and flares and nuances.

3. Text

If I talked about something other than pictogram design, this chapter wouldn't fit into an entire book, but the size of images ;limits fonts too.

The resolution of symbols becomes the leading aspect as opposed to their fineness. Almost in all cases, unless the letters are the main part of the project, the text size must be reduced to the largest extent possible.

In general, virtually any design company has its own font with tiny characters. Such a font can be crafted in a few hours. You can browse the internet and make your own library of very nice fonts. Primarily, I advice you to download the DS Pixel and Seventen 7Vedi website and the whole series 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 option, you can create the needed characters yourself.

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



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

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

Popular Icon editors
Icon Perfect Toolbar Icons is a collection of pre-made icons for use in commercial and private applications and web-pages. The icons have a bright color scheme, sleek and well-rounded edges. A variety of formats and sizes is available.

Icon Beautify your accounting or market-oriented application with readily accessible professional Business Toolbar Icons. More than two hundred of wonderfully designed and neatly crafted icons representing different financial objects and currencies are provided.

Icon IconLover is our pick. It allows you to design and edit all kinds of graphics needed in the application development cycle, including icons, static and animated cursors and interface parts - all these types of graphics can now be designed in a single application.

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

Icon ICL-Icon Extractor will search your images, archives, directories and all local disks for icons. It can download icons from the Internet and edit Windows icons.

Icon Perfect Icon creates icon from any graphic 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 show standard objects, folders, files.