Icon Lover

According to UX Magazine:

UI elements are abstractions which convey concepts and ideas; they should retain only those details that are relevant to their purpose. UI elements are almost never representations of real things. Adding too much realism can cause confusion.

But:

There is at least one specific area where more details are good: application icons. You want your icon to depict one specific idea: your application.

Coda’s leaf isn’t a representation of the idea of a leaf; it’s a very specific leaf, the Coda leaf. Acorn’s acorn isn’t just any acorn, it’s the Acorn. Adding details moves these images from a generic concept towards a specific entity, and in the case of an application icon, this is exactly what you want.

Important guide to Windows Vienna icon design features and structure
Introduction

Basically, the structure and design scheme for Windows Vienna icons is the same as that of Windows Vista icons. They are made in the aero style, quite different from what older versions of Windows sport. It is stricter in some senses but still very fine, the glass glare and conservative colors reducing eye strain.

Icons’ Style

The style of Windows Vienna icons looks very technologically advanced. The images come alive with their well-calculated angle rotation, along with the fact that they now face a light source. Also, the edges are smoothed and the icons drop a shadow, which adds both volume, intensified even more with gradients, and contrast. Many of the elements are outlined to make the icons more well-defined.

How is the New Style Better?

Although the Windows Vienna icon style is very detailed, it is not photorealistic, which is good, since an icon is just a symbol. Plus, the icons actually show what the applications are, as opposed to the more general approach taker earlier. The toolbars have decreased in size and complexity, so now they’re easier to accommodate in small devices like cell phones. With their maximal 256 x 256 size, icons are also well-suited to high resolution screens.

Size of Icons

There are five standard sizes for Windows Vienna icons- 256 x 256, 48 x 48, 32 x 32, 24 x 24, and 16 x 16 pixels. Icons for menus, toolbars and small symbols don’t need to reach max size. It is recommended by the Microsoft Corporation that you use just three sizes for icons designed solely for Windows Vienna- 256 x 256, 32 x 32, and 16 x 16 pixels.

PNG files scale without distortion from 256 x 256 to 32 x 32 pixels, which is why you don’t need any other size between them for Windows Vienna or Windows Vista. The 16 x 16 resolution is necessary for smaller icons because they would distort if you used any of the other resolutions. A 48 x 48 icon is at less risk for distortion, so it might be a good idea to use that size instead of 32 and 16 in many cases.

For your icon to be compatible with all Windows operating systems, it needs to be formatted for three color depths. Fully compatible icons require the 48 x 48 pixel resolution in addition to 256, 32 and 16. However, you might have noticed that 24 x 24 is never required, and we don’t encourage you to use it unless the icon is just for toolbars. Windows 98 and 2000 sometimes have difficulty with this size, so 16 is best for toolbar icons meant to function with all versions.

Windows Vienna Icons’ Color Depth

32-bit icons in Windows Vienna can have 24 bits for the picture and 8 for the transparency channel. That way, you can have smooth edges and semitransparent details on your icons. The other two options are 8-bit (256 colors with 1-bit transparency channel) and 4-bit (16 colors with 1-bit transparency channel). 32-bit is ideal, but, in case of video driver failure or some such problem, you should also have 8-bit and 4-bit versions to avoid distortion.

The three color depths (left to right) – 32-bit, 8-bit, and 4-bit; Far Right- 32-bit icon in 4-bit color

The Color Pallet

Different colors are assigned to show the material and communicate certain information about Windows Vienna icons. White is for paper, light grey indicates a silvery plastic (computers/peripherals), dark blue means an active screen (displays, etc), light ochre designates a  carton (i.e. folders), blue is for glass (basket or lens) and emerald green specifies transparent plastic (special folders). The colors of Windows Vienna icons also have other meanings, such as red for warning, yellow for attention, green for permission and dark blue for information.

Examples:

Rotation Angle, Overlaying and Grouping

45⁰ clockwise is the angle of choice for Windows Vienna icons. Angles are a good idea for application icons or just to show volume. However, some icons- such as files icons, flat objects and anything 16 x 16- look better when they aren’t rotated.
Examples:

Overlaying and grouping can’t really be guided by rules. Just go by experience and whether or not the additions clarify the meaning or just get in the way. Examine the following icons.

Dropping shadows

You should use shadows to make icons easier to recognize and increase their volume, which often improves their appearance. (Right)

Examples:

Outline

