Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Design

Let's consider purely technical details of icon design

1. Lines, angles

One of the vital parts of the image is the framework of the object, i.e. rough border, which limits the object from the rest of the image. When designing large-scale graphics, the designer rarely cares about highlighting of objects with additional lines. This is not needed because of the scale: even non-contrasted 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 will discuss lines in more detail.

If we return again to the big-size graphics, we see that in order to define contours, we can use all (including the most complicated) angles, Bezier curves and edges. Anyway, the line will appear ideal due to anti-aliasing. When decreasing the graphic dimensions to the small icon size, situation changes greatly. When every particular pixel is vitally important and can ruin the whole appearance of the composition, anti-aliasing is simply unreasonable. It means that you have to consider the possible line angles.

The angle you choose for the line, specifies the step for this line. Because each line is made of basic elements, the union of which defines its neatness and visual appeal.

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

This is how nearly every line looks like. Primary element with joining and another primary element. However, not every angle creates lines that look look neet and not annoying.

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

It can be easily known which line is more attractive. The 25-degree angle makes a line consisting of equal 2-pixel primary elements. The 20-degree slope has a basic element consisting of three lines: 3-pixel, 3-pixel and 2-pixel. The slope is more complex, therefore, when not supported by other visual effects, it brings a feeling of messiness: the primary elements have contrast which is too obvious to escape the human sight.

Here we can come to the first conclusion. The most "appropriate" angles must make as plain primary elements as possible. therefore, the ideal slopes are 0 and 90 degrees. In them, 1-pixel primary elements are combined without downshift and produce smooth lines. Less ideal are slopes which form basic elements of 1, 2, 3 pixel with 1-pixel downshift. Surely, the lines can 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 mentioned angles can be considered correct (but at a stretch): slopes with basic elements consisting of unequal lines shifted by more than 1 pixel.

For example:

It is the time to touch another problem. In the last paragraph, I purposely defined slopes with primary elements of 1, 2 and 3 pixels as acceptable. Such small lines, especially when a large number of them is combined, look like 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 clearly noticed that the line loses its solidness. It is not a continuous line anymore; it is a set of different lines, located near each other. Rarely any artist wants its composition to look inconsistent. So, we come to another conclusion: if you use minimal angles, which make long basic elements, it must be justified and employed with great attention.

And, finally, the third aspect I wanted to mention about lines. I did write that the basic element has to be as simple as possible.

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

In the first case the basic element is a 2-pixel line. In the second picture, it is made of three elements: 3-pixel, 2-pixel and 1-pixel. The same slope but the image is different. The complex primary element made the line messy.

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

2. Color

It can be said without an exaggeration that the color is the leading aspect of your work; not suiting or badly matched colors can ruin even the best idea. What can we say about the color in icon graphics?

First, there is a certain rule: if the picture looks bad when reduced to monochrome, it means the colors that were used are wrong. This rule is valid not only for icons but for the whole graphic design.

Second, you will be unable to use 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 increase the areas of "plain" color. The more consistently colored areas without diffusion and jumps your picture has, the more clear it looks. Pictograms are too tiny and the excess usage of special filters makes the picture look messy.

Fourth, gradients. This is a wonderful instrument which can improve the appearance of any composition. Other than esthetics, gradients are a perfect way to abolish the "broken line" effect (lines with too long primary elements). But be careful when using them because 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 creation are completely the same to the rules of the general graphic design. The only ine I would like to note: draw everything yourself. Don't use filters, make all shades and highlights in a separate layer and after that edit the opacity. If using effects, you almost never know what will it look like. It is bad when you don't control the making of a composition. It is awful if you don't control it if drawing miniatures.

And, finally, sixth. Nuancing is the main detail of pictogram design, which largely results the esthetic look of the composition. If the green human eye in the picture has the size of 1 pixel, increase the color saturation. For instance, instead of 0, 131, 159 choose 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, and in the second case it will really be a green eye.

completely control the image, do not let the visual illusions to ruin your design. It is OK if something is not perfect from the technical point of view, but the whole image must be perfect.

As an example, I drew the packet of juice standing before me. The image has plain color, gradients with broken lines, shadows and flares and nuances.

3. Font

If I talked about something bigger than icon creation, this chapter wouldn't fit into an entire book, but the size of images restricts fonts too.

The size of letters becomes the main issue as opposed to their look. Almost in any case, only if not the letters are the primary part of the project, the font size must be decreased to the largest extent possible.

In principle, almost any design studio has its unique font with tiny characters. This font can be created in a couple of hours. You can search the web and collect your own collection of very interesting fonts. Primarily, I advice you to get the DS Pixel and Seventen 7Vedi webpage and the whole 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 option, you can create the necessary characters by hand.

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 transforms the font into an incomprehensible 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 commercial and personal software and websites. The icons have a bright color palette, smooth and well-rounded edges. A variety of formats and resolutions is available.

Icon Beautify your accounting or market-oriented program with readily accessible 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 allows you to create and edit any kind of graphics required in the software development cycle, containing icons, static and moving cursors and interface parts - all these types of images can now be created in a single program.

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

Icon ICL-Icon Extractor will scan your files, archives, directories and all local disks for icons. It can get icons from the Internet and edit Windows icons.

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