Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Making

Let's consider purely technical details of icon design

1. Lines, angles

One of the most important elements of the image is the outline of the object, i.e. solid line, which separates the object from the rest of the image. When working with normal-sized graphics, the artist rarely cares about highlighting of objects with complementary lines. This is unnecessary because of the size: even non-contrasted objects do not blur into a one. Icon graphics is different. Two solutions are possible: either foreground and background colors must be from different sides of the color chart, or the foreground should be divided from the background by contrast lines and shadows. I would like to discuss lines in more detail.

If we think more to the large scale graphics, we see that in order to highlight edges, we can use any (even the most complicated) angles, Bezier splines and edges. Anyway, the line will appear perfect thanks to anti-aliasing. When shrinking the graphic scale to the size of an icon, situation changes greatly. When each particular pixel is equally important and can ruin the overall look of the icon, anti-aliasing is just not applicable. It comes that you have to consider the possible line slopes.

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

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 with joining and another primary element. Unfortunately, not every slope makes the line look attractive and not messy.

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

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

Now we can come to the first rule. The most "appropriate" angles must make as plain primary elements as they can. Thus, the perfect slopes are 0 and 90 degrees. In them, 1-pixel basic elements are joined without downshift and produce even 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 sight will process the image and present to the user what you meant to show to him. Also, the mentioned angles can be considered acceptable (but at a stretch): angles with primary elements made of different lines shifted by more than 1 pixel.

For example:

Now we can move to 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, look like solid. But what happens 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 integrity. It is not a single line now; it is a combination of several lines, located near each other. Rarely any artist wants its composition to look that way. Thus, we have the second conclusion: if you use minimal slopes, which produse long basic elements, it has to be reasoned and employed with maximum attention.

And, finally, the last thing I have to tell about lines. I did write that the primary 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 case the primary element is a 2-pixel line. In the second picture, it is made 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.

Such examples can be made for almost any slope, so in your projects, make sure to simplify as much as possible.

2. Color

It can be said without an exaggeration that the color is the leading aspect of your work; improper or poorly balanced colors can ruin 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 converted to grayscale, then the colors that were chosen are wrong. This rule is valid not only for icons but for the entire graphic design.

Second, you will be unable to apply safe RGB. Of course, you can select 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 portion of "plain" color. The more consistently colored areas without blurring and jumps your composition has, the more clear it appears. Pictograms are too tiny and the excess usage of special filters makes the picture look dirty.

Fourth, gradients. This is a wonderful tool which can improve the look 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 careful when using them because too many gradients can ruin the flat color, and be not suitable for the gif palette.

Fifth, shadows and highlights. All rules for using shades and flares in icon making are totally identical to the rules of the general graphic design. The only ine I have to mention: create everything yourself. Don't use filters, make all shadows and highlights in a separate layer and after that edit its transparency. If applying filters, you almost never can predict what the result will be. It is bad when you can't control the making of a project. It is worse if you don't control it when creating icons.

And, lastly, sixth. Nuancing is the main aspect of icon design, which greatly results the esthetic appearance of the project. If the green human eye in the picture has the size of 1 pixel, increase the color saturation. 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 really be a green eye.

completely control the image, do not allow the visual tricks to spoil your design. It is acceptable if something is not perfect technically, but the entire picture must be flawless.

As an example, I drew the pack of juice standing before me. The picture has flat color, gradients with broken lines, shadows and highlights and tints.

3. Text

If I talked about something other than pictogram creation, this part wouldn't fit into a whole book, but the resolution of images restricts fonts too.

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

In principle, virtually any design company has its exclusive font with tiny letters. Such a font can be made in several hours. You can search the internet and collect your own collection of very nice fonts. First of all, 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, little typesizes of Arial and Verdana will work. As a last resort, you can create the needed letters by hand.

There are quite a few 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 incomprehensible set of pixels.

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

Popular Icon editors
Icon Perfect Toolbar Icons is a set of stock icons for use in business and private applications and web-pages. All icons have a balanced color palette, smooth and well-rounded edges. A variety of formats and sizes is available.

Icon Enhance your accounting or market-oriented software with readily available professional Business Toolbar Icons. More than two hundred of wonderfully designed and neatly crafted icons representing different financial objects and currencies are provided.

Icon IconLover is our pick. It enables you to design and alter any kind of graphics required in the software development cycle, containing icons, static and animated cursors and interface parts - all these types of graphics can now be created in a single program.

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

Icon ICL-Icon Extractor will search your images, archives, directories and all local disks for icons. It can download icons from the Internet and edit Windows icons.

Icon Perfect Icon creates icon from any graphic file (PNG, JPEG, BMP, TIFF, WMF and more) in just seconds. Make stylish icons for Windows Vista. Easily change, colorize and save icons that Windows uses to display standard objects, folders, files.