Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Creation

Let's consider purely technical details of icon design

1. Lines, angles

One of the vital parts of the image is the outline of the object, i.e. solid border, which separates the object from the rest of the image. When creating normal-sized graphics, the designer rarely thinks about highlighting of objects with complementary outlines. This is unnecessary because of the size: even low contrast objects do not blur into a one. Icon graphics is different. Two solutions are possible: either foreground and background colors must be from different sides of the color wheel, or the foreground should be separated from the background by contrast lines and shadows. I would like to discuss lines deeper.

If we think again to the large scale graphics, we see that in order to highlight contours, we can use any (even the most complicated) angles, Bezier curves and edges. In any case, the line will look perfect due to anti-aliasing. When shrinking the graphic scale to the small icon size, situation changes dramatically. When each single pixel is vitally important and can ruin the overall appearance of the composition, anti-aliasing is just unreasonable. It means that you should consider the possible line slopes.

The angle you choose for the line, specifies the step of this line. This means that each line consists of primary elements, the combination of which determines its neatness and esthetics.

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

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

For example, here are 25 and 20-degree slopes:

It can be easily known which line is more appealing. The 25-degree slope produses a line containing even 2-pixel basic elements. The 20-degree slope has a basic element containing of three parts: 3-pixel, 3-pixel and 2-pixel. The angle is more complicated, thus, when not supported by additional visual effects, it brings a feeling of untidiness: the basic elements have contrast which is too obvious to escape the human eye.

Now we can see the first rule. The most "appropriate" angles have to make as plain primary elements as possible. therefore, the perfect angles are 0 and 90 degrees. In those, 1-pixel basic elements are combined without downshift and form even lines. Less ideal are angles which form basic elements of 1, 2, 3 pixel with 1-pixel downshift. Surely, the lines can not be smooth, but the human brain will process the image and provide to the user what you intended to show to him. Also, the mentioned 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 touch another issue. In the previous paragraph, I purposely defined angles with primary elements of 1, 2 and 3 pixels as acceptable. Such tiny lines, especially when a great amount of them is joined, appear as solid. But what do we see if we change the primary elements to 10 or 20 pixels?

Here is an example:
Low quality line

It can be clearly seen that the line loses its solidness. It is not a continuous line anymore; it is a set of different lines, situated near one another. Rarely any artist wants its creation to look that way. So, we have the second rule: if you use small angles, which make long basic elements, it has to be reasoned and employed with great attention.

And, finally, the last aspect I wanted to tell about lines. I already wrote that the primary element should be as plain 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 picture the basic element is a 2-pixel line. In the second picture, it is made of three elements: 3-pixel, 2-pixel and 1-pixel. The same angle but the image is different. The complicated primary element made the line messy.

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

2. Color

It can be stated without an overstatement that the color is the leading element of your work; improper or badly matched colors can kill even the best idea. What can we write about the color in miniature graphics?

First, there is a clear rule: if the picture looks poor when reduced to grayscale, it means the colors that were chosen are wrong. This rule is true not exclusively for icons but for the whole graphic design.

Second, you will probably unable to apply common RGB. Of course, you can use GIF colors only, but this ties you hand and foot. Gradients, shadows, dithering and many other effects will not be accessible to you.

Third, try to increase the areas of "plain" color. The more consistently colored areas without diffusion and jumps your project has, the more clear it looks. Pictograms are too small and the excess usage of special filters makes the image look dirty.

Fourth, gradients. This is a wonderful instrument which can change the look of any composition. Other than esthetics, gradients are an ideal solution to abolish the "broken line" look (lines with too long primary elements). But be attentive when using them because 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 flares in icon design are completely the same to the rules of the overall graphic design. The only thing I would like to note: draw everything by hand. Don't use filters, make all shades and highlights in a separate layer and after that edit the opacity. If applying effects, you rarely can predict what will it look like. It is unfavorable when you can't control the process of creating of a project. It is worse if you can't control it when creating icons.

And, lastly, sixth. Nuancing is the key detail of icon creation, which greatly results the visual look of the composition. If the blue human eye in the image has the size of 1 pixel, increase the color intensiveness. For instance, 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 case it will appear like a gray dot, but in the second case it will really be a green eye.

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

As an example, I pictured the pack of juice standing before me. The picture has plain color, gradients with broken lines, shades and highlights and tints.

3. Text

If I wrote about something other than icon design, this chapter wouldn't fit into an entire book, but the resolution of compositions ;limits fonts too.

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

In principle, virtually any graphic studio has its exclusive font with small characters. This font can be made in a few hours. You can browse the internet and collect your own library of very nice fonts. First of all, I would recommend 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 want a new font, tiny typesizes of Arial and Verdana will work. As a last resort, you can draw the needed 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 should not use anti-aliasing. It turns the text into an unrecognizable mixture of pixels.

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

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

Icon Enhance your financial or business-oriented software with instantly accessible professional Business Toolbar Icons. More than two hundred of wonderfully designed and neatly crafted icons picturing various financial objects and symbols are included.

Icon IconLover is our pick. It enables you to design and alter all kinds of graphics required in the software development cycle, including icons, static and moving 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 images. It's possible to convert 256-color icons into True Color icons and Vista icons.

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

Icon Perfect Icon creates icon from any image file (PNG, JPEG, BMP, TIFF, WMF and more) in few seconds. Create stylish icons for Windows XP. Easily change, alter and save icons that Windows uses to display standard objects, directories, files.