Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Creation

Let's consider purely technical aspects of icon design

1. Lines, slopes

One of the most important parts of the image is the outline of the object, i.e. solid linear marking, which limits the object from the background. When designing large-scale images, the artist rarely thinks about highlighting of objects with complementary outlines. This is unnecessary because of the size: even non-contrasted objects do not mix into a one. Pixel graphics is different. Two variants are available: either object and background colors must be from opposite sides of the color chart, or the foreground must be separated from the background by visible lines and shadows. I would like to discuss lines deeper.

If we return again to the large scale graphics, we can note that in order to highlight edges, we can use all (even the most complex) angles, Bezier curves and edges. Anyway, the line will appear ideal thanks to anti-aliasing. When decreasing the image dimensions to the size of an icon, situation changes dramatically. When each particular pixel is vitally valuable and can ruin the overall appearance of the composition, anti-aliasing is simply not applicable. 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. Because every line consists of basic elements, the union of which determines its neatness and visual appeal.

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

This is how nearly each line looks like. Basic element followed by joining and second primary element. Unfortunately, not each angle makes the line look neet and not annoying.

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

It can be easily known which line is more attractive. The 25-degree angle makes a line containing even 2-pixel basic elements. The 20-degree slope has a primary element containing of three parts: 3-pixel, 3-pixel and 2-pixel. The angle is more complicated, therefore, when 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 conclusion. The most "appropriate" angles must make as plain basic elements as possible. Thus, the ideal slopes are 0 and 90 degrees. In those, 1-pixel primary elements are joined without downshift and produce smooth lines. Less ideal are slopes which form primary elements of 1, 2, 3 pixel with 1-pixel downshift. Surely, the lines will not be even, but the human brain will process the picture and provide to the user what you intended to show to him. Also, the following angles can be considered correct (but at a stretch): slopes with basic elements consisting of unequal lines shifted by more than 1 pixel.

For example:

It is the time to discuss another issue. In the previous paragraph, I purposely defined angles with basic elements of 1, 2 and 3 pixels as acceptable. Such tiny lines, especially when a large number of them is combined, appear as a single whole. 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 noticed that the line loses its solidness. It is not a single line anymore; it is a combination of several lines, situated near one another. Hardly any artist wants its creation to look inconsistent. Thus, we have the second conclusion: if you use minimal angles, which make long basic elements, it must be reasoned and used with maximum caution.

And, finally, the third aspect I wanted to tell 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 (sure more of them exists) following ways:
25-degree angles

In the first case the primary 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 look is different. The complicated primary element produced the line messy.

Such examples can be made for about any angle, so in your projects, try to simplify everything.

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 certain rule: if the picture looks bad when reduced to grayscale, then the colors that were selected are wrong. This rule is true not only for icons but for the whole graphic design.

Second, you will be unable to use common 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 "flat" color. The more evenly colored areas without blurring and jumps your project has, the more neat it appears. Pictograms are too tiny and the over usage of special filters makes the picture look messy.

Fourth, gradients. This is a great instrument which can improve the appearance of any composition. Other than esthetics, gradients are a perfect solution to get rid of the "broken line" effect (lines with too long basic elements). But be careful when applying them because too much gradients can kill the plain color, and be unable to fit into the gif palette.

Fifth, shadows and highlights. All aspects of using shadows and highlights in icon design are totally identical to the aspects of the general graphic design. The only thing I would like to mention: create everything yourself. Don't use effects, make all shades and highlights in a separate layer and then edit its transparency. If applying effects, you almost never know what will it look like. It is unfavorable when you can't control the process of creating of a project. It is awful if you can't control it if drawing icons.

And, finally, sixth. Nuancing is the key detail of icon creation, which greatly affects the esthetic appearance of the composition. If the green human eye in the picture is sized 1 pixel, increase the color intensiveness. For example, instead of 0, 131, 159 choose 71, 195, 242. It doesn't matter that the human eye can't have such color; in the first example it will appear like a gray dot, but in the second one it will definitely be a blue eye.

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

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

3. Font

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

The resolution of letters is the main aspect as opposed to their fineness. Almost in any case, unless the letters are the main part of the project, the text size has to be decreased to the greatest extent possible.

In general, virtually any graphic studio has its exclusive font with tiny letters. Such a font can be crafted in a couple of hours. You can search the web and collect your own collection of very interesting fonts. First of all, I advice you to get the DS Pixel and Seventen 7Vedi website and the entire set of fonts from the Lakmus Lab website.

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

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



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

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

Popular Icon editors
Icon Perfect Toolbar Icons is a set of ready-made icons for use in business and private applications and websites. All icons have a balanced color scheme, smooth and well-rounded edges. A variety of formats and resolutions is available.

Icon Beautify your accounting or market-oriented program with readily accessible professional Business Toolbar Icons. Over two hundred of wonderfully designed and carefully 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 software development cycle, including icons, simple and animated cursors and interface elements - all these types of graphics can now be created in a single application.

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

Icon ICL-Icon Extractor will scan your files, archives, directories and all local disks for icons. It can download 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. Make great icons for Windows Vista. Easily change, alter and save icons that Windows uses to show standard objects, folders, files.