Tutorial: Make your handdrawn images into vectors

You’ll need:

Pens, pencils, paper, a putty rubber, Photoshop & Illustrator, and a scanner.

Disclaimer:  This is no way a definitive guide to vectorising your work; it’s what works for me.  If you’re into doing this, give it a go and please add comments if you find some better way.  Nine times out of ten there’s a better way to use Photoshop.

I love type, and I love handdrawn imagery.  Combining the two, you get handdrawn lettering.  I love the rough and malleable aesthetic that only comes with pencils and pens.  Don’t get me wrong, Adobe Illustrator is a powerful tool and one that has made life so, so much easier on many occasions.  But sometimes I miss the person behind the vectors, and crave a look that isn’t perfect and uniform.

When I was new to Photoshop, I tried scanning in my illustrations and lettering to use in digital compositions.  My process involved using the eraser tool and a mouse to get rid of the white.

EAMB Hello Pixelation! How not to scan in and use PS.

There was  nothing I knew about PS, literally nothing.  For example, I never knew how to deselect the aul Marchin’ Ants line.  I would close the image and open it again, just to not have a jumping box line.  You’d think I would have asked someone, but a combination of stubbornness and embarrassment meant that I used this method for oh, about a year.

Skip on a couple of years and many late nights of online youtube vids later, and I’ve finally perfected (for me) a good way to recreate handdrawn illos into vectors.  This has changed my workflow massively for the better, meaning I can get more done, and at an infinitely better quality.  Vectorising generally means that the image that was once a scribble in your notebook can now be enlarged the size of an elephant, or billboard.  Whatever you like.  The line is cleaner and sharper, and means you can mess it up more in post.

  1. Draw your letters (or image) out on a piece of paper in pencil.  Draw guides for top and bottom height.  I always think I don’t need them, but they are the limitations that let you be free with your line.  Remember to watch your kerning (space between letters – it seems pedantic, but I feel with handdrawn lettering, it’s best to aim for perfection, yet allow imperfection).
  2. Ink the lines.  Maybe add a drop shadow if you’re feeling racy.
  3. Scan the image in as Grayscale, with a DPI of 800.  Madness, I know, that’s a lot of DPI, but you want to garner all the love from your drawing that you can.
  4. Open her up in PS.

Screen Shot 2015-09-23 at 20.22.52

5. Crop the image (hot key “C”).  This means that when you go to adjust the levels, there won’t be any unnecessary tone to feck up your final choice.

Screen Shot 2015-09-23 at 20.23.40

6. Go to Image/Adjustment/Threshold.  I used to use Levels to up the contrast, but Threshold is much better.  Have a wee play around with the Preview box ticked.  I usually head almost to the black mountain on the right, but not quite.  Too much and it will include dots and hairs and all other unmentionables.  You’re aiming for a thick, clean black line, but not too fuzzy.

Screen Shot 2015-09-23 at 20.24.13

7. When you’re happy with having a nice, clean black line, select the text using Cmd A or Ctrl A, and copy (Cmd C or Ctrl C).

Screen Shot 2015-09-23 at 20.24.20

8. Paste the doc into Illustrator.

Screen Shot 2015-09-23 at 20.25.40

9.  With the image selected, you’re ready to turn it into a vector.  Go to Object/Image Trace/Make and Expand.  It may take a while if it’s big but be patient.

Screen Shot 2015-09-23 at 20.26.01

10.  Now the image will look smooth and vector-y.  Copy this back in to PS in a new doc.  Rasterise the layer so you can fiddle at will.  In the Layers box where your Vector Smart Object is, right click and go to Rasterize Layer.

Screen Shot 2015-09-23 at 20.26.40

Then use the magic wand tool (mine is fourth down on the toolbar – it looks like a sparkler) to select the white areas and delete them (using the backspace key).  Don’t forget the bits in the B, P, A etc.

11.  Select the whole image or bits of text that you want using the Marquee tool (M), and paste into the doc you need it.  Resize using Cmd T/Ctrl T.  Again when lining up text, I use the guide lines (Cmd ‘/Ctrl ‘).  This is literally invaluable as no matter how straight you think you can see, you’re generally always a little off.  Or it could be just me.

Screen Shot 2015-09-23 at 20.28.38     Screen Shot 2015-09-23 at 21.03.49

12.  I also like to use guides that I draw myself on a layer (which I then lock) using the rulers (View/Rulers).  Generally I’ll do the Thirds thing of dissecting the composition into thirds, either horizontal, vertical or both.  This just gives a basic sense of order, unless of course, you’re going for a free-for-all, visual chaos.  Which could be nice, or could give you a headache.

Screen Shot 2015-09-23 at 21.05.00

13.  Now the fun bit!  Well, the more fun bit.  It’s colouring-in time.  Choose a colour palette that works well for you.  If, like me, you’re absolutely crap at colour theory, used Adobe Kuler online and take a screenshot of the palette.  It’s great, and even has a search engine where you can look for random colours like “WW1 Tea Party”, or whatever your inspiration is.  Alternately, get a photo of anything that has good colours, and create a palette from there.

First, Duplicate the text layer by right clicking on the layer and selecting Duplicate Layer.

Screen Shot 2015-09-23 at 21.19.25

Keep on for colour, and hide the other one for now.Screen Shot 2015-09-23 at 21.21.04

Start to colour in the text/image, and do this with all the text/image.Screen Shot 2015-09-23 at 21.24.34

14.  Now turn the hidden layer into a “Multiply” layer, and make sure it’s on top of the colour layer.  Depending on the image, this may or may not make a difference.  In this example, it makes shag all difference, but in a scratchy or line-y piece, it serves really well to solidify the black line.

15. To finish, I use a transparent grit and noise texture to add a bit of, well, grit and noise to the final piece.  You can find these online if you google “grunge texture hi res” or something similar.  Try to make sure you download a nice big high resolution one, save it to your folder, open it up in PS, and either copy/paste or Duplicate layer to your doc.  Set the theme of the layer to multiply and make sure it’s at the top of the layer pile.  You can also fiddle with the opacity to find the desired effect.Screen Shot 2015-09-23 at 21.32.36

In the end, take off all the rulers and guides.  Abandon all that shite I said about not trusting your eye, and have a good look.  Move stuff around if it’s annoying you.  If it’s sits well with you, then it’s done.  You’re the artist, after all…



Bird 1 Left 2 Middle 1 Monster 1 Octo 1 Right 1 Right 2 Text 1 Text 4 Wave 1 Whale 1

On Tuesday last I spent a lovely day illustrating the windows of Scout, a vintage clothing and accessories shop on Essex St, West, Temple Bar.

There was no brief, apart from making lovely drawings in my own style.  Lucky me!

I decided to take Japanese woodblock prints as a stylistic starting point.  Add to that the theme of migration (they are autumn/winter windows), and utilising the existing shop branding of a swallow.  Hence there is a sweep of swallows heading south over turbulent seas full of whales, dolphins, octopi and Loch Ness monsters.

I started initially with a paper sketch using the references images I’d collected.  I then printed out the type (Jane Austen) and used it as a tracing guide (if anyone can successfully handdraw lettering perfectly and backwards, I’d love to meet them).  I also use a freehand noodling (extreme doodling) technique to create the flowing lines of waves.

Work in Progress – Illustrated Map

At the minute, I’m working on an illustrated map for a large bar.  The brief was to come up with a quasi 3D floor plan of all the floors.  I wanted to illustrate each room as well, to get across the idea of a packed, jumping venue.  I also wanted a kind of Where’s Wally approach, packed with characters and movement.  I did not reckon on how much drawing would be involved – hence hand-yoga has become a daily routine.  But ultimately worth it.  I’m still in revision stage with the client but here’s a sneak preview:

Sneak Preview