Watercolor Text Effects

How to Make Convincing Watercolor Text Effects | angiemakes.com

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.


METHOD 1

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.

screen-shot-2016-09-30-at-11-06-03-pm

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

demo6


Method #2

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.

Screen Shot 2015-04-14 at 9.51.39 AM

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.

Screen Shot 2015-04-14 at 9.52.27 AM

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.

Screen Shot 2015-04-14 at 9.53.01 AM

I continued adding layers, transforming them, and getting a look that I thought was what I was after.

Screen Shot 2015-04-14 at 9.53.35 AM

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.

Screen Shot 2015-04-14 at 11.16.46 AM

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.

Screen Shot 2015-04-14 at 11.17.07 AM

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.

Screen Shot 2015-04-14 at 11.31.33 AM

Ah. That’s better.

Happy creating friends!

 

Save

Save

Save

Save

Save

Save

Save

12 thoughts on “Watercolor Text Effects

  1. I love your method of applying a watercolour effect! I’m in love with watercolour effects and brush fonts lately. I have to stop myself from using it in every single project :) Great tutorial, thank you!

  2. Thank you so much for this tutorial!! I don’t have photoshop, but you explained it so well that I think I will be able to duplicate it in my program. I can’t wait to try! :)

  3. Angie,I think you read my mind while creating this tutorial.Haha! I’ve been meaning to find a way to realistically incorporate watercolor and fonts.Thanks so much for this!

  4. Hello Angie ! I was looking for some text effect in photoshop and landed to your site , you shared great tips for watercolor text effect ,it looks pretty . Would like to know if possible to add glitter in this text effect ? TIA

Leave a Reply

Your email address will not be published. Required fields are marked *