Professional technique for creating icons

Published on May 24th, 2007 by admin

Learn some of the techniques professionals use to create their icons in this award winning tutorial!

What you will need

  • A paper and pencil. . .really
  • Adobe Photoshop

The Source Files:

Download the sketch file

Part One: Think of an idea

I have an idea. . . . .let’s do a home icon! OK moving on.

Part Two: Sketch out your idea

Before I begin any creative project I always make a sketch, whether it is a literal sketch with pencil and paper or a written description. It’s crucial to get your ideas out first so that you aren’t simultaneously trying to come up with ideas while you’re tackling with the technical aspects of creating it (such as getting the gradient tool to work).

Take out a piece of white paper (8.5 x 11 is good) and a pencil.

Start sketching out some ideas for a home icon. How big is the building compared to the roof? Is there a door? Windows? Think about all of these things as you sketch, don’t worry about making the drawings perfect. (If they communicate your idea to you then that’s all you need.)

My sketches

Take a look at the sketches below to see my process.

At first I thought I would go with a 2-d look but after drawing this I felt I could do more.

I did another sketch, this time with a 3-d look. I liked the direction I was going in but I didn’t like the orientation of the roof and I felt the building was a bit too long.


I thickened the lines and made the roof small compared to the building to give it a more cartoon feeling.

So now that I had a shape that I was happy with, I took some more time to develop my idea further. I also began experimenting with color composition.


Make sure you have a strong silhouette

Before making your final decision about the sketch it’s a good idea to see if the line of action or silhouette is strong. Remember that this icon is going to be very small and a strong contour is important.

Notice that even without all the extra information you can still tell that it’s a building. In this case I even asked my brother to come and tell me what this looks like.

Now let’s open Photoshop. . .

Leave a Reply


  • Post by AGMJ on June 2, 2007

    Great just great! i think i just mastered a new technique :P

  • Post by rendra on June 2, 2007

    good and incredible

  • Post by phreak on June 17, 2007

    incredible nice! :D

  • Post by kezzy on August 15, 2007

    nice one

  • Post by Muhammad Usama on April 13, 2008

    Just Fantastic,This will encourage me to create Icons I couldn't even think about making. Thanks for this superb tutorial.

  • Post by Lucian on July 29, 2008

    A good tutorial. Thanks !

  • Post by pedro on October 13, 2008

    just want to say..: great tutorial!!;) really liked the way u explain things!;) congrats;)!

  • Post by xDetective on November 17, 2008

    Amazng. I haven't tought that I can create an icon for my website with a paper and a pencil.

  • Post by eirini on February 28, 2009

    loved the tutorial but i dont get one thing. when someone is gonna sketch a house for example it will not be exactly vertical so when he will go and use the pen tool at photoshop the final house will have some degrees difference from the floor. i mean the house will not be vertical with the floor. any suggestion for this please? thanks in advance

  • Post by webicongallery on March 5, 2009

    great tutorial, featured it on

  • Post by playback on August 17, 2009

    Nice tut! i need help with a logo, i have it sketched on paper but am finding it difficult 2 redesign in photoshop

Popular Posts

Posts By Category

Supported by