Who doesn’t love some sweet, watercolor text? The playful addition of such text just brightens a site, makes for lovely watercolor artwork, and can even inspire the creation of a killer blog header.
Related: Free Website Header Backgrounds
Trend Alert! This watercolor lettering is all over the web, blogs, and beyond. Here are just a handful of examples to get the ideas flowing.
Oh, and not to mention some watercolor-y, hand brushed pretty text happening up on my Pinterest board.
Most of these lovely brush lettering pretties were hand painted then scanned in for that realistic watercolor effect. Hint, here’s how you can turn your own brush lettering into such graphics.
BUT, the cool thing is that with today’s amazing resources its super easy to “Fake” that coveted watercolor-y look with just a simple font and some handy graphic effects in Photoshop. And let’s face it… getting out the paints and scanning your work is WAY more effort than I’m willing to put forth most of the time. Here are a couple of my favorite ways to give my text a watercolor texture and feel.
Open up a Photoshop Document and type out some text. I’m using my friend Callie of Make Media Co’s lovely Manhattan Darling font. It’s legit and has a nice, rough dry-brushed edge that’s gonna look great with this technique.
Now for the trick. I’ve purchased these and these. They’re watercolor styles that are easy to apply with simply a click. No joke. I use em on everything and you will too. SO worth the money. Seriously.
You load them into your Photoshop styles panel and then with one click can have the most legit watercolor text effect. OMG. #awesomeness
The second way that I love to create a subtle, yet lovely watercolor effect is FREE. That’s assuming you have access to Photoshop.
Start by opening a blank document. Add a text layer with your favorite font. Hint, grab a font that already has a handmade, hand brushed feel if you want to be extra convincing with your faux watercolor effect. Several of these free brushed fonts will do the trick… or these delicious + affordable premium brushed fonts. I used the Away font and my own Snowberry font.
This is where the fun comes in. Grab some free watercolor brushes. After years of looking for some good brushes, these are still my personal fave.
Load your new watercolor brushes. Select your brush tool. Then in the top of your toolbar, open your various brushes. Use the small arrow to select the load brushes from the dropdown. Load the brushes you just downloaded.
Select your brushes one by one and add them to new layers. A word of advice. Create new layers for each brush you use and as you continue brushing. If you separate the layers in this way you will have more control over their individual colors. If you stack em all in one heap on one layer you just have a lot less control.
I continued adding layers, transforming them, and getting a look that I thought was what I was after.
Now is the magic. We’re going to use your text to clip the watercolor layer you just creating using Photoshop’s amazing clipping mask. I won’t go into detail but have already covered using the clipping mask here.
Super subtle and lovely. If you want to experiment further, try using the color overlay to add color to your brush strokes. OR, just change the color of your text. Below I changed my text color to white.
Viola! You have your amazing watercolor text effect. You can bump the opacity up / down, use the color overlay to make it subtle or bold. For more dramatic results make your text and watercolor stroke colors highly contrasting (Ex. Black and White). For more subtle results, make your colors very similar shades and use a thinner font.
In the above example, I need to drag my watercolor layers a bit more to make sure they look good with the text on the second row.
Ah. That’s better.
Happy creating friends!