Logo Symbol Icons HomeDownloadsBuyContact  
Home
Icons
Icon Design
Downloads
Order
Support

Technical Aspects of Icon Creation

Let's consider purely technical aspects of icon creation

1. Lines, angles

One of the most important elements of the image is the outline of the object, i.e. solid line, which limits the object from the background. When working with normal-sized images, the artist rarely cares about defining objects with additional outlines. This is not needed because of the size: even low contrast objects do not mix into a single whole. Icon graphics is other story. Two solutions are available: either foreground and background colors must be from opposite sides of the color wheel, or the foreground must be separated from the background by visible lines and shadows. I will discuss lines deeper.

If we think more to the big-size graphics, we see that in order to define contours, we can use any (including the most complicated) angles, Bezier splines and edges. Anyway, the line will look ideal due to anti-aliasing. When decreasing the graphic dimensions to the small icon size, situation changes greatly. When every particular pixel is vitally important and can ruin the overall look of the composition, anti-aliasing is just not applicable. It means that you have to consider the possible line slopes.

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

For instance, a 18-degree slope contains many tiny 3-pixel lines connected using a 1-pixel downshift:
Lines and pixels

This is how nearly every line looks like. Basic element with joining and another basic element. However, not every slope creates lines that look look attractive and not annoying.

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

It can be easily seen which line is more appealing. The 25-degree angle produses a line containing even 2-pixel primary elements. The 20-degree slope has a basic element containing of three lines: 3-pixel, 3-pixel and 2-pixel. The angle is more complex, thus, when not combined by other visual effects, it creates a feeling of untidiness: the basic elements have contrast which is too obvious to hide from the human sight.

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

For example:
Line

Now we can discuss another issue. In the last paragraph, I intentionally defined slopes with basic elements of 1, 2 and 3 pixels as correct. Such small lines, especially when a large number of them is combined, look like a single whole. But what do we see if we increase the basic elements to 10 or 20 pixels?

Here is an example:
Low quality line

It can be obviously noticed that the line loses its integrity. It is not a single line now; it is a set of different lines, located near one another. Rarely any artist wants its composition to look inconsistent. So, we come to another conclusion: if you use minimal angles, which produse long basic elements, it has to be justified and employed with great caution.

And, finally, the third aspect I wanted to tell about lines. I did write that the primary element should be as plain as possible.

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 second picture, it is made of three elements: 3-pixel, 2-pixel and 1-pixel. The same slope but the image is different. The complex primary element produced the line messy.

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

2. Color

It can be said without an overstatement that the color is the main element of your work; improper or poorly balanced colors can kill even the best idea. What can we write about the color in miniature graphics?

First, there is a clear rule: if the image looks poor when reduced to grayscale, it means the colors that were used are wrong. This rule is valid not only for icons but for the whole graphic design.

Second, you will probably unable to apply common RGB. Sure, you can select internet colors only, but this limits you greatly. Gradients, shadows, blending and many other tricks will not be accessible to you.

Third, try to increase the portion of "flat" color. The more evenly colored areas without blurring and jumps your composition has, the more clear it looks. Pictograms are too tiny and the excess usage of complex filters makes the image look messy.

Fourth, gradients. This is a great tool which can improve the look of any project. Other than esthetics, gradients are a perfect solution to abolish the "broken line" effect (lines with too long basic elements). But be attentive when applying them since too much gradients can kill the plain color, and be not suitable for the gif palette.

Fifth, shadows and highlights. All aspects of using shades and highlights in icon design are totally the same to the rules of the overall graphic design. The only ine I would like to mention: create everything yourself. Don't apply filters, make all shades and flares in a separate layer and after that edit the opacity. If applying effects, you rarely know what the result will be. It is unfavorable when you don't control the process of creating of a project. It is worse if you don't control it if creating icons.

And, finally, sixth. Tinting is the key aspect of pictogram creation, which largely results the esthetic appearance of the composition. When the green human eye in the image has the size of 1 pixel, increase the color saturation. For instance, instead of 0, 131, 159 choose 71, 195, 242. It doesn't matter that the human eye never has such color; in the first example it will appear like a gray dot, and in the second one it will definitely be a blue eye.

Thoroughly control the image, do not allow the optical illusions to spoil your work. It is acceptable if objects is not perfect from the technical point of view, but the whole composition must be flawless.

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

3. Text

If I talked about something other than miniature creation, this part wouldn't fit into an entire book, but the size of pictures ;limits fonts too.

The size of symbols is the leading issue as opposed to their fineness. Almost in any case, only if not the letters are the primary part of the project, the text size has to be decreased to the largest extent possible.

In principle, almost any graphic studio has its own font with tiny letters. Such a font can be made in a couple of hours. You can search the web and collect your own collection of very nice 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 need a new font, tiny sizes of Arial and Verdana may work. As a last resort, you can draw the necessary letters by hand.

There are not many rules there. First, characters cannot be less than 5 pixels high or less than 3 pixels wide.

Example:

Font

Second, letters cannot use anti-aliasing. It transforms the text into an incomprehensible mixture of pixels.

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

 Information
Popular Icon editors
Icon Perfect Toolbar Icons is a collection of pre-made icons for use in commercial and personal software and web-pages. All icons have a bright color scheme, smooth and well-rounded borders. A variety of formats and sizes is provided.

Icon Beautify your financial or business-oriented program with instantly available professional Business Toolbar Icons. Over two hundred of professionally designed and carefully created icons representing various financial objects and symbols are provided.

Icon IconLover is our choice. It enables you to create and edit all kinds of graphics required in the software development cycle, including icons, simple and animated 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 makes icons from your pictures. It's easy to convert 256-color icons into True Color icons and Vista icons.

Icon ICL-Icon Extractor will search your images, archives, folders and all local disks for icons. It can get icons from the Internet and customize Windows icons.

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