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.
.
