Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Aspects of Icon Making

Let's discuss purely technical aspects of icon creation

1. Lines, slopes

One of the most important elements of the image is the framework of the object, i.e. rough linear marking, which limits the object from the background. When creating large-scale graphics, the designer rarely thinks about defining objects with complementary outlines. This is not needed because of the scale: even non-contrasted objects do not blur into a one. Pixel graphics is different. Two solutions are possible: either foreground and background colors have to be from opposite sides of the color chart, or the foreground should be separated from the background by contrast lines and shadows. I will dwell on lines deeper.

If we return more to the big-size graphics, we see that in order to define edges, we can use any (even the most complex) angles, Bezier splines and borders. In any case, the line will look ideal thanks to anti-aliasing. When decreasing the image scale to the small icon size, situation changes dramatically. When every single pixel is equally valuable and can ruin the overall look of the composition, anti-aliasing is just unreasonable. It means that you have to think about 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 combination of which determines its neatness and esthetics.

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

This is how almost every line looks like. Basic element with joining and another primary element. Unfortunately, not every slope creates lines that look look attractive and not messy.

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

It can be easily seen which line is more attractive. The 25-degree slope makes a line containing even 2-pixel basic 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 creates a feeling of messiness: the basic elements have contrast which is too strong to hide from the human sight.

Here we can come to the first rule. The most "appropriate" angles have to make as plain primary elements as they can. Thus, the perfect angles are 0 and 90 degrees. In those, 1-pixel basic elements are combined without downshift 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 can not be even, but the human sight will process the picture and provide to the user what you meant to show to him. Also, the mentioned angles can be considered acceptable (but at a stretch): angles with basic elements consisting of unequal lines shifted by more than 1 pixel.

For example:

It is the time to discuss another issue. In the last paragraph, I purposely defined angles with basic elements of 1, 2 and 3 pixels as acceptable. Such small lines, especially when a large amount of them is combined, look like solid. But what happens if we change the primary 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 single line now; it is a combination of different lines, situated near one another. Hardly any designer wants its creation to look inconsistent. Thus, we have the second rule: if you use minimal angles, which make long basic elements, it has to be justified and used with maximum caution.

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

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

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

This examples can be produced for about any slope, so in your works, try to simplify as much as possible.

2. Color

It can be stated without an exaggeration that the color is the main aspect of your work; improper or poorly balanced 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 bad when reduced to monochrome, then the colors that were used are wrong. This rule is valid not exclusively for icons but for the entire graphic design.

Second, you will be unable to apply common RGB. Of course, you can select GIF colors only, but this ties you hand and foot. Gradients, shadows, dithering and many other effects will not be available to you.

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

Fourth, gradients. This is a wonderful instrument which can change the appearance of any composition. Other than visuals, gradients are a perfect way to abolish the "broken line" effect (lines with too long basic elements). But be careful when using them because too much gradients can kill the flat color, and be unable to fit into the gif palette.

Fifth, shadows and flares. All rules for using shades and highlights in icon making are completely the same to the aspects of the general graphic design. The only ine I would like to mention: create everything by hand. Don't use filters, make all shades and highlights in a separate layer and after that edit its transparency. When using effects, you almost never can predict what will it look like. It is unfavorable when you can't control the process of creating of a composition. It is worse if you can't control it when drawing icons.

And, lastly, sixth. Tinting is the key aspect of pictogram creation, which largely results the visual look of the composition. If the green human eye in the icon has the size of 1 pixel, increase the color saturation. For instance, instead of 0, 131, 159 choose 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, but in the second example it will definitely be a green eye.

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

As an example, I pictured the pack of juice located in front of me. The picture has flat color, gradients with broken lines, shades and flares and nuances.

3. Text

If I wrote about something other than icon creation, this part wouldn't fit into a whole book, but the resolution of compositions restricts fonts too.

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

In principle, virtually any graphic studio has its exclusive font with small letters. This font can be created in a couple of hours. You can browse the internet and make your own collection of very nice fonts. First of all, I would recommend you to get the DS Pixel and Seventen 7Vedi webpage as well as the entire series of fonts from the Lakmus Lab website.

If you don't need a new font, small sizes of Arial and Verdana may work. As a last resort, 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 set of pixels.

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

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 scheme, smooth and well-rounded borders. A variety of formats and resolutions is available.

Icon Enhance your financial or business-oriented application with readily accessible professional Business Toolbar Icons. More than two hundred of professionally designed and neatly crafted icons picturing various financial objects and symbols are provided.

Icon IconLover is our choice. It allows you to design and alter any kind of graphics needed in the software development cycle, containing icons, simple and moving cursors and interface parts - all these types of graphics can now be created in a single application.

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

Icon ICL-Icon Extractor will search your files, archives, directories and all local drives for icons. It can download 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 just seconds. Create great icons for Windows XP. Easily change, alter and save icons that Windows selects to show standard objects, directories, files.