Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Creation

Let's discuss strictly technical aspects of icon design

1. Lines, angles

One of the most important parts of the image is the framework of the object, i.e. rough linear marking, which limits the object from the rest of the image. When creating normal-sized images, the artist rarely thinks about highlighting of objects with complementary outlines. This is not needed because of the scale: even low contrast objects do not blur into a one. Icon graphics is different. Two solutions are available: either foreground and background colors must be from different sides of the color wheel, or the foreground must be divided from the background by visible lines and shadows. I would like to discuss lines in more detail.

If we return more to the large scale graphics, we can note that in order to highlight contours, we can use any (even the most complex) angles, Bezier curves and edges. In any case, the line will appear ideal due to anti-aliasing. When shrinking the graphic scale to the size of an icon, situation changes dramatically. When each particular pixel is vitally valuable and can ruin the overall look of the composition, anti-aliasing is simply not applicable. It comes that you should consider the possible line slopes.

The angle you select for the line, determines the step of this line. Because each line consists of basic elements, the combination of which defines its accuracy and visual appeal.

For instance, a 18-degree slope consists of many small 3-pixel lines combined with a 1-pixel downshift:
Lines and pixels

This is how nearly each line looks like. Basic element followed by joining followed by second primary element. Unfortunately, not every angle creates lines that look look attractive and not annoying.

For example, here are 25 and 20-degree slopes:

It can be easily seen which line is more attractive. The 25-degree angle produses a line containing equal 2-pixel primary elements. The 20-degree slope has a primary element consisting of three lines: 3-pixel, 3-pixel and 2-pixel. The angle is more complicated, therefore, when not combined by other visual effects, it creates a feeling of untidiness: the basic elements have contrast which is too obvious to hide from the human eye.

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

For example:

Now we can touch another issue. In the last paragraph, I intentionally defined slopes with basic elements of 1, 2 and 3 pixels as correct. Such small lines, especially when a large amount of them is combined, look like 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 loses its solidness. It is not a single line now; it is a combination of several lines, situated near each other. Rarely any designer wants its composition to look that way. Thus, we have another conclusion: if you use minimal slopes, which make long basic elements, it must be reasoned and used with great caution.

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

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

In the first case 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 angle but the look is different. The complicated primary element produced the line untidy.

Such examples can be made for about any slope, 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; improper or poorly matched colors can kill even the most creative idea. What can we say about the color in miniature graphics?

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

Second, you will be unable to apply common RGB. Sure, you may use internet colors only, but this ties you hand and foot. Gradients, shadows, blending and many other tricks will not be available to you.

Third, try to enlarge the portion of "plain" color. The more consistently colored parts without blurring and jumps your picture has, the more clear it looks. Pictograms are too small and the over usage of complex filters makes the picture look dirty.

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

Fifth, shadows and highlights. All aspects of using shadows and highlights in icon creation are totally identical to the aspects of the overall graphic design. The only ine I have to note: draw everything yourself. Don't use filters, make all shades and highlights in a different layer and after that edit the opacity. If using filters, you rarely know what the result will be. It is unfavorable when you don't control the making of a project. It is awful if you don't control it if drawing miniatures.

And, lastly, sixth. Nuancing is the key detail of icon creation, which largely affects the visual look of the project. When the blue human eye in the picture has the size of 1 pixel, increase the color saturation. For instance, instead of 0, 131, 159 make 71, 195, 242. It doesn't matter that the human eye can't have such color; in the first example it will appear like a gray dot, and in the second example it will definitely be a blue eye.

Thoroughly control the picture, do not let the optical tricks to ruin your work. It is OK if objects is not consistent technically, but the entire composition must be flawless.

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

3. Text

If I wrote about something other than icon design, this chapter wouldn't fit into an entire book, but the resolution of compositions restricts fonts too.

The size of symbols becomes the leading aspect as opposed to their beauty. Almost in all cases, unless the letters are the main part of the image, the font size must be reduced to the largest extent possible.

In principle, virtually any graphic studio has its exclusive font with little letters. Such a font can be created in a few hours. You can browse the web and make your own library of very nice fonts. Primarily, I advice you to get the DS Pixel and Seventen 7Vedi website and the whole set 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 resort, you can draw the needed characters yourself.

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 text into an unrecognizable mixture of pixels.

However, 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 stock icons for use in commercial and personal applications and web-pages. The icons have a balanced color palette, sleek and well-rounded borders. A variety of formats and sizes is provided.

Icon Enhance your accounting or business-oriented software with instantly accessible professional Business Toolbar Icons. More than two hundred of professionally designed and neatly crafted icons representing different financial objects and symbols are included.

Icon IconLover is our pick. It allows you to create and edit any kind of images needed in the software development cycle, including icons, static and moving cursors and interface elements - all these types of images can now be designed in a single application.

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

Icon ICL-Icon Extractor will scan your images, archives, directories and all local drives for icons. It can get icons from the Internet and edit Windows icons.

Icon Perfect Icon makes icon from any graphic file (PNG, JPEG, BMP, TIFF, WMF and more) in few seconds. Create stylish icons for Windows XP. Easily replace, alter and save icons that Windows selects to display standard objects, folders, files.