How to Create a Drippy Spray Paint Vector

This page may contain links from our sponsors. Here’s how we make money.

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’re looking for, or what you find may not be licensed for your needs.

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. Here is a look at what we’ll be creating:

Create a Drippy Spray Paint Vector

How to Create a 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

UNLIMITED DOWNLOADS: 50+ Million Add-Ons & Design Assets

Envato Elements Ad - Unlimited Downloads of Creative Assets

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.

Spay paint on paper, ready to be scanned

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

Desaturated image after scanning

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.

Image edited with levels to remove the gray areas

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.

Image after making a selection so it looks less boxy

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

Live Trace in Illustrator

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.

Tracing options

Then click on the “Expand” button.

Click the Expand button

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.

Vectorized spray paint image

Step 5: Cleaning Up the Vector

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

Direct selection tool

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.

Highlighting the anchors

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

Finished spray paint vector

For more tutorials please see:

Get the Free Resources Bundle