Create a Drippy Spray Paint Vector

Spray paint and splatter effects are very commonly used in web and graphic design. There are a number of Photoshop brushes and vectors available that can be used to add these effects to your work, but sometimes you may not be able to find exactly what you are looking for, or what you find may not be licensed for what you need.

In these situations you can create your own, and it’s not as difficult as you might think. In this tutorial we’ll create a spray paint vector that can be used in any number of different ways. The vector that we are creating here is a part of the spray paint vector set available at Vandelay Premier. Here is a look at what we will be creating:

Create a Drippy Spray Paint Vector

To follow this tutorial you will need the following:

  • A can of spray paint, preferrably a dark color
  • Paper
  • A scanner
  • Photoshop
  • Illustrator

Step 1: Spraying the Paint

To start with, take your can of spray paint and your paper and create a spray, splatter, drip, or whatever you want. I’m using glossy photo paper, but other types of thick paper could also be used.

Create a Drippy Spray Paint Vector

After spraying, give it about 24 hours to dry. Make sure that it is totally dry or else you could have a mess on your scanner glass.

Step 2: Scanning

Once the paint has dried, scan it and open in Photoshop.

Step 3: Making Adjustments in Photoshop

The amount of editing that you do in Photoshop will vary depending on your scan, and it will also depend on how much work you want to do in Illustrator. Through the experience of creating a set of 20 spray paint vectors I found that (at least for me) it works best to do some quick work in Photoshop, but nothing too time consuming.

The first thing to do is desaturate the image (Image > Adjustments > Desaturate).

Create a Drippy Spray Paint Vector

Next, we’ll adjust the levels. Go to Image > Adjustments > Levels. The settings that you choose will depend on your scan, but basically you’ll want to move the right (white) level in towards the middle to make the light areas white. Then move the middle (gray) level to the right to make the gray areas darker.

Create a Drippy Spray Paint Vector

The image still has a lot of sprays and splatters around the edges, and I don’t want the final vector to look like it was cut out of a rectangular image. I’ll use the lasso tool to make a rounded selection around the spray, and then I’ll paste it into a new file.

Create a Drippy Spray Paint Vector

Now you can save the file as a JPG.

Step 4: Live Trace in Illustrator

Open the JPG in Illustrator and click on the arrow next to Live Trace. In the dropdown, select “Tracing Options”.

Create a Drippy Spray Paint Vector

With the traing options you can adjust things like the threshold, which impacts how many pixels become black and how many become white. If you wanted to skip some of the adjustments in Photoshop you could do more experimentation here, but personally I find it to be easier to make those adjustments in Photoshop than to play with a trial and error process using the threshold. Check the “ignore white” box, but for now we’ll leave everything else with the default settings and see how it turns out.

Create a Drippy Spray Paint Vector

Then click on the “Expand” button.

Create a Drippy Spray Paint Vector

At this point you’ll now have a vectorized version of the image. I would like to get rid of some of the splatters that are at the edge of the image, which will do in the next step.

Create a Drippy Spray Paint Vector

Step 5: Cleaning Up the Vector

To get rid of some of those splatters, click on the direct selection tool.

Create a Drippy Spray Paint Vector

Then click on the anchors that you want to delete and hit the delete key. If there are a lot of anchors that you want to delete you may be able to save some time by trying the live trace again and adjusting the threshold. Or, you could do more editing in Photoshop.

Create a Drippy Spray Paint Vector

We now have a finished vector that is ready to use!

Create a Drippy Spray Paint Vector

If you’d like, you can download the vector created in this tutorial here. You can see the full set of spray paint vectors at Vandelay Premier.

For more tutorials please see:

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

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