Professional technique for creating icons

Part Three: Block out the shape.

Scan your sketch

OK, if you haven’t already, I recommend scanning in your sketch and opening it in Photoshop. If you don’t have access to a scanner you may download mine below.

Download the sketch file

For the purpose of this exercise I’m going to assume you used mine.

Start blocking out your shape

Open the sketch image.

Make a new folder above the sketch layer.

Name this folder construction. Or something similar.

Select the construction folder and set the opacity 55%.

With the construction folder selected, press P to select the pen tool and draw a rectangle like shown below. (I applied a stroke to my shape so that I could easily see the contour lines).

The following steps are pretty straight forward, just keep using the pen tool to draw shapes as you trace around the sketch. Don’t be concerned if it is super accurate, just block out the shapes, you can always go back and adjust them later.

Draw the final door shape and you will have your sketch all blocked out in Photoshop. Congratulations!

Part Four: Find the light source

I decided that the light would come from the side opposite the facing roof. I didn’t use any gradients, just solid colors (using brighter colors for parts that were illuminated and darker colors for parts that were in the shadows.)

I used the colors from my sketch as my palette. I kept the door black because. . .well . . .it’s a black door.

At this point you don’t need the sketch as a reference so go ahead and hide the sketch layer.

Part Five: Add Highlights

All right, I’m a big fan of glossy surfaces so let’s add a few highlights to spice things up a bit.

Keep your light source in mind as you add highlights.

Press P to select the pen tool, make sure that the color is set to white and draw a highlight like shown. Drag the opacity slider for this layer down to 17%.

Add another highlight as illustrated and set its opacity to 35%.

What is happening is the light is hitting the roof and then spilling over onto the other side and out front. I made it sharp because sharp edges create the illusion of a shiny surface.

Ok now that we have highlights let’s add some gradients to give it a more tangible feeling.

Part Six: Add gradients

Start by adding a vertical gradient to the left wall. Gradient settings and options don’t have to perfect here, just play around with it.

Now add another gradient to the roof of the building, remember that the light source is coming from behind so you’ll want it to go from white at the top and darker at the bottom.

OK, for the final gradient, the light is hitting the roof and being partially blocked. So add add a small shadow on the front of the building.

note:for more information about gradients, highlights and color in graphic design check out my Principles of Glossy Interface Design tutorial.

Lets add a shadow to this icon.

Part Seven: Add Shadows

Press L to select the polygonal lasso tool. Mark a selection under your icon and fill it with black. Don’t forget your light source!

With that black shadow layer selected, go to Filter > Blur > Gaussian Blur. Adjust the radius until it looks similar to the picture. You may also need to nudge the shadow up a bit to prevent it from looking like the house is floating.

Part Eight: Tweak your heart out

Get up from your chair

To get started, a good strategy is to get up from your chair and step back about 10 feet. Look at the image and see if you notice anything that could use some improvement. No seriously. . do it, professional designers and artists do it all the time. You’ll be surprised at what you see.

Also try this trick, hold down Shift-Alt and scroll your middle mouse button. It should zoom in and out. This is a helpful zoom as it retains sharp edges.

My tweaks

Here I did an extra 15 minutes of tweaking on the icon. What will you come up with?

Imperfections are OK

If you look at the picture you’ll notice that there are slight mistakes. In the icon business though that’s OK Look at it now when I size it down to 64 x 64.

You can’t even see the imperfections can you? And that’s a big icon!

Conclusion

Don’t forget to always sketch out your drawings first, Photoshop takes a lot of time and it stinks when you spend a lot of energy on a project just for it to go no where.

If you have any questions or comments please post in my comments.

Good Luck!