How to Create a Set of Hand-Drawn Design Elements

Some of the more popular resource packs at Vandelay Premier have been those that are created to be used with hand-drawn or doodled designs. While we aim to provide resources that are as useful as possible, there may be times when you need a specific design element that you can’t find anywhere. In that case, you can create your own, and in this tutorial we’ll show you how.

We’ll be creating a small set of hand-drawn resources, but using the techniques covered in this post you’ll be able to create as much or as little as you need. While stock resources can be great for saving time in your design process, creating your own resources can often be a lot of fun, and with hand-drawn design this is definitely the case.

To follow this tutorial you’ll need:

  • A pen or marker
  • Paper
  • A scanner
  • Photoshop
  • Illustrator

We’ll be using both Photoshop and Illustrator in the tutorial to create a small set of Photoshop brushes, and the we’ll vectorize the images for added flexibility. If you’re only interested in creating the Photoshop brushes or only interested in creating the vectors, that is fine too, do whatever suits your situation.

To get started, take a pen or a marker and draw some doodles, arrows, or whatever you want to create. Don’t worry about creating a masterpiece, imperfection often makes the hand-drawn style a little more realistic. Plus, you can doodle all you want and then only take the ones that you like best and work with them in Photoshop or Illustrator.

Once you have some things drawn, scan the paper and open it in Photoshop. Here is a look at my scan.

How to Create a Set of Hand-Drawn Design Elements

Creating the Brushes:

I’ve used a black pen, a black marker, and a thicker blue marker to create some variety. Experiment to see how you like working with different markers and pens.

Now that we have the JPG scan open in Photoshop, desaturate it to take out the color (Image > Adjustments > Desaturate).

How to Create a Set of Hand-Drawn Design Elements

I’m also going to adjust the levels to clean up the scan a little bit. Go to Image > Adjustments > Levels and bring the white (right) level a little bit to the left, and then move the gray (middle) level a little to the right. The specifics will depend on your scan, but we’re trying to get rid of any unwanted gray areas and turn them to white.

How to Create a Set of Hand-Drawn Design Elements

To make things a little bit easier we’ll be separating the different elements that were scanned in together. Use the rectangular marquee tool to select one of the elements, then copy it, open a new file, and paste it in the new file.

How to Create a Set of Hand-Drawn Design Elements

We’ve already desaturated the image and adjusted the levels, but take a second look to see if there are any stray marks or smudges that need to be cleaned up. If so, use a white brush tip to cover up the marks or smudges. Our scan looks pretty clean, so we can just move forward.

Once the image is ready, to turn it into a Photoshop brush all you have to do is go to Edit > Define Brush Preset, give it a name, and save it. Your image will need to be no larger than 2500 pixels in width or height to create the brush.

How to Create a Set of Hand-Drawn Design Elements

To test it out, open a new file, select the brush tool and choose the brush that was just created, and apply it.

How to Create a Set of Hand-Drawn Design Elements

You can duplicate that process with your other doodles. Once you have several brushes you’ll probably want to save them in an .abr file, which will make them easy to store (you should always save custom brushes that you might want to re-use) or to distribute. To save the brush set go to Edit > Preset Manager. Make sure “Brushes” is selected in the dropdown menu and then select the brushes that you want to include in your set and click “save set”.

How to Create a Set of Hand-Drawn Design Elements

Now you have a set of brushes saved and you can use them any time you want to give a design a hand-drawn look.

Creating the Vectors:

Open a JPG of one of your scans in Illustrator.

How to Create a Set of Hand-Drawn Design Elements

We’ll use Illustrator’s Live Trace to easily convert the JPG to a vector. Click on the image and that will bring up the Live Trace button and drop down. Click on the arrow for the drop down.

How to Create a Set of Hand-Drawn Design Elements

Then click on “tracing options”. Check the box for “ignore white”. You may want to experiment with the other settings like path fitting, minimum area, and corner angle, we’ll be leaving them at the default settings. If you want to use these settings for multiple images (especially if you adjust a few of the settings) you can save it by clicking “save preset” and then give it a descriptive name. Then the next time you go to use it, when you click the down arrow next to Live Trace you’ll select your preset and it will run.

Ok, so now that you have the settings adjusted, run the Live Trace. Then click on the “Expand” button.

How to Create a Set of Hand-Drawn Design Elements

The image is now vectorized and can be saved as a .ai or .svg file. Turning it into a vector file allows you to re-size it without losing any quality. So to create a set of vectors, go through this process with multiple images and then paste them into one .ai file.

How to Create a Set of Hand-Drawn Design Elements

You now have a set of Photoshop brushes as well as a set of vectors. You may have noticed that the Photoshop brush we created earlier was less than 600 pixels. If you want a larger brush that may be a little more versatile you can take the finished vectors and use them to create larger brushes.

Creating an Alternative Photoshop Brush:

Let’s use the same arrow that we used to create the brush earlier. Now that we have a vectorized version of it, copy it to your clipboard in Illustrator (click on it and then Edit > Copy). Open a new file in Photoshop that is 2500 pixels by 2500 pixels, the maximum brush size allowed. Select RGB for the color mode. Then paste the arrow into your new file. Hold shift and drag the corners to fill most of the file.

How to Create a Set of Hand-Drawn Design Elements

Hit enter, and then you can save it as a brush (Edit > Define Brush Preset). This brush will have a little bit of a different look than the brush created earlier, but it’s size will give you more versatility.

That’s it! You can experiment and create all different kinds of hand-drawn resources to use in your own design work.

For more tutorials please see:

Published May 25th, 2011 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

15 Responses

Comments are now closed on this post.

  • Injection Mould, May 26, 2011

    Very Interesting. Follow this tutorial , I found it is very easy to do thing . thank you.!

  • benjion, May 26, 2011

    lol wow! i like this post!

    it’s a good idea!

    the hand drawn design seem’s to be funny!

  • Ant Eksiler, May 26, 2011

    How about releasing those 150 brushes for free :)

  • Will, May 27, 2011

    Can’t believe I didn’t think to do this myself!

    Looks like pretty good fun too. I know what I’ll be doing over the weekend.

  • Vandelay Website Design, May 27, 2011

    Hi Will,
    It is fun! And you can quickly experiment and try a lot of different things.

  • Acme Infosoft India, May 30, 2011

    nice tranie for free hand design

  • Tom Ross, May 31, 2011

    This is perfect thankyou! I’ve never actually made my own brush set, but have been meaning to release one for ages now :).

  • LindaC, June 1, 2011

    Thank you very much! I was wondering about creating brushes and whether the resulting background would be transparent. If I’m reading this correctly, the arrow example appears to answer my question!

    In other words, I don’t want a white square with an arrow in the middle of it to be a brush; I just want the arrow.

    • Vandelay Website Design, June 1, 2011

      Linda,
      When you are creating a brush anything that is white will be transparent when the brush is created. But if it is almost white it will still have a little bit of color, so make sure your white areas are totally white.

  • LindaC, June 6, 2011

    Thank you very much for the information!

  • web design hull, June 7, 2011

    I’m a big fan of hand drawn doodle style graphics… this is a great tutorial, very useful thanks!

  • Relationships Web Design, June 13, 2011

    Great tutorial, i was able to replicate everything. It feels good to learn new stuff. thanks!

  • Raj Mehta, October 12, 2011

    Nice tut also shared on my website linetoweb.com

    :)