Logo Symbol Icons HomeDownloadsBuyContact  
Home
Icons
Icon Design
Downloads
Order
Support

Technical Aspects of Icon Design

Let's discuss purely technical aspects of icon creation

1. Lines, angles

One of the most important elements of the composition is the framework of the object, i.e. solid border, which separates the object from the background. When designing large-scale graphics, the artist rarely cares about defining objects with complementary outlines. This is not needed because of the scale: even non-contrasted objects do not blur into a single whole. Pixel graphics is other story. Two variants are available: either object and background colors have to be from different sides of the color wheel, or the object should be divided from the background by contrast outlines and shadows. I will discuss lines deeper.

If we think again to the big-size images, we can note that in order to define edges, we can use any (even the most complicated) angles, Bezier splines and borders. Anyway, the line will appear ideal thanks to anti-aliasing. When decreasing the image scale to the small icon size, situation changes dramatically. When each particular pixel is vitally valuable and can ruin the overall appearance of the composition, anti-aliasing is simply unreasonable. It means that you have to consider the possible line angles.

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

For example, a 18-degree slope consists of many small 3-pixel lines connected using a 1-pixel downshift:
Lines and pixels

This is how nearly each line looks like. Primary element followed by joining and second primary element. Unfortunately, not each slope makes the line look neet and not messy.

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

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

Now we can come to the first conclusion. The most "appropriate" angles have to make as simple 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 primary elements of 1, 2, 3 pixel with 1-pixel downshift. Surely, the lines will not be smooth, but the human sight will process the picture and provide to the viewer what you intended to show to him. Also, the following angles can be considered acceptable (but at a stretch): slopes with basic elements consisting of different lines shifted by more than 1 pixel.

For example:
Line

It is the time to move to another problem. In the last paragraph, I purposely defined slopes with basic elements of 1, 2 and 3 pixels as acceptable. Such small lines, especially when a large number of them is combined, 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 clearly seen that the line loses its integrity. It is not a single line now; it is a combination of several lines, located near one another. Hardly any designer wants its creation to look inconsistent. Thus, we come to another conclusion: if you use small angles, which produse long basic elements, it has to be reasoned and used with maximum attention.

And, finally, the third aspect I wanted to mention about lines. I did write that the primary element has to be as simple as it can.

For example, a 25-degree slope can be produced 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 case, it is made of three lines: 3-pixel, 2-pixel and 1-pixel. The same slope but the look is different. The complex primary element produced the line untidy.

Such examples can be produced for about any angle, so in your projects, make sure to simplify everything.

2. Color

It can be said without an exaggeration that the color is the main aspect of your work; improper or badly balanced colors can ruin even the most creative idea. What can we say about the color in miniature graphics?

First, there is a clear rule: if the picture looks bad when converted to monochrome, then the colors that were used are incorrect. This rule is valid not only for icons but for the entire graphic design.

Second, you will probably unable to use common RGB. Of course, you may use GIF colors only, but this ties you hand and foot. Gradients, shadows, blending and many other tricks will not be accessible to you.

Third, try to increase the portion of "flat" color. The more consistently colored parts without diffusion and jumps your composition has, the more neat it looks. Icons are too tiny and the excess usage of special effects makes the picture look messy.

Fourth, gradients. This is a great instrument which can change the appearance of any picture. Other than visuals, gradients are an ideal solution to abolish the "broken line" effect (lines with too long primary elements). But be careful when using 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 applying shadows and highlights in icon design are totally the same to the rules of the overall graphic design. The only ine I would like to note: create everything by hand. Don't apply effects, make all shades and flares in a separate layer and after that edit the opacity. When using effects, you rarely can predict what will it look like. It is bad when you don't control the making of a project. It is worse if you don't control it when creating miniatures.

And, lastly, sixth. Tinting is the main aspect of icon creation, which largely results the visual appearance of the composition. If the green human eye in the image has the size of 1 pixel, increase the color intensiveness. 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, but in the second one it will definitely be a green eye.

completely control the image, do not let the optical illusions to ruin your work. It is OK if objects is not consistent technically, but the whole image must be flawless.

As an example, I drew the pack of juice located in front of me. The image has flat color, gradients with broken lines, shades and flares and nuances.
Juice

3. Font

If I talked about something other than icon design, this part wouldn't fit into a whole book, but the size of compositions restricts fonts too.

The resolution of symbols becomes the main issue as opposed to their beauty. Nearly in any case, unless the letters are the primary part of the image, the text size must be decreased to the greatest extent possible.

In principle, virtually any design company has its own font with tiny letters. This font can be crafted in a couple of 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 webpage and the whole set of fonts from the Lakmus Lab website.

If you don't want a new font, little sizes of Arial and Verdana may work. As a last option, you can draw the necessary characters by hand.

There are quite a few rules there. First, letters 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 unrecognizable set of pixels.

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

 Information
Popular Icon editors
Icon Perfect Toolbar Icons is a set of ready-made icons for use in commercial and private software and websites. The icons have a balanced color palette, smooth and well-rounded borders. A variety of formats and resolutions is provided.

Icon Enhance your accounting or business-oriented application with readily available professional Business Toolbar Icons. More than two hundred of professionally designed and neatly crafted icons representing different financial objects and symbols are provided.

Icon IconLover is our choice. It allows you to design and alter any kind of graphics required in the application development cycle, containing icons, simple and moving cursors and interface elements - 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 turn 256-color images into True Color icons and XP icons.

Icon ICL-Icon Extractor will scan your files, archives, folders and all local drives for icons. It can download 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 great icons for Windows Vista. Easily replace, alter and save icons that Windows uses to display standard objects, folders, files.