How To Create Your Own Hand-Sketched Vector Icons

If you're looking to add a personal touch to one of your projects, then hand-drawn icons and buttons are a perfect choice, let's face it if you break away from the run of the mill, high-gloss, pixel-perfect stock icons for a moment, and use a somewhat more traditional technique, then you can show prospective clients that you have a creative, hands-on, artistic side (without actually needing to be any good at drawing).

What You'll Need To Get Started

Creating hand-drawn icons is a surprisingly simple process, but there are a few things you will need to have to hand.

• A computer
• A scanner
• Pen and paper
• Adobe Illustrator
• Adobe Photoshop

The reason why we use pen and paper rather than a graphics tablet is that as good as lots of graphics tablets are, and however vast and realistic your digital brush collection may be, as long as you are still sitting in front of a computer screen, then you are still going to have pixels on the brain! you need to escape from that mindset to be able to achieve genuine looking hand-drawn icons.

Step 1: Plan ahead.

So the first step is to decide well in advance what you'll be drawing because it can get very counter-productive to continue sketching new ideas and scanning them multiple times. Ideally you want to get the whole process as streamlined as possible and only make one or two trips to the scanner. So take a few minutes to think about what you need, in this example I'm going to be creating a set of icons to share with members on MediaLoot, so I'll definitely need to have a broad range of the most common icons that are used on the web.

Step 2: Sketch the icons you'll be using

For the sketching phase it's best to use a sheet of white printer paper, and if possible a slightly heavier weight than usual, for the pen a cheap black biro is perfect, a blue pen is okay too but it doesn't produce quite as defined results when you scan the sketches in and convert them to black later on, also avoid high quality pens such as cartridge pens because they will produce ultra smooth lines which won't look rough and sketchy at all (which is what we're going for of course). This next step, is fully optional, but before I started sketching I wanted to have a grid to use for guidance, it came in extremely useful for the geometric icons and for getting all the icons to be around about the same size. I used this free graph paper generator and downloaded a basic Cartesian grid and printed off two copies, after opening the grid in Adobe Illustrator to modify the colors and transparency so that the guides were barely visible, and easy to edit out later with levels adjustments in Adobe Photoshop. A nice tip for when you're drawing your icons is to draw them at around about the size that you expect them to be viewed at on screen, this way you are effectively limiting the amount of details you can psychically draw, which is a good thing because if it's too small to draw - then it's too small to see on screen. Once you've sketched out your icons it's time to scan them in.

Step 4: Scan and tidy up the small details

Scan the icons onto your computer at around about 600dpi and make sure all of the little details and pen strokes are visible and sharp when viewed at full size, next bring the image into Adobe Photoshop and rotate the document if necessary (Image -> Image Rotation) The first thing to do is to make sure that the image is Grayscale (Image -> Mode -> Grayscale) then increase the contrast by adjusting the levels (Cmd/Ctrl + L), using the Levels dialog window, make sure the Preview option ticked, and drag the left hand marker on the input levels section over to the right slowly to until your pen lines are a nice, rich black and drag the right hand marker over to the left side, to increase the brightness of the page until it is pure white, but not affecting the sketches. You can also remove any niggly bits such as faint guides that you used to aid in drawing with the Eraser tool (E).

Step 5: Illustrator Live Trace

Right, now we're going to use one of Adobe Illustrators best features, the Live Trace tool, which since version CS2 has been almost indispensable to designers and illustrators, if you're unfamiliar with this tool, basically what it does is it converts bitmap based images into vector shapes and paths, it has tons of options allowing very precise control over how the final traced image looks, it does have limitations of course, but for vectorizing black and white sketches like these it's perfect. Once you've got your adjusted image into Adobe Illustrator, click the presets arrow just to the side of the live trace button, and select tracing options. The settings you use to trace your image will depend on your own personal drawing style, and the scanned image, you can experiment with all the different options to familiarize yourself with them, and checking the Preview option will show you your result as you adjust the values. Threshold: When Illustrator uses live trace, it analyses the original image and uses a brightness threshold value to determine how dark or light each pixel from the original image needs to be to be considered either black or white when it is traced. So for example the lower the threshold value, the more black you'll see in the result. Blur: Does what it says on the tin, it blurs the original image before tracing it for a softer effect. Resample: Resampling can reduce the resolution of the image, this comes in handy when you are getting too many tiny, intricate details being traced and actually need a lower quality image to work with. Path Fitting: Path Fitting defines how smooth or jagged the edges of the final traced image will be. Minimum Area: This defines how large a section of the original image needs to be in order to be traced, so if you have a bit of dust on the scan, then a low minimum area value should make Illustrator simply ignore the small blemish. Corner Angle: A low corner angle value will create sharper corners. Ignore White: Make sure this is ticked to eliminate tracing unnecessary white backgrounds. Once you've found the most suitable settings just hit "Trace", and then click "Live Paint" to commit your tracing settings, the result may be a combination of fills and strokes, so to make your life easier, click the Expand button aswell to convert everything to fills, this way you can re-color the whole artwork with just one click and resize without stroke widths causing problems.

The Final Result

You can see the final result featuring as a premium MediaLoot resource. I hope you've enjoyed reading this tutorial and welcome any comments, thanks for reading.