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:
To follow this tutorial you will need the following:
- A can of spray paint, preferrably a dark color
- A scanner
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.
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).
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.
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.
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”.
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.
Then click on 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.
Step 5: Cleaning Up the Vector
To get rid of some of those splatters, click on the 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.
We now have a finished vector that is ready to use!
If you’d like, you can download the vector created in this tutorial here.
For more tutorials please see: