Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Making

Let's discuss strictly technical aspects of icon creation

1. Lines, slopes

One of the vital elements of the image is the framework of the object, i.e. solid line, which limits the object from the background. When creating large-scale graphics, the designer rarely thinks about highlighting of objects with additional lines. This is not needed because of the scale: even non-contrasted objects do not blend into a single whole. Icon graphics is other story. Two variants are possible: either foreground and background colors have to be from opposite sides of the color wheel, or the object must be divided from the background by contrast outlines and shadows. I will discuss lines in more detail.

If we return again to the big-size images, we can note that in order to highlight contours, we can use all (including the most complex) angles, Bezier splines and edges. Anyway, the line will look perfect thanks to anti-aliasing. When shrinking the graphic dimensions to the size of an icon, situation changes greatly. When each particular pixel is vitally important and can change the overall appearance of the icon, anti-aliasing is simply unreasonable. It means that you have to think about the possible line slopes.

The slope you choose for the line, specifies the step for this line. This means that every line is made of primary elements, the union of which determines its neatness and visual appeal.

For instance, a 18-degree angle contains many tiny 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 second basic element. Unfortunately, not each angle makes the line look neet and not messy.

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

It can be easily seen which line is more attractive. The 25-degree slope makes 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 slope is more complex, thus, if not combined by additional visual effects, it creates a feeling of untidiness: the primary elements have contrast which is too obvious to hide from the human sight.

Here we can see the first rule. The most "appropriate" slopes must make as plain primary elements as possible. Thus, the perfect slopes are 0 and 90 degrees. In those, 1-pixel primary elements are combined without downshift and form even lines. Less ideal are angles which form basic elements of 1, 2, 3 pixel with 1-pixel downshift. Of course, the lines will not be smooth, but the human brain will process the picture and present to the user what you intended to show to him. Also, the following angles can be considered acceptable (but at a stretch): angles with primary elements made of unequal lines shifted by more than 1 pixel.

For example:

It is the time to touch another problem. In the last paragraph, I purposely defined angles with basic elements of 1, 2 and 3 pixels as correct. Such tiny lines, especially when a great amount of them is joined, look like solid. 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 clearly noticed that the line doesn't have integrity. It is not a continuous line now; it is a combination of several lines, located near one another. Hardly any artist wants its creation to look inconsistent. Thus, we come to the second rule: if you use small angles, which produse long primary elements, it has to be justified and employed with great attention.

And, finally, the third aspect I have to mention about lines. I already wrote that the primary element should be as simple as possible.

For instance, a 25-degree angle can be drawn in the two (sure more of them exists) following ways:
25-degree angles

In the first case the basic element is a 2-pixel line. In the second picture, it consists of three lines: 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 projects, make sure to simplify as much as possible.

2. Color

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

First, there is a clear rule: if the picture looks poor when reduced to monochrome, it means the colors that were chosen are incorrect. This rule is valid not only for icons but for the entire graphic design.

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

Third, try to increase the areas of "flat" color. The more consistently colored areas without diffusion and jumps your composition has, the more clear it looks. Pictograms are too small and the over usage of special effects makes the image look messy.

Fourth, gradients. This is a wonderful instrument which can change the look of any composition. Other than visuals, gradients are an ideal solution to abolish the "broken line" effect (lines with too long basic elements). But be careful when applying them because too many gradients can ruin the plain color, and be unable to fit into the gif palette.

Fifth, shadows and flares. All rules for applying shades and highlights in icon creation are totally identical to the rules of the general graphic design. The only ine I would like to note: draw everything yourself. Don't use filters, make all shades and highlights in a separate layer and then 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 process of creating of a composition. It is worse if you don't control it when creating miniatures.

And, lastly, sixth. Tinting is the main detail of pictogram design, which largely results the esthetic appearance of the composition. When the green human eye in the icon is sized 1 pixel, increase the color saturation. For example, instead of 0, 131, 159 make 71, 195, 242. It doesn't matter that the human eye never has this color; in the first case it will look like a gray dot, and in the second one it will definitely be a blue eye.

Thoroughly control the picture, do not let the optical tricks to spoil your work. It is OK if something is not consistent from the technical point of view, but the whole picture must be perfect.

As an example, I pictured the packet of juice located before me. The picture has flat color, gradients with broken lines, shadows and flares and tints.

3. Font

If I wrote about something bigger than icon creation, this part wouldn't fit into a whole book, but the size of pictures restricts fonts too.

The size of letters becomes the main issue as opposed to their look. Nearly in any case, only if not the letters are the main part of the composition, the font size must be reduced to the greatest extent possible.

In general, almost any graphic company has its own font with little characters. This font can be made in a few hours. You can search the internet and collect your own library of very nice fonts. First of all, I advice you to get the DS Pixel and Seventen 7Vedi website as well as the entire set of fonts from the Lakmus Lab website.

If you don't want a new font, small typesizes of Arial and Verdana may work. As a last option, you can create the needed characters 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 font into an incomprehensible set 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 business and personal software and web-pages. The icons have a bright color scheme, smooth and well-rounded edges. A variety of formats and resolutions is available.

Icon Beautify your financial or market-oriented application with instantly available professional Business Toolbar Icons. More than two hundred of wonderfully designed and neatly created icons representing different financial objects and currencies are included.

Icon IconLover is our choice. It enables you to design and alter any kind of images needed in the application development cycle, containing icons, simple and moving cursors and interface elements - all these types of graphics can now be designed in a single application.

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

Icon ICL-Icon Extractor will scan your files, archives, directories and all local drives 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 few seconds. Make stylish icons for Windows XP. Easily change, alter and save icons that Windows uses to display typical objects, folders, files.