Page 165


View Points

Imagine that your icon is on a flat surface with a wall behind it and that you are viewing it directly from the front. This is the “front view” theory of icon design. You should draw the object to be flat with a subtle lighting effect from the top of the object and a slight shadow at the bottom where the light ends. This extremely subtle lighting effect gives the icon depth and helps it stand out from the background. It also makes the icon appear to be slightly tangible which helps user interaction.

Tips for Drawing a Front View Icon Front view icons are commonly used for Toolbar, system and document icons. In this tutorial I’ll show you how to draw a basic Toolbar icon with a bold finish. The output is going to be 32px and 16px. You can use whichever program you feel the most comfortable with, but I’ll be using Photoshop. Personally I use Photoshop for this style of icon because it has good pixel control, it can scale styles well, can put gradients on strokes, and simply outputs nice crisp small-scale icons. Plan the Image Before you draw anything you should have an idea of what you would like to include in the design. For tips on sketching icon designs refer back to the "Zero-Point Perspective" section in this book. For this tutorial we will be drawing a house. I’ve chosen a house because it’s really simple to draw and can be made from a few shapes. Before you begin, take some time to plan the details you would like your house to have, such as the placement of the windows and door.