Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Aspects of Icon Making

Let's discuss purely technical aspects of icon creation

1. Lines, angles

One of the most important elements of the composition is the outline of the object, i.e. solid linear marking, which separates the object from the background. When working with large-scale graphics, the designer occasionally thinks about defining objects with complementary lines. This is unnecessary because of the size: even non-contrasted objects do not blend into a single whole. Icon graphics is different. Two solutions are available: either foreground and background colors have to be from opposite sides of the color wheel, or the foreground should be divided from the background by contrast outlines and shadows. I will discuss lines deeper.

If we think more to the large scale graphics, we can note that in order to highlight contours, we can use any (including the most complicated) angles, Bezier splines and borders. Anyway, the line will look ideal due to anti-aliasing. When shrinking the graphic dimensions to the size of an icon, situation changes greatly. When each particular pixel is vitally important and can ruin the whole look of the composition, anti-aliasing is simply not applicable. It means that you should think about the possible line slopes.

The angle you select for the line, determines the step of this line. This means that every line is made of basic elements, the union of which determines its accuracy 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 each line looks like. Primary element with joining followed by second primary element. However, not every angle makes the line look attractive and not annoying.

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

It can be easily known which line is more appealing. The 25-degree slope produses a line containing equal 2-pixel primary 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 combined by other visual effects, it creates a feeling of messiness: the basic elements have contrast which is too strong to hide from the human eye.

Now we can see the first rule. The most "appropriate" slopes must make as simple basic elements as they can. Thus, the ideal slopes are 0 and 90 degrees. In those, 1-pixel basic elements are joined without any shift and form smooth lines. Less perfect are angles which form primary elements of 1, 2, 3 pixel with 1-pixel downshift. Of course, the lines will not be even, but the human sight will process the picture and present to the user what you intended to show to him. Also, the mentioned slopes can be considered correct (but at a stretch): angles with primary elements made of unequal lines shifted by more than 1 pixel.

For example:

It is the time to discuss another issue. In the previous paragraph, I intentionally defined angles with primary elements of 1, 2 and 3 pixels as correct. Such tiny lines, especially when a large amount of them is combined, look like a single whole. But what happens if we increase the primary 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, situated near each other. Hardly any artist wants its creation to look that way. Thus, we come to another rule: if you use small angles, which make long primary elements, it has to be justified and used with great attention.

And, finally, the last thing I wanted to tell about lines. I did write that the primary element has to be as simple as it can.

For example, a 25-degree angle 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 other picture, it consists of three lines: 3-pixel, 2-pixel and 1-pixel. The same angle but the image is different. The complicated primary element produced the line untidy.

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

2. Color

It can be stated without an exaggeration that the color is the main element of your work; improper or badly matched colors can kill even the most creative 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 grayscale, it means the colors that were chosen are wrong. This rule is valid not only for icons but for the whole graphic design.

Second, you will probably unable to use safe RGB. Sure, you may select internet colors only, but this limits you greatly. Gradients, shadows, dithering and many other effects will not be accessible to you.

Third, try to enlarge the areas of "flat" color. The more evenly colored areas without diffusion and jumps your project has, the more clear it looks. Icons are too small and the excess usage of complex filters makes the picture look messy.

Fourth, gradients. This is a great instrument which can change the appearance of any composition. Other than esthetics, gradients are a perfect solution to get rid of the "broken line" look (lines with too long basic elements). But be attentive when using them because too much gradients can ruin the plain color, and be not suitable for the gif palette.

Fifth, shadows and highlights. All aspects of using shades and highlights in icon creation are completely identical to the rules of the overall graphic design. The only thing I would like to mention: create everything yourself. Don't use filters, make all shades and flares in a different layer and then edit its transparency. If applying filters, you rarely can predict what the result will be. It is unfavorable when you don't control the making of a project. It is awful if you can't control it when drawing miniatures.

And, lastly, sixth. Tinting is the main aspect of icon creation, which greatly results the esthetic appearance of the image. When the green human eye in the icon is sized 1 pixel, increase the color intensiveness. For example, instead of 0, 131, 159 make 71, 195, 242. It is indifferent that the human eye never has such color; in the first case it will look like a gray dot, but in the second case it will really be a green eye.

Thoroughly control the image, do not let the visual tricks to ruin your design. It is acceptable if something is not consistent from the technical point of view, but the entire image must be perfect.

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

3. Font

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

The resolution of letters is the leading issue as opposed to their look. Nearly in any case, unless the letters are the main part of the project, the text size must be reduced to the greatest extent possible.

In general, virtually any design company has its own font with tiny characters. This font can be created in a couple of hours. You can browse the web and make your own library of very nice fonts. Primarily, I advice you to get the DS Pixel and Seventen 7Vedi webpage as well as the complete series of fonts from the Lakmus Lab website.

If you don't want a new font, small typesizes of Arial and Verdana will work. As a last option, you can draw the needed letters yourself.

There are quite a few 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 incomprehensible set of pixels.

However, 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 software and websites. All icons have a bright color palette, sleek and well-rounded edges. A variety of formats and resolutions is provided.

Icon Enhance your financial or business-oriented software with readily available professional Business Toolbar Icons. Over two hundred of wonderfully designed and neatly created icons representing different financial objects and symbols are included.

Icon IconLover is our choice. It enables you to design and alter all kinds of graphics required in the program development cycle, containing icons, simple and moving cursors and interface elements - all these kinds 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 convert 256-color images into True Color icons and Vista icons.

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

Icon Perfect Icon makes icon from any image file (PNG, JPEG, BMP, TIFF, WMF and more) in just seconds. Make great icons for Windows XP. Easily replace, alter and save icons that Windows selects to show standard objects, folders, files.