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.
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.
- 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).
- Ink the lines. Maybe add a drop shadow if you’re feeling racy.
- 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.
- Open her up in PS.
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.
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.
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).
8. Paste the doc into Illustrator.
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.
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.
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.
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.
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.
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.
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…