Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Creation

Let's consider strictly technical aspects of icon design

1. Lines, angles

One of the most important elements of the image is the outline of the object, i.e. rough linear marking, which separates the object from the rest of the image. When designing normal-sized images, the designer rarely cares about highlighting of objects with additional outlines. This is not needed because of the size: even low contrast objects do not mix into a one. Icon graphics is different. Two solutions are possible: either foreground and background colors must be from opposite sides of the color wheel, or the foreground must be separated from the background by contrast outlines and shadows. I will dwell on lines in more detail.

If we think again to the large scale graphics, we can note that in order to highlight edges, we can use all (even the most complicated) angles, Bezier curves and edges. In any case, the line will appear perfect thanks to anti-aliasing. When shrinking the image dimensions to the small icon size, situation changes dramatically. When every single pixel is equally important and can ruin the overall appearance of the icon, anti-aliasing is just unreasonable. It means that you should consider the possible line slopes.

The angle you choose for the line, specifies the step of this line. This means that each line is made of primary elements, the combination of which defines its accuracy and esthetics.

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

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

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

It can be easily known which line is more attractive. The 25-degree slope makes a line containing equal 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 complex, therefore, if not supported by other visual effects, it creates 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 rule. The most "correct" angles have to make as simple basic elements as possible. therefore, the perfect angles are 0 and 90 degrees. In them, 1-pixel basic elements are combined without downshift and produce even lines. Less ideal are angles which form basic elements of 1, 2, 3 pixel with 1-pixel downshift. Surely, the lines can not be smooth, but the human sight will process the picture and provide to the viewer what you intended to show to him. Also, the mentioned slopes can be considered correct (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 discuss another issue. In the last paragraph, I purposely defined slopes with basic elements of 1, 2 and 3 pixels as correct. Such small lines, especially when a large amount of them is joined, appear as a single whole. But what do we see 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 anymore; it is a combination of several lines, situated near each other. Hardly any artist wants its creation to look that way. So, we have the second conclusion: if you use small slopes, which make long primary elements, it has to be justified and used with great caution.

And, finally, the third thing I have to mention about lines. I already wrote that the primary element has to be as simple as it can.

For example, 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 primary element is a 2-pixel line. In the other case, it is made of three lines: 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 made for about any slope, so in your works, make sure to simplify everything.

2. Color

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

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

Second, you will probably unable to use safe RGB. Sure, you may use 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 portion of "plain" color. The more consistently colored areas without blurring and jumps your composition has, the more neat it looks. Icons are too small and the over usage of special effects makes the image look dirty.

Fourth, gradients. This is a great instrument which can improve the appearance of any project. Besides esthetics, gradients are an ideal way to get rid of the "broken line" effect (lines with too long primary elements). But be careful when applying them since too many gradients can ruin the flat color, and be not suitable for the gif palette.

Fifth, shadows and flares. All aspects of applying shadows and highlights in icon creation are totally identical to the rules of the general graphic design. The only ine I have to mention: create everything yourself. Don't apply filters, make all shades and highlights in a different layer and then edit its transparency. If using effects, you almost never know what the result will be. It is unfavorable when you don't control the process of creating of a project. It is awful if you don't control it if creating icons.

And, finally, sixth. Tinting is the main aspect of icon creation, which largely results the esthetic appearance of the project. If the green human eye in the image has the size of 1 pixel, increase the color intensiveness. For example, instead of 0, 131, 159 choose 71, 195, 242. It is indifferent that the human eye never has this color; in the first example it will look like a gray dot, but in the second case it will definitely be a green eye.

completely control the image, do not allow the optical 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 located in front of me. The image has flat color, gradients with broken lines, shadows and flares and nuances.

3. Text

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

The resolution of letters becomes the leading aspect as opposed to their beauty. Nearly in all cases, only if not the letters are the main part of the image, the font size has to be reduced to the greatest extent possible.

In general, almost any design studio has its exclusive font with little characters. Such a font can be crafted in several 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 website and the complete set of fonts from the Lakmus Lab website.

If you don't need a new font, tiny typesizes of Arial and Verdana may do. As a last resort, you can create the necessary letters yourself.

There are quite a few 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 text into an unrecognizable mixture of pixels.

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

Popular Icon editors
Icon Perfect Toolbar Icons is a set of pre-made icons for use in commercial and personal software and web-pages. All icons have a bright color palette, smooth and well-rounded borders. A variety of formats and sizes is provided.

Icon Enhance your financial or market-oriented application with instantly available professional Business Toolbar Icons. Over two hundred of professionally designed and carefully crafted icons picturing different financial objects and currencies are provided.

Icon IconLover is our choice. It allows you to create and alter any kind of graphics needed in the program development cycle, including icons, simple and moving cursors and interface elements - all these kinds of images 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 icons into True Color icons and XP icons.

Icon ICL-Icon Extractor will search your images, archives, folders and all local disks for icons. It can download 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 just seconds. Create stylish icons for Windows Vista. Easily change, colorize and save icons that Windows selects to show standard objects, folders, files.