Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Aspects of Icon Creation

Let's consider purely technical details of icon creation

1. Lines, slopes

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 artist occasionally cares about highlighting of objects with complementary lines. This is unnecessary because of the size: even low contrast objects do not mix into a one. Icon graphics is different. Two variants are available: either foreground and background colors have to be from opposite sides of the color chart, or the foreground must be separated from the background by contrast lines and shadows. I will dwell on lines deeper.

If we think again to the big-size graphics, we see that in order to highlight edges, we can use any (including the most complex) angles, Bezier splines and edges. In any case, the line will appear perfect due to anti-aliasing. When shrinking the image dimensions to the small icon size, situation changes dramatically. When every single pixel is vitally important and can change the overall look of the composition, anti-aliasing is just not applicable. It comes that you should consider the possible line slopes.

The angle you select for the line, determines the step for this line. This means that every line consists of basic elements, the combination of which determines its accuracy and visual appeal.

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 every line looks like. Primary element followed by joining followed by another primary element. However, not each angle creates lines that look look attractive and not messy.

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

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

Here we can see the first rule. The most "appropriate" slopes have to make as simple basic elements as they can. therefore, the perfect angles are 0 and 90 degrees. In them, 1-pixel primary elements are combined without any shift 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 will not be smooth, but the human brain will process the picture and present 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 made of different lines shifted by more than 1 pixel.

For example:

It is the time to move to another issue. In the last paragraph, I intentionally defined slopes with primary elements of 1, 2 and 3 pixels as acceptable. Such tiny lines, especially when a great number of them is combined, appear as solid. 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 noticed that the line loses its solidness. It is not a single line now; it is a set of several lines, located near one another. Rarely any artist wants its creation to look inconsistent. So, we come to the second rule: if you use small slopes, which produse long basic elements, it has to be reasoned and employed with maximum attention.

And, finally, the last thing I have to mention about lines. I did write that the basic element should be as simple as possible.

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

In the first picture the primary element is a 2-pixel line. In the other picture, it consists of three lines: 3-pixel, 2-pixel and 1-pixel. The same angle but the look is different. The complex primary element produced the line messy.

Such examples can be made for almost any angle, so in your works, try to simplify everything.

2. Color

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

First, there is a certain rule: if the image looks bad when converted 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 apply safe RGB. Of course, you may use internet colors only, but this ties you hand and foot. Gradients, shadows, blending and many other tricks will not be available to you.

Third, try to increase the portion of "plain" color. The more consistently colored parts without blurring and jumps your composition has, the more neat it looks. Icons are too small and the excess usage of complex effects makes the image look dirty.

Fourth, gradients. This is a wonderful tool which can improve the appearance of any picture. Other than visuals, gradients are a perfect solution to get rid of the "broken line" effect (lines with too long primary elements). But be attentive when using them because too much gradients can ruin the plain color, and be not suitable for the gif palette.

Fifth, shadows and flares. All rules for using shades and highlights in icon design are totally the same to the rules of the overall graphic design. The only thing I would like to note: create everything by hand. Don't use effects, make all shadows and flares in a separate layer and after that edit its transparency. When using effects, you rarely know what the result will be. It is unfavorable when you can't control the process of creating of a composition. It is worse if you can't control it if drawing icons.

And, lastly, sixth. Nuancing is the key aspect of pictogram design, which largely affects the visual appearance of the image. 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 make 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 one it will definitely be a green eye.

completely control the image, do not allow the optical tricks to spoil your work. It is acceptable if something is not perfect from the technical point of view, but the entire picture must be perfect.

As an example, I drew the packet of juice standing before me. The image has flat color, gradients with broken lines, shades and flares and nuances.

3. Text

If I talked about something other than icon creation, this part wouldn't fit into an entire book, but the resolution of pictures ;limits fonts too.

The size of symbols is the main issue as opposed to their fineness. Nearly in any case, unless the letters are the main part of the composition, the font size has to be decreased to the largest extent possible.

In principle, virtually any graphic company has its unique font with little letters. This font can be created in a couple of hours. You can browse the web and make your own library of very interesting fonts. Primarily, I would recommend you to download the DS Pixel and Seventen 7Vedi website as well as the whole set of fonts from the Lakmus Lab website.

If you don't need a new font, tiny typesizes of Arial and Verdana will do. As a last resort, you can draw the needed characters by hand.

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



Second, letters should not use anti-aliasing. It transforms the font into an incomprehensible set of pixels.

Though, there are no rules without exceptions and the 5-point Arial looks perfectly understandable.

Popular Icon editors
Icon Perfect Toolbar Icons is a set of stock icons for use in business and private programs and web-pages. All icons have a bright color scheme, smooth and well-rounded edges. A variety of formats and resolutions is provided.

Icon Beautify your financial or market-oriented application with instantly accessible professional Business Toolbar Icons. More than two hundred of professionally designed and carefully crafted icons picturing different financial objects and symbols are included.

Icon IconLover is our choice. It allows you to create and alter any kind of graphics required in the software development cycle, containing icons, simple and moving cursors and interface elements - 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 images. It's easy to convert 256-color images into True Color icons and Vista icons.

Icon ICL-Icon Extractor will scan your images, archives, directories 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 great icons for Windows XP. Easily change, alter and save icons that Windows uses to display standard objects, folders, files.