Logo Symbol Icons HomeDownloadsBuyContact  
Home
Icons
Icon Design
Downloads
Order
Support

Technical Aspects of Icon Design

Let's discuss strictly technical aspects of icon creation

1. Lines, angles

One of the vital parts of the image is the outline of the object, i.e. solid line, which limits the object from the rest of the image. When designing normal-sized graphics, the designer occasionally cares about defining objects with complementary lines. This is unnecessary because of the size: even low contrast objects do not blend into a one. Pixel graphics is other story. Two solutions are available: either object and background colors have to be from different sides of the color wheel, or the foreground should be separated from the background by contrast outlines and shadows. I will discuss lines in more detail.

If we return again to the big-size images, we see that in order to highlight edges, we can use all (even the most complex) angles, Bezier splines and edges. Anyway, the line will appear perfect due to anti-aliasing. When shrinking the image dimensions to the size of an icon, situation changes greatly. When every single pixel is equally important and can ruin the whole look of the icon, anti-aliasing is simply unreasonable. It comes that you should consider the possible line angles.

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

For instance, a 18-degree angle consists of many tiny 3-pixel lines combined with a 1-pixel downshift:
Lines and pixels

This is how almost every line looks like. Basic element with joining followed by another basic element. However, not each slope makes the line look neet and not messy.

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

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

Now we can see the first conclusion. The most "correct" angles must make as simple basic elements as they can. therefore, the perfect angles are 0 and 90 degrees. In them, 1-pixel basic elements are combined without any shift and produce even lines. Less perfect are angles which form basic elements of 1, 2, 3 pixel with 1-pixel downshift. Of course, the lines can not be smooth, but the human brain will process the image and provide to the viewer what you meant to show to him. Also, the mentioned 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:
Line

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 tiny lines, especially when a great number of them is joined, appear as solid. But what do we see 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 loses its solidness. It is not a continuous line now; it is a combination of different lines, located near each other. Rarely any designer wants its composition to look inconsistent. So, we have the second conclusion: if you use minimal angles, which make long primary elements, it must be justified and used with maximum attention.

And, finally, the third thing I wanted to mention about lines. I already wrote that the primary element has to be as simple as it can.

For example, 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 picture the primary element is a 2-pixel line. In the second picture, it consists of three elements: 3-pixel, 2-pixel and 1-pixel. The same slope but the image is different. The complicated primary element made the line untidy.

Such examples can be made for almost any angle, so in your works, try to simplify as much as possible.

2. Color

It can be stated without an exaggeration that the color is the leading aspect of your work; not suiting or poorly balanced colors can kill even the most creative idea. What can we write about the color in icon graphics?

First, there is a certain rule: if the picture looks bad when reduced to grayscale, it means the colors that were used are wrong. This rule is valid not only for icons but for the whole graphic design.

Second, you will be unable to apply safe RGB. Of course, you may use GIF 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 areas of "plain" color. The more consistently colored parts without diffusion and jumps your project has, the more neat it appears. Pictograms are too tiny and the over usage of complex filters makes the image look dirty.

Fourth, gradients. This is a wonderful tool which can change the look of any project. Besides visuals, gradients are a perfect way to abolish the "broken line" look (lines with too long primary elements). But be attentive when using them because too much gradients can ruin the flat color, and be not suitable for the gif palette.

Fifth, shadows and flares. All rules for applying shadows and highlights in icon making are completely the same to the rules of the general graphic design. The only ine I would like to mention: create everything yourself. Don't apply filters, make all shades and flares in a different layer and after that edit the opacity. If applying effects, you rarely know what will it look like. It is bad when you don't control the process of creating of a composition. It is worse if you don't control it if creating miniatures.

And, finally, sixth. Tinting is the key aspect of icon design, which greatly results the visual appearance of the image. When the green human eye in the image has the size of 1 pixel, increase the color saturation. For instance, instead of 0, 131, 159 choose 71, 195, 242. It doesn't matter that the human eye never has this color; in the first example it will appear like a gray dot, but in the second example it will really be a green eye.

Thoroughly control the picture, do not allow the visual illusions to ruin your work. It is OK if objects is not consistent from the technical point of view, but the entire composition must be perfect.

As an example, I pictured the packet of juice located before me. The image has plain color, gradients with broken lines, shades and highlights and nuances.
Juice

3. Font

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

The resolution of symbols is the main aspect as opposed to their fineness. Almost in all cases, only if not the letters are the main part of the project, the text size has to be decreased to the greatest extent possible.

In general, almost any graphic company has its unique font with small letters. This font can be made in several hours. You can search the internet and collect your own library of very nice fonts. First of all, I advice you to get 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, small typesizes of Arial and Verdana will do. As a last resort, you can draw the needed characters by hand.

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

Example:

Font

Second, letters should not use anti-aliasing. It turns the font into an unrecognizable mixture of pixels.

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

 Information
Popular Icon editors
Icon Perfect Toolbar Icons is a collection of stock icons for use in business and personal applications and websites. All icons have a bright color scheme, sleek and well-rounded edges. A variety of formats and resolutions is available.

Icon Enhance your accounting or market-oriented program with instantly accessible professional Business Toolbar Icons. Over two hundred of wonderfully designed and carefully created icons picturing different financial objects and symbols are included.

Icon IconLover is our pick. It allows you to design and alter any kind of graphics required in the application development cycle, including icons, simple and moving cursors and interface elements - all these kinds of images can now be created in a single application.

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

Icon ICL-Icon Extractor will search your images, archives, directories and all local disks for icons. It can download 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. Make stylish icons for Windows XP. Easily change, colorize and save icons that Windows uses to show typical objects, directories, files.