Jun 29
Photoshop: Hand Drawn Design
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.
2008 Design Trends Adobe Illustrator Shortcuts
Comments
Pages: 20 19 18 17 16 15 14 13 12 11 10 … 1 » Show All
There are 193 comments (+Add)
Pages: 20 19 18 17 16 15 14 13 12 11 10 … 1 » Show All
Post Your Comments
Advertise Here
Loading ...
193 EMILY
December 26th, 2008 at 7:43 pm
I already spoke to the owner of this website and its OK know. Thanks everone. I hope you guys had a great Christmas.
192 adam
December 25th, 2008 at 3:59 am
will u draw a pic of me
191 Johnny
December 23rd, 2008 at 11:43 pm
Nice tutorial, thank you! I can see using this one a lot.
To Emily Liz: It seems your photographer sold this photo of you as “royalty free”. That means when a designer buys the image, they do not have to seek permission to use it. If you did not agree with your photographer for this, ask the photographer to remove your images from their sales listings, otherwise, you could find yourself on any ad for anything at all.
190 cyuxi
December 23rd, 2008 at 6:46 pm
to EMILY LIZ
I think what you should do is to send an email to the web master asking about your issues instead of posting comment here, because the comment is usually not going to be read in time.
189 EMILY LIZ
December 23rd, 2008 at 5:55 pm
the picture of me is still in your website why?
the least you can do is ask me
emilyemilyliz@yahoo.com
ill be back later
188 EMILY LIZ
December 22nd, 2008 at 10:42 pm
why are you using my pictures for your website …. that my pictures .. you did not ask my. thanks emily
this is the link in your web site please take it off.
http://www.webdesignerwall.com/tutorials/photoshop-hand-drawn-design/comment-page-19/#comments
187 EMILY LIZ
December 22nd, 2008 at 10:40 pm
WHY ARE YOU USING MY PICTURE FOR YOUR WEBSITE
186 Ivy
December 15th, 2008 at 5:28 pm
that is soo coool!! i’m not even kidding.. :]
185 Joomlapanel http://joomlapanel.com
December 7th, 2008 at 9:55 am
Amazing..great design tutorial
184 bebo music skins http://www.wantaskin.com
December 6th, 2008 at 11:49 am
nice tutorial, simple and effective, keep up the goodwork