Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Aspects of Icon Creation

Let's discuss strictly technical details of icon making

1. Lines, slopes

One of the most important elements of the composition is the outline of the object, i.e. solid line, which limits the object from the background. When working with large-scale images, the artist rarely cares about defining objects with additional outlines. This is not needed because of the size: even non-contrasted objects do not mix into a one. Pixel graphics is different. Two solutions are available: either object and background colors have to be from opposite sides of the color chart, or the foreground should be divided from the background by visible lines and shadows. I would like to discuss lines in more detail.

If we think more to the big-size graphics, we see that in order to define contours, we can use all (even the most complex) angles, Bezier curves and edges. In any case, the line will look ideal due to anti-aliasing. When shrinking the image dimensions to the small icon size, situation changes dramatically. When every single pixel is equally valuable and can change the whole look of the composition, anti-aliasing is simply not applicable. It comes that you should consider the possible line angles.

The angle you choose for the line, determines the step for this line. Because each line is made of primary elements, the combination of which determines its neatness and visual appeal.

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

This is how nearly every line looks like. Primary element with joining followed by second basic element. Unfortunately, not every angle makes the line look neet and not messy.

For example, look at 25 and 20-degree angles:

It can be easily known which line is more attractive. The 25-degree slope produses a line containing equal 2-pixel primary elements. The 20-degree angle has a primary element consisting of three parts: 3-pixel, 3-pixel and 2-pixel. The angle is more complex, therefore, if not supported by other visual effects, it creates a feeling of messiness: the primary elements have contrast which is too strong to hide from the human eye.

Now we can see the first rule. The most "correct" angles must make as plain basic elements as possible. therefore, the ideal angles are 0 and 90 degrees. In them, 1-pixel primary elements are combined without any shift and form smooth lines. Less ideal 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 brain will process the picture and present 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:

Now we can move to another issue. 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 large amount of them is combined, appear as 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 obviously noticed that the line loses its solidness. It is not a continuous line now; it is a set of different lines, located near one another. Rarely any artist wants its creation to look that way. Thus, we come to the second conclusion: if you use minimal slopes, which make long primary elements, it must be justified and used with maximum caution.

And, finally, the last aspect I have to mention about lines. I already wrote that the primary element should be as simple as it can.

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

In the first picture the primary element is a 2-pixel line. In the second picture, it is made of three lines: 3-pixel, 2-pixel and 1-pixel. The same angle but the image is different. The complicated primary element produced the line messy.

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 overstatement that the color is the leading element of your work; not suiting or poorly balanced colors can kill even the most creative idea. What can we write about the color in miniature graphics?

First, there is a clear rule: if the picture looks bad when converted to monochrome, then the colors that were selected are incorrect. This rule is true not only for icons but for the whole graphic design.

Second, you will be unable to use safe RGB. Of course, you can use internet colors only, but this limits you greatly. Gradients, shadows, blending and many other effects will not be available to you.

Third, try to enlarge the areas of "flat" color. The more evenly colored parts without diffusion and jumps your project has, the more clear it appears. Icons are too tiny and the over usage of special effects makes the image look dirty.

Fourth, gradients. This is a great tool which can change the appearance of any project. Besides visuals, gradients are a perfect solution to abolish the "broken line" effect (lines with too long basic elements). But be attentive when using them since too much gradients can kill the flat color, and be unable to fit into the gif palette.

Fifth, shadows and flares. All aspects of applying shadows and flares in icon creation are totally the same to the aspects of the overall graphic design. The only thing I would like to mention: create everything yourself. Don't apply effects, make all shadows and flares in a separate layer and after that edit its transparency. When applying effects, you almost never can predict what will it look like. It is bad when you can't control the making of a composition. It is awful if you don't control it when drawing icons.

And, finally, sixth. Tinting is the key detail of icon creation, which greatly affects the esthetic look of the project. If the green human eye in the image 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 can't have 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.

Thoroughly control the image, do not let the visual illusions to ruin your design. It is OK if something is not consistent from the technical point of view, but the entire composition must be flawless.

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

3. Font

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

The resolution of symbols becomes the leading aspect as opposed to their fineness. Nearly in any case, only if not the letters are the primary part of the composition, the text size has to be reduced to the largest extent possible.

In principle, virtually any design studio has its own font with small letters. This font can be created in a couple of hours. You can browse the web and collect your own library of very nice fonts. First of all, I would recommend you to download the DS Pixel and Seventen 7Vedi website as well as the complete series of fonts from the Lakmus Lab website.

If you don't want a new font, small typesizes of Arial and Verdana may work. As a last option, you can draw the needed characters by hand.

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 turns the font into an incomprehensible mixture of pixels.

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

Popular Icon editors
Icon Perfect Toolbar Icons is a collection of stock icons for use in commercial and personal applications and websites. All icons have a bright color palette, sleek and well-rounded borders. A variety of formats and resolutions is available.

Icon Beautify your accounting or business-oriented application with readily available professional Business Toolbar Icons. More than two hundred of professionally designed and neatly crafted icons picturing various financial objects and currencies are included.

Icon IconLover is our choice. It allows you to design and alter all kinds of graphics required in the program development cycle, containing icons, simple and animated cursors and interface elements - all these types of images can now be created in a single program.

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

Icon ICL-Icon Extractor will search your images, archives, directories and all local disks 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 Vista. Easily change, colorize and save icons that Windows selects to show standard objects, directories, files.