Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Aspects of Icon Making

Let's consider purely technical aspects of icon design

1. Lines, angles

One of the vital parts of the image is the framework of the object, i.e. solid border, which separates the object from the rest of the image. When working with large-scale graphics, the designer rarely cares about highlighting of objects with additional outlines. This is unnecessary because of the scale: even non-contrasted objects do not mix into a one. Icon graphics is different. Two variants are possible: either object and background colors have to be from different sides of the color chart, or the foreground must be divided from the background by visible outlines and shadows. I will dwell on lines in more detail.

If we return more to the large scale images, we can note that in order to define contours, we can use any (even the most complicated) angles, Bezier curves and borders. Anyway, the line will look perfect thanks to anti-aliasing. When shrinking the image dimensions to the size of an icon, situation changes greatly. When every single pixel is equally 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, specifies the step for this line. Because each line consists of primary elements, the combination of which defines its neatness and visual appeal.

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

This is how nearly each line looks like. Basic element with joining and another primary element. Unfortunately, not each slope makes the line look attractive and not annoying.

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

It can be easily known which line is more appealing. The 25-degree slope makes a line consisting of equal 2-pixel primary elements. The 20-degree slope has a primary element consisting of three lines: 3-pixel, 3-pixel and 2-pixel. The slope is more complex, therefore, when not combined by additional visual effects, it brings a feeling of messiness: 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 simple basic elements as they can. Thus, the perfect angles are 0 and 90 degrees. In them, 1-pixel basic elements are joined without any shift and produce even lines. Less ideal are slopes which form basic elements of 1, 2, 3 pixel with 1-pixel downshift. Of course, the lines can not be smooth, but the human brain will process the image and present to the viewer what you intended to show to him. Also, the mentioned slopes can be considered acceptable (but at a stretch): angles 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 intentionally defined slopes with basic elements of 1, 2 and 3 pixels as acceptable. Such tiny lines, especially when a great amount of them is joined, appear as a single whole. But what do we see 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 integrity. It is not a continuous line now; it is a set of different lines, located near one another. Rarely any designer wants its composition to look inconsistent. So, we come to the second conclusion: if you use minimal angles, which produse long primary elements, it must be justified and employed with great attention.

And, finally, the third aspect 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 picture, it consists of three elements: 3-pixel, 2-pixel and 1-pixel. The same angle but the look is different. The complex primary element made the line messy.

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

2. Color

It can be said without an overstatement that the color is the main aspect 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 monochrome, it means the colors that were selected are wrong. This rule is true not exclusively for icons but for the whole graphic design.

Second, you will probably unable to apply common RGB. Of course, you can use GIF colors only, but this ties you hand and foot. Gradients, shadows, blending and many other effects will not be available to you.

Third, try to increase the portion of "plain" color. The more consistently colored parts without diffusion and jumps your project has, the more neat it looks. Pictograms are too small and the over usage of special filters makes the image look dirty.

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

Fifth, shadows and flares. All aspects of applying shades and flares in icon creation are totally identical to the rules of the overall graphic design. The only ine I have to note: create everything yourself. Don't use filters, make all shadows and highlights in a different layer and after that edit the opacity. If applying effects, you almost never know what the result will be. It is unfavorable when you don't control the making of a project. It is awful if you can't control it when drawing miniatures.

And, lastly, sixth. Nuancing is the key aspect of pictogram design, which largely results the esthetic appearance of the image. If the green human eye in the picture is sized 1 pixel, increase the color intensiveness. 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 case it will appear like a gray dot, but in the second one it will definitely be a blue eye.

completely control the image, do not let the visual tricks to ruin your design. It is acceptable if something is not consistent from the technical point of view, but the whole picture must be perfect.

As an example, I drew 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 icon design, this chapter wouldn't fit into a whole book, but the resolution of compositions ;limits fonts too.

The resolution of symbols is the leading issue as opposed to their look. Almost in any case, only if not the letters are the primary part of the composition, the font size must be reduced to the largest extent possible.

In general, almost any design company has its own font with small letters. This font can be crafted in a couple of hours. You can search the internet and collect your own collection of very nice fonts. Primarily, I advice you to get the DS Pixel and Seventen 7Vedi webpage as well as the entire series of fonts from the Lakmus Lab website.

If you don't want a new font, little sizes of Arial and Verdana will work. 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 unrecognizable set 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 collection of stock icons for use in commercial and personal software and web-pages. The icons have a bright color palette, smooth and well-rounded borders. A variety of formats and resolutions is available.

Icon Beautify your accounting or market-oriented software with instantly available professional Business Toolbar Icons. More than two hundred of professionally designed and neatly crafted icons picturing different financial objects and symbols are provided.

Icon IconLover is our choice. It allows you to design and alter all kinds of graphics needed in the program development cycle, containing icons, simple and animated cursors and interface elements - all these types of graphics can now be designed in a single program.

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

Icon ICL-Icon Extractor will scan your files, archives, directories and all local drives for icons. It can download 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.