Logo Symbol Icons HomeDownloadsBuyContact  
Home
Icons
Icon Design
Downloads
Order
Support

Technical Aspects of Icon Creation

Let's consider strictly technical details of icon creation

1. Lines, slopes

One of the vital parts of the image is the framework of the object, i.e. rough line, which limits the object from the background. When working with normal-sized graphics, the designer rarely cares about highlighting of objects with additional lines. This is not needed because of the size: even non-contrasted objects do not blend into a one. Icon graphics is other story. Two solutions are available: either object and background colors have to be from opposite sides of the color chart, or the object must be separated from the background by visible lines and shadows. I would like to discuss lines in more detail.

If we return again to the large scale images, we see that in order to define edges, we can use all (including the most complex) angles, Bezier curves and borders. Anyway, the line will appear ideal due to anti-aliasing. When shrinking the image dimensions to the small icon size, situation changes dramatically. When each single pixel is equally important and can change the whole look of the composition, anti-aliasing is simply unreasonable. It comes that you should consider the possible line angles.

The angle you choose for the line, determines the step of this line. This means that each line consists of basic elements, the combination of which determines its neatness and visual appeal.

For example, a 18-degree slope consists of many tiny 3-pixel lines combined with a 1-pixel downshift:
Lines and pixels

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

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

It can be easily known which line is more appealing. The 25-degree slope produses a line containing equal 2-pixel basic elements. The 20-degree slope has a basic element containing of three parts: 3-pixel, 3-pixel and 2-pixel. The slope is more complicated, thus, if not supported by additional visual effects, it brings a feeling of messiness: the basic elements have contrast which is too obvious to escape the human sight.

Here we can come to the first conclusion. The most "correct" angles have to make as plain primary elements as possible. therefore, the perfect angles are 0 and 90 degrees. In those, 1-pixel primary elements are joined without any shift and form smooth lines. Less perfect are slopes which form primary elements of 1, 2, 3 pixel with 1-pixel downshift. Surely, the lines can not be smooth, but the human brain will process the image and provide to the user what you intended to show to him. Also, the following angles can be considered correct (but at a stretch): slopes with primary elements consisting of unequal lines shifted by more than 1 pixel.

For example:
Line

It is the time to move to another problem. In the previous paragraph, I purposely defined angles with basic elements of 1, 2 and 3 pixels as correct. Such small lines, especially when a great 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 obviously noticed that the line loses its integrity. It is not a continuous line anymore; it is a set of several lines, situated near each other. Rarely any artist wants its composition to look inconsistent. So, we have the second rule: if you use small angles, which make long primary elements, it has to be reasoned and used with great attention.

And, finally, the last thing I wanted to mention about lines. I did write that the basic element should be as plain as it can.

For example, a 25-degree slope can be drawn in the two (sure more of them are possible) following ways:
25-degree angles

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

Such examples can be produced for almost any slope, so in your projects, 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 badly balanced colors can ruin even the most creative idea. What can we say about the color in icon graphics?

First, there is a clear rule: if the picture looks poor when reduced to grayscale, then the colors that were selected are incorrect. This rule is valid 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 ties you hand and foot. Gradients, shadows, blending and many other effects will not be available to you.

Third, try to enlarge the areas of "plain" color. The more evenly colored areas without diffusion and jumps your composition has, the more clear it appears. Pictograms are too small and the excess usage of complex filters makes the picture look messy.

Fourth, gradients. This is a wonderful tool which can change the appearance of any project. Other than esthetics, gradients are a perfect solution to abolish the "broken line" look (lines with too long primary elements). But be attentive when applying them since too many gradients can kill the flat color, and be unable to fit into the gif palette.

Fifth, shadows and flares. All aspects of using shadows and highlights in icon making are completely identical to the rules of the overall graphic design. The only thing I have to mention: create everything yourself. Don't apply effects, make all shadows and flares in a different layer and then edit the opacity. When applying effects, you almost never can predict what will it look like. It is unfavorable when you can't control the making of a project. It is awful if you can't control it if creating icons.

And, lastly, sixth. Nuancing is the main detail of pictogram design, which greatly affects the visual appearance of the image. If the blue human eye in the icon has the size of 1 pixel, increase the color intensiveness. For instance, instead of 0, 131, 159 choose 71, 195, 242. It doesn't matter that the human eye never has this color; in the first example it will appear like a gray dot, and in the second case it will really be a blue eye.

Thoroughly control the image, do not let the visual illusions to ruin your work. It is acceptable if objects is not consistent technically, but the entire picture must be flawless.

As an example, I pictured the packet of juice located in front of me. The picture has plain color, gradients with broken lines, shadows and flares and nuances.
Juice

3. Font

If I talked about something bigger than miniature creation, this part wouldn't fit into a whole book, but the resolution of images ;limits fonts too.

The resolution of symbols becomes the main issue as opposed to their fineness. Nearly in any case, unless the letters are the main part of the project, the font size has to be reduced to the largest extent possible.

In general, almost any graphic company has its unique font with small characters. Such a font can be made in a few hours. You can search the web and make your own collection of very nice fonts. Primarily, I advice you to get the DS Pixel and Seventen 7Vedi website as well as the whole series 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 resort, you can draw the needed letters by hand.

There are quite a few rules there. First, characters cannot be less than 5 pixels high or less than 3 pixels wide.

Example:

Font

Second, letters should not use anti-aliasing. It turns the font into an unrecognizable set of pixels.

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

 Information
Popular Icon editors
Icon Perfect Toolbar Icons is a collection of stock icons for use in commercial and personal programs and web-pages. The icons have a balanced color palette, sleek and well-rounded edges. A variety of formats and resolutions is available.

Icon Beautify your accounting or business-oriented program with instantly available professional Business Toolbar Icons. More than two hundred of wonderfully designed and neatly created icons representing various financial objects and symbols are included.

Icon IconLover is our choice. It allows you to create and edit any kind of images required in the software development cycle, containing icons, static and moving cursors and interface parts - all these types of images can now be created in a single application.

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 Vista icons.

Icon ICL-Icon Extractor will search your files, archives, directories and all local disks for icons. It can download icons from the Internet and edit Windows icons.

Icon Perfect Icon creates icon from any graphic file (PNG, JPEG, BMP, TIFF, WMF and more) in few seconds. Make stylish icons for Windows XP. Easily replace, alter and save icons that Windows selects to display typical objects, folders, files.