Make Vector Splashes

Say you want an image of a splash for something like a water park ad or a brochure about four-wheel drive vehicles. You can buy all sorts of pre-made splashes on stock sites, but you’ll most likely end up with the same image hundreds of other designers have used. Or you could draw a splash in software, but it’s tough to make the results look realistic. No, what you need is a physical brush and actual paint. Then you scan the results, trace them in Adobe Illustrator, and go crazy!

Watercolor is one of the best kinds of paint for splashes. I also use acrylic paint, which is a little bit thicker, for variety.

Step 1
To begin creating your splash artwork, dip the brush in a bowl of water and then in the watercolor paint. Flick the paint by holding the brush handle with one hand, pulling it back with the other hand, and letting go. As you can imagine, it’s better to do this outside, since you’re likely to splash what the paper is on top of — as well as everything nearby.

If you don’t want to try the paint part of this tutorial, you can download a scan of a splash I created.

Step 2
Once your splashes are dry, scan them using the software of your choice. I like to open Photoshop and go to File > Import.

There are a wide variety of hues and saturation in the splashes. For this tutorial, you’ll want the hue/saturation to be more constant throughout. In Photoshop, go to Image > Mode > Indexed Color to reduce the number of colors in the design.

Step 3
In the Indexed Color dialog box, change the Colors option to 4 and the Forced to None.

Now the splash’s color is more consistent throughout.

If your splash differs or you want more colors, set it to 5 or 6 colors. The higher the number, the more colors available.

Step 4
To smooth out the rough edges, convert the file back to RGB mode (Image > Mode > RGB).

Save the file as a JPEG or GIF.

Step 5
Now it’s time to convert the file to vector art so you can resize it without introducing jaggy artifacts. Open Adobe Illustrator and go to File > Place. Select the file you just saved and place it.

Step 6
Click the down arrow next to Live Trace and select Tracing Options.

Step 7
Change the settings to a preset that keeps the form of the splashes. I set mine to Color 6. When you’re finished with the settings, click the Trace button.

Step 8
Press the Expand option on the Control Palette.

This expands the trace into separate lines and points.

Step 9
Unless you splash will always be on a white background, you need to get rid of the white area. To do so, choose the Direct Selection tool (the white arrow) and click anywhere in the white of the shape, then press Delete/Backspace. Depending on your splash, you may have to click on a few more white areas that weren’t adjacent to the clicked white area and delete them, too. Try zooming into the art, then clicking on any white area and pressing Delete/Backspace.

Now you have a vector splash you can use in vector and raster projects.

With some splashes, when you change the mode to Indexed Color, you need to adjust the Colors option. For example, the splash below looked better with 6 colors.

Adding a vector splash to a design that’s deliberately rough around the edges can add interest that’s consistent with the rest of the design.

Here are several more scans of paint splashes to download and practice with. I already adjusted them from raw scans, so all that’s left is to place them into Illustrator and repeat steps 5 through 9. Have fun!

Scan 2

Scan 3

Scan 4

Scan 5

Posted on: August 13, 2008

3 Comments on Make Vector Splashes

  1. Thanks for the Splashes but the tutorial didn’t work for me – got to the “click on the white background with the direct selection tool and hit delete – deleted everything…


  2. Hey Novaski;

    Make sure you’ve selected the DIRECT selection tool, it’s the white arrow in Adobe Illustrator on the toolbar. If you select the “black arrow,” the Selection Tool, then it will select the entire object. But using the Direct Selection Tool, or the “white arrow” at the top of the toolbar, enables you to select specific parts. Let me know if this works or if you get stuck again, post here and I’ll reply again. Thanks! Chad

  3. Thank you so much…

1 Trackbacks & Pingbacks

  1. How To Make Vector In Photoshop – Tips and Trick

Leave a comment

Your email address will not be published.