Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Aspects of Icon Making

Let's consider purely technical details of icon design

1. Lines, angles

One of the vital parts of the composition is the framework of the object, i.e. solid line, which separates the object from the rest of the image. When designing large-scale images, the artist rarely thinks about defining objects with complementary lines. This is unnecessary because of the size: even low contrast objects do not blur into a one. Icon graphics is other story. Two variants are possible: either foreground and background colors must be from different sides of the color chart, or the object should be separated from the background by contrast outlines and shadows. I would like to discuss lines deeper.

If we return again to the big-size graphics, we see that in order to highlight contours, we can use any (even the most complex) angles, Bezier curves and borders. Anyway, the line will appear ideal thanks to anti-aliasing. When decreasing the image dimensions to the small icon size, situation changes dramatically. When every single pixel is vitally important and can ruin the overall appearance of the composition, anti-aliasing is simply not applicable. It means that you have to think about the possible line angles.

The slope you select for the line, determines the step of this line. Because every line is made of primary elements, the combination of which defines its neatness and esthetics.

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

This is how nearly every line looks like. Primary element followed by joining and another primary element. Unfortunately, not every angle creates lines that look look attractive and not messy.

For example, here are 25 and 20-degree slopes:

It can be easily seen which line is more attractive. The 25-degree angle makes a line containing even 2-pixel basic elements. The 20-degree slope has a basic element consisting of three lines: 3-pixel, 3-pixel and 2-pixel. The slope is more complicated, therefore, when not combined by additional visual effects, it brings a feeling of messiness: the primary elements have contrast which is too obvious to hide from the human sight.

Now we can see the first rule. The most "appropriate" angles must make as simple primary elements as possible. therefore, the perfect slopes are 0 and 90 degrees. In those, 1-pixel primary elements are joined without any shift and produce smooth lines. Less ideal are slopes which form basic 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 meant to show to him. Also, the following slopes can be considered correct (but at a stretch): slopes with basic elements consisting of unequal lines shifted by more than 1 pixel.

For example:

It is the time to move to another issue. In the last paragraph, I purposely defined angles with primary elements of 1, 2 and 3 pixels as correct. Such small lines, especially when a large amount of them is joined, look like solid. 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 clearly noticed that the line doesn't have integrity. It is not a continuous line anymore; it is a set of different lines, situated near each other. Rarely any designer wants its composition to look that way. So, we come to the second conclusion: if you use minimal slopes, which make long primary elements, it has to be justified and used with maximum attention.

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

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

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

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

2. Color

It can be said without an overstatement that the color is the leading element of your work; improper or badly matched 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 image looks poor when converted to grayscale, then the colors that were chosen are incorrect. This rule is valid not exclusively for icons but for the whole graphic design.

Second, you will probably unable to use common RGB. Sure, you can use GIF colors only, but this ties you hand and foot. Gradients, shadows, dithering and many other effects will not be available to you.

Third, try to enlarge the portion of "flat" color. The more consistently colored parts without blurring and jumps your project has, the more clear it appears. Pictograms are too tiny and the over usage of complex effects makes the image look dirty.

Fourth, gradients. This is a wonderful instrument which can improve the appearance of any picture. Other than visuals, gradients are a perfect way to abolish the "broken line" effect (lines with too long primary elements). But be careful when using them because too much gradients can kill the flat color, and be unable to fit into the gif palette.

Fifth, shadows and flares. All aspects of using shades and flares in icon design are totally the same to the aspects of the general graphic design. The only thing I have to note: draw everything yourself. Don't use effects, make all shades and flares in a different layer and then edit its transparency. When using filters, you rarely know what will it look like. It is unfavorable when you can't control the making of a project. It is awful if you don't control it if creating icons.

And, finally, sixth. Tinting is the main aspect of icon creation, which largely affects the esthetic appearance of the composition. When the blue human eye in the icon has the size of 1 pixel, increase the color saturation. For instance, instead of 0, 131, 159 make 71, 195, 242. It is indifferent that the human eye can't have such color; in the first case it will appear like a gray dot, and in the second example it will definitely be a blue eye.

completely control the image, do not let the visual tricks to ruin your design. It is OK if objects is not perfect technically, but the whole composition must be perfect.

As an example, I drew the packet of juice located in front of me. The image has plain color, gradients with broken lines, shadows and highlights and nuances.

3. Text

If I wrote about something bigger than icon creation, this chapter wouldn't fit into a whole book, but the resolution of pictures ;limits fonts too.

The resolution of letters becomes the leading aspect as opposed to their beauty. Almost in any case, only if not the letters are the main part of the image, the text size must be decreased to the largest extent possible.

In general, almost any design studio has its exclusive font with little letters. Such a font can be crafted in a few hours. You can search the web and collect your own collection of very nice fonts. Primarily, I would recommend you to download the DS Pixel and Seventen 7Vedi webpage and the whole series of fonts from the Lakmus Lab website.

If you don't need a new font, small sizes of Arial and Verdana may do. As a last resort, you can draw the necessary characters yourself.

There are not many 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 font into an unrecognizable set of pixels.

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

Popular Icon editors
Icon Perfect Toolbar Icons is a collection of pre-made icons for use in business and private programs and websites. All icons have a balanced color scheme, sleek and well-rounded borders. A variety of formats and resolutions is provided.

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

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

Icon Icon Processor is an icon converter. It creates icons from your images. It's easy to turn 256-color icons into True Color icons and XP icons.

Icon ICL-Icon Extractor will scan your images, archives, directories and all local disks for icons. It can download icons from the Internet and customize Windows icons.

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