Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Making

Let's consider strictly technical details of icon creation

1. Lines, slopes

One of the most important elements of the image is the framework of the object, i.e. solid line, which separates the object from the background. When creating large-scale images, the artist occasionally cares about defining objects with additional lines. This is not needed because of the size: even low contrast objects do not mix into a one. Pixel graphics is different. Two solutions are available: either object and background colors must be from opposite sides of the color wheel, or the foreground must be separated from the background by contrast lines and shadows. I will discuss lines deeper.

If we think again to the large scale graphics, we can note that in order to highlight edges, we can use all (including the most complicated) angles, Bezier splines and borders. Anyway, the line will look ideal thanks to anti-aliasing. When shrinking the graphic scale to the size of an icon, situation changes dramatically. When every single pixel is vitally valuable and can change the overall look of the composition, anti-aliasing is just unreasonable. It means that you should think about the possible line slopes.

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

For example, a 18-degree angle contains many small 3-pixel lines combined with a 1-pixel downshift:
Lines and pixels

This is how nearly every line looks like. Basic element with joining and second basic element. Unfortunately, not every slope makes the line look neet and not annoying.

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 consisting of 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 angle is more complicated, thus, if not combined by other visual effects, it creates a feeling of untidiness: the basic elements have contrast which is too strong to hide from the human eye.

Here we can see the first conclusion. The most "appropriate" slopes have to make as plain basic elements as possible. therefore, the perfect slopes are 0 and 90 degrees. In them, 1-pixel basic elements are combined without any shift and produce smooth lines. Less ideal are slopes which form primary elements of 1, 2, 3 pixel with 1-pixel downshift. Of course, the lines can not be smooth, but the human sight will process the picture and provide to the user what you intended to show to him. Also, the following slopes can be considered correct (but at a stretch): angles 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 intentionally defined slopes with primary elements of 1, 2 and 3 pixels as acceptable. Such tiny lines, especially when a great amount of them is joined, appear as a single whole. But what do we see 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 doesn't have solidness. It is not a single line anymore; it is a set of several lines, located near each other. Hardly any artist wants its creation to look inconsistent. So, we have the second conclusion: if you use minimal slopes, which produse long basic elements, it must be reasoned and employed with maximum caution.

And, finally, the third thing I wanted to tell about lines. I already wrote that the basic element has to be as plain as it can.

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

In the first picture the basic element is a 2-pixel line. In the other picture, it is made of three lines: 3-pixel, 2-pixel and 1-pixel. The same slope but the look is different. The complex basic element produced the line messy.

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

2. Color

It can be said without an exaggeration that the color is the main aspect of your work; not suiting or poorly 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 poor when converted to monochrome, it means the colors that were used are incorrect. This rule is true not only for icons but for the entire graphic design.

Second, you will be unable to use safe RGB. Of course, you may select GIF colors only, but this limits you greatly. Gradients, shadows, dithering and many other effects will not be available to you.

Third, try to increase the areas of "plain" color. The more evenly colored parts without blurring and jumps your project has, the more neat it looks. Icons are too small and the over usage of complex filters makes the image look messy.

Fourth, gradients. This is a great instrument which can change the appearance of any project. Other than esthetics, gradients are a perfect way 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 not suitable for the gif palette.

Fifth, shadows and highlights. All rules for using shades and highlights in icon making are completely identical to the aspects of the general graphic design. The only thing I have to note: create everything yourself. Don't apply filters, make all shadows and flares in a separate layer and then edit its transparency. If using filters, you rarely can predict what the result will be. It is unfavorable when you don't control the making of a composition. It is worse if you can't control it when creating miniatures.

And, finally, sixth. Tinting is the main aspect of pictogram creation, which greatly affects the esthetic look of the project. If the blue human eye in the picture is sized 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 this color; in the first case it will appear like a gray dot, and in the second case it will really be a green eye.

Thoroughly control the picture, do not let the visual illusions to spoil your design. It is OK if objects is not perfect from the technical point of view, but the entire picture must be flawless.

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

3. Font

If I wrote about something bigger than miniature design, this chapter wouldn't fit into a whole book, but the size of images ;limits fonts too.

The resolution of letters is the main aspect as opposed to their look. Nearly in any case, unless the letters are the primary part of the image, the text size has to be decreased to the largest extent possible.

In general, virtually any design studio has its unique font with tiny characters. Such a font can be crafted in a couple of hours. You can search the web and make your own collection of very interesting fonts. First of all, I would recommend you to get the DS Pixel and Seventen 7Vedi webpage and the entire set of fonts from the Lakmus Lab website.

If you don't need a new font, small sizes of Arial and Verdana may work. As a last resort, you can create the needed letters by hand.

There are quite a few 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.

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

Popular Icon editors
Icon Perfect Toolbar Icons is a set of ready-made icons for use in business and personal applications and websites. The icons have a balanced color scheme, smooth and well-rounded borders. A variety of formats and sizes is provided.

Icon Beautify your financial or business-oriented software with readily available professional Business Toolbar Icons. Over two hundred of professionally designed and neatly crafted icons picturing various financial objects and symbols are provided.

Icon IconLover is our pick. It allows you to design and edit any kind of images needed in the application development cycle, containing icons, static and moving cursors and interface elements - all these kinds of images can now be designed in a single program.

Icon Icon Processor is an icon converter. It makes icons from your images. It's easy to convert 256-color icons into True Color icons and Vista icons.

Icon ICL-Icon Extractor will scan your files, archives, folders and all local drives for icons. It can get icons from the Internet and customize Windows icons.

Icon Perfect Icon makes icon from any image file (PNG, JPEG, BMP, TIFF, WMF and more) in few seconds. Create stylish icons for Windows XP. Easily replace, colorize and save icons that Windows selects to show typical objects, directories, files.