Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Aspects of Icon Creation

Let's consider strictly technical aspects of icon design

1. Lines, slopes

One of the vital elements of the image is the outline of the object, i.e. solid linear marking, which limits the object from the background. When creating large-scale graphics, the designer occasionally thinks about defining objects with complementary lines. This is not needed because of the scale: even low contrast objects do not mix into a single whole. Pixel graphics is other story. Two variants are available: either object and background colors must be from opposite sides of the color chart, or the object should be separated from the background by visible outlines and shadows. I would like to discuss lines in more detail.

If we return again to the big-size images, we see that in order to highlight contours, we can use any (even the most complicated) angles, Bezier curves and borders. Anyway, the line will look perfect due to anti-aliasing. When shrinking the graphic dimensions to the size of an icon, situation changes greatly. When each particular pixel is equally valuable and can ruin the overall appearance of the icon, anti-aliasing is simply unreasonable. It means that you have to consider the possible line angles.

The slope you choose for the line, determines the step of this line. This means that every line consists of primary elements, the combination of which defines its neatness 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 nearly every line looks like. Basic element followed by joining followed by another primary element. Unfortunately, not every angle creates lines that look look attractive and not messy.

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

It can be easily known which line is more appealing. The 25-degree angle makes a line containing 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 complex, thus, when not supported by additional visual effects, it creates a feeling of untidiness: the basic elements have contrast which is too obvious to escape the human eye.

Now we can come to the first rule. The most "correct" angles must make as plain basic elements as they can. Thus, the ideal slopes are 0 and 90 degrees. In them, 1-pixel basic elements are joined without downshift and form smooth lines. Less perfect are slopes which form primary elements of 1, 2, 3 pixel with 1-pixel downshift. Of course, the lines will not be smooth, but the human sight will process the image and provide to the user what you intended to show to him. Also, the mentioned slopes can be considered acceptable (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 problem. In the previous paragraph, I purposely defined slopes with primary elements of 1, 2 and 3 pixels as acceptable. Such small lines, especially when a great amount of them is joined, appear as solid. But what happens if we increase the basic elements to 10 or 20 pixels?

Here is an example:
Low quality line

It can be obviously noticed that the line doesn't have integrity. It is not a single line anymore; it is a combination of different lines, situated near each other. Rarely any designer wants its composition to look inconsistent. Thus, we have the second rule: if you use small slopes, which make long basic elements, it must be reasoned and employed with maximum attention.

And, finally, the last aspect I wanted to tell about lines. I did write that the primary element has to be as plain as possible.

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

In the first picture the primary element is a 2-pixel line. In the other picture, it is made of three lines: 3-pixel, 2-pixel and 1-pixel. The same angle but the look is different. The complex basic element produced the line untidy.

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

2. Color

It can be said without an exaggeration that the color is the leading aspect of your work; not suiting or poorly matched colors can ruin 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 converted to grayscale, then the colors that were chosen are wrong. This rule is valid not only for icons but for the whole graphic design.

Second, you will be unable to apply safe RGB. Of course, you can use GIF colors only, but this limits you greatly. Gradients, shadows, dithering and many other tricks will not be accessible to you.

Third, try to enlarge the areas of "plain" color. The more evenly colored parts without diffusion and jumps your picture has, the more clear it looks. Icons are too small and the over usage of complex effects makes the image look dirty.

Fourth, gradients. This is a wonderful instrument which can improve the look of any composition. Besides visuals, gradients are an ideal way to get rid of the "broken line" effect (lines with too long primary elements). But be careful when using them since too many gradients can kill the flat color, and be not suitable for the gif palette.

Fifth, shadows and flares. All aspects of applying shades and flares in icon making are completely the same to the rules of the general graphic design. The only thing I would like to mention: draw everything by hand. Don't use filters, make all shades and flares in a separate layer and after that edit the opacity. When applying filters, you rarely know what the result will be. 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 drawing miniatures.

And, finally, sixth. Nuancing is the main aspect of icon creation, which greatly affects 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 is indifferent that the human eye can't have this color; in the first example it will appear like a gray dot, and in the second case it will definitely be a green eye.

Thoroughly control the picture, do not let the optical tricks to spoil your work. It is acceptable if objects is not consistent technically, but the whole composition must be flawless.

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

3. Font

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

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

In general, virtually any graphic studio has its own font with tiny characters. Such a font can be made 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 website as well as the entire series of fonts from the Lakmus Lab website.

If you don't want a new font, tiny typesizes of Arial and Verdana may work. As a last option, you can create the necessary letters yourself.

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



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

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

Popular Icon editors
Icon Perfect Toolbar Icons is a collection of ready-made icons for use in commercial and personal programs and web-pages. All icons have a balanced color scheme, smooth and well-rounded edges. A variety of formats and sizes is provided.

Icon Enhance your accounting or business-oriented application with instantly available professional Business Toolbar Icons. More than two hundred of wonderfully designed and neatly created icons representing various financial objects and currencies are provided.

Icon IconLover is our choice. It enables you to create and alter any kind of graphics required in the application development cycle, including icons, simple and moving cursors and interface elements - all these types of images 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 XP icons.

Icon ICL-Icon Extractor will scan your images, archives, directories and all local drives for icons. It can download 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, folders, files.