Jun 29

Tagged in: Comments:Add

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.

tablet

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.

digg it sketch

2 Scan It

The easiest way scan the drawing and set the layer blending mode to Multiply.

multiply blending mode

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.

screen blending mode

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.

alpha channel

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).

alpha channel

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.

color drawing

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).

drawing on a female model

1. First, cut out the model.

cutout model

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

glowing background

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

gradient stroke

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

final model image

Delicious Stumbleupon Digg

2008 Design Trends Adobe Illustrator Shortcuts

Comments

Pages: 22 21 20 19 18 17 16 15 14 13 121 » Show All

There are 217 comments (+Add)

  • 217 fiona

    I think your work is amazing- and it’s class getting an insight into how you do it -i am just starting out -trying out - and am even more inspired now -thanks.

  • 216 Kim

    Thank you for your time and work in putting your tutorials together. I come here often and have learned quite a bit thanks to you! Cheers!

  • 215 designiac http://twitter.com/b_allenstein

    I think the background /header of this website looks much more better than your examples in this tutorial.
    I would have cut out the model… but nice article.

  • 214 Rami

    You are professional . Thank you very much

  • 213 kannan

    great tutorial,..plz sent for my adc ompany’s caption

  • 212 dens

    good job keep it up…..keep goin…!!

  • 211 Jonathan http://www.pallieter-diving.be/

    Hi,

    Our new website design is based on this tutorial. We’ve handdrawn some fish and edited them in Photoshop…

    So thanks for sharing!

  • 210 shadowbreaker

    its so amazing to have this website for all the designers who used photoshops & illustrator… “very very very nice tricks” i love it.

  • 209 uxitza http://ourtutorials.blog.com/

    This is avery nice tutorial …i like your website design also? Did you do it?…all those hand drawn details are very interesting
    i’ve added your tutorial here for others to find it easier
    http://freeitsolutions.com/photoshop/?order=dt&desc=true

  • 208 jane http://huey_ming_chin@dell.com

    amazing…. ^_^…..!!!!!

Pages: 22 21 20 19 18 17 16 15 14 13 121 » Show All

Post Your Comments

(required)

(required)

Comment Guidelines

  • Please keep comments related to topic. And be nice, don't spam!
  • Basic HTML tags are allowed:
    <a href> <abbr> <acronym> <blockquote> <code> <em> <strike> <strong>
  • Note: un-related or spam comments will be deleted.

Live Comment Preview

advertisement

Back to top