Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Aspects of Icon Design

Let's discuss purely technical details of icon creation

1. Lines, slopes

One of the most important parts of the image is the outline of the object, i.e. solid linear marking, which separates the object from the background. When designing normal-sized graphics, the designer rarely thinks about highlighting of objects with additional lines. This is unnecessary because of the size: even low contrast objects do not mix into a single whole. Pixel graphics is other story. Two solutions are available: either object and background colors must be from different sides of the color chart, or the foreground must be divided from the background by contrast lines and shadows. I would like to dwell on lines deeper.

If we return again to the large scale images, we see that in order to highlight edges, we can use all (even the most complicated) angles, Bezier splines and borders. Anyway, the line will look perfect due to anti-aliasing. When decreasing the image dimensions to the small icon size, situation changes dramatically. When every particular pixel is equally valuable and can ruin the whole look of the composition, anti-aliasing is just not applicable. It means that you have to consider the possible line slopes.

The angle you choose for the line, determines the step of this line. Because every line is made of basic elements, the union of which determines its accuracy and esthetics.

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

This is how nearly every line looks like. Basic element with joining followed by another basic element. Unfortunately, not each angle makes the line look attractive and not annoying.

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

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

Now we can see the first conclusion. The most "appropriate" angles have to make as plain primary elements as possible. therefore, the perfect angles are 0 and 90 degrees. In them, 1-pixel primary elements are joined 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 even, but the human brain will process the picture and provide to the viewer what you intended to show to him. Also, the following angles 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 touch another issue. In the last paragraph, I intentionally defined slopes with primary elements of 1, 2 and 3 pixels as acceptable. Such small lines, especially when a great amount of them is joined, appear as a single whole. But what happens 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 set of different lines, located near one another. Hardly any designer wants its composition to look that way. Thus, we have the second rule: if you use small angles, which make long primary elements, it has to be reasoned and used with great caution.

And, finally, the third aspect I have to tell about lines. I already wrote that the basic element should be as simple as it can.

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

In the first case the primary element is a 2-pixel line. In the other case, it is made of three lines: 3-pixel, 2-pixel and 1-pixel. The same slope but the image is different. The complex primary element produced the line messy.

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

2. Color

It can be stated without an overstatement that the color is the main aspect of your work; not suiting or badly matched colors can kill even the best idea. What can we say about the color in miniature graphics?

First, there is a clear rule: if the image looks bad when converted to monochrome, then the colors that were selected are incorrect. This rule is valid not exclusively for icons but for the entire graphic design.

Second, you will be unable to apply safe RGB. Sure, you may use GIF colors only, but this limits you greatly. Gradients, shadows, blending and many other tricks will not be accessible to you.

Third, try to enlarge the portion of "plain" color. The more consistently colored parts without diffusion and jumps your picture has, the more neat it appears. Pictograms are too small and the excess usage of complex filters makes the picture look messy.

Fourth, gradients. This is a wonderful instrument which can improve the look of any project. Other than esthetics, gradients are an ideal solution to abolish the "broken line" look (lines with too long basic elements). But be attentive when applying them since too many gradients can ruin the flat color, and be unable to fit into the gif palette.

Fifth, shadows and flares. All aspects of using shades and highlights in icon making are completely identical to the rules of the overall graphic design. The only ine I have to mention: create everything by hand. Don't apply effects, make all shadows and highlights in a separate layer and after that edit the opacity. When using filters, you rarely know what will it look like. It is unfavorable when you don't control the making of a project. It is awful if you can't control it when creating miniatures.

And, lastly, sixth. Nuancing is the key aspect of pictogram creation, which greatly results the esthetic look of the image. When the blue human eye in the icon is sized 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 such color; in the first case it will appear like a gray dot, but in the second case it will definitely be a blue eye.

Thoroughly control the picture, do not allow the optical illusions to ruin your design. It is OK if objects is not consistent from the technical point of view, but the entire image must be flawless.

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

3. Font

If I wrote about something other than icon creation, this chapter wouldn't fit into a whole book, but the size of images restricts fonts too.

The resolution of letters is the main issue as opposed to their fineness. Nearly in all cases, only if not the letters are the primary part of the composition, the font size has to be decreased to the largest extent possible.

In general, almost any design studio has its unique font with tiny characters. This font can be made in several hours. You can browse the web and collect your own library of very interesting fonts. Primarily, I advice you to get the DS Pixel and Seventen 7Vedi webpage as well as the whole set of fonts from the Lakmus Lab website.

If you don't need a new font, little sizes of Arial and Verdana may work. As a last resort, you can create the needed characters 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 cannot use anti-aliasing. It transforms the text into an incomprehensible set of pixels.

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

Popular Icon editors
Icon Perfect Toolbar Icons is a set of pre-made icons for use in commercial and personal programs and web-pages. The icons have a balanced color palette, sleek and well-rounded borders. A variety of formats and sizes is available.

Icon Beautify your financial or market-oriented program with readily accessible professional Business Toolbar Icons. More than two hundred of wonderfully designed and neatly created icons picturing various financial objects and currencies are included.

Icon IconLover is our choice. It enables you to create and alter any kind of graphics required in the program development cycle, including icons, static and animated cursors and interface elements - all these kinds of images can now be created in a single program.

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

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

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