Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Making

Let's discuss purely technical aspects of icon creation

1. Lines, angles

One of the most important parts of the composition is the framework of the object, i.e. rough linear marking, which limits the object from the background. When designing large-scale graphics, the artist rarely cares about highlighting of objects with additional lines. This is not needed because of the size: even non-contrasted 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 must be divided from the background by visible lines and shadows. I would like to discuss lines in more detail.

If we think again to the large scale images, we can note that in order to define edges, we can use any (even the most complex) angles, Bezier curves and edges. In any case, the line will appear perfect thanks to anti-aliasing. When decreasing the graphic dimensions to the small icon size, situation changes greatly. When each particular pixel is vitally valuable and can ruin the overall look of the icon, anti-aliasing is just not applicable. It comes that you should consider the possible line angles.

The slope you select for the line, determines the step of this line. This means that every line is made of basic elements, the union of which determines its neatness and visual appeal.

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

This is how almost every line looks like. Primary element followed by joining and another primary element. However, not each angle creates lines that look look neet and not messy.

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

It can be easily seen which line is more appealing. The 25-degree slope produses a line consisting of equal 2-pixel basic elements. The 20-degree angle has a basic element containing of three lines: 3-pixel, 3-pixel and 2-pixel. The angle is more complicated, thus, when not combined by additional visual effects, it creates a feeling of messiness: the primary elements have contrast which is too obvious to escape the human sight.

Here we can see the first rule. The most "appropriate" slopes have to make as simple basic elements as they can. therefore, the ideal slopes are 0 and 90 degrees. In those, 1-pixel primary elements are combined without downshift and form smooth lines. Less perfect are angles which form basic elements of 1, 2, 3 pixel with 1-pixel downshift. Surely, the lines will not be smooth, but the human sight will process the picture and present to the user what you meant to show to him. Also, the following angles can be considered correct (but at a stretch): angles with primary elements made 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 intentionally defined angles with basic elements of 1, 2 and 3 pixels as correct. Such tiny lines, especially when a large number of them is combined, look like a single whole. 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 obviously seen that the line doesn't have integrity. It is not a continuous line now; it is a set of different lines, situated near each other. Hardly any designer wants its creation to look that way. So, we come to the second conclusion: if you use minimal angles, which make long primary elements, it must be reasoned and employed with maximum attention.

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

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 case the primary element is a 2-pixel line. In the second case, it is made of three lines: 3-pixel, 2-pixel and 1-pixel. The same slope but the look is different. The complex primary element made the line untidy.

Such examples can be produced for almost any slope, so in your projects, try to simplify everything.

2. Color

It can be said without an overstatement that the color is the leading aspect of your work; improper or poorly matched colors can ruin even the best idea. What can we say about the color in icon graphics?

First, there is a clear rule: if the image looks poor when reduced to grayscale, then 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 use common RGB. Of course, you may use GIF colors only, but this limits you greatly. 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 parts without blurring and jumps your picture has, the more clear it appears. Pictograms are too tiny and the excess usage of complex effects makes the image look dirty.

Fourth, gradients. This is a great instrument which can improve the appearance of any composition. Besides 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 much gradients can kill the flat color, and be unable to fit into the gif palette.

Fifth, shadows and highlights. All aspects of applying shadows and flares in icon making are completely identical to the rules of the overall graphic design. The only ine I have to note: draw everything yourself. Don't apply effects, make all shades and highlights in a separate layer and after that edit the opacity. When applying effects, you almost never can predict what the result will be. It is bad when you can't control the process of creating of a composition. It is awful if you don't control it when creating miniatures.

And, lastly, sixth. Tinting is the key aspect of icon creation, which largely affects the visual appearance of the project. If the green human eye in the icon 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 can't have such color; in the first case it will appear like a gray dot, and in the second one it will really be a blue eye.

completely control the image, do not let the optical illusions to spoil your work. It is OK if objects is not consistent technically, but the entire composition must be perfect.

As an example, I drew the pack of juice located in front of me. The picture has plain color, gradients with broken lines, shadows and flares and nuances.

3. Text

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

The resolution of symbols becomes the leading aspect as opposed to their beauty. Almost in any case, only if not the letters are the main part of the composition, the font size must be decreased to the largest extent possible.

In principle, virtually any design company has its own font with small letters. Such a font can be made in a couple of hours. You can browse the web and collect your own collection of very nice fonts. Primarily, I advice you to download the DS Pixel and Seventen 7Vedi website and the whole set of fonts from the Lakmus Lab website.

If you don't want a new font, little typesizes of Arial and Verdana may work. As a last option, you can draw the necessary letters by hand.

There are not many rules there. First, characters cannot be less than 5 pixels high or less than 3 pixels wide.



Second, letters cannot use anti-aliasing. It turns the text into an incomprehensible mixture 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 web-pages. All icons have a balanced color scheme, sleek and well-rounded edges. A variety of formats and sizes is available.

Icon Enhance your financial or business-oriented application with instantly accessible professional Business Toolbar Icons. More than two hundred of professionally designed and carefully created icons picturing different financial objects and symbols are included.

Icon IconLover is our choice. It allows you to design and alter any kind of graphics needed in the application development cycle, including icons, static 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 turn 256-color images 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 makes icon from any graphic file (PNG, JPEG, BMP, TIFF, WMF and more) in just seconds. Make stylish icons for Windows XP. Easily change, alter and save icons that Windows selects to display typical objects, directories, files.