Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Creation

Let's discuss purely technical details of icon making

1. Lines, slopes

One of the most important elements of the composition is the outline of the object, i.e. rough linear marking, which separates the object from the rest of the image. When working with normal-sized graphics, the artist rarely thinks about defining objects with additional outlines. This is unnecessary because of the scale: even low contrast objects do not mix into a single whole. Icon graphics is other story. Two variants are possible: either object and background colors must be from opposite sides of the color wheel, or the object should be divided from the background by visible outlines and shadows. I will dwell on lines in more detail.

If we think again to the large scale images, we can note that in order to highlight contours, we can use any (even the most complicated) angles, Bezier splines and borders. In any case, the line will look perfect thanks to anti-aliasing. When shrinking the graphic scale to the small icon size, situation changes greatly. When each single pixel is vitally valuable and can change the overall look of the icon, anti-aliasing is just unreasonable. It means that you have to consider the possible line angles.

The slope you choose for the line, specifies the step of this line. This means that each line consists of basic elements, the union of which defines its neatness and esthetics.

For example, a 18-degree angle consists of many small 3-pixel lines connected using a 1-pixel downshift:
Lines and pixels

This is how almost every line looks like. Primary element with joining and another primary element. Unfortunately, not every angle creates lines that look look neet 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 slope produses a line consisting of equal 2-pixel basic elements. The 20-degree angle has a primary element containing of three lines: 3-pixel, 3-pixel and 2-pixel. The angle is more complicated, thus, if not supported by other visual effects, it creates a feeling of messiness: the basic elements have contrast which is too strong to hide from the human sight.

Now we can come to the first conclusion. The most "appropriate" slopes have to make as simple basic elements as they can. therefore, the ideal angles are 0 and 90 degrees. In them, 1-pixel primary elements are joined without any shift and produce smooth lines. Less perfect 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 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:

Now we can touch another issue. In the previous paragraph, I purposely defined angles with primary elements of 1, 2 and 3 pixels as acceptable. Such tiny lines, especially when a large 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 loses its integrity. It is not a continuous line anymore; it is a combination of different lines, situated near each other. Hardly any designer wants its creation to look that way. Thus, we come to the second conclusion: if you use minimal slopes, which make long primary elements, it has to be reasoned and used with maximum caution.

And, finally, the third thing I wanted to mention about lines. I did write that the basic element has to be as simple as it can.

For example, a 25-degree angle can be produced in the two (of course more of them exists) following ways:
25-degree angles

In the first picture the primary element is a 2-pixel line. In the other picture, it is made of three elements: 3-pixel, 2-pixel and 1-pixel. The same angle but the image is different. The complicated primary element made the line messy.

Such examples can be produced for almost any angle, so in your works, try to simplify everything.

2. Color

It can be said without an exaggeration that the color is the leading aspect of your work; not suiting or badly 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 poor when reduced to monochrome, it means the colors that were selected are wrong. This rule is valid not exclusively for icons but for the whole graphic design.

Second, you will be unable to apply common 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 evenly colored parts without diffusion and jumps your composition has, the more clear it looks. Icons are too tiny and the excess usage of complex filters makes the picture look messy.

Fourth, gradients. This is a wonderful instrument which can improve the appearance of any composition. Besides visuals, 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 plain color, and be unable to fit into the gif palette.

Fifth, shadows and highlights. All rules for using shades and highlights in icon design are completely identical to the rules of the general graphic design. The only thing I would like to note: draw everything yourself. Don't apply effects, make all shades and highlights in a separate layer and after that edit the opacity. If applying filters, you rarely know what will it look like. It is bad when you don't control the process of creating of a project. It is awful if you don't control it if drawing miniatures.

And, finally, sixth. Nuancing is the key aspect of icon design, which greatly results the visual appearance of the project. If the green human eye in the icon is sized 1 pixel, increase the color intensiveness. For example, instead of 0, 131, 159 choose 71, 195, 242. It doesn't matter that the human eye can't have such color; in the first case it will look like a gray dot, but in the second case it will really be a green eye.

completely control the image, do not allow the optical illusions to spoil your work. It is OK if something is not perfect technically, but the entire image must be flawless.

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

3. Font

If I talked about something bigger than icon creation, this part wouldn't fit into an entire book, but the size of compositions restricts fonts too.

The size of letters is the leading issue as opposed to their look. Nearly in all cases, unless the letters are the main part of the project, the text size must be reduced to the largest extent possible.

In principle, virtually any design company has its exclusive font with little letters. Such a font can be crafted in a couple of hours. You can search the internet and make your own collection of very interesting fonts. First of all, I would recommend you to download the DS Pixel and Seventen 7Vedi webpage and the complete set of fonts from the Lakmus Lab website.

If you don't want a new font, tiny typesizes of Arial and Verdana may work. As a last option, you can draw the necessary 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 should not use anti-aliasing. It transforms the font into an unrecognizable set of pixels.

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

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

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

Icon IconLover is our choice. It allows you to design and alter all kinds of images required in the software development cycle, including icons, static and animated cursors and interface elements - all these types of images can now be designed in a single program.

Icon Icon Processor is an icon converter. It creates icons from your pictures. It's easy to convert 256-color icons into True Color icons and XP icons.

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

Icon Perfect Icon creates icon from any image file (PNG, JPEG, BMP, TIFF, WMF and more) in few seconds. Create great icons for Windows Vista. Easily change, alter and save icons that Windows selects to show typical objects, directories, files.