Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Aspects of Icon Design

Let's discuss purely technical details of icon making

1. Lines, slopes

One of the vital parts of the composition is the framework of the object, i.e. rough linear marking, which limits the object from the rest of the image. When creating large-scale images, the artist occasionally cares about defining objects with additional lines. This is not needed because of the scale: even low contrast objects do not mix into a single whole. Pixel graphics is other story. Two solutions are available: either foreground and background colors have to be from different sides of the color wheel, or the object must be divided from the background by visible lines and shadows. I will discuss lines in more detail.

If we return again to the big-size images, we see that in order to define contours, we can use any (even the most complicated) angles, Bezier curves and edges. In any case, the line will look ideal thanks to anti-aliasing. When decreasing the graphic dimensions to the small icon size, situation changes dramatically. When each particular pixel is vitally valuable and can ruin the whole appearance of the composition, anti-aliasing is just not applicable. It means that you should consider the possible line slopes.

The angle you select for the line, specifies the step for this line. This means that each line is made of basic elements, the union of which determines its accuracy and visual appeal.

For example, a 18-degree angle consists of many tiny 3-pixel lines connected using a 1-pixel downshift:
Lines and pixels

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

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

It can be easily seen which line is more attractive. The 25-degree angle produses a line containing equal 2-pixel primary elements. The 20-degree slope has a primary element containing of three parts: 3-pixel, 3-pixel and 2-pixel. The slope is more complex, thus, when not supported by other visual effects, it creates a feeling of untidiness: the primary elements have contrast which is too strong to hide from the human sight.

Now we can come to the first rule. The most "appropriate" angles must make as plain basic elements as possible. therefore, the perfect angles are 0 and 90 degrees. In those, 1-pixel primary elements are combined without any shift and form smooth lines. Less ideal are angles which form primary 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 image and provide to the user what you intended to show to him. Also, the mentioned slopes can be considered acceptable (but at a stretch): slopes with primary elements consisting of unequal lines shifted by more than 1 pixel.

For example:

It is the time to touch another problem. In the last paragraph, I purposely defined slopes with primary elements of 1, 2 and 3 pixels as acceptable. Such tiny lines, especially when a great number of them is combined, appear as a single whole. But what do we see if we increase the basic elements to 10 or 20 pixels?

Here is an example:
Low quality line

It can be obviously noticed that the line doesn't have integrity. It is not a continuous line now; it is a combination of several lines, situated near one another. Rarely any artist wants its creation to look inconsistent. Thus, we have another rule: if you use small angles, which produse long primary elements, it has to be justified and used with great caution.

And, finally, the third aspect I have to mention about lines. I did write that the primary element has to be as simple as possible.

For example, a 25-degree angle can be drawn in the two (sure more of them exists) 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 complex primary element made the line messy.

Such examples can be made for almost any angle, so in your projects, make sure to simplify as much as possible.

2. Color

It can be said without an exaggeration that the color is the leading aspect of your work; improper or poorly balanced colors can kill even the best idea. What can we write about the color in miniature graphics?

First, there is a certain rule: if the picture looks poor when reduced to grayscale, then the colors that were chosen are incorrect. This rule is valid not only for icons but for the whole graphic design.

Second, you will be unable to apply common RGB. Sure, 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 increase the portion of "plain" color. The more evenly colored parts without blurring and jumps your project has, the more clear it looks. Pictograms are too small and the excess usage of complex filters makes the picture look dirty.

Fourth, gradients. This is a great tool which can improve the appearance of any composition. Besides visuals, gradients are an ideal way to get rid of the "broken line" effect (lines with too long primary elements). But be attentive when applying them since too much gradients can ruin the flat color, and be not suitable for the gif palette.

Fifth, shadows and flares. All aspects of using shades and highlights in icon creation are completely the same to the rules of the general graphic design. The only thing I would like to note: draw everything yourself. Don't apply filters, make all shades and flares in a different layer and after that edit its transparency. If applying effects, you rarely know what will it look like. It is unfavorable when you can't control the process of creating of a project. It is worse if you can't control it when creating miniatures.

And, finally, sixth. Tinting is the key detail of icon design, which largely results the visual appearance of the image. If the blue human eye in the image is sized 1 pixel, increase the color intensiveness. For instance, instead of 0, 131, 159 make 71, 195, 242. It doesn't matter that the human eye never has this color; in the first case it will appear like a gray dot, and in the second example it will definitely be a blue eye.

completely control the picture, do not allow the optical tricks to ruin your design. It is acceptable if objects is not consistent from the technical point of view, but the whole composition must be flawless.

As an example, I pictured the pack of juice standing before me. The picture has plain color, gradients with broken lines, shadows and flares and nuances.

3. Font

If I wrote about something bigger than icon creation, this chapter wouldn't fit into an entire book, but the resolution of images ;limits fonts too.

The size of letters is the leading issue as opposed to their beauty. Almost in any case, unless the letters are the main part of the image, the font size must be decreased to the largest extent possible.

In general, almost any graphic company has its own font with little letters. Such a font can be made in several hours. You can search the web and make your own library of very nice fonts. First of all, I would recommend you to download the DS Pixel and Seventen 7Vedi website as well as the complete series of fonts from the Lakmus Lab website.

If you don't want a new font, small sizes of Arial and Verdana may do. As a last resort, you can create the necessary letters 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 incomprehensible set of pixels.

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

Popular Icon editors
Icon Perfect Toolbar Icons is a set of ready-made icons for use in business and private software and websites. All icons have a bright color palette, smooth and well-rounded edges. A variety of formats and resolutions is provided.

Icon Enhance your financial or market-oriented program with readily available 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 choice. It enables you to create and edit all kinds of graphics needed in the software development cycle, containing icons, simple and animated cursors and interface elements - all these kinds 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 possible to turn 256-color icons into True Color icons and XP icons.

Icon ICL-Icon Extractor will search your files, archives, folders and all local disks 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 few seconds. Make great icons for Windows Vista. Easily change, alter and save icons that Windows selects to display standard objects, directories, files.