Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Design

Let's consider purely technical aspects of icon making

1. Lines, slopes

One of the vital parts of the composition is the framework of the object, i.e. solid line, which separates the object from the background. When designing normal-sized images, the artist occasionally cares about defining objects with complementary outlines. This is unnecessary because of the size: even low contrast objects do not blend into a one. Icon graphics is other story. Two solutions are available: either foreground and background colors must be from opposite sides of the color wheel, or the foreground should be separated from the background by visible lines and shadows. I will dwell on lines deeper.

If we think more to the big-size graphics, we see that in order to define contours, we can use any (including the most complex) angles, Bezier splines and edges. In any case, the line will look ideal thanks to anti-aliasing. When decreasing the image dimensions to the size of an icon, situation changes greatly. When every single pixel is equally valuable and can ruin the overall look of the icon, anti-aliasing is simply unreasonable. It comes that you should consider the possible line angles.

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

For example, a 18-degree slope contains 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 followed by another basic element. However, not every slope creates lines that look look attractive and not messy.

For example, look at 25 and 20-degree angles:

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

Here we can see the first conclusion. The most "correct" slopes must make as simple primary elements as they can. Thus, the ideal angles are 0 and 90 degrees. In them, 1-pixel basic elements are combined without downshift and produce smooth lines. Less ideal are slopes which form basic elements of 1, 2, 3 pixel with 1-pixel downshift. Surely, the lines can not be smooth, but the human sight will process the picture and present to the user what you intended to show to him. Also, the mentioned slopes can be considered acceptable (but at a stretch): angles with basic elements consisting of different lines shifted by more than 1 pixel.

For example:

Now we can discuss another problem. In the previous 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, look like a single whole. 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 noticed that the line doesn't have integrity. It is not a single line now; it is a set of several lines, situated near one another. Hardly any artist wants its composition to look that way. So, we have the second conclusion: if you use minimal slopes, which produse long primary elements, it must be justified and used with maximum attention.

And, finally, the third thing I wanted to tell about lines. I already wrote that the primary element should be as plain as possible.

For example, a 25-degree slope can be drawn in the two (sure more of them are possible) following ways:
25-degree angles

In the first case the basic 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 angle but the image is different. The complex basic element made the line untidy.

Such examples can be made for about any slope, so in your works, make sure to simplify everything.

2. Color

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

First, there is a clear rule: if the picture looks bad when converted to grayscale, then the colors that were used are wrong. This rule is valid not only for icons but for the entire graphic design.

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

Third, try to increase the portion of "plain" color. The more consistently colored areas without blurring and jumps your picture has, the more neat it appears. Pictograms are too small and the over usage of special effects makes the picture look dirty.

Fourth, gradients. This is a wonderful instrument which can improve the look of any composition. Besides visuals, gradients are a perfect way to get rid of the "broken line" effect (lines with too long primary elements). But be careful when applying them because too many 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 highlights in icon design are completely identical to the aspects of the general graphic design. The only ine I would like to mention: draw everything by hand. Don't apply effects, make all shadows and highlights in a separate layer and then edit its transparency. If applying effects, you rarely can predict what the result will be. It is unfavorable when you don't control the process of creating of a composition. It is worse if you can't control it when drawing icons.

And, lastly, sixth. Tinting is the key detail of pictogram creation, which greatly results the esthetic look of the project. When the green human eye in the icon has the size of 1 pixel, increase the color saturation. For example, instead of 0, 131, 159 make 71, 195, 242. It is indifferent that the human eye never has this color; in the first case it will appear like a gray dot, and in the second one it will really be a blue eye.

Thoroughly control the picture, do not let the visual tricks to ruin your design. It is acceptable if something is not perfect from the technical point of view, but the whole image must be perfect.

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

3. Text

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

The resolution of symbols is the main issue as opposed to their fineness. Almost in all cases, unless the letters are the primary part of the composition, the font size must be reduced to the greatest extent possible.

In principle, virtually any graphic company has its exclusive font with small letters. Such a font can be made in a couple of hours. You can search the web and make your own collection of very nice fonts. Primarily, I would recommend you to get the DS Pixel and Seventen 7Vedi webpage as well as the entire set of fonts from the Lakmus Lab website.

If you don't need a new font, small typesizes of Arial and Verdana will work. As a last resort, you can draw the necessary letters by hand.

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

However, 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 applications and websites. The icons have a bright color palette, smooth and well-rounded borders. A variety of formats and sizes is provided.

Icon Beautify your financial or market-oriented software with readily available professional Business Toolbar Icons. More than two hundred of wonderfully designed and carefully crafted icons representing various financial objects and symbols are included.

Icon IconLover is our choice. It enables you to design and edit all kinds of images needed in the program development cycle, including icons, simple and animated cursors and interface parts - all these types of images can now be designed in a single program.

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

Icon ICL-Icon Extractor will search your files, archives, directories and all local drives for icons. It can get icons from the Internet and customize Windows icons.

Icon Perfect Icon makes icon from any graphic file (PNG, JPEG, BMP, TIFF, WMF and more) in few seconds. Create great icons for Windows XP. Easily replace, colorize and save icons that Windows uses to show standard objects, directories, files.