How to Create a Set of Hand-Drawn Arrows

Some of the more popular resource packs our Shop 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 the tutorial later in this post we’ll show you how.

Before that, let’s visit a few of our favorite places to download already-made FREE hand-drawn arrows and other hand-drawn elements.

Think Design Blog

hand-drawn-arrows-1

Vecteezy

hand-drawn-speech-bubble-vectors

Best PSD Freebies

Handrawn_arrows

Photoshop Buzz

arrows

Pixel Buddha

hand-drawn-nature-elements

Hand-Drawn Goods

hand-drawn-icons

Dabbles & Babbles

Hand-Drawn-Doodles

DryIcons

hand_drawn_arrows

The Smell of Roses

hand-drawn-roses

Vector4Free

hand-drawn-scroll

Hand Drawn Arrows Tutorial

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.

BONUS Free Hand Drawn Icon PSD Download

This set includes 28 different icons all with a stylish hand-drawn look. The icons come in PSD format (all in one PSD file). They are made of vector shapes so they can be re-sized and scaled to meet your needs. You can easily style the shape layers to change colors or add other effects.

hd-free-icons

Download the icons (2.2 MB zip file)

License Details:

The icons are free for personal or commercial projects, but they cannot be re-sold or re-distributed. Attribution is not required.

For more tutorials please see:

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