Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Design

Let's consider strictly technical aspects of icon creation

1. Lines, angles

One of the vital elements of the image is the framework of the object, i.e. solid border, which limits the object from the background. When creating normal-sized graphics, the artist occasionally cares about highlighting of objects with complementary outlines. This is not needed because of the size: even non-contrasted objects do not mix into a single whole. Pixel graphics is different. Two solutions are available: either foreground and background colors have to be from different sides of the color wheel, or the foreground must be separated from the background by contrast lines and shadows. I will dwell on lines in more detail.

If we return again to the big-size graphics, we can note that in order to highlight edges, we can use any (including the most complex) angles, Bezier curves and borders. Anyway, the line will look ideal due to anti-aliasing. When decreasing the graphic scale to the small icon size, situation changes dramatically. When each particular pixel is equally valuable and can change the overall look of the icon, anti-aliasing is simply unreasonable. It comes that you have to consider the possible line slopes.

The slope you choose for the line, specifies the step of this line. This means that every line consists of primary elements, the combination of which determines 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 followed by second basic element. Unfortunately, not each angle makes the line look attractive and not annoying.

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

It can be easily seen which line is more appealing. The 25-degree slope makes a line consisting of equal 2-pixel primary elements. The 20-degree slope has a basic element containing of three parts: 3-pixel, 3-pixel and 2-pixel. The slope is more complicated, thus, if not supported by other visual effects, it creates a feeling of untidiness: the primary elements have contrast which is too obvious to escape the human eye.

Here we can see the first conclusion. The most "correct" angles have to make as simple basic elements as possible. Thus, the ideal angles are 0 and 90 degrees. In them, 1-pixel basic elements are joined without downshift and produce even lines. Less perfect are angles which form primary elements of 1, 2, 3 pixel with 1-pixel downshift. Surely, the lines can not be smooth, but the human sight will process the image and provide to the viewer what you meant to show to him. Also, the mentioned angles can be considered correct (but at a stretch): slopes with primary elements made of different lines shifted by more than 1 pixel.

For example:

It is the time to discuss another problem. In the previous paragraph, I intentionally defined slopes with primary elements of 1, 2 and 3 pixels as acceptable. Such tiny lines, especially when a large number of them is joined, appear as solid. But what happens if we increase the primary elements to 10 or 20 pixels?

Here is an example:
Low quality line

It can be clearly noticed that the line loses its integrity. It is not a continuous line now; it is a combination of several lines, located near one another. Hardly any designer wants its creation to look that way. Thus, we come to another conclusion: if you use small slopes, which make long basic elements, it must be reasoned and employed with maximum caution.

And, finally, the third thing I wanted to mention about lines. I did write that the primary element should be as simple as it can.

For example, a 25-degree slope can be produced in the two (sure more of them exists) following ways:
25-degree angles

In the first picture the basic element is a 2-pixel line. In the other picture, 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.

This examples can be produced for about any angle, so in your works, make sure to simplify as much as possible.

2. Color

It can be said without an overstatement that the color is the main aspect of your work; improper or badly balanced colors can ruin even the best idea. What can we say about the color in icon graphics?

First, there is a clear rule: if the picture looks poor when reduced to monochrome, then the colors that were chosen are incorrect. This rule is true not only for icons but for the whole graphic design.

Second, you will probably 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 "flat" color. The more evenly colored parts without blurring and jumps your picture has, the more clear it looks. Icons are too tiny and the over usage of complex filters makes the picture look messy.

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

Fifth, shadows and highlights. All rules for using shadows and highlights in icon making are completely identical to the rules of the overall graphic design. The only ine I have to note: create everything yourself. Don't use effects, make all shadows and flares in a separate layer and then edit the opacity. When using effects, you almost never know what will it look like. It is unfavorable when you can't control the making of a composition. It is worse if you can't control it if creating miniatures.

And, finally, sixth. Tinting is the key aspect of pictogram design, which greatly results the visual look of the composition. When the blue human eye in the image is sized 1 pixel, increase the color saturation. For example, instead of 0, 131, 159 choose 71, 195, 242. It doesn't matter that the human eye can't have this color; in the first case it will look like a gray dot, and in the second example it will really be a green eye.

completely control the picture, do not allow the optical tricks to spoil your design. It is acceptable if something is not consistent technically, but the whole composition must be perfect.

As an example, I drew the pack of juice located in front of me. The image has flat color, gradients with broken lines, shades and highlights and nuances.

3. Font

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

The resolution of symbols becomes the leading issue as opposed to their fineness. Nearly in all cases, only if not the letters are the primary part of the image, the font size must be reduced to the largest extent possible.

In principle, almost any design company has its exclusive font with tiny letters. This font can be crafted in a few hours. You can search the internet and make your own collection of very interesting fonts. Primarily, I advice you to download the DS Pixel and Seventen 7Vedi webpage and the entire series of fonts from the Lakmus Lab website.

If you don't want a new font, small sizes of Arial and Verdana may do. As a last resort, you can create the necessary characters by hand.

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



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

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

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

Icon Enhance your accounting or business-oriented software with readily available professional Business Toolbar Icons. More than two hundred of wonderfully designed and carefully created icons representing different financial objects and symbols are provided.

Icon IconLover is our pick. 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 kinds of images can now be created in a single program.

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

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

Icon Perfect Icon creates icon from any image file (PNG, JPEG, BMP, TIFF, WMF and more) in just seconds. Make great icons for Windows Vista. Easily replace, colorize and save icons that Windows selects to display typical objects, directories, files.