Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Aspects of Icon Creation

Let's consider purely technical aspects of icon making

1. Lines, angles

One of the most important elements of the composition is the framework of the object, i.e. solid line, which separates the object from the rest of the image. When creating normal-sized graphics, the artist rarely cares about highlighting of objects with complementary lines. This is unnecessary because of the scale: even non-contrasted objects do not blur into a single whole. Pixel graphics is other story. Two solutions are possible: either foreground and background colors have to be from different sides of the color chart, or the foreground must be divided from the background by visible lines and shadows. I will discuss lines in more detail.

If we think more to the big-size images, we can note that in order to highlight edges, we can use all (even the most complex) angles, Bezier splines and borders. Anyway, the line will look perfect thanks to anti-aliasing. When decreasing the image scale to the size of an icon, situation changes greatly. When each particular pixel is equally valuable and can ruin the whole look of the icon, anti-aliasing is simply not applicable. It means that you have to consider the possible line slopes.

The slope you select for the line, specifies the step of this line. Because each line consists of basic elements, the union of which defines its accuracy and visual appeal.

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 every line looks like. Primary element with joining and another basic element. Unfortunately, not each slope makes the line look attractive 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 consisting of equal 2-pixel basic elements. The 20-degree angle has a primary element consisting of three parts: 3-pixel, 3-pixel and 2-pixel. The angle is more complicated, thus, when not combined by additional visual effects, it creates a feeling of messiness: the primary elements have contrast which is too obvious to hide from the human eye.

Here we can come to the first conclusion. The most "appropriate" slopes have to make as plain primary elements as possible. Thus, the ideal slopes are 0 and 90 degrees. In them, 1-pixel primary elements are combined without downshift and produce smooth lines. Less perfect are slopes which form primary elements of 1, 2, 3 pixel with 1-pixel downshift. Of course, the lines will not be smooth, but the human sight will process the picture and present to the viewer what you intended to show to him. Also, the mentioned angles can be considered acceptable (but at a stretch): angles with primary elements consisting of different lines shifted by more than 1 pixel.

For example:

It is the time to touch another problem. In the last paragraph, I purposely defined slopes with basic elements of 1, 2 and 3 pixels as correct. Such tiny lines, especially when a large amount of them is joined, look like a single whole. But what happens if we change the primary elements to 10 or 20 pixels?

Here is an example:
Low quality line

It can be obviously seen that the line loses its solidness. It is not a continuous line anymore; it is a combination of different lines, situated near one another. Hardly any designer wants its creation to look inconsistent. So, we come to another rule: if you use minimal slopes, which produse long primary elements, it has to be reasoned and used with maximum caution.

And, finally, the last aspect I wanted to tell about lines. I already wrote that the basic element should be as simple as possible.

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

In the first picture 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 basic element made the line untidy.

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

2. Color

It can be stated without an overstatement that the color is the main element of your work; improper or poorly balanced colors can ruin even the most creative idea. What can we write about the color in icon graphics?

First, there is a certain rule: if the image looks bad when reduced to monochrome, then the colors that were used are incorrect. This rule is true not only for icons but for the whole graphic design.

Second, you will probably unable to apply common RGB. Sure, you can select GIF 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 enlarge the portion of "plain" color. The more evenly colored parts without blurring and jumps your project has, the more neat it appears. Icons are too small and the over usage of complex effects makes the image look messy.

Fourth, gradients. This is a great instrument which can change the appearance of any picture. Besides visuals, gradients are a perfect way to get rid of the "broken line" look (lines with too long primary elements). But be attentive when applying them since too many gradients can kill the plain color, and be not suitable for the gif palette.

Fifth, shadows and highlights. All rules for using shadows and flares in icon making are completely the same to the aspects of the overall graphic design. The only ine I have to mention: draw everything yourself. Don't apply filters, make all shadows and highlights in a different layer and then edit the opacity. If applying filters, you rarely know what the result will be. It is unfavorable when you don't control the making of a project. It is awful if you can't control it if creating miniatures.

And, lastly, sixth. Tinting is the key detail of pictogram creation, which largely affects the visual look of the project. When the green human eye in the image has the size of 1 pixel, increase the color intensiveness. For example, instead of 0, 131, 159 make 71, 195, 242. It is indifferent that the human eye can't have this color; in the first case it will look like a gray dot, and in the second example it will really be a blue eye.

Thoroughly control the picture, do not allow the optical illusions to spoil your design. It is OK if something is not consistent technically, but the whole composition must be perfect.

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

3. Text

If I talked about something bigger than pictogram creation, this chapter wouldn't fit into an entire book, but the resolution of pictures ;limits fonts too.

The size of letters becomes the main aspect as opposed to their beauty. Almost in any case, unless the letters are the primary part of the composition, the font size must be reduced to the largest extent possible.

In principle, virtually any design studio has its unique font with small characters. This font can be created in a few hours. You can browse the web and make your own collection of very interesting fonts. First of all, I advice you to download the DS Pixel and Seventen 7Vedi website and the complete set of fonts from the Lakmus Lab website.

If you don't need a new font, small typesizes of Arial and Verdana may do. As a last option, you can create the needed characters by hand.

There are not many rules there. First, characters 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 mixture of pixels.

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

Popular Icon editors
Icon Perfect Toolbar Icons is a set of pre-made icons for use in commercial and private applications and websites. The icons have a balanced color scheme, smooth and well-rounded borders. A variety of formats and resolutions is available.

Icon Beautify your accounting or market-oriented application with readily available professional Business Toolbar Icons. Over two hundred of professionally designed and carefully created icons representing different financial objects and currencies are provided.

Icon IconLover is our choice. It allows you to create and edit all kinds of images needed in the software development cycle, containing icons, static and animated cursors and interface elements - all these kinds 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 easy to convert 256-color icons 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 image file (PNG, JPEG, BMP, TIFF, WMF and more) in just seconds. Make stylish icons for Windows XP. Easily replace, colorize and save icons that Windows uses to show standard objects, folders, files.