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:
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:
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:
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:
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:
And that’s now my process for importing vector art.