Rockstar Icon Designer - Kate McInnes [37]
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 on.
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.
Set the Canvas Size
Because we will be outputting the icon to two sizes, 32 and 16px we will begin by creating the 32px icon. Once we're finished the 16px can be made by tweaking the scale using a handy trick I will show you at the end of this tutorial.
Set your canvas to 32px, RGB 72dpi and make the grid visible. Make sure that the units for your work is set to pixels, and that the grid is measured to have a guideline every 10 pixels with 10 subdivisions. This will set gridlines to mark out the pixels on your canvas.
Set the canvas and grid preferences for the icon.
Draw the Basic Shapes
Take a look at the sketch for your house and break the image down into the basic shapes. For the house I'm drawing I have a triangle, a square and some rectangles.
Place the Shapes
I'm using the vector drawing tools in Adobe Photoshop. I've set my document to "Snap to Grid" which will help to make the shapes pixel perfect and crisp. Go ahead and draw the shapes into the 32px canvas you set earlier. Be sure to leave 1px to 2px clear on the sides (2px if you're creating an icon with a drop shadow to the side, but 1px is ok if the shadow is below only). 1px at the top of the design and 3px at the bottom, this will reduce the likelihood of clipping.
Create some basic shapes to block out the icon design.
Clipping happens when a semi-transparent pixel made by anti-aliasing or a layer effect renders as a sharp line because there weren't enough pixels to accommodate it. To avoid clipping, you will need sufficient space around all sides of the design to make sure that all lighting and shade effects have the space to fade out to 0% opacity.
Leave sufficient space around the icon for shadows or effects.
Another thing to keep in mind is the angles of the lines you're using. By placing the drawing lines along diagonal and horizontal axis you will reduce the blurry effect of a badly anti-aliased line. In the image below you will see that a line that cuts an exact diagonal through the pixel grid will have an additional line of semitransparent pixels. If the line doesn't cut a direct line through the pixel grid, the anti-aliasing can get a bit confusing and you will end up with two or more additional pixels with varying degrees of opacity. A moderate degree of anti-aliasing looks fine on larger scale images, but with small icons it can make the line value thicker than intended or cause the icon to appear