Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Making

Let's discuss strictly technical details of icon design

1. Lines, angles

One of the vital elements of the composition is the outline of the object, i.e. rough line, which separates the object from the background. When designing large-scale images, the artist rarely cares about highlighting of objects with additional lines. This is unnecessary because of the scale: even low contrast objects do not blur into a single whole. Pixel graphics is other story. Two solutions are available: either object and background colors have to be from different sides of the color chart, or the object should be divided from the background by contrast outlines and shadows. I will discuss lines in more detail.

If we return more to the big-size images, we see that in order to define contours, we can use all (including the most complex) angles, Bezier curves and borders. Anyway, the line will look ideal due to anti-aliasing. When decreasing the graphic dimensions to the size of an icon, situation changes dramatically. When each single pixel is equally valuable and can ruin the overall look of the icon, anti-aliasing is simply unreasonable. It means that you have to think about the possible line slopes.

The slope you choose for the line, determines the step for this line. This means that each line consists of basic elements, the combination of which defines its neatness and esthetics.

For example, a 18-degree angle contains many small 3-pixel lines connected using a 1-pixel downshift:
Lines and pixels

This is how nearly each line looks like. Basic element with joining followed by another primary element. Unfortunately, not each angle creates lines that look look attractive and not annoying.

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

It can be easily seen which line is more attractive. The 25-degree slope makes a line consisting of equal 2-pixel basic elements. The 20-degree angle has a basic element consisting of three lines: 3-pixel, 3-pixel and 2-pixel. The slope is more complex, thus, when not supported by other visual effects, it brings a feeling of messiness: the basic elements have contrast which is too obvious to hide from the human sight.

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

For example:

Now we can discuss another problem. In the last paragraph, I purposely defined angles with primary elements of 1, 2 and 3 pixels as correct. Such tiny lines, especially when a great amount of them is combined, appear as a single whole. But what happens if we increase the primary elements to 10 or 20 pixels?

Here is an example:
Low quality line

It can be clearly seen that the line doesn't have solidness. It is not a continuous line now; it is a set of several lines, located near each other. Rarely any artist wants its composition to look that way. So, we come to another rule: if you use small slopes, which produse long basic elements, it has to be justified and employed with great attention.

And, finally, the third thing I wanted to mention about lines. I did write that the primary element has to be as simple as possible.

For instance, a 25-degree angle can be produced in the two (sure 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 is made of three elements: 3-pixel, 2-pixel and 1-pixel. The same angle but the image is different. The complex basic element produced the line untidy.

Such examples can be made for about any angle, so in your works, try 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 poorly matched colors can kill 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 selected are incorrect. This rule is valid not exclusively for icons but for the entire graphic design.

Second, you will be unable to apply safe RGB. Of course, you may select internet 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 portion of "plain" color. The more consistently colored areas without blurring and jumps your picture has, the more neat it looks. Pictograms are too tiny and the excess usage of special filters makes the picture look messy.

Fourth, gradients. This is a great instrument which can improve the look of any project. Other than esthetics, gradients are a perfect solution to abolish the "broken line" effect (lines with too long basic elements). But be careful when applying them since too many gradients can ruin the plain color, and be not suitable for the gif palette.

Fifth, shadows and flares. All aspects of applying shadows and highlights in icon creation are totally the same to the rules of the general graphic design. The only thing I would like to note: draw everything yourself. Don't use filters, make all shades and highlights in a separate layer and after that edit the opacity. When applying effects, you rarely know what will it look like. It is unfavorable when you can't control the making of a composition. It is awful if you don't control it when drawing icons.

And, finally, sixth. Nuancing is the main aspect of pictogram design, which greatly results the visual look of the image. If the green human eye in the picture is sized 1 pixel, increase the color intensiveness. For instance, instead of 0, 131, 159 choose 71, 195, 242. It doesn't matter that the human eye never has such color; in the first case it will appear like a gray dot, and in the second case it will really be a green eye.

Thoroughly control the image, do not let the visual tricks to ruin your design. It is acceptable if objects is not consistent from the technical point of view, but the entire composition must be flawless.

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

3. Font

If I wrote about something other than icon creation, this part wouldn't fit into a whole book, but the resolution of compositions restricts fonts too.

The size of symbols is the main issue as opposed to their look. Almost in all cases, only if not the letters are the primary part of the composition, the font size has to be decreased to the greatest extent possible.

In principle, almost any design studio has its exclusive font with little characters. Such a font can be made in several hours. You can search the internet and make your own library of very interesting fonts. First of all, I advice you to get the DS Pixel and Seventen 7Vedi website and the entire set of fonts from the Lakmus Lab website.

If you don't need a new font, little typesizes of Arial and Verdana may do. As a last option, you can create the needed characters yourself.

There are quite a few 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 incomprehensible set of pixels.

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

Popular Icon editors
Icon Perfect Toolbar Icons is a set of stock icons for use in commercial and personal software and websites. All icons have a bright color palette, smooth and well-rounded edges. A variety of formats and sizes is available.

Icon Enhance your financial or business-oriented application with readily available professional Business Toolbar Icons. More than two hundred of wonderfully designed and carefully created icons picturing various financial objects and symbols are provided.

Icon IconLover is our choice. It enables you to create and alter all kinds of graphics needed in the application development cycle, containing icons, static and moving 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 makes icons from your images. It's possible to convert 256-color icons into True Color icons and Vista icons.

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

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