Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Aspects of Icon Creation

Let's discuss purely technical aspects of icon creation

1. Lines, slopes

One of the vital parts of the composition is the framework of the object, i.e. solid border, which separates the object from the background. When working with large-scale graphics, the designer occasionally thinks about defining objects with additional lines. This is unnecessary because of the size: even non-contrasted objects do not mix into a one. Pixel graphics is other story. Two solutions are possible: either object and background colors have to be from different sides of the color wheel, or the object must be separated from the background by contrast lines and shadows. I will dwell on lines in more detail.

If we think again to the large scale graphics, we see that in order to highlight edges, we can use all (including the most complicated) angles, Bezier splines and borders. Anyway, the line will appear ideal thanks to anti-aliasing. When decreasing the image scale to the size of an icon, situation changes greatly. When every single pixel is equally valuable and can change the whole look of the icon, anti-aliasing is just not applicable. It means that you should think about the possible line angles.

The angle you select for the line, determines the step of this line. This means that every line is made of primary elements, the combination of which determines its accuracy and visual appeal.

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

This is how nearly every line looks like. Basic element followed by joining followed by another basic element. However, not each slope creates lines that look look attractive and not annoying.

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

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 angle has a primary element consisting of three lines: 3-pixel, 3-pixel and 2-pixel. The angle is more complicated, therefore, when not supported by other visual effects, it brings a feeling of untidiness: the primary elements have contrast which is too obvious to hide from the human eye.

Here we can come to the first conclusion. The most "appropriate" angles must make as plain primary elements as they can. Thus, the ideal angles are 0 and 90 degrees. In them, 1-pixel primary elements are combined without any shift and produce even lines. Less ideal are slopes which form basic elements of 1, 2, 3 pixel with 1-pixel downshift. Surely, the lines will not be even, but the human brain will process the image and present to the user what you meant to show to him. Also, the following slopes can be considered correct (but at a stretch): angles with primary elements consisting of unequal lines shifted by more than 1 pixel.

For example:

It is the time to move to another issue. In the previous paragraph, I intentionally defined slopes with basic elements of 1, 2 and 3 pixels as acceptable. Such small lines, especially when a large number of them is joined, look like solid. But what do we see 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 continuous line anymore; it is a set of different lines, situated near each other. Rarely any artist wants its creation to look that way. So, we come to the second conclusion: if you use minimal angles, which produse long basic elements, it must be reasoned and used with maximum caution.

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

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

In the first case 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 basic element produced the line messy.

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

2. Color

It can be said without an overstatement that the color is the main element of your work; not suiting or poorly balanced colors can kill even the most creative idea. What can we say about the color in miniature graphics?

First, there is a certain rule: if the image looks bad when reduced to grayscale, it means the colors that were selected 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 can select internet colors only, but this limits you greatly. Gradients, shadows, dithering and many other tricks will not be accessible to you.

Third, try to increase the areas of "flat" color. The more evenly colored parts without blurring and jumps your composition has, the more neat it looks. Icons are too tiny and the excess usage of special filters makes the image look messy.

Fourth, gradients. This is a great tool which can change the appearance of any composition. Besides 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 since too many gradients can kill the plain color, and be not suitable for the gif palette.

Fifth, shadows and flares. All aspects of using shades and highlights in icon creation are completely identical to the aspects of the general graphic design. The only ine I have to note: draw everything yourself. Don't apply effects, make all shades and highlights in a separate layer and then edit the opacity. If using filters, you almost never can predict what will it look like. It is bad when you don't control the process of creating of a composition. It is worse if you don't control it when drawing icons.

And, lastly, sixth. Tinting is the key aspect of icon design, which largely results the esthetic look of the composition. If the blue human eye in the picture has the size of 1 pixel, increase the color intensiveness. For example, instead of 0, 131, 159 make 71, 195, 242. It doesn't matter that the human eye can't have this color; in the first example it will look like a gray dot, and in the second example it will definitely be a green eye.

Thoroughly control the picture, do not allow the visual illusions to spoil your work. It is OK if objects is not perfect from the technical point of view, but the whole image must be perfect.

As an example, I pictured the packet of juice located in front of me. The image has plain color, gradients with broken lines, shades and highlights and tints.

3. Text

If I wrote about something bigger than icon design, this part wouldn't fit into a whole book, but the resolution of pictures ;limits fonts too.

The size of letters is the main issue as opposed to their fineness. Almost in all cases, unless the letters are the main part of the project, the font size must be decreased to the greatest extent possible.

In principle, almost any graphic studio has its unique font with little characters. Such a font can be crafted in a couple of hours. You can browse 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 webpage as well as the entire set of fonts from the Lakmus Lab website.

If you don't need a new font, little typesizes of Arial and Verdana may do. As a last resort, you can create the necessary letters yourself.

There are not many 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 font into an unrecognizable mixture of pixels.

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

Popular Icon editors
Icon Perfect Toolbar Icons is a set of stock icons for use in business and private software and web-pages. The icons have a balanced color scheme, smooth and well-rounded borders. A variety of formats and sizes is available.

Icon Beautify your accounting or market-oriented application with readily accessible professional Business Toolbar Icons. Over two hundred of wonderfully designed and neatly created icons representing different financial objects and currencies are included.

Icon IconLover is our pick. It allows you to create and alter any kind of graphics required in the program development cycle, containing icons, simple and animated cursors and interface parts - all these types of graphics can now be designed in a single application.

Icon Icon Processor is an icon converter. It makes 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 files, archives, directories and all local drives for icons. It can get icons from the Internet and customize Windows icons.

Icon Perfect Icon makes icon from any graphic file (PNG, JPEG, BMP, TIFF, WMF and more) in few seconds. Create great icons for Windows Vista. Easily change, alter and save icons that Windows uses to show typical objects, folders, files.