Although not as vivid as the Windows XP icons’ outlines, those of the Windows Vienna icons still help tremendously with recognition and make an icon seem more realistic.
Examples:

Icon Structure

Function: Vienna Versus XP Icons

Windows Vienna icons that are 256 x 256 pixels can utilize PNG compression. PNG compression is only used for this icon resolution; it doesn’t affect quality, scale or transparency in the least and it reduces the file size to as little as 25%. The only downside is that PNG-compressed icons don’t function with Windows XP or earlier versions of Windows. You can fix this by supplying a non-compressed version of the image. In standard formats, a 256 x 256 icon will be about 400 Kb uncompressed.

Summary: Why Windows Vienna Icons?
Professional Windows Vienna icons are visually more aesthetically pleasing, they communicate a program’s functions better, and therefore it’s easier to find the right programs, and they make your program look more stylishly individualized and technologically advanced.

Therefore, Microsoft recommends that you change your most-viewed icons’ style to this aero look, such as those in the Start Menu and Windows Explorer, which includes the icons that show the type of file. Microsoft does not recommend using any icons designed for Windows 9x or older in Windows Vienna.

How to Get Vienna/Aero-Style Icons

So now you know that better icons make a better user experience and therefore more business for your company. The next thing you need to do is find an icon design firm that will handle the conversion from your old style to the new, and those can be found all over the internet. Make sure you contact a firm that will follow the basic rules outlined above, and you will definitely be pleased with the results.

Products named above made by Microsoft, Windows, or Windows XP are trademarks or registered trademarks of Microsoft.

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.

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.

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)

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.

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.

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.

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.

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.

Many actions, objects and concepts are represented by the icon, a sort of graphical communication symbol. They are faster, more discerning forms of communication, one example of the epithet that a picture is worth a thousand words. It makes the whole computer experience more enjoyable when the user has something else to look at other than text, besides preserving eyesight, and often makes completing various tasks faster.
Xerox Research Center was actually the first to utilize icons, back in 1970, but icons didn’t become popular until Apple Macintosh and Microsoft Windows started using them. They made new users feel more comfortable and helped them learn new processes. The first icons were very basic and today’s wide application of them in toolbars, menus, in various interfaces and on buttons proves that they’ve come a long way.
The ICO format is used by Windows, but a number of graphic formats are available for icons. Unix uses PNG and Apple Macintosh uses Mac formats. Therefore, most of the time software for editing icons is available for Windows and Apple, but Unix users can make icons from most any graphic.
A very general description of the icon designates it as a square image available in multiple color resolutions and sizes. Size usually ranges from 16×16 pixels to 128×128 pixels, and a limited number of systems also support 512×512-pixel icons. These largest icons were pioneered with the Mac OS Leopard.
Pixel dimensions vary with the operating system you employ. In Windows, icons are images of 16- and 256-gammas or True Color images containing alpha channels. Their sizes are 48×48, 32×32, and 16×16 pixels. True color icons in Windows Vista can have resolutions of up to 256×256 pixels. It’s optional to support icons of 128×128 pixels and 512×512 pixels. Instead of ICO formatting, these icons are stored as PNG files. Windows Mobile is able to use 24×24-pixel icons.
Hopefully, you now have a better grasp of the icon and how it changes from platform to platform. It is basically a visual communication aid to make computer operation more popular by increasing its user friendliness.

No matter what the topic, there will always be those who want to be given a precise formula for decision-making instead of having to battle it out for themselves. Sometimes, what they perceive as having a best or right answer is actually purely subjective. Such is the case with raster and pixel editors. Use what works for you; that’s all there is to it.

Think about it. When you make any decision, you don’t consider the minor things. In the case of choosing a new vehicle, you don’t think about street names except to get you to the dealer. Once there, you try out the various cars on the lot, or at least the ones you think might be right for you, and make your final decision on performance. Similarly, choosing a raster graphics editor is not rocket science. Try the ones you think you might like and see if they make a good fit. There are the mainstream and the not-so-mainstream; you need to explore any that seem relevant to you.

Two of the most common are Adobe Photoshop and Corel Draw, both of which have free, 30-day trials on the internet.

Adobe Photoshop

http://www.adobe.com/products/

Corel PhotoPaint

(Entire CorelDRAW package)

http://www.corel.com/

That’s about as specific as I’m going to get with the URL because the domain owners change it sometimes. However, you should have no trouble finding the download area.

Anything else you might want is probably on the web, too. Just look around and see what’s available. Don’t be afraid to cover all bases. Which editor you choose depends solely on your style, so choose accordingly.

