Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Aspects of Icon Making

Let's discuss strictly technical details of icon design

1. Lines, slopes

One of the most important elements of the image is the outline of the object, i.e. rough line, which limits the object from the rest of the image. When creating large-scale images, the artist occasionally thinks about highlighting of objects with additional lines. This is unnecessary because of the size: even non-contrasted objects do not blur into a one. Pixel graphics is other story. Two variants are possible: either object and background colors have to be from different sides of the color chart, or the object must be separated from the background by visible lines and shadows. I would like to discuss lines deeper.

If we think again to the big-size graphics, we see that in order to highlight edges, we can use any (even the most complex) angles, Bezier curves and borders. In any case, the line will appear ideal due to anti-aliasing. When decreasing the image dimensions to the size of an icon, situation changes dramatically. When each particular pixel is vitally valuable and can change the whole appearance of the composition, anti-aliasing is simply unreasonable. It means that you have to consider the possible line slopes.

The angle you select for the line, specifies the step for this line. Because every line consists of primary elements, the union 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 almost every line looks like. Basic element with joining and second basic element. However, not each slope 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 attractive. The 25-degree angle produses a line consisting of even 2-pixel primary elements. The 20-degree angle has a basic element containing of three lines: 3-pixel, 3-pixel and 2-pixel. The angle is more complicated, therefore, if not combined by other visual effects, it brings a feeling of untidiness: the basic elements have contrast which is too strong to escape the human eye.

Here we can come to the first conclusion. The most "appropriate" slopes must make as plain basic elements as possible. Thus, the ideal slopes are 0 and 90 degrees. In those, 1-pixel basic elements are joined without any shift and produce smooth lines. Less perfect are angles which form basic elements of 1, 2, 3 pixel with 1-pixel downshift. Surely, the lines will not be smooth, but the human brain will process the picture and provide to the viewer what you meant to show to him. Also, the following slopes can be considered acceptable (but at a stretch): slopes with basic elements made of unequal lines shifted by more than 1 pixel.

For example:

Now we can touch another problem. 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, appear as a single whole. But what happens if we change 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 single line anymore; it is a combination of several lines, located near one another. Rarely any designer wants its creation to look that way. Thus, we come to the second conclusion: if you use minimal angles, which make long primary elements, it has to be justified and employed with maximum attention.

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 instance, a 25-degree angle can be drawn in the two (sure more of them exists) following ways:
25-degree angles

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

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

2. Color

It can be said without an exaggeration that the color is the main aspect of your work; not suiting or badly balanced 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 image looks poor when converted to monochrome, it means the colors that were used are wrong. This rule is true not only for icons but for the whole graphic design.

Second, you will be unable to apply common RGB. Sure, you can select internet 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 "plain" color. The more evenly colored areas without diffusion and jumps your project has, the more neat it looks. Icons are too small and the excess usage of special filters makes the image look dirty.

Fourth, gradients. This is a wonderful instrument which can improve the look of any project. Other than visuals, gradients are an ideal way to abolish the "broken line" effect (lines with too long basic elements). But be attentive when using them because too much gradients can ruin the plain 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 have to mention: draw everything yourself. Don't use filters, make all shades and flares in a different layer and after that edit its transparency. When applying filters, you rarely know what will it look like. It is bad when you don't control the making of a project. It is worse if you don't control it if drawing miniatures.

And, lastly, sixth. Nuancing is the main aspect of icon design, which greatly affects the visual look of the image. When the green human eye in the picture is sized 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 such color; in the first example it will look like a gray dot, but in the second case it will really be a green eye.

Thoroughly control the image, do not allow the optical tricks to ruin your work. It is OK if something is not perfect from the technical point of view, but the entire picture must be perfect.

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

3. Text

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

The resolution of letters becomes the leading issue as opposed to their beauty. Nearly in any case, unless the letters are the primary part of the image, the text size has to be decreased to the largest extent possible.

In general, virtually any graphic studio has its unique font with tiny characters. Such a font can be made in a few hours. You can browse the internet and collect your own collection of very interesting fonts. Primarily, I advice you to get the DS Pixel and Seventen 7Vedi website and 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 by hand.

There are not many rules there. First, letters cannot be less than 5 pixels high or less than 3 pixels wide.



Second, letters cannot 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 collection of ready-made icons for use in commercial and private applications and websites. All icons have a balanced color palette, smooth and well-rounded edges. A variety of formats and resolutions is available.

Icon Enhance your accounting or business-oriented application with instantly available professional Business Toolbar Icons. More than two hundred of professionally designed and neatly created icons picturing different financial objects and symbols are included.

Icon IconLover is our choice. It allows you to design and edit any kind of graphics required in the software development cycle, including icons, simple and animated cursors and interface parts - all these types of graphics can now be created in a single program.

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

Icon ICL-Icon Extractor will search your files, archives, folders and all local disks for icons. It can download icons from the Internet and customize Windows icons.

Icon Perfect Icon creates icon from any image file (PNG, JPEG, BMP, TIFF, WMF and more) in just seconds. Make stylish icons for Windows XP. Easily change, colorize and save icons that Windows uses to show standard objects, folders, files.