Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Aspects of Icon Making

Let's discuss strictly technical aspects of icon creation

1. Lines, slopes

One of the most important elements of the image is the framework of the object, i.e. rough linear marking, which limits the object from the background. When working with large-scale images, the designer rarely thinks about defining objects with complementary lines. This is not needed because of the size: even non-contrasted objects do not blur into a single whole. Pixel graphics is other story. Two variants are possible: either foreground and background colors have to be from opposite sides of the color wheel, or the object must be separated from the background by visible lines and shadows. I will discuss lines deeper.

If we think more to the large scale images, we see that in order to define edges, we can use any (including the most complicated) angles, Bezier splines and borders. In any case, the line will look perfect thanks to anti-aliasing. When decreasing the image scale to the size of an icon, situation changes dramatically. When every particular pixel is vitally valuable and can change the whole appearance of the composition, anti-aliasing is just unreasonable. It means that you should think about the possible line slopes.

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

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

This is how almost each line looks like. Basic element with joining and another basic element. However, not every slope creates lines that look look attractive and not messy.

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

It can be easily known 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 angle is more complicated, therefore, when not supported by additional visual effects, it brings a feeling of untidiness: the primary elements have contrast which is too obvious to hide from the human eye.

Here we can see the first conclusion. The most "appropriate" angles must make as plain basic elements as possible. therefore, the perfect slopes are 0 and 90 degrees. In those, 1-pixel primary elements are joined without any shift and form even lines. Less perfect are slopes which form basic elements of 1, 2, 3 pixel with 1-pixel downshift. Surely, the lines will not be smooth, but the human brain will process the image and present to the viewer what you meant to show to him. Also, the mentioned angles can be considered acceptable (but at a stretch): angles with basic elements consisting of unequal lines shifted by more than 1 pixel.

For example:

It is the time to move to another problem. In the previous paragraph, I purposely defined angles with basic elements of 1, 2 and 3 pixels as correct. Such small lines, especially when a great amount of them is joined, look like a single whole. But what do we see if we change the basic elements to 10 or 20 pixels?

Here is an example:
Low quality line

It can be obviously noticed that the line loses its integrity. It is not a continuous line now; it is a combination of several lines, situated near each other. Hardly any designer wants its composition to look inconsistent. Thus, we have the second conclusion: if you use small slopes, which produse long primary elements, it must be justified and used with great attention.

And, finally, the last aspect I wanted to tell about lines. I already wrote that the primary element should be as plain as it can.

For example, 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 primary element is a 2-pixel line. In the second picture, it is made of three lines: 3-pixel, 2-pixel and 1-pixel. The same slope but the image is different. The complex basic element made the line messy.

This examples can be made for about any slope, so in your projects, try to simplify everything.

2. Color

It can be said without an exaggeration that the color is the leading element of your work; not suiting or badly 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 poor when converted to grayscale, it means the colors that were selected are incorrect. 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 may use internet colors only, but this ties you hand and foot. Gradients, shadows, dithering and many other tricks will not be accessible to you.

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

Fourth, gradients. This is a great tool which can improve the look of any project. Besides esthetics, gradients are a perfect solution to abolish the "broken line" look (lines with too long basic elements). But be attentive when applying them because too much gradients can kill the plain color, and be unable to fit into the gif palette.

Fifth, shadows and flares. All rules for applying shades and highlights in icon design are totally identical to the aspects of the general graphic design. The only thing I would like to note: draw everything by hand. Don't use effects, make all shadows and flares in a different layer and then edit its transparency. When using filters, you rarely know what the result will be. It is bad when you can't control the process of creating 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 affects the esthetic appearance of the image. When the green human eye in the image has the size of 1 pixel, increase the color intensiveness. For instance, instead of 0, 131, 159 make 71, 195, 242. It is indifferent that the human eye never has this color; in the first example it will look like a gray dot, and in the second example it will definitely be a blue eye.

completely control the image, do not allow the optical illusions to ruin your design. It is acceptable if something is not perfect technically, but the entire composition must be flawless.

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

3. Text

If I talked about something other than icon creation, this chapter wouldn't fit into a whole book, but the size of images restricts fonts too.

The resolution of symbols becomes the main issue as opposed to their look. Nearly in any case, only if not the letters are the main part of the image, the text size has to be reduced to the largest extent possible.

In general, almost any design studio has its own font with small letters. This font can be created in a few hours. You can browse the web and collect your own collection of very interesting fonts. Primarily, I would recommend 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 will work. As a last option, you can create the necessary 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 text into an unrecognizable mixture of pixels.

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

Popular Icon editors
Icon Perfect Toolbar Icons is a set of pre-made icons for use in business and personal software and websites. All icons have a balanced color scheme, sleek and well-rounded edges. A variety of formats and sizes is provided.

Icon Enhance your accounting or business-oriented application with instantly accessible professional Business Toolbar Icons. Over two hundred of professionally designed and neatly created icons representing different financial objects and symbols are included.

Icon IconLover is our pick. It enables you to create and alter any kind of graphics needed in the program development cycle, containing icons, static and moving cursors and interface parts - all these types of graphics can now be designed 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 files, 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 just seconds. Create stylish icons for Windows Vista. Easily change, colorize and save icons that Windows selects to display typical objects, folders, files.