Logo Symbol Icons HomeDownloadsBuyContact  
Icon Design

Technical Details of Icon Creation

Let's discuss purely technical details of icon making

1. Lines, angles

One of the most important elements of the composition is the framework of the object, i.e. solid linear marking, which separates the object from the rest of the image. When creating normal-sized images, the designer rarely cares about defining objects with additional lines. This is not needed because of the scale: even low contrast objects do not blur into a one. Icon graphics is different. Two variants are available: either foreground and background colors have to be from opposite sides of the color wheel, or the object should be separated from the background by visible outlines and shadows. I would like to discuss lines deeper.

If we return more to the big-size images, we see that in order to define contours, we can use all (even the most complex) angles, Bezier curves and borders. Anyway, the line will appear ideal thanks to anti-aliasing. When shrinking the image dimensions to the size of an icon, situation changes dramatically. When each particular pixel is vitally important and can ruin the whole look of the icon, anti-aliasing is simply unreasonable. It means that you should consider the possible line angles.

The angle you choose for the line, determines the step for this line. Because each line is made of basic elements, the combination of which determines its neatness and visual appeal.

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

This is how almost each line looks like. Primary element with joining and another basic element. However, not each slope makes the line look attractive and not messy.

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

It can be easily seen which line is more attractive. The 25-degree angle makes a line containing 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 slope is more complicated, thus, if not combined by additional visual effects, it brings a feeling of untidiness: the basic elements have contrast which is too strong to escape the human eye.

Here we can come to the first conclusion. The most "correct" angles must make as simple basic elements as possible. therefore, 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 slopes which form basic elements of 1, 2, 3 pixel with 1-pixel downshift. Surely, the lines can not be smooth, but the human sight will process the image and present to the viewer what you intended to show to him. Also, the following slopes can be considered acceptable (but at a stretch): angles with basic elements made of unequal lines shifted by more than 1 pixel.

For example:

It is the time to touch another problem. In the previous paragraph, I intentionally defined angles with basic elements of 1, 2 and 3 pixels as acceptable. Such tiny lines, especially when a large number of them is joined, look like solid. But what happens if we increase the primary elements to 10 or 20 pixels?

Here is an example:
Low quality line

It can be obviously noticed that the line loses its solidness. It is not a single line now; it is a set of several lines, situated near each other. Rarely any artist wants its creation to look that way. So, we come to another rule: if you use small angles, which produse long basic elements, it has to be reasoned and employed with maximum caution.

And, finally, the last aspect I have to mention about lines. I did write that the basic element should be as simple as it can.

For instance, a 25-degree angle can be drawn in the two (sure 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 consists 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 almost any slope, so in your projects, try to simplify as much as possible.

2. Color

It can be stated without an overstatement that the color is the leading element of your work; not suiting or poorly matched colors can ruin even the best idea. What can we say about the color in miniature graphics?

First, there is a certain rule: if the picture looks poor when reduced to monochrome, then the colors that were chosen 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 use 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 areas of "plain" color. The more consistently colored areas without blurring and jumps your project has, the more neat it appears. Icons are too tiny and the over usage of special filters makes the picture look messy.

Fourth, gradients. This is a great tool which can change the look of any picture. Other than esthetics, gradients are an ideal way to abolish the "broken line" effect (lines with too long basic elements). But be attentive when applying them since too many gradients can kill the flat color, and be not suitable for the gif palette.

Fifth, shadows and flares. All rules for applying shadows and highlights in icon design are totally identical to the rules of the overall graphic design. The only ine I have to mention: draw everything by hand. Don't use effects, make all shadows and flares 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 can't control the making of a project. It is awful if you don't control it if drawing miniatures.

And, finally, sixth. Tinting is the main detail of icon creation, which largely results the esthetic appearance of the image. When the blue 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 look like a gray dot, and in the second example it will definitely be a blue eye.

completely control the picture, do not allow the visual illusions to spoil your work. It is acceptable if objects is not perfect technically, but the whole composition must be flawless.

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

3. Font

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

The size of symbols is the leading aspect as opposed to their fineness. Nearly in any case, only if not the letters are the main part of the composition, the font size has to be reduced to the greatest extent possible.

In general, virtually any design company has its unique font with small letters. This font can be created in a couple of hours. You can search the web and collect your own collection of very interesting fonts. Primarily, I advice you to get the DS Pixel and Seventen 7Vedi website and the whole set of fonts from the Lakmus Lab website.

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

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



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

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

Popular Icon editors
Icon Perfect Toolbar Icons is a set of ready-made icons for use in business and personal applications and web-pages. The icons have a bright color scheme, smooth and well-rounded edges. A variety of formats and resolutions is available.

Icon Enhance your financial or business-oriented application with instantly available professional Business Toolbar Icons. Over two hundred of professionally designed and carefully crafted icons representing different financial objects and currencies are provided.

Icon IconLover is our pick. It enables you to create and edit any kind of graphics needed in the application development cycle, containing icons, simple and animated 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 makes icons from your pictures. It's possible to turn 256-color images into True Color icons and Vista icons.

Icon ICL-Icon Extractor will search your images, 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. Make great icons for Windows XP. Easily replace, alter and save icons that Windows selects to show typical objects, directories, files.