Technical Aspects of Icon Design

The technicality of designing icons

1. Lines and Angles

The basic linear alignment of an icon is very important, one of the most important because it defines the icon, setting it apart from its background. With larger graphics, highlighting with extra lines is not necessary and rarely ever considered, but with pixel graphics like icons you either need to create a contrast in color or use outlines, the latter being what I would like to discuss.

With large-scale graphics, any angle, border or Bezier curve can be employed and it will look fine with the aid of anti-aliasing. However, pixel graphics are too delicate and every portion too much of the whole for anti-aliasing to work. Therefore, the angle of the line you use becomes very important. When you choose an angle in pixel graphics, you’re actually talking about the step. Every computer graphic line is made up of steps, although this is only critical on a smaller scale.

An example would be the 18 degree angle line, which is made up of multiple 3-pixel lines, each one connected at the corner to the next.

Lines and pixels

Although you can’t tell, every line looks like this, and it takes certain arrangements to make a line aesthetically pleasing. Examine the twenty-five and twenty degree lines here.

Lines

You should notice that one line is smoother than the other. This is because the twenty-five degree, smoother line is made up of equal 2-pixel parts, while the twenty degree line is formed from an incongruous 3-pixel, 3-pixel, 2-pixel formation. Without anything else in the graphic, it becomes unacceptable to the sensitive human eye.

Therefore, the simpler the angle the better it looks to the human eye. This makes zero- and ninety-degree angles ideal. These are followed by those with 1-, 2-, or 3-pixel segments with a downshift of 1-pixel. Although these lines are not even, they are perceived as such by the brain, and therefore are effective means of communication. Less pleasing but generally acceptable to the human eye are the unequal lines, those with more than one basic composite line, shifted by more than 1-pixel. (Example Below)

Line

Earlier, I singled out lines containing composite elements with integer values of 3 or less. This is because, as you increase the length of the lines’ segments, you lose integrity. Consider this line with composite lengths of 10-20 pixels. However, as your angle gets smaller and smaller, your line will approach a straight line, and thus the composite elements will be longer. Don’t use small angles unless you absolutely have to.

Low quality line

Lastly, there are better and worse forms of the same angle. I gave the better form of the twenty-five-degree angle above. Compare that with its worse form. The difference is that the smoother line consists of all 2-pixel lines while the rough one has three lengths- 3, 2, and 1. Whenever you’re drawing a line, simplify it as much as possible to improve its appearance.

25-degree angles

2. Colors

Color, color, color- it is the most important aspect of pixel graphics. Poor balance will not just affect the overall image- it will ruin it. There is a basic rule used in graphic design saying that any image, when reduced to grayscale, should still look sharp if you’ve chosen the right colors.

It is advisable to use RGB color in your pixel graphics. Although some may say use internet colors, those will bar you from some of the useful effects such as gradients, dithering and shadows.

Flat space is also a key because it allows your colors to run uninterrupted and clarifies your graphics. The use of excessive special effects in something as small as an icon will make it look dirty.

In moderation, however, effects can be good. For example, gradients will rid your graphics of broken lines, those lines whose base elements are too long. Besides disrupting flat color, however, too many gradients can also keep your image from conforming to the GIF palette, so, once again, use them in moderation.

I have nothing special to note about shadows and flares in icon design that’s different from what you would already expect from general graphic design, except that it should all be done by hand. Start a different layer for your shadows and flares. The only thing you should be doing automatically is changing the transparency. The reason is that filter commands are just too unpredictable, and that’s a big deal in icon design.

Lastly, use increases in saturation to make colors look more like what you intended. Small objects will lose some of their color potency, so you need to compensate. As an example, if you have a blue eye with RGB values of 0, 131, and 159 in icon graphics the eye will just look gray. However, the adjustment from those values to 71, 195, and 242 will have the desired effect.

What we perceive when we look at an object changes with its size. It is your job as an icon designer to make sure we see what you want us to see. Don’t let anything be visually inconsistent.

Consider this orange juice box, which exhibits flat colors, broken line-gradients, nuances, shadows and flares.

Juice

3. Font

It’s a good thing I’m only covering icon design. That really simplifies things in every aspect, including the font specifications.

No matter what the icon, if it is not almost completely consumed by text, then the size of the text must be drastically reduced. Having pretty words becomes secondary to having them legible.

Most design studios make their own fonts just to be individual and make sure they have a good text. Creating a font is just a matter of hours, so it’s a fairly simple project. However, instead of investing those hours, you can also get any of a number of equally acceptable fonts. I recommend the DS Pixel, Seventeen 7 from Vedi’s website, and all the fonts from the Lakmus Lab’s website. Arial and Verdana fonts are also fine.

I discourage drawing your own letters unless you have a good reason, but should you do so there are some guidelines to follow, as with everything else.

Most importantly, do not make your letters less than 5 pixels tall or 3 pixels across. At right is an example of minimum measurements.

Font

Never use anti-aliasing in icon design or you’ll end up with a senseless mix of pixels. 5-point Arial text is one of the exceptions to the rules of fonts in icon design, but if you stick to them you’ll get more consistent results.

Summary

Icon design is an art form, but it’s almost a scientific one. There are very specific ways to improve the visual appearance of icons, and you come out with better results by adhering to them.

Leave a Reply

Your email address will not be published. Required fields are marked *