Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Aspects of Icon Creation

Let's consider purely technical details of icon making

1. Lines, slopes

One of the most important parts of the image is the framework of the object, i.e. rough linear marking, which separates the object from the background. When working with normal-sized graphics, the artist rarely cares about highlighting of objects with additional outlines. This is unnecessary because of the size: even non-contrasted objects do not blend into a one. Icon graphics is other story. Two variants are possible: either object and background colors must be from opposite 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 large scale images, we see that in order to highlight edges, we can use any (including the most complicated) angles, Bezier splines and edges. Anyway, the line will appear ideal thanks to anti-aliasing. When decreasing the graphic dimensions to the small icon size, situation changes greatly. When each single pixel is equally valuable and can change the whole look of the icon, anti-aliasing is simply not applicable. It comes that you should consider the possible line slopes.

The slope you select for the line, specifies the step for this line. This means that every line consists of basic elements, the union of which determines its accuracy and esthetics.

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

This is how nearly each line looks like. Primary element followed by joining followed by another basic element. Unfortunately, not every angle makes the line look attractive and not annoying.

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

It can be easily seen which line is more appealing. The 25-degree angle produses a line consisting of equal 2-pixel primary elements. The 20-degree angle has a basic element consisting of three parts: 3-pixel, 3-pixel and 2-pixel. The slope is more complicated, therefore, if not supported by additional visual effects, it brings a feeling of messiness: the basic elements have contrast which is too strong to escape the human eye.

Now we can come to the first conclusion. The most "correct" angles must make as plain basic elements as they can. therefore, the perfect slopes are 0 and 90 degrees. In them, 1-pixel primary elements are joined without downshift and produce smooth lines. Less ideal are angles which form primary elements of 1, 2, 3 pixel with 1-pixel downshift. Surely, the lines can not be smooth, but the human sight will process the image and provide to the user what you meant to show to him. Also, the mentioned angles can be considered correct (but at a stretch): slopes with primary elements made 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 primary elements of 1, 2 and 3 pixels as correct. Such small lines, especially when a great amount of them is combined, look like solid. But what do we see 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 combination of different lines, situated near one another. Rarely any artist wants its composition to look that way. Thus, we come to the second rule: if you use minimal angles, which make long basic elements, it has to be reasoned and employed with maximum attention.

And, finally, the third aspect I have to mention about lines. I already wrote that the primary element should be as simple as it can.

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 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 primary element produced the line messy.

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

2. Color

It can be stated without an overstatement that the color is the leading element of your work; not suiting or badly matched 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 poor when converted to monochrome, then the colors that were chosen are incorrect. This rule is true not only for icons but for the whole graphic design.

Second, you will probably unable to apply common RGB. Of course, you can select GIF colors only, but this limits you greatly. Gradients, shadows, blending and many other effects will not be accessible to you.

Third, try to enlarge the areas of "flat" color. The more evenly colored areas without diffusion and jumps your picture has, the more neat it appears. Pictograms are too tiny and the excess usage of complex effects makes the picture look messy.

Fourth, gradients. This is a wonderful tool which can change the appearance of any picture. Besides esthetics, gradients are an ideal solution to get rid of the "broken line" effect (lines with too long basic elements). But be careful when using them because too much gradients can kill the flat color, and be not suitable for the gif palette.

Fifth, shadows and flares. All rules for using shades and highlights in icon creation are totally the same to the rules of the overall graphic design. The only thing I have to note: create everything yourself. Don't apply filters, make all shadows and highlights in a different layer and after that edit the opacity. If applying effects, you almost never know what will it look like. It is unfavorable when you don't control the making of a project. It is worse if you can't control it if creating miniatures.

And, lastly, sixth. Nuancing is the main detail of pictogram design, which largely results the visual look of the composition. If the green human eye in the icon is sized 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 case it will appear like a gray dot, but in the second example it will definitely be a blue eye.

Thoroughly control the image, do not let the visual illusions to spoil your work. It is OK if something is not consistent technically, but the entire picture must be perfect.

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

3. Text

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

The resolution of letters becomes the leading issue as opposed to their look. Nearly in all cases, only if not the letters are the main part of the composition, the font size must be reduced to the greatest extent possible.

In general, virtually any graphic company has its exclusive font with tiny characters. This font can be made in several hours. You can search the internet and collect your own collection of very nice fonts. First of all, I would recommend you to get the DS Pixel and Seventen 7Vedi webpage as well as the complete set 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 option, you can draw the needed 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 looks rather readable.

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

Icon Enhance your accounting or business-oriented application with readily available professional Business Toolbar Icons. More than two hundred of professionally designed and neatly crafted icons picturing different financial objects and currencies are included.

Icon IconLover is our choice. It allows you to create and alter any kind of graphics needed in the program development cycle, including icons, static and moving cursors and interface parts - all these kinds of graphics can now be created in a single application.

Icon Icon Processor is an icon converter. It creates icons from your pictures. It's easy to turn 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 get icons from the Internet and edit Windows icons.

Icon Perfect Icon creates icon from any image file (PNG, JPEG, BMP, TIFF, WMF and more) in few seconds. Create stylish icons for Windows XP. Easily change, alter and save icons that Windows selects to show standard objects, directories, files.