Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Creation

Let's discuss strictly technical details of icon creation

1. Lines, angles

One of the vital elements of the composition is the outline of the object, i.e. solid border, which limits the object from the rest of the image. When working with large-scale images, the artist rarely cares about defining objects with complementary outlines. This is not needed because of the size: even low contrast objects do not blend into a one. Pixel graphics is other story. Two solutions are possible: either foreground and background colors have to be from opposite sides of the color chart, or the object should be divided from the background by contrast outlines and shadows. I will discuss lines deeper.

If we think again to the large scale graphics, we see that in order to highlight edges, we can use all (including the most complex) angles, Bezier splines and edges. Anyway, the line will appear perfect thanks to anti-aliasing. When shrinking the image scale to the size of an icon, situation changes dramatically. When every particular pixel is vitally important and can change the whole appearance of the icon, anti-aliasing is simply unreasonable. It means that you should think about the possible line angles.

The slope you choose for the line, specifies the step of this line. This means that every line is made of primary elements, the combination of which determines its neatness and visual appeal.

For instance, a 18-degree angle contains many tiny 3-pixel lines combined with a 1-pixel downshift:
Lines and pixels

This is how almost each line looks like. Primary element followed by joining followed by second basic element. However, not each angle 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 appealing. The 25-degree angle produses a line consisting of equal 2-pixel basic elements. The 20-degree slope has a primary element containing of three parts: 3-pixel, 3-pixel and 2-pixel. The slope is more complex, thus, when not combined by additional visual effects, it brings a feeling of untidiness: the primary elements have contrast which is too obvious to hide from the human eye.

Here we can see the first rule. The most "appropriate" slopes must make as plain primary elements as they can. Thus, the perfect slopes are 0 and 90 degrees. In those, 1-pixel basic elements are combined without any shift and form smooth lines. Less perfect are slopes which form primary elements of 1, 2, 3 pixel with 1-pixel downshift. Of course, the lines can not be even, but the human brain will process the image and present to the user what you intended to show to him. Also, the following slopes can be considered acceptable (but at a stretch): slopes with basic elements consisting of unequal lines shifted by more than 1 pixel.

For example:

It is the time to touch another problem. In the previous paragraph, I purposely defined slopes with primary elements of 1, 2 and 3 pixels as acceptable. Such small lines, especially when a great amount of them is joined, appear as solid. 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 clearly noticed that the line doesn't have solidness. It is not a continuous line now; it is a combination of several lines, situated near each other. Hardly any artist wants its creation to look inconsistent. Thus, we come to another conclusion: if you use small angles, which produse long primary elements, it has to be justified and employed with great attention.

And, finally, the third aspect I have to mention about lines. I did write that the basic element should be as plain as possible.

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

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

This examples can be made for almost any slope, so in your works, make sure to simplify everything.

2. Color

It can be said without an exaggeration that the color is the main element of your work; not suiting or badly balanced colors can ruin even the most creative idea. What can we write about the color in miniature graphics?

First, there is a clear rule: if the image looks poor when converted to monochrome, it means the colors that were used are incorrect. This rule is valid not exclusively for icons but for the whole graphic design.

Second, you will be unable to apply safe RGB. Sure, you can use internet colors only, but this limits you greatly. Gradients, shadows, dithering and many other effects will not be accessible to you.

Third, try to enlarge the areas of "flat" color. The more evenly colored parts without blurring and jumps your picture has, the more neat it looks. Pictograms are too tiny and the over usage of complex filters makes the image look dirty.

Fourth, gradients. This is a wonderful tool which can improve the look of any composition. Other than esthetics, gradients are an ideal solution to get rid of the "broken line" look (lines with too long primary elements). But be careful when using them since too much gradients can ruin the plain color, and be not suitable for the gif palette.

Fifth, shadows and highlights. All aspects of using shades and flares in icon making are completely identical to the rules of the general graphic design. The only ine I would like to note: create everything yourself. Don't apply effects, make all shades and flares in a different layer and after that edit the opacity. If applying filters, you rarely know what will it look like. It is unfavorable when you don't control the making of a composition. It is worse if you can't control it when drawing icons.

And, lastly, sixth. Nuancing is the main aspect of pictogram design, which largely results the visual appearance of the project. If the green human eye in the image is sized 1 pixel, increase the color intensiveness. For instance, instead of 0, 131, 159 choose 71, 195, 242. It is indifferent that the human eye can't have such color; in the first example it will look like a gray dot, but in the second one it will definitely be a green eye.

completely control the image, do not allow the visual illusions to spoil your work. It is OK if objects is not consistent from the technical point of view, but the whole picture must be perfect.

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

3. Font

If I wrote about something bigger than icon design, this chapter wouldn't fit into an entire book, but the size of images ;limits fonts too.

The size of letters becomes the main aspect as opposed to their look. Almost in any case, only if not the letters are the main part of the project, the text size has to be reduced to the greatest extent possible.

In general, almost any design company has its own font with little characters. This font can be crafted in several hours. You can search the internet and make your own library of very interesting fonts. First of all, I advice you to download 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 will work. As a last option, you can draw the necessary characters yourself.

There are quite a few 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 turns the font into an incomprehensible set of pixels.

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

Popular Icon editors
Icon Perfect Toolbar Icons is a collection of pre-made icons for use in business and personal software and websites. All icons have a bright color scheme, smooth and well-rounded edges. A variety of formats and sizes is provided.

Icon Beautify your financial or market-oriented application with instantly available professional Business Toolbar Icons. More than two hundred of wonderfully designed and carefully crafted icons picturing various financial objects and currencies are provided.

Icon IconLover is our pick. It allows you to design and alter any kind of graphics needed in the software development cycle, including icons, simple and moving cursors and interface elements - all these kinds of graphics can now be designed in a single application.

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

Icon ICL-Icon Extractor will scan 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 graphic file (PNG, JPEG, BMP, TIFF, WMF and more) in few seconds. Create stylish icons for Windows XP. Easily change, colorize and save icons that Windows uses to show standard objects, directories, files.