Importing hand-drawn art into Photoshop

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.

Deep Thought

Reality check: Why Adobe Muse doesn’t matter.

Recently a number of people in the web community, specifically developers have been complaining about Adobe Muse, a website creation tools for people without coding knowledge. And while I agree that Adobe doesn't know what the community wants, I think the reactions to this tool have been a little too big. Here are my musings (I couldn't resist that badboy).

First up Muse isn't a new concept. In fact there are a billion and one tools to allow people without knowledge of coding to build websites, SquareSpace is just one example. They are not aimed at people who know HTML and CSS, and so people like me don't use them. But the reason these applications are popular isn't because making websites is easy, or because everyone has a web-designer within them, it's because people usually start off with a great template. People who don't have a design background and who then use a service like Muse to build a site without a template, generally end up with a crap website. Does that bother me? Nope, it doesn't impact my trade in a bad way, in fact it's good if anything because I can say to potential clients "look at what this guy did, it doesn't look very good does it? And that' why you should work with me.".

Using a tool like Muse is like buying a microwave meal, it looks the part, it tastes mediocre, and it's full of crap. Although you can create websites with Muse, as developers know, the code it spits out isn't great. This impacts things like SEO, thus making the website harder to find.

Anyone that follows me on Twitter knows that I do sometimes complain about Photoshop. Sure there are some bugs, it's way over-priced, and the company that makes it has lost touch with the creative industry, but to be honest it does the job. I don't expect great things from Adobe, and neither should you. While they are off spending time and effort creating nasty applications like Muse (written in AIR), I'm confident others are looking for an alternative.

So stop complaining about Muse, it wasn't built for you, it doesn't affect you, and although Adobe has changed (despite it once being about the music), it doesn't matter.

Tips & Tricks

QuickTip: Create a dotted/dashed line in Photoshop

More and more often nowadays I am finding the need to create dotted or dashed lines in my Photoshop mockups, but what is a ten second job in CSS, could turn out to be a ten minute job in Photoshop if you don't know how to do so easily. Before I came across the trick I'm going to show you today I would do one of two things. Either just make it solid in the design and say to myself - "that there is a dotted line", or being the perfectionist that I am, go around drawing a line, and then using the marquee tool to delete every second pixel - I know crazy right?! But then I had a brainwave, why not just use the brush tool? I was working with creating some funky brush strokes when i hit me, and so now I am able to create a dotted/dashed line in seconds in Photoshop, here's how.

To begin select the brush tool, and open up the brush window as seen below.

Then select the width of the brish you would like to use, in this example I selected the 1px round brush. If you would like a dashed line this is the point at which to select a square brush, also if you are wanting a dashed line you will need to alter the "roundness" of the square - bare with me here. Simply reduce the roundness value until you have your desired width, as you can see below.

To reduce the size simply select the preset you require. Now make sure the spacing checkbox is check and use the slider to increase the spacing dramatically, like so.

Then head over to your canvas, select a colour and hold down shift while you click and drag to create your line. Holding down shift will ensure you create a straight line. Now if you want to create a dotted or dahsed line, but you don't want this line to be straight, you will need to follow a few extra steps. They are as follows. Firstly gray the pen tool and draw the shape which you want the line to follow, like so.

Then right click the path and select "Stroke Path...".

From the Tool menu in the dialog that presents itself, select "Brush".

And then you should have successfully managed to stroke your path and created a dotted line like so.

And that's it! This technique is really simple and creates really nice results, and best of all, only takes a few seconds to achieve. I hope that this method will save you a good amount of time in the future when trying to design a website in Photoshop to look exactly as it will in the browser. Now if only I could create stunning designs as easily...