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 vital parts of the image is the framework of the object, i.e. solid linear marking, which limits the object from the rest of the image. When designing normal-sized images, the artist rarely thinks about defining objects with complementary lines. This is not needed because of the size: even low contrast objects do not blur into a single whole. Pixel graphics is different. Two solutions are available: either foreground and background colors must be from opposite sides of the color chart, or the object should be divided from the background by visible outlines and shadows. I will discuss lines deeper.

If we think more to the large scale images, we can note that in order to define edges, we can use any (including the most complex) angles, Bezier splines and borders. Anyway, the line will appear ideal due to anti-aliasing. When decreasing the graphic dimensions to the size of an icon, situation changes greatly. When each particular pixel is vitally valuable and can ruin the overall look of the composition, anti-aliasing is just unreasonable. It comes that you have to consider the possible line slopes.

The angle you choose for the line, specifies the step for this line. Because every line consists of basic elements, the union of which determines its neatness and visual appeal.

For example, a 18-degree angle consists of many small 3-pixel lines combined with a 1-pixel downshift:
Lines and pixels

This is how almost every line looks like. Basic element followed by joining and second basic element. Unfortunately, not every slope makes the line look attractive and not annoying.

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

It can be easily known which line is more appealing. The 25-degree angle produses a line containing even 2-pixel basic elements. The 20-degree angle has a primary element consisting of three lines: 3-pixel, 3-pixel and 2-pixel. The slope is more complicated, therefore, when not combined by additional 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 come to the first rule. The most "correct" slopes have to make as simple primary elements as they can. Thus, the perfect angles are 0 and 90 degrees. In them, 1-pixel basic elements are joined without downshift and produce smooth lines. Less perfect are slopes which form primary elements of 1, 2, 3 pixel with 1-pixel downshift. Of course, the lines can not be even, 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 acceptable (but at a stretch): angles with primary elements consisting of unequal lines shifted by more than 1 pixel.

For example:

It is the time to touch another issue. In the last paragraph, I intentionally defined angles with basic elements of 1, 2 and 3 pixels as correct. Such small lines, especially when a large number of them is joined, look like a single whole. But what happens if we change the primary elements to 10 or 20 pixels?

Here is an example:
Low quality line

It can be clearly seen that the line loses its solidness. It is not a continuous line anymore; it is a combination of several lines, situated near one another. Hardly any artist wants its creation to look that way. Thus, we have the second rule: if you use minimal slopes, which produse long primary elements, it has to be reasoned and employed with great caution.

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

For instance, a 25-degree slope can be produced in the two (sure more of them exists) following ways:
25-degree angles

In the first case the basic element is a 2-pixel line. In the second case, it consists of three lines: 3-pixel, 2-pixel and 1-pixel. The same angle but the look is different. The complex basic element made the line messy.

Such examples can be produced for about any angle, so in your works, try to simplify as much as possible.

2. Color

It can be said without an exaggeration that the color is the leading element of your work; not suiting or poorly matched colors can ruin even the best idea. What can we write about the color in miniature graphics?

First, there is a clear rule: if the picture looks poor when reduced to grayscale, then the colors that were selected are wrong. This rule is valid not only for icons but for the entire graphic design.

Second, you will be unable to apply safe RGB. Of course, you may use GIF colors only, but this limits you greatly. Gradients, shadows, blending and many other tricks will not be available to you.

Third, try to increase the areas of "flat" color. The more consistently colored areas without diffusion and jumps your picture has, the more clear it appears. Icons are too small and the over usage of complex filters makes the picture look dirty.

Fourth, gradients. This is a great tool which can improve the appearance of any picture. Other than esthetics, gradients are an ideal way to abolish the "broken line" look (lines with too long primary elements). But be attentive when using them because too many gradients can kill the plain color, and be not suitable for the gif palette.

Fifth, shadows and highlights. All rules for using shadows and highlights in icon creation are totally identical to the rules of the overall graphic design. The only ine I have to mention: create everything yourself. Don't apply effects, make all shadows and highlights in a different layer and after that edit its transparency. When applying effects, you almost never can predict what will it look like. 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 icons.

And, finally, sixth. Tinting is the main detail of pictogram design, which largely affects the esthetic appearance of the project. If the green human eye in the icon has the size of 1 pixel, increase the color saturation. For example, instead of 0, 131, 159 choose 71, 195, 242. It is indifferent that the human eye can't have such color; in the first case it will appear like a gray dot, but in the second case it will really be a green eye.

completely control the picture, do not let the optical illusions to ruin your design. It is OK if objects is not consistent technically, but the entire composition must be flawless.

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

3. Font

If I wrote about something bigger than pictogram creation, this chapter wouldn't fit into an entire book, but the size of compositions restricts fonts too.

The resolution of letters is the main aspect as opposed to their look. Almost in any case, only if not the letters are the main part of the composition, the text size has to be reduced to the largest extent possible.

In principle, almost any design studio has its unique font with tiny letters. This font can be crafted in several hours. You can search the web and collect your own collection of very interesting fonts. First of all, I would recommend you to get the DS Pixel and Seventen 7Vedi website as well as the entire set of fonts from the Lakmus Lab website.

If you don't want a new font, tiny sizes of Arial and Verdana will work. As a last option, you can draw the needed characters yourself.

There are quite a few rules there. First, letters cannot be less than 5 pixels high or less than 3 pixels wide.



Second, letters cannot use anti-aliasing. It turns the font into an incomprehensible mixture of pixels.

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

Popular Icon editors
Icon Perfect Toolbar Icons is a set of pre-made icons for use in commercial and private software and web-pages. All icons have a balanced color palette, smooth and well-rounded edges. A variety of formats and sizes is provided.

Icon Beautify your accounting or market-oriented software with readily accessible professional Business Toolbar Icons. More than two hundred of professionally designed and carefully created icons representing various financial objects and symbols are provided.

Icon IconLover is our choice. It allows you to design and edit all kinds of images needed in the program development cycle, containing icons, simple and animated cursors and interface elements - all these types of graphics 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 turn 256-color icons into True Color icons and Vista icons.

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

Icon Perfect Icon makes icon from any graphic file (PNG, JPEG, BMP, TIFF, WMF and more) in just seconds. Create stylish icons for Windows Vista. Easily replace, colorize and save icons that Windows selects to show standard objects, folders, files.