Logo Symbol Icons HomeDownloadsBuyContact  
Home
Icons
Icon Design
Downloads
Order
Support

Technical Aspects of Icon Making

Let's discuss purely technical details of icon design

1. Lines, slopes

One of the vital parts of the composition is the framework of the object, i.e. rough linear marking, which separates the object from the rest of the image. When creating large-scale graphics, the artist rarely thinks about highlighting of objects with additional outlines. This is unnecessary because of the scale: even low contrast objects do not mix into a single whole. Icon graphics is different. Two variants are available: either foreground and background colors have to be from opposite sides of the color wheel, or the object should be divided from the background by contrast lines and shadows. I will dwell on lines in more detail.

If we think more to the large scale graphics, we see that in order to highlight edges, we can use any (even the most complex) angles, Bezier curves and edges. Anyway, the line will appear ideal thanks to anti-aliasing. When shrinking the graphic scale to the small icon size, situation changes dramatically. When every single pixel is equally important and can ruin the whole appearance of the icon, anti-aliasing is just unreasonable. It comes that you should consider the possible line slopes.

The slope you choose for the line, determines the step for this line. Because every line is made of primary elements, the union of which defines its neatness and visual appeal.

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

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

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

It can be easily seen which line is more attractive. The 25-degree slope produses a line containing even 2-pixel basic elements. The 20-degree slope has a basic element consisting of three lines: 3-pixel, 3-pixel and 2-pixel. The slope is more complex, therefore, when not combined by other visual effects, it brings a feeling of untidiness: the basic elements have contrast which is too obvious to hide from the human eye.

Here we can see the first rule. The most "appropriate" slopes must make as plain basic elements as possible. Thus, the ideal angles are 0 and 90 degrees. In those, 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. Surely, the lines will not be smooth, but the human brain will process the picture and present to the viewer what you intended to show to him. Also, the following angles can be considered correct (but at a stretch): angles with basic elements made of unequal lines shifted by more than 1 pixel.

For example:
Line

It is the time to discuss another issue. In the previous paragraph, I intentionally defined slopes with basic elements of 1, 2 and 3 pixels as correct. Such small lines, especially when a large number 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 solidness. It is not a continuous line now; it is a set of several lines, located near one another. Rarely any designer wants its creation to look that way. Thus, we come to the second conclusion: if you use small angles, which produse long primary elements, it has to be justified and used with maximum attention.

And, finally, the third aspect I wanted to mention about lines. I did write that the basic element has to be as plain as it can.

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

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

2. Color

It can be stated without an overstatement that the color is the main element of your work; improper or poorly balanced colors can ruin even the most creative idea. What can we write about the color in icon graphics?

First, there is a certain rule: if the image looks poor when reduced to grayscale, then the colors that were chosen are incorrect. This rule is valid not only for icons but for the whole graphic design.

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

Third, try to enlarge the portion of "flat" color. The more evenly colored parts without diffusion and jumps your composition has, the more neat it appears. Pictograms are too small and the over usage of complex filters makes the image look dirty.

Fourth, gradients. This is a wonderful instrument which can improve the look of any picture. Besides visuals, gradients are a perfect solution to abolish the "broken line" effect (lines with too long primary elements). But be attentive when applying them since too much gradients can ruin the flat color, and be unable to fit into the gif palette.

Fifth, shadows and flares. All rules for applying shadows and highlights in icon design are totally identical to the aspects of the general graphic design. The only ine I would like to note: draw everything yourself. Don't use filters, make all shades and flares in a different layer and after that edit its transparency. If applying filters, you almost never can predict what will it look like. It is unfavorable when you don't control the process of creating of a project. It is awful if you don't control it when drawing miniatures.

And, finally, sixth. Tinting is the key aspect of icon design, which largely affects the visual appearance of the image. If the green human eye in the picture has the size of 1 pixel, increase the color intensiveness. For instance, instead of 0, 131, 159 choose 71, 195, 242. It is indifferent 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 really be a green eye.

Thoroughly control the image, do not let the visual illusions to ruin your work. It is OK if objects is not perfect technically, but the entire picture must be perfect.

As an example, I drew the packet of juice standing before me. The image has flat color, gradients with broken lines, shadows and flares and nuances.
Juice

3. Font

If I talked about something other than icon design, this chapter wouldn't fit into an entire book, but the size of images restricts fonts too.

The resolution of symbols is the main aspect as opposed to their beauty. Nearly in all cases, unless the letters are the main part of the project, the font size has to be decreased to the greatest extent possible.

In general, almost any graphic company has its own font with little letters. This font can be made in several hours. You can search the internet and collect your own library of very nice fonts. Primarily, I advice you to download the DS Pixel and Seventen 7Vedi webpage and the whole series of fonts from the Lakmus Lab website.

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

There are quite a few rules there. First, characters cannot be less than 5 pixels high or less than 3 pixels wide.

Example:

Font

Second, letters cannot use anti-aliasing. It turns the font into an unrecognizable set of pixels.

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

 Information
Popular Icon editors
Icon Perfect Toolbar Icons is a set of stock icons for use in business and private programs and websites. All icons have a bright color scheme, smooth and well-rounded edges. A variety of formats and sizes is available.

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

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

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

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

Icon Perfect Icon makes icon from any image 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 uses to display typical objects, directories, files.