Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Design

Let's consider purely technical aspects of icon design

1. Lines, slopes

One of the vital elements of the composition is the framework of the object, i.e. solid line, which limits the object from the rest of the image. When creating large-scale images, the artist occasionally cares about defining objects with complementary outlines. This is unnecessary because of the scale: even low contrast objects do not mix into a single whole. Icon graphics is different. Two solutions are possible: either foreground and background colors must be from different sides of the color wheel, or the object should be separated from the background by contrast lines and shadows. I will dwell on lines in more detail.

If we think again to the big-size graphics, we can note that in order to define edges, we can use any (including the most complicated) angles, Bezier curves and edges. In any case, the line will appear ideal due to anti-aliasing. When decreasing the image dimensions to the small icon size, situation changes dramatically. When every single pixel is vitally valuable and can ruin the whole look of the composition, anti-aliasing is just unreasonable. It comes that you should consider the possible line angles.

The slope you choose for the line, specifies the step for this line. Because each line is made of basic elements, the combination of which determines its neatness and esthetics.

For instance, a 18-degree slope consists of many tiny 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 and second basic element. However, not each angle creates lines that look look attractive and not messy.

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

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

Now we can see the first conclusion. The most "appropriate" slopes must make as plain basic elements as possible. Thus, the ideal slopes are 0 and 90 degrees. In them, 1-pixel primary elements are combined without any shift and form even lines. Less ideal are angles which form primary elements of 1, 2, 3 pixel with 1-pixel downshift. Of course, the lines can not be smooth, but the human brain will process the picture and provide to the viewer what you meant to show to him. Also, the following angles can be considered correct (but at a stretch): angles with primary elements made of different lines shifted by more than 1 pixel.

For example:

Now we can discuss another issue. In the last paragraph, I purposely defined slopes with primary elements of 1, 2 and 3 pixels as acceptable. Such tiny lines, especially when a great number of them is joined, appear as solid. But what happens if we change 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 solidness. It is not a continuous line anymore; it is a set of several lines, located near one another. Hardly any artist wants its composition to look inconsistent. So, we come to the second conclusion: if you use minimal slopes, which make long basic elements, it must be reasoned and used with great attention.

And, finally, the third aspect I have to tell 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 are possible) following ways:
25-degree angles

In the first case the primary element is a 2-pixel line. In the second picture, it consists of three elements: 3-pixel, 2-pixel and 1-pixel. The same angle but the look is different. The complex primary element produced the line messy.

This examples can be made for about any slope, so in your projects, try to simplify as much as possible.

2. Color

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

First, there is a clear rule: if the picture looks poor when reduced to monochrome, 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 probably unable to use safe RGB. Sure, you can use internet 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 enlarge the areas of "flat" color. The more consistently colored parts without blurring and jumps your picture has, the more clear it looks. Icons are too small and the excess usage of special filters makes the image look messy.

Fourth, gradients. This is a wonderful tool which can improve the appearance of any project. Besides visuals, gradients are a perfect solution to get rid of the "broken line" effect (lines with too long basic elements). But be attentive when using them because too much gradients can kill the plain color, and be unable to fit into the gif palette.

Fifth, shadows and highlights. All rules for applying shadows and highlights in icon creation are totally the same to the rules of the overall graphic design. The only thing I would like to note: draw everything yourself. Don't use filters, make all shadows and highlights in a separate layer and then edit its transparency. When using filters, you almost never know what will it look like. It is unfavorable when you can't control the making of a composition. It is awful if you can't control it if creating miniatures.

And, lastly, sixth. Nuancing is the main detail of icon creation, which greatly affects the visual look of the project. If the blue human eye in the picture 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 case it will look like a gray dot, but in the second one it will definitely be a green eye.

completely control the picture, do not allow the optical illusions to spoil your design. It is OK if objects is not perfect from the technical point of view, but the whole image 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, shades and highlights and tints.

3. Text

If I wrote about something bigger than pictogram design, this part wouldn't fit into a whole book, but the resolution of pictures ;limits fonts too.

The size of letters becomes the leading issue as opposed to their beauty. Nearly in any case, unless the letters are the main part of the project, the text size must be reduced to the greatest extent possible.

In principle, virtually any graphic company has its exclusive font with small letters. Such a font can be crafted in a couple of hours. You can browse the web and make your own library of very interesting fonts. Primarily, I advice you to download the DS Pixel and Seventen 7Vedi website and the complete series of fonts from the Lakmus Lab website.

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

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

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

Popular Icon editors
Icon Perfect Toolbar Icons is a set of ready-made icons for use in business and private applications and websites. All icons have a bright color scheme, smooth and well-rounded edges. A variety of formats and sizes is available.

Icon Beautify your accounting or business-oriented software with readily accessible professional Business Toolbar Icons. More than two hundred of wonderfully designed and neatly created icons picturing various financial objects and currencies are included.

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

Icon Icon Processor is an icon converter. It makes icons from your pictures. It's easy to turn 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 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 Vista. Easily replace, colorize and save icons that Windows uses to display typical objects, directories, files.