Logo Symbol Icons HomeDownloadsBuyContact  
Home
Icons
Icon Design
Downloads
Order
Support

Technical Aspects of Icon Creation

Let's discuss strictly technical details of icon making

1. Lines, angles

One of the vital parts of the composition is the framework of the object, i.e. solid line, which separates the object from the background. When designing normal-sized graphics, the designer rarely cares about defining objects with additional outlines. This is unnecessary because of the size: even low contrast objects do not blend into a one. Icon graphics is different. Two variants are possible: either object and background colors must be from opposite sides of the color chart, or the object should be divided from the background by contrast lines and shadows. I will discuss lines in more detail.

If we return again to the large scale images, we can note that in order to highlight contours, we can use all (even the most complicated) angles, Bezier splines and edges. Anyway, the line will appear perfect thanks to anti-aliasing. When shrinking the graphic scale to the small icon size, situation changes greatly. When every single pixel is vitally important and can ruin the overall look of the icon, anti-aliasing is simply not applicable. It means that you have to consider the possible line slopes.

The angle you select for the line, specifies the step of this line. Because each line consists of basic elements, the combination of which determines its accuracy and visual appeal.

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

This is how nearly each line looks like. Primary element with joining followed by second basic element. Unfortunately, not each slope creates lines that look look neet and not annoying.

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

It can be easily seen which line is more attractive. The 25-degree slope makes a line consisting of equal 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, therefore, if not supported by other visual effects, it creates a feeling of untidiness: the primary elements have contrast which is too strong to hide from the human sight.

Here we can see the first conclusion. The most "appropriate" angles have to make as simple primary 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 smooth lines. Less ideal are angles which form basic elements of 1, 2, 3 pixel with 1-pixel downshift. Of course, the lines will not be smooth, but the human brain will process the picture and provide to the viewer what you intended to show to him. Also, the mentioned slopes can be considered acceptable (but at a stretch): angles with primary elements consisting of different lines shifted by more than 1 pixel.

For example:
Line

Now we can touch another problem. In the previous paragraph, I intentionally defined angles with basic elements of 1, 2 and 3 pixels as acceptable. Such tiny lines, especially when a great 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 clearly seen that the line loses its integrity. It is not a single line now; it is a combination of several lines, located near one another. Rarely any artist wants its composition to look that way. So, we have another conclusion: if you use small angles, which make long basic elements, it has to be reasoned and employed with great attention.

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

For instance, a 25-degree slope 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 other picture, it consists of three lines: 3-pixel, 2-pixel and 1-pixel. The same slope but the image is different. The complex basic element made the line messy.

Such examples can be produced for about any angle, so in your works, make sure to simplify everything.

2. Color

It can be stated without an exaggeration that the color is the main element of your work; not suiting or badly matched colors can ruin even the most creative idea. What can we say about the color in miniature graphics?

First, there is a clear rule: if the picture looks poor when reduced to grayscale, then 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 use safe RGB. Of course, you may select internet colors only, but this limits you greatly. Gradients, shadows, blending and many other tricks will not be available to you.

Third, try to increase the areas of "flat" color. The more consistently colored parts without blurring and jumps your picture has, the more clear it appears. Icons are too tiny and the excess usage of complex effects makes the picture look dirty.

Fourth, gradients. This is a great tool which can improve the appearance of any picture. Other than esthetics, gradients are an ideal way to get rid of the "broken line" effect (lines with too long primary elements). But be attentive when applying them since too many gradients can kill the flat color, and be not suitable for the gif palette.

Fifth, shadows and flares. All rules for applying shades and flares in icon design are completely identical to the aspects of the general graphic design. The only thing I would like to mention: draw everything yourself. Don't apply effects, make all shades and flares in a different layer and then edit the opacity. When applying filters, you almost never know what will it look like. It is unfavorable when you can't control the making of a composition. It is awful if you can't control it if drawing miniatures.

And, lastly, sixth. Nuancing is the key aspect of icon creation, which largely results the esthetic look of the composition. When the green human eye in the picture 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 this color; in the first example it will appear like a gray dot, but in the second example it will really be a green eye.

completely control the picture, do not let the visual illusions to spoil your work. It is OK if objects is not perfect technically, but the whole picture 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.
Juice

3. Font

If I talked about something other than pictogram design, this part wouldn't fit into an entire book, but the resolution of images ;limits fonts too.

The resolution of symbols becomes the main issue as opposed to their look. Almost in any case, unless the letters are the primary part of the image, the font size must be decreased to the greatest extent possible.

In general, almost any design studio has its own font with small characters. This font can be created in several hours. You can browse the web and make your own library of very interesting fonts. First of all, I would recommend you to download the DS Pixel and Seventen 7Vedi webpage and the entire set of fonts from the Lakmus Lab website.

If you don't want a new font, tiny sizes of Arial and Verdana may do. As a last option, you can create the needed letters by hand.

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

Example:

Font

Second, letters should not use anti-aliasing. It transforms the font into an unrecognizable mixture of pixels.

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

 Information
Popular Icon editors
Icon Perfect Toolbar Icons is a set of stock icons for use in business and personal applications and web-pages. The icons have a bright color palette, smooth and well-rounded edges. A variety of formats and sizes is provided.

Icon Beautify your financial or market-oriented software with instantly available professional Business Toolbar Icons. More than two hundred of wonderfully designed and neatly crafted icons representing different financial objects and currencies are included.

Icon IconLover is our pick. It allows you to design and edit any kind of images needed in the program development cycle, including icons, simple and animated cursors and interface parts - all these kinds of images can now be created in a single program.

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

Icon ICL-Icon Extractor will scan your files, 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 stylish icons for Windows XP. Easily replace, colorize and save icons that Windows selects to display typical objects, folders, files.