Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Design

Let's discuss strictly technical aspects of icon design

1. Lines, angles

One of the most important elements of the image is the outline of the object, i.e. rough linear marking, which limits the object from the background. When working with normal-sized images, the designer rarely thinks about highlighting of objects with complementary lines. This is not needed because of the size: even low contrast objects do not mix into a one. Pixel graphics is different. Two solutions are possible: either object and background colors must be from opposite sides of the color chart, or the foreground should be separated from the background by visible lines and shadows. I would like to dwell on lines in more detail.

If we think more to the large scale images, we can note that in order to highlight edges, we can use any (even the most complicated) angles, Bezier splines and borders. Anyway, the line will appear ideal thanks to anti-aliasing. When shrinking the graphic scale to the size of an icon, situation changes greatly. When every particular pixel is equally valuable and can ruin the whole appearance of the composition, anti-aliasing is simply unreasonable. It comes that you have to think about the possible line angles.

The angle you choose for the line, specifies the step for this line. This means that each line consists of primary elements, the combination of which defines its accuracy and esthetics.

For example, 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 with joining followed by another basic element. However, not each slope 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 attractive. The 25-degree slope produses a line consisting of even 2-pixel basic elements. The 20-degree angle has a basic element consisting of three parts: 3-pixel, 3-pixel and 2-pixel. The angle is more complicated, thus, if not supported by other visual effects, it creates a feeling of untidiness: the basic elements have contrast which is too obvious to escape the human sight.

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

For example:

It is the time to discuss another issue. In the previous paragraph, I purposely defined slopes with basic elements of 1, 2 and 3 pixels as acceptable. Such small lines, especially when a great amount of them is combined, appear as solid. But what happens if we change the basic 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 combination of several lines, situated near one another. Hardly any artist wants its composition to look that way. So, we come to another conclusion: if you use small slopes, which make long basic elements, it must be reasoned and used with great attention.

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

For example, a 25-degree angle can be produced in the two (of course more of them exists) following ways:
25-degree angles

In the first picture the primary element is a 2-pixel line. In the other picture, it consists of three elements: 3-pixel, 2-pixel and 1-pixel. The same slope but the image is different. The complicated basic element made the line untidy.

Such examples can be produced for almost any slope, so in your works, make sure to simplify as much as possible.

2. Color

It can be stated without an exaggeration that the color is the leading element of your work; not suiting or badly balanced colors can ruin even the best idea. What can we write 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 incorrect. This rule is valid not exclusively for icons but for the whole graphic design.

Second, you will be unable to apply common RGB. Sure, you can select GIF colors only, but this ties you hand and foot. Gradients, shadows, blending and many other effects will not be available to you.

Third, try to increase the areas of "plain" color. The more consistently colored parts without diffusion and jumps your composition has, the more neat it appears. Pictograms are too tiny and the over usage of complex effects makes the picture look messy.

Fourth, gradients. This is a wonderful instrument which can improve the look of any picture. Other than visuals, gradients are an ideal way to abolish the "broken line" look (lines with too long basic elements). But be careful when using them since too much gradients can kill the flat color, and be not suitable for the gif palette.

Fifth, shadows and highlights. All aspects of applying shades and flares in icon making are totally identical to the aspects of the overall graphic design. The only thing I have to mention: draw everything yourself. Don't use effects, make all shades and flares in a different layer and then edit its transparency. When applying effects, you rarely know what the result will be. It is unfavorable when you don't control the process of creating of a project. It is worse if you can't control it when drawing icons.

And, finally, sixth. Tinting is the key detail of pictogram creation, which greatly affects the esthetic look of the image. When the blue human eye in the picture is sized 1 pixel, increase the color saturation. For instance, instead of 0, 131, 159 make 71, 195, 242. It doesn't matter that the human eye never has such color; in the first example it will appear like a gray dot, and in the second one it will definitely be a green eye.

Thoroughly control the picture, do not allow the optical illusions to ruin your work. It is acceptable if something is not consistent technically, but the whole picture must be flawless.

As an example, I drew the packet of juice located in front of me. The picture has flat color, gradients with broken lines, shades and highlights and tints.

3. Font

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

The resolution of symbols is the leading aspect as opposed to their fineness. Almost in all cases, only if not the letters are the primary part of the image, the font size has to be reduced to the largest extent possible.

In general, almost any design company has its own font with tiny characters. Such a font can be crafted in a couple of hours. You can search the web and make your own collection of very nice fonts. Primarily, I advice you to download the DS Pixel and Seventen 7Vedi website as well as the whole series 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 letters yourself.

There are quite a few 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 font into an unrecognizable set of pixels.

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

Popular Icon editors
Icon Perfect Toolbar Icons is a set of stock icons for use in commercial and personal programs and websites. All icons have a balanced color palette, smooth and well-rounded borders. A variety of formats and resolutions is available.

Icon Enhance your accounting or business-oriented program with instantly available professional Business Toolbar Icons. Over two hundred of professionally designed and carefully created icons representing various financial objects and currencies are provided.

Icon IconLover is our pick. It allows you to design and alter all kinds of images required in the software development cycle, containing icons, simple and animated cursors and interface parts - all these kinds of graphics can now be designed in a single program.

Icon Icon Processor is an icon converter. It makes icons from your images. It's possible to turn 256-color icons into True Color icons and Vista icons.

Icon ICL-Icon Extractor will scan your images, archives, folders and all local drives 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 few seconds. Make great icons for Windows XP. Easily change, colorize and save icons that Windows uses to display typical objects, directories, files.