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!
22 thoughts on “Watercolor Text Effects”
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!
I know right?! I WANT TO PUT WATERCOLOR ON EVERYTHING. It’s a real problem. :)
Great tutorial. Can’t wait to give it a go in the near future! Thanks xxx
AHHH your website is so helpful! I can’t wait to read more of your articles (after studying for finals lol). This tutorial is exactly what I was looking for. Thank you!
This seriously was a life saver! Thanks so much!
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! :)
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!
Which brush did you use?
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
Thank you for this incredible tutorial *.*
Hi Angie! Are you able to tell me the names of the two fonts in the “once wed” header example? Thank you!
Hi, which photoshop programme did you use? xx
I have Photoshop CC.
Thank you, well explained and very helpful.
Thanks for marvelous posting! I really enjoyed reading it, you might be a great author. I will be sure to bookmark your blog and will eventually come back later on, you have posted a trustworthy blog keep sharing,
clipping path company
Wow!It’s an amazing article .It’s very helpful. I really appreciate it .Thank you so much for sharing it.
Photo Retouching Services Article. The style of the site is amazing, the articles are great: good work, cheers. Your blog very interesting .How can I subscribe your blog?
Thanks for a marvelous posting! I really enjoyed reading it, you might be a great author. I will be sure to bookmark your blog and will eventually come back later on, you have posted a trustworthy blog keep sharing, Used Cars in Defence Colony Delhi
¡Gracias por la asombrosa publicación! Sinceramente me encantó San Miguel escorts estudiarlo, probablemente seas un autor exquisito.
Such effects in web design always look very impressive, but it is also very important not to overdo it. You should take care not only about the beauty of your site, but also about the practicality of use and convenience for users. You can always get support here https://geniusee.com/ui-ux-design