Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Aspects of Icon Creation

Let's consider purely technical details of icon creation

1. Lines, slopes

One of the vital parts of the composition is the framework of the object, i.e. solid border, which limits the object from the background. When working with large-scale graphics, the artist occasionally thinks about defining objects with complementary outlines. This is not needed because of the size: even non-contrasted objects do not blend into a single whole. Icon graphics is different. Two variants are available: either object and background colors must be from opposite sides of the color wheel, or the object must be separated from the background by contrast lines and shadows. I would like to discuss lines deeper.

If we think more to the large scale images, we can note that in order to highlight contours, we can use all (including the most complicated) angles, Bezier splines and borders. Anyway, the line will look ideal due to anti-aliasing. When shrinking the image dimensions to the size of an icon, situation changes dramatically. When every single pixel is vitally valuable and can ruin the whole appearance of the icon, anti-aliasing is simply unreasonable. It comes that you have to consider the possible line angles.

The angle you select for the line, specifies the step for this line. Because each line consists of primary elements, the union of which defines its accuracy and esthetics.

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

This is how nearly every line looks like. Primary element followed by joining and another primary element. However, not each 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 angle produses a line consisting of even 2-pixel primary elements. The 20-degree angle has a primary element consisting of three lines: 3-pixel, 3-pixel and 2-pixel. The slope is more complicated, thus, if not supported by additional visual effects, it creates a feeling of untidiness: the basic elements have contrast which is too strong to escape the human sight.

Now we can come to the first rule. The most "appropriate" angles have to make as simple basic elements as possible. therefore, the ideal angles are 0 and 90 degrees. In those, 1-pixel primary elements are combined without any shift 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 will not be smooth, but the human sight will process the picture and provide to the viewer what you meant to show to him. Also, the following angles can be considered acceptable (but at a stretch): slopes 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 last paragraph, I intentionally defined angles with basic elements of 1, 2 and 3 pixels as acceptable. Such tiny lines, especially when a great number of them is joined, 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 obviously seen that the line loses its integrity. It is not a continuous line now; it is a set of several lines, situated near each other. Hardly any designer wants its composition to look inconsistent. So, we have another rule: if you use small slopes, which produse long basic elements, it must be reasoned and used with great caution.

And, finally, the last aspect I have to mention about lines. I did write that the basic element should be as simple 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 case the basic element is a 2-pixel line. In the second case, it is made of three elements: 3-pixel, 2-pixel and 1-pixel. The same angle but the image is different. The complicated basic element produced the line messy.

This examples can be produced for about any angle, so in your works, try to simplify everything.

2. Color

It can be stated without an exaggeration that the color is the main element of your work; not suiting or badly matched colors can kill 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 poor when reduced to grayscale, then the colors that were chosen are wrong. This rule is true not exclusively 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 ties you hand and foot. Gradients, shadows, dithering and many other tricks will not be available to you.

Third, try to increase the portion of "flat" color. The more consistently colored parts 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 tool which can improve the appearance of any project. Other than visuals, gradients are a perfect way to get rid of the "broken line" look (lines with too long primary elements). But be attentive when applying them because too many gradients can ruin the flat color, and be unable to fit into the gif palette.

Fifth, shadows and flares. All rules for using shadows and highlights in icon creation are completely identical to the aspects of the general graphic design. The only ine I have to mention: create everything by hand. Don't use effects, make all shades and highlights in a different layer and then edit its transparency. If using effects, you rarely 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 creating miniatures.

And, lastly, sixth. Tinting is the key aspect of icon design, which greatly affects the visual look of the project. When the blue human eye in the icon has the size of 1 pixel, increase the color intensiveness. For example, instead of 0, 131, 159 make 71, 195, 242. It doesn't matter that the human eye never has such color; in the first case it will look like a gray dot, but in the second case it will really be a blue eye.

Thoroughly control the image, do not let the visual illusions to ruin your work. It is OK if objects is not perfect technically, but the entire image must be flawless.

As an example, I drew the pack of juice standing in front of me. The picture has plain color, gradients with broken lines, shadows and highlights and tints.

3. Text

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

The resolution of symbols becomes the main aspect as opposed to their fineness. Nearly in all cases, unless the letters are the main part of the image, the text size has to be decreased to the largest extent possible.

In general, almost any graphic studio has its own font with small characters. This font can be created in a couple of hours. You can browse the web 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 whole set of fonts from the Lakmus Lab website.

If you don't want a new font, little sizes of Arial and Verdana will work. As a last option, you can create the necessary characters 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 should not use anti-aliasing. It turns the font into an unrecognizable set 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 set of ready-made icons for use in commercial and personal applications and web-pages. All icons have a balanced color scheme, smooth and well-rounded edges. A variety of formats and sizes is available.

Icon Beautify your accounting or market-oriented program with instantly accessible professional Business Toolbar Icons. More than two hundred of wonderfully designed and carefully crafted icons representing different financial objects and symbols are included.

Icon IconLover is our choice. It allows you to design and alter all kinds of images needed 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 application.

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 XP icons.

Icon ICL-Icon Extractor will scan your images, archives, directories and all local disks for icons. It can get 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. Make stylish icons for Windows Vista. Easily replace, colorize and save icons that Windows uses to show typical objects, folders, files.