We’ve talked about interface icon sets’ styles and sizes, so now we’re ready to create them.

For the most part, this article will go over the most basic concepts involved in computer drawing. All icon stamps have been systemized in outline and meaning to the best of my abilities. This is a good resource for novice artists and web designers alike.

There are two basic situations in which an icon designer finds his/herself: A picture or object is given from which the icon will derive or a description in words. Don’t be daunted by any seeming lack of information. With the proper training, you’ll be able to jump right into any project with complete confidence.

1. Visualize the Image

Although it may seem like the logical thing to do to just start drawing the icon as soon as you have a rough idea of what it should look like, it’s actually better to make sure you have complete details before you ever draw a single line. There are some serious misconceptions you can end up with when you get ahead of the project. Just take the simple case of a phone. You wouldn’t draw the same phone when marketing to businessman/woman as you would for a housewife. One would identify with a cell phone while the other would more readily receive a household phone. How well your audience relates to your icon is very important, so always get as many details as possible before you start a project.

It’s not always as easy as that, though. One other important point to consider would be the website style. On an antique shop’s page, you wouldn’t use a cell phone, not because your audience wouldn’t relate as much as because it’s just plain incongruous. You might consider using some other icon or none at all in this case, since there aren’t many phone designs that really look antique without being ineffective.

Site style and user preferences should be what guide your icon’s design, and not so much your own imagination.

2. Compose the Icon

Once you’re ready to move beyond the look of the icon, it’s time to shut off your computer for a while. Photoshop, Illustrator, and CorelDraw are not needed at this point. Believe it or not, a good, old-fashioned pencil and paper still have their applications in graphic design.

At this junction, you just want to relax and let your hands take over. Keep drawing until you have the variation you want, keeping the website’s style in the forefront of your mind.

There are true artists and those who really don’t know why they’re in icon design, but both hit a brick wall every now and again. It’s not a problem with the individual as much as with people in general. When it comes time to render one’s surroundings, the details just don’t come pouring out, except with those few hopelessly observant people. What I mean is that when you think of a street you probably just see a general paved road. Chances are you don’t think of its character marks- fissures and cracks, uneven spots and slightly crooked lines. The left hemisphere is responsible for observation, and it will replace specifics with the general.

It is only through acute observation that you can translate your left-brained interpretation of your surroundings into something more individualized and artistic, something right-brained, the right hemisphere being where your subconscious resides, your inner psyche. One of the things the right hemisphere controls is speech, and you know you don’t think about grammar and mechanics when you’re talking. Most of the time, though, graphic designers of all types get caught up in the “proper technique” and such, and they can’t seem to make a graphic work. Look at it this way: A graphic is just a representation of reality. A circle and some lines summarizes the way a lot of people draw humans, but that’s not how they really appear. It’s just one interpretation.

Approach all of your drawing as an interpretation, while also keeping in mind some points specific to icon design.

3. Determine the Details

Speed drawing can help you figure out what the most important elements of an object are. Since icons are so small, you don’t have space to try to be a flowery artist; you want to be an efficient one. Consider the example at the right of the human form reduced to a 16×16 pixel and 100×100 pixel spaces, respectively.

The first man is 7×37 pixels while his larger replication is twice that size. Icons can get even smaller than these, but they serve the purpose of an example. You see that the man is wearing a suit, and therefore he’s probably a businessman. The only facial feature is a one-pixel eye.

As you draw icons, you need to learn to recognize the basic details that identify an object.

4. Be Minimalistic

Lest you think that small scale is all it takes to make a good icon, examine the reduced photograph on the right. Believe it or not, this man has the same dimensions as our little businessman. The only difference is we had complete control over what went into the businessman while this photograph is everything there was for the camera to see. This inevitably means many unnecessary details, and that’s how come, although our graphic was very simple, it was clear, while this reduced photo is grainy and ineffective as a communicational device.

After you recognize the basic elements as we discussed in the former section, you can then draw using a minimalist technique. Good icon designers effectively eliminate unnecessary details and thereby produce communicational aids that work well. It is possible to have balanced, small images that are drawn according to these guidelines, like the phone pictured on the right.

5. How to Show Action

You can expect to have to deal with motion at some point in your icon designing career. Animation might seem like a good option, but I only advise it for onMouseOver JavaScript, and even then sparingly.

The dynamics of motion are well-explained in the “Book of Recreational Physics.” I will give you the basics below.

First of all, let the user complete the graphical illusion. In the example graphic, we have two sets of parallel lines. The first one is vertical and the other horizontal. Curiously enough, the horizontal lines look more dynamic, even though it is exactly the same as the first one, except for the fact that it’s rotated 90 degrees. That is because all action, all forward motion, occurs in the horizontal plane. Vertical lines are subconsciously grouped with rest. Just to see this concept in action, try applying motion blurs in Photoshop. I guarantee that the horizontal motion blur will be the one that makes the object appear to move.

Any icon that has principally horizontal components will look more like it’s active.

“Traditional Animation” by Walter Croft talks about another aspect of creating motion in icon or any other type of graphics. The idea is that there is something called “notice,” where every action is preceded by another action. If you want your icon to appear active, you must capture a moment where notice can be observed and the aftermath of it construed. For example, someone about to throw a ball draws their hand back, and one preparing to jump first squats. The user knows this as well as you do, so it is very useful in icon design.

There are other aspects of dynamics that go beyond the action of living things. Suppose you have a pen writing on paper, or a door swinging in on its hinge. Stretching and contraction can effectively render your objects in a realistic light. The principle that guides stretching and contraction is that objects retain their volume as they are manipulated. Therefore, in the case of a door, when a force acts near the handle, you can decrease the volume around this area but the volume must increase in some other area to compensate for this. If the volume leaves from the center, then it goes to the edges, and so you have a thick middle and think edges when your door is in motion.

The dynamics of motion are good guides, as long as you don’t take them too far, in which case your object will just look distorted.

There’s really not much more I can say to coach your drawing. Feel it out and scan the graphic when you finish drawing it.

6. Transfer the Image

Once you have the image on your graphics editor (any raster graphics editor), it’s time to create the graphics file that will be your icon.

The main thing to remember is that you should still be observing the rule of depicting only a minimum in details.

Secondly, keep your image proportionate. Every change in scale should mean that all portions of your object are changing at the same rate. If you want half scale, every dimension should decrease by half.

The last rule is to leave all the effects- dithering, shadows, and filling- until after you have straightened out the details. Contours should be your start, then you can edit them as necessary and mark up the primary details.

A digital form of an image is necessary for it to be viewed, processed or stored on a computer. Digital formats basically amount to a description of the image, and there are a number of ways to go about this, the most simple of which is to go through it point by point naming its colors. This is called a raster image. Most of the time, people use this method to describe paintings, photos and any other graphic with gradual shifts in color. Raster Graphic editors were developed to edit these file types, but most are just basic editors where a user can look at the file and make minor changes. Adobe Photoshop is the leader in more complex raster graphics editors, with the ability to both correct individual images and combine more than one, plus draw raster graphics.

Although it is not impossible, drawing in raster graphics editors is somewhat cumbersome, and that’s where vector graphics editors come in. In this file type, the image is described by mathematical formulas. The basic elements that compose them are figures and lines instead of pixels like in raster images. Using solely raster imaging, every single point on every line would have to be described. Vector graphics provide an easier solution to drawing from scratch. These images are not photographs; they’re more like posters, with abrupt changes in color. CorelDraw, Macromedia Flash and Macromedia Freehand are all leading vector graphics editors.
When you scale a raster image, you will more than likely decrease its quality. In order to maintain the original level of definition, you need more hard drive space to store the file. With vector images, on the other hand, scale has virtually no effect, and therefore all sizes, within reason, take up close to the same amount of space. That is no doubt a major one of the benefits of vector graphics.

Now editors for both vector and raster graphics are being designed, those that previously covered one being expanded. How an editor deals with different types of graphics is dependent on its development. I mentioned that Photoshop was a raster graphics editor. Well, it now deals with vectors as well. Conversely, CorelDraw handles raster graphics. Powerful graphics editing software actually combines vector and raster graphics properties to form a better image. It is also now possible to have layers and assign them varying transparencies, forming our modern complexly constructed object.

Sometimes, it’s difficult for those just starting out in computer graphic design to ascertain which editors to use in what situations while a professional will know right off the bat. Since you will need to do both vector Flash and raster Photoshop graphics editing, we consider both of these in our book. Photoshop is very popular. Flash is convenient and easy to use, plus you can easily publish Flash content on the web.

In summary, you should now know that raster graphics describe by the pixel and vector graphics by mathematical equations. Together, they form modern graphics and today’s editors can handle both of them.