Importing hand-drawn art into Photoshop

Please note: This post was written 7 years ago, which is an age in programming terms, so please don't treat this as gospel! I'll be updating all posts soon enough, but if you'd especially like this one to be updated let me know.

Larry the Fish

Using Photoshop to design websites it great - it allows for pixel-perfect designs that can then be styled to your hearts-content using all the powerful tools included in the application. But sometimes it's nice to add a human touch, and have hand-drawn art in our designs. Now I personally don't do this all too often, but the other day when a client asked for a design that I simply couldn't create in Photoshop, I reached for the good-old pencil and paper to draw a fish sat in a chair (this might seem somewhat odd out of context, but there you go), and some nice lettering.

So what are our options? For me I wanted to draw the art, then colour it in with Photoshop, and add it to the site, and the distinct lack of thorough tutorials I found didn't do a great deal to help, so I thought I'd document my process here.

I started by sitting down and actually drawing the final product, and after an hour or two of trying to make a realistic fish I scanned the bad boy in, and came up with the following:

Hand-drawn fish

Great, I was happy with the simple design, and now I needed to 'vectorise' it. And here is where I hit my brick wall. Illustrator wouldn't play ball - I tried a billion different settings for the live trace tool, and it simply failed miserably. I concluded this was down to the opacity of the drawing, so I traced it with a 0.3mm fine-liner to make it stand out a little more. Here's what I ended up with:

Fish fineliner

Not bad, but still Illustrator just looked at me blankly. And that's when I found out about VectorMagic - an online tool to convert hand-drawn art to vectors. Now the service is free for the first 2 images you upload, and then there's a subscription of $8 a month, or you can buy the desktop version. So while it's not a complete solution, it works damn well! (I eventually forked out for the desktop client and I can honestly say it works every time). Now if you don't fancy being locked into a service like that the only other option is to manually trace (using the pen tool) in Photoshop - I know, this isn't really a solution, and that's why I seriously suggest you give VectorMagic a go.

So, having put my image through the VM process I got the following:

Traced Fish

Yay! It's starting to look a lot better. From there I began to colour in my creation using the fill tool, and the brush. After about 10 minutes I had:

Fish coloured-in

And then I added highlights and shadows to make it look more realistic - using a layer with the blend mode set to multiply, and a small brush using black and white for shadows and highlights respectively. The final fish took it's form:

Fish final

And that's now my process for importing vector art.


If you found this particularly useful and want to share the ♥ you can donate here.


No Responses

~ Comments are now closed ~

Get in touch here