Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Creation

Let's discuss strictly technical details of icon design

1. Lines, slopes

One of the most important parts of the composition is the outline of the object, i.e. rough line, which limits the object from the background. When designing normal-sized images, the artist occasionally cares about highlighting of objects with additional outlines. This is unnecessary because of the size: even low contrast objects do not blend into a single whole. Pixel graphics is different. Two solutions are available: either foreground and background colors must be from opposite sides of the color chart, or the foreground must be divided from the background by visible lines and shadows. I would like to discuss lines deeper.

If we return again to the large scale images, we see that in order to highlight contours, we can use any (including the most complicated) angles, Bezier curves and borders. Anyway, the line will look perfect due to anti-aliasing. When shrinking the graphic scale to the small icon size, situation changes dramatically. When every single pixel is equally important and can ruin the whole appearance of the composition, anti-aliasing is simply not applicable. It means that you should consider the possible line slopes.

The slope you select for the line, specifies the step of this line. This means that each line consists of basic elements, the combination of which defines its accuracy and visual appeal.

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

This is how almost every line looks like. Primary element with joining and second primary element. Unfortunately, not each angle creates lines that look look neet and not annoying.

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

It can be easily seen which line is more attractive. The 25-degree angle makes a line containing equal 2-pixel primary elements. The 20-degree angle has a basic element consisting of three lines: 3-pixel, 3-pixel and 2-pixel. The slope 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 obvious to escape the human sight.

Now we can come to the first conclusion. The most "appropriate" angles have to make as simple primary elements as they can. Thus, the ideal slopes are 0 and 90 degrees. In those, 1-pixel primary elements are combined without downshift and form even lines. Less perfect are angles which form primary elements of 1, 2, 3 pixel with 1-pixel downshift. Surely, the lines can not be smooth, but the human sight will process the image and provide to the viewer what you meant to show to him. Also, the following slopes can be considered correct (but at a stretch): angles with basic elements consisting of different lines shifted by more than 1 pixel.

For example:

It is the time to touch another problem. In the last paragraph, I intentionally defined slopes with primary elements of 1, 2 and 3 pixels as acceptable. Such small lines, especially when a great number of them is joined, look like a single whole. But what do we see if we increase the basic elements to 10 or 20 pixels?

Here is an example:
Low quality line

It can be obviously noticed that the line loses its integrity. It is not a continuous line now; it is a combination of several lines, situated near one another. Hardly any artist wants its creation to look inconsistent. Thus, we have the second conclusion: if you use minimal slopes, which produse long primary elements, it has to be justified and used with great attention.

And, finally, the third thing I wanted to mention about lines. I did write that the primary element should be as plain as it can.

For example, a 25-degree angle can be produced in the two (sure more of them exists) following ways:
25-degree angles

In the first case the basic element is a 2-pixel line. In the other picture, it consists of three lines: 3-pixel, 2-pixel and 1-pixel. The same angle but the look is different. The complicated basic element produced the line untidy.

Such examples can be made for about any angle, so in your projects, make sure to simplify everything.

2. Color

It can be stated without an overstatement that the color is the leading element of your work; not suiting or badly balanced colors can kill even the most creative idea. What can we say about the color in icon graphics?

First, there is a clear rule: if the image looks poor when reduced to monochrome, it means the colors that were chosen are wrong. This rule is valid not only for icons but for the entire graphic design.

Second, you will probably unable to use safe RGB. Sure, you may select internet colors only, but this limits you greatly. Gradients, shadows, blending and many other effects will not be accessible to you.

Third, try to increase the areas of "plain" color. The more evenly colored areas without diffusion and jumps your composition has, the more clear it appears. Pictograms are too tiny and the excess usage of complex filters makes the image look messy.

Fourth, gradients. This is a great tool which can improve the appearance of any project. Besides visuals, gradients are a perfect way to abolish the "broken line" look (lines with too long primary elements). But be attentive when using them because too many gradients can ruin 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 making are completely identical to the rules of the general graphic design. The only ine I have to note: draw everything by hand. Don't use effects, make all shadows and highlights in a different layer and then edit its transparency. When using filters, you rarely can predict what the result will be. It is bad when you don't control the making of a project. It is worse if you can't control it when creating miniatures.

And, finally, sixth. Tinting is the key detail of pictogram design, which greatly results the visual look of the image. When the green human eye in the image has the size of 1 pixel, increase the color saturation. For instance, instead of 0, 131, 159 make 71, 195, 242. It is indifferent that the human eye never has such color; in the first case it will look like a gray dot, and in the second example it will definitely be a blue eye.

completely control the image, do not let the visual 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 flawless.

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

3. Font

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

The size of letters becomes the leading aspect as opposed to their fineness. Nearly in all cases, unless the letters are the primary part of the composition, the text size must be decreased to the largest extent possible.

In general, virtually any graphic studio has its own font with tiny letters. Such a font can be crafted in several hours. You can browse the web and make your own collection of very interesting fonts. First of all, I advice you to download the DS Pixel and Seventen 7Vedi webpage as well as the whole series of fonts from the Lakmus Lab website.

If you don't want a new font, little typesizes of Arial and Verdana may do. 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 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 rather readable.

Popular Icon editors
Icon Perfect Toolbar Icons is a collection of pre-made icons for use in business and personal applications and websites. All icons have a balanced color scheme, sleek and well-rounded borders. A variety of formats and resolutions is provided.

Icon Beautify your financial or business-oriented program with readily accessible professional Business Toolbar Icons. More than two hundred of professionally designed and neatly created icons representing various financial objects and symbols are included.

Icon IconLover is our choice. It enables you to create and alter any kind of graphics required in the application development cycle, containing icons, static and animated cursors and interface elements - all these types of graphics can now be designed in a single program.

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

Icon ICL-Icon Extractor will search your files, 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 image file (PNG, JPEG, BMP, TIFF, WMF and more) in few seconds. Make great icons for Windows XP. Easily replace, colorize and save icons that Windows uses to display standard objects, folders, files.