Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Aspects of Icon Creation

Let's consider strictly technical details of icon design

1. Lines, angles

One of the vital parts of the composition is the framework of the object, i.e. rough border, which limits the object from the background. When designing large-scale graphics, the artist occasionally cares about highlighting of objects with additional outlines. This is not needed because of the size: even low contrast objects do not blur into a single whole. Pixel graphics is different. Two solutions are available: either foreground and background colors must be from opposite sides of the color wheel, or the object should be separated from the background by visible lines and shadows. I will discuss lines deeper.

If we think again to the big-size graphics, we see that in order to highlight edges, we can use all (even the most complex) angles, Bezier curves and edges. Anyway, the line will appear perfect due to anti-aliasing. When shrinking the image dimensions to the size of an icon, situation changes dramatically. When each particular pixel is equally valuable and can ruin the overall appearance of the composition, anti-aliasing is simply not applicable. It comes that you have to consider the possible line angles.

The angle you select for the line, determines the step of this line. Because each line consists of basic elements, the combination of which determines its neatness and esthetics.

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

This is how almost every line looks like. Basic element followed by joining and second primary element. However, not each slope makes the line look neet and not messy.

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

It can be easily seen which line is more appealing. The 25-degree slope makes a line containing equal 2-pixel primary elements. The 20-degree angle has a basic element containing of three parts: 3-pixel, 3-pixel and 2-pixel. The angle is more complex, therefore, when not combined by additional visual effects, it creates a feeling of untidiness: the primary elements have contrast which is too obvious to hide from the human eye.

Now we can come to the first rule. The most "appropriate" angles have to make as simple primary elements as possible. Thus, the perfect angles are 0 and 90 degrees. In them, 1-pixel primary elements are combined without any shift and form smooth lines. Less perfect are angles which form basic elements of 1, 2, 3 pixel with 1-pixel downshift. Of course, the lines will not be even, but the human brain will process the picture and present to the user what you meant to show to him. Also, the mentioned slopes can be considered correct (but at a stretch): angles with primary elements consisting of unequal lines shifted by more than 1 pixel.

For example:

It is the time to move to another problem. In the last paragraph, I purposely defined angles with basic elements of 1, 2 and 3 pixels as acceptable. Such tiny lines, especially when a great amount of them is combined, look like solid. 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 obviously seen that the line doesn't have solidness. It is not a single line anymore; it is a combination of several lines, situated near each other. Hardly any designer wants its creation to look inconsistent. So, we come to the second conclusion: if you use small angles, which produse long basic elements, it has to be justified and used with maximum caution.

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

For instance, a 25-degree slope can be produced in the two (sure more of them exists) following ways:
25-degree angles

In the first picture the basic element is a 2-pixel line. In the other case, it is made of three elements: 3-pixel, 2-pixel and 1-pixel. The same angle but the look is different. The complicated primary element produced the line messy.

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

2. Color

It can be said without an exaggeration that the color is the main element of your work; not suiting 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 certain rule: if the image looks poor when reduced to grayscale, it means the colors that were chosen are incorrect. This rule is valid not only for icons but for the whole graphic design.

Second, you will probably unable to use safe RGB. Of course, you may select internet colors only, but this limits you greatly. Gradients, shadows, blending and many other effects will not be available to you.

Third, try to enlarge the areas of "flat" color. The more evenly colored areas without blurring and jumps your project has, the more clear it appears. Pictograms are too small and the over usage of special filters makes the picture look messy.

Fourth, gradients. This is a wonderful tool which can change the look of any composition. Besides esthetics, gradients are an ideal solution to abolish the "broken line" look (lines with too long primary elements). But be attentive when using 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 using shades and flares in icon creation are totally identical to the rules of the general graphic design. The only thing I have to note: draw everything by hand. Don't apply filters, make all shades and highlights in a separate layer and after that edit the opacity. When using filters, you almost never can predict what will it look like. It is bad when you don't control the process of creating of a composition. It is worse if you don't control it if creating miniatures.

And, lastly, sixth. Tinting is the key detail of icon creation, which greatly affects the visual appearance of the image. When the blue human eye in the picture has the size of 1 pixel, increase the color saturation. For example, instead of 0, 131, 159 choose 71, 195, 242. It is indifferent 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 really be a green eye.

completely control the picture, do not let the optical tricks to spoil your design. It is acceptable if something is not perfect technically, but the whole composition must be flawless.

As an example, I pictured the pack of juice located before me. The image has flat color, gradients with broken lines, shades and flares and nuances.

3. Font

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

The resolution of letters becomes the leading aspect as opposed to their look. Nearly in any case, unless the letters are the primary part of the project, the font size has to be decreased to the largest extent possible.

In principle, virtually any graphic studio has its exclusive font with tiny characters. Such a font can be crafted in several hours. You can browse the internet and collect your own library of very interesting fonts. First of all, I advice 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 need a new font, small typesizes of Arial and Verdana will do. As a last option, you can draw the needed letters yourself.

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 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 collection of pre-made icons for use in commercial and private programs and web-pages. The icons have a bright color scheme, smooth and well-rounded edges. A variety of formats and sizes is provided.

Icon Enhance your financial or market-oriented software with readily accessible professional Business Toolbar Icons. More than two hundred of professionally designed and carefully created icons picturing various financial objects and currencies are provided.

Icon IconLover is our pick. It allows you to create and alter any kind of images required in the application development cycle, including icons, simple and moving cursors and interface parts - all these kinds of images can now be designed in a single program.

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

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

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