How to turn hand drawn icons into vector shapes in Photoshop

by hannah 18,612 views6

hand drawn vector shapes

This tutorial will help you master turning your very own hand drawn icons into vector shapes in Photoshop. You can follow this tutorial with any line drawings and it doesn’t necessarily have to be a hand drawing that you start with. Any line drawing can be turned into a vector shape in this way.

UPDATE: If you like these icons and would like to use them you can now download them as a Free Custom Shape pack for Photoshop; Free Hand Drawn Web Icons

Below is a photo of my original hand drawn icons on a post-it note with the finished vector shapes below.

turn hand drawn icons to vectors
turn hand drawn icons to vectors

I first discovered this technique a few years ago when I was designing a website which had a hand drawn feel. I started thinking of icons that I could use for each navigation item. The icons that I needed were very specific and a quick search on a stock library returned none that I could put together to make a set that would all match. The only solution was to create my own! As I was working on the web I only needed low resolution icons and didn’t necessarily need them in vector format. But I always find that during the design process you may make them smaller to see what they look like and if you ever forget to save the original you’ve lost your icons and are faced with having to make them again or having nasty pixelated icons! Vector shapes are always the solution and don’t take five minutes to make. You can even create your own custom shape set for a project, so they are there to use whenever you need them.

Please note Adobe Illustrator fans; any vector shapes created in Photoshop can be copied and pasted into Illustrator, so you can use this process too!

Here is the process I use to create hand drawn vector shapes:

Step 1.
Draw your shapes out.
If like me, you want a whole set of icons that will all match, it’s best to draw them all out at the same time. Try and brainstorm all possible icons that you might need. If you draw them at different times you may draw them at a slightly different size meaning they may have bigger or smaller lines when they are finished or you simply may not be able to find the same pen or paper and this can also make a difference to the finished result.

original hand drawn icons
original hand drawn icons

Other points to note:
Dark lines on light paper will be the best – black on white perfect! Don’t draw the icons too close to each other or you will have extra Photoshop work to do!

Step 2.
Scan or photograph the shapes to get them into Photoshop.

Step 3.
You will need to play around with the brightness and contrast and possibly the levels settings so the drawings really stand out from the background. The target would be to have a white background with black drawings with no shadows on the paper left from the photograph or scan.

This is what I did for this step:

I rotated the original photograph to get the icons straight (Apple T / Ctrl T to bring up the rotate tool).

rotated the icons
rotated the icons

I then used the crop tool (C) to edit out the background.

cropped the icons
cropped the icons

By going to Image > Adjustments > Brightness /Contrast… you can turn up both the brightness and contrast. In this case it helped to reduce the yellow of the background and made the icons stronger.

changed the brightness and contrast
changed the brightness and contrast

Using Levels you can brighten the whites and darken the blacks. Go to Image > Adjustments > Levels

changed the levels
changed the levels

When the levels option box comes up select the black eye dropper tool on the right and click a point on the canvas (in this case a light part of one of the icons). It will make the sample colour you picked and everything darker than that black.

levels black
levels black

Repeat the above with the white eyedropper tool and click on the canvas (this time I choose to click on the darkest part of the background). This will make the sample colour you picked and everything lighter change to white.

levels white
levels white

I also had a couple of icons at the end of this process where the lines were a bit weak.

faint icons
faint icons

I used the brush tool with a similar sized brush to the lines and just filled in the lines on the 2 arrows to strengthen them.

add heavier lines using brush tool
add heavier lines using brush tool

Step 4.
Once you have your hand drawn icons in a good format save them and then copy and paste the first icon into a new document.

To do this:
Choose the marquee tool from the tool bar and draw a rectangle around the first icon. Ctrl C / Apple C to copy. Ctrl N / Apple N to open a new document (since you have just copied something within Photoshop, the new window will be created at the size you need). Ctrl V / Apple V to paste the copied icon.

first icon in new document
first icon in new document

Step 5.
Using the magic wand tool click on part of the icon (for this I used the magic wand with the tolerance set to 100).

magic wand
magic wand\

The tolerance settings can be found in the options bar which for me appears at the top of the screen (You can toggle this on and off in the Windows menu).

magic wand tolerance 100
magic wand tolerance 100

Once selected you should see something similar to the below

select icon with magic wand
select icon with magic wand

Step 6.
You now need to turn the shape into a path. To do this open the Paths palette (Window > Paths) and click on the drop down icon which is top right on the palette and choose ‘Make Work Path’. When the prompt comes up set the tolerance to 0.5 pixels. (0.5 is the smallest value you can enter here, by using this setting the path will stick closely to the original lines of your icon. The larger the number the less path points will be used and so you will end up with a smoother icon with softer lines and therefore loose some of the hand drawn feel).

make work path
make work path
make work path 0.5
make work path 0.5

After using the ‘Make Work Path’ your icon should look similar to the below showing the path points.

path points
path points
path palette view
path palette view

Step 7.
You can now turn the path into a custom shape by using the main menu: Edit > Define Custom Shape. In the prompt box you can give your shape a name.

define custom shape
define custom shape
name the shape
name the shape

Step 8.
To access this shape you can now click on Custom Shape in the toolbar and the choose your shape from the drop down Shape menu in the options bar.

custom shape tool
custom shape tool

You can see below that my icon has been added to the bottom of the default custom shapes in Photoshop.

option bar custom shape
option bar custom shape

Step 9.
To test this shape create a new document and with the shape selected as above – click on the canvas and drag the mouse. To keep the icon to it’s original proportions you will need to press Shift whilst clicking and dragging.

create new document
create new document

The shape will take on whatever colour you have selected in the foreground of your colour palette.

house shape
house shape

To change the colour go to your Layers palette and you will see a colour next to the outline of the shape. Double click the coloured area in the layers palette to change the colour.

shape layer palette view
shape layer palette view

Step 10.
To create all the other icons in your set you will need to follow step 4 through to 9 for each icon. You will then be able to access all the shapes by going to the custom shape tool and selecting the individual shapes.

all shapes in custom tool option bar
all shapes in custom tool option bar
all-vector-shapes
all-vector-shapes

The finished vector shapes:

hand drawn vector shapes

UPDATE: You can download these icons for Free and use them in your designs; Free Hand Drawn Web Icons

Follow me on Facebook, Twitter and Pinterest.

Comments (6)

  1. Thanks for a very clear tutorial 🙂

  2. What you made were shapes not vectors. Vectors store vector based information and mostly come in the SVG format.

  3. Thanks so much this is perfect.

  4. Muito obrigada pelo Tutorial… muito prático, andava buscando a muito tempo !!! Um abraço,

  5. Awesome, thanks Hannah. Nice name 😉

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>