Photoshop: Hand Drawn Design 283
In case you haven't noticed yet, the hand drawn style is one of the hottest design trends. There are several ways to create hand drawn images — you can create it from scratch in Photoshop or you can scan an actual hand drawn sketch. Personally, I like to use a scanned drawing because you get a realistic drawing texture. Here is a quick tutorial to show you how to create a hand drawn design in Photoshop using the blending mode and alpha channel.
1 Create From Scratch in Photoshop
If you have a tablet, you can simply draw the sketch by using the brush tool.

Don't Have a Tablet?
If you don't have a tablet, you can create the artwork in Adobe Illustrator and then imitate a hand drawing effect in Photoshop.
First draw a vector illustration. Then import it in Photoshop. Use a grungy brush and gently erase select parts of the image. Use the Blur tool to create the smug effect.

2 Scan It
The easiest way — scan the drawing and set the layer blending mode to Multiply.

Invert Color
If you want to have a white color stroke instead of black — go to menu Image > Adjustments > Invert (or press shortcut Cmd+i) and then select Screen blending mode.


Step It Up: Create Color Gradients
What if you want more than just a black or white stroke (ie. colors gradients)? Then you will have to extract the drawing from the white background. A simple way to do this is by using alpha channel.
- Copy (Cmd+C) the drawing.
- In the Channels palette, create a new channel. Then paste the drawing in the new channel.
- Invert (Cmd+i) the channel layer.

Go back to the Layers palette, create a new layer. Go to menu Select > Load Selection. In the Load Selection prompt box, select Channel: "Alpha 1" (which is the name of the alpha channel I created earlier).

Shortcut Tip: the shortcut for loading a channel selection is Cmd + Opt + any number key (ie. 1, 2, 3). Learn more Photoshop shortcuts.
Fill Selection
With the channel selection loaded, you can fill it with any color.

Using It In The Design
For the purpose of this tutorial, I'm going to show you how to incorporate your hand drawing on a female model (the photo was purchased from iStock).

1. First, cut out the model.

2. Fill the background with some sort of light glowing gradients.

3. Paste the drawing on top of the model. Lock the layer transparency. Play around with the color gradients.

4. Duplicate the drawing in the background to add more details to the image.

YES! very nice tutorial, i hope i get my tablet very soon to do this sort of art. and my blog needs a new design too.
I have a wacom intuos A4 and i must say thats a great tablet! i dont be a master of drawing but for some little things it is perfekt!
Of course, good tutorial, i like your stuff!
Wow, Great Post. +fav I’ve no tablet but now i can create hand drawn design coz of this post. thanks
Cool tutorial. I wiil try it one day
Great article – If you like the sketching style, check out this group on flickr:
http://www.flickr.com/groups/pud/pool/?donepending=1
Great for inspo when sketching!!
http://www.graylabel.co.uk
great job thanks!
Wow! It’s very interesting :)
I like Diggs’ picture :)
That is pretty awesome I am going to try that out once I get a vector pad.
I’ve used this technic many times… an other way to do something like that, is to draw it on paper and take a photograph by digitalcamera. In most cases the result is good enough for web or something like wallpapers.
thanks a lot! great tutorial.
Thanks, I’ve been looking for this for about 2 weeks now!
Hey,
Cool tutorial yet again, I like the lineart effect on the swirls from the scan.
Keep up the good work
Hi there,
Loving your tutorials and have such gratitude to you. But I’d like t ask if you can make a tutorial on how to cut out pics from Photoshop, I mean like what you did to the model. I always have a hard time doing it and maybe you have some tips & tricks to it.
Thanks again for your lovely site.
Thanks for the article, I love this sort of effect.
cool stuff. As Ukrnet also said, the “digg” guy looks cool.
Sweet! this will come in handy for my current blog redesign.
I’ve recently made hand drawn design for my blog. Wow I’m in trend.
This is one among the best designs which I have seen in the past few months. Good work. Carry on … friend.
Here’s an interesting one – has that kind of illustrator trace feel
http://www.aequalsaght.org
Great stuff! I just have one question, though. For the gradient part with the alpha channels tutorial, you say to first Copy (Cmd+C) the drawing. Do you mean to ctrl + click the layer thumb and copy the selection of drawing’s outline, or to copy the drawing after pressing ctrl + a (or something else)? I’m just trying to figure out exactly what I’m copying at this step.
Thanks again for all of the tips! I love getting the chance to learn new Photoshop skills!