Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Making

Let's consider strictly technical details of icon making

1. Lines, slopes

One of the most important parts of the image is the outline of the object, i.e. rough border, which limits the object from the background. When working with normal-sized images, the artist rarely cares about defining objects with complementary lines. This is not needed because of the scale: even low contrast objects do not mix into a single whole. Icon graphics is different. Two variants are possible: either foreground and background colors must be from opposite sides of the color wheel, or the object should be separated from the background by contrast lines and shadows. I would like to dwell on lines deeper.

If we think more to the large scale graphics, we see that in order to highlight edges, we can use all (even the most complicated) angles, Bezier splines and borders. In any case, 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 vitally valuable and can ruin the overall look of the icon, anti-aliasing is simply not applicable. It comes that you have to think about the possible line slopes.

The slope you choose for the line, specifies the step for this line. This means that every line is made of basic elements, the combination of which determines its accuracy and visual appeal.

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

This is how nearly every line looks like. Primary element followed by joining and another primary element. However, not each angle creates lines that look look neet 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 produses a line containing 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 complicated, therefore, if not supported by other visual effects, it brings a feeling of messiness: the basic elements have contrast which is too strong to hide from the human eye.

Here we can come to the first conclusion. The most "correct" angles have to make as simple basic elements as possible. therefore, the ideal angles are 0 and 90 degrees. In those, 1-pixel basic elements are joined without any shift and produce smooth lines. Less ideal 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 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): angles with basic elements consisting of unequal lines shifted by more than 1 pixel.

For example:

Now we can touch another problem. In the previous paragraph, I purposely defined angles with basic elements of 1, 2 and 3 pixels as acceptable. Such tiny lines, especially when a large amount of them is combined, appear as 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 noticed that the line loses its integrity. It is not a single line anymore; it is a combination of several lines, located near each other. Rarely any artist wants its creation to look that way. So, we come to another rule: if you use minimal slopes, which produse long primary elements, it must be reasoned and used with maximum attention.

And, finally, the third thing I have to mention about lines. I already wrote that the primary element has to be as plain as possible.

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

In the first case the basic 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 complicated basic element made the line messy.

Such examples can be made for almost any slope, so in your projects, try to simplify as much as possible.

2. Color

It can be said without an overstatement that the color is the leading element of your work; improper or poorly matched colors can ruin even the most creative idea. What can we write about the color in icon graphics?

First, there is a clear rule: if the image looks bad when converted to grayscale, it means the colors that were used 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. Sure, you may select GIF colors only, but this limits you greatly. Gradients, shadows, blending and many other tricks will not be accessible to you.

Third, try to increase the areas of "plain" color. The more evenly colored areas without diffusion and jumps your project has, the more clear it appears. Icons are too small and the excess usage of complex effects makes the image look dirty.

Fourth, gradients. This is a wonderful instrument which can improve the look of any picture. Besides esthetics, gradients are a perfect way to get rid of the "broken line" effect (lines with too long basic elements). But be attentive when using them since too many gradients can ruin the flat color, and be not suitable for the gif palette.

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

And, lastly, sixth. Tinting is the key aspect of icon design, which largely results the esthetic appearance of the project. If the blue human eye in the icon is sized 1 pixel, increase the color saturation. For instance, instead of 0, 131, 159 make 71, 195, 242. It is indifferent that the human eye never has such color; in the first example it will appear like a gray dot, but in the second one it will definitely be a green eye.

completely control the picture, do not let the visual tricks to spoil your work. It is OK if objects is not consistent from the technical point of view, but the entire composition must be perfect.

As an example, I pictured the packet of juice located in front of me. The picture has flat color, gradients with broken lines, shades and flares and tints.

3. Font

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

The size of symbols becomes the leading aspect as opposed to their fineness. Almost in any case, unless the letters are the primary part of the project, the text size must be decreased to the largest extent possible.

In principle, virtually any graphic studio has its unique font with little characters. This font can be created in several hours. You can browse the web and make your own library of very interesting fonts. First of all, 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, little sizes of Arial and Verdana may 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 should not use anti-aliasing. It transforms the text into an unrecognizable mixture of pixels.

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

Popular Icon editors
Icon Perfect Toolbar Icons is a collection of stock icons for use in commercial and private programs and websites. The icons have a balanced color scheme, smooth and well-rounded borders. A variety of formats and sizes is provided.

Icon Enhance your accounting or market-oriented software with instantly available professional Business Toolbar Icons. More than two hundred of professionally designed and neatly crafted icons representing different financial objects and currencies are included.

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

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

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

Icon Perfect Icon makes icon from any image file (PNG, JPEG, BMP, TIFF, WMF and more) in just seconds. Make great icons for Windows Vista. Easily change, colorize and save icons that Windows selects to show typical objects, directories, files.