In this tutorial, we’ll take a look at a quick and easy way to execute a watercolor text effect in Photoshop. By combining the right font, an awesome set of brushes, a filter and a few other subtle techniques, realistic watercolor text is a breeze to create. This tutorial is geared to anyone who has played around in Photoshop a dozen or more times. Let’s jump right in!
What We Are Creating
Gather A Few Materials
There are only two resources that you’ll need to pull off this effect and one of them isn’t really even required. First, you’ll need a single or set of high-resolution watercolor brushes. For this specific tutorial, I’m using this brush set provided by WeGraphics. The second resource you’ll need is a paper texture. There are thousands of these available on the web, just look around at DeviantArt and you’ll find one suited for the job. Let’s jump into the tutorial.
Step 1: Background Placement
Choose a size for the project you want to work on and place the paper texture into the project. If you want to follow step-by-step, I’m using a 540px X 250px canvas size.
Step 2: Type Placement
Throw out some text on the canvas. Try to be more original than me and use a term other than the word “Type”. In my opinion a Serif font is more appealing with the watercolor look. Here, I’ve used the font “Fontin Bold” at 125pt with the tracking set at 25. The color of the text is not significant at this point.
Step 3: Layer Style Options
On the text layer, drop the fill down to 0% and double click the layer to bring up the Layer Style options. Add an inside stroke of 1px at an opacity around 44%. The color of the stroke should match the color that you plan to use with the watercolor brush. I went with the color #023d8b for this tutorial. This is what you should have so far:
Step 4: Select Text
Hold down (CTRL – for PC) or (CMD – for Mac) while clicking the thumbnail of the type layer to select the text. Now add a new layer above all others and make sure that you are on this newly created layer. The text should still be selected, indicated by a dashed line surrounding the text.
Step 5: Apply Brush
While on the newly created layer and with the outline of the text still selected, grab your brush tool and choose a watercolor brush that is larger than the height and width of your text. If you downloaded the set of brushes mentioned at the beginning of the article, try using the brush titled “Water 6″. This particular brush is 1,895 pixels wide and is plenty large enough to cover a line of text.
Make sure you have your foreground color set to match the same color that you set your stroke at, #023d8b for this example. Simply click on the layer to apply a watercolor effect inside the outlined text. You may have to repeat this step several times until you get to look the way you want, CTRL +Z is your friend in this case.
Remove the selection and you can see that the effect is coming along nicely.
Looks pretty good, but there is still one more step we can take to make it a bit more convincing…
Step 6: Apply Filter
While still on the layer where you applied the watercolor brush, go to Filter > Distort > Ripple… Change the amount to around 36% and the size to medium and hit OK. This will help to remove some of those straight lines and add a slight ripple effect along the edges of the text. You’ll see that the stroke remains in place allowing the watercolor to spill slightly over the edges.
Step Last (optional)
Once you’ve got your type all fixed up and in place, try using some of the other brushes to add some spills, splatters, stains and more to liven up the image a tad. Just remember, less is more.
Wrapping Things Up
So there it is, digital watercolor typography the easy way. There are a number of places where this type treatment could come in handy in both print and web design alike. If you enjoyed the tutorial, or know of some ways to improve it, I would love to here your thoughts in the comment section.
Written by Shawn Ramsey
When I’m not brewing my own beer or hiking through the local National Forest, I’m busy building a more beautiful web.
Very easy to follow tutorial with an excellent outcome. I’ll be using this in some future work. I love the colors that you used. Thanks for the tutorial!
me too
I’m glad that you two enjoyed it :)
I agree, easy to follow and understand. You could easily change the stain to a brownish color, add a coffee stain etc. Not only a good tut, but good for inspiration.
Thanks.
Coffee stains would definitely mix well with the watercolor look. Great suggestion!
Lovely effect! I’ve always been a fan of watercolor, now I can create it digitally. Thank you for the tutorial!
You’re welcome Ericka. Glad you found it useful.
Hi Shawn,
Great effect. Not too many steps for a great outcome!!!
Thanks bud! I was trying to keep it short and simple.
Beautiful effect!!!! can’t believe it’s so simple to create, thanks for sharing!!
Really nice looking effect Shawn. Great job!
Thank you very much, Jad!
Great and well explained tutorial! Thanks :) Will definitely try it on my personal project :) Thanks
You’re welcome and thank you!
Excellent work.. as simple as it can get…
That means a lot Richie. No need to complicate something that can easily be pulled off.
Watercolor has always been my favorite, love the tutorial!!
I’m glad you enjoyed it Rocky! I’ve always loved the look of watercolor as well :)
Fantastic tutorial! Thank you : )
cool!! easy to follow.
watermark is not as build-in as we thought…
Could you make this any easier? Nice job and nice effect!
wow… this is a great tutorial… thnx for share!!!
Awesome tutorial! Thank you so much!!
Great, Easy tutorial AND I LOVE THE WATERCOLOR BRUSHES – a must to download!!!
THNAK YOU. This just made my day! you are my hero.
Fantastic tutorial, clear, easy to follow and great results.
I’ve used this effect for my engagement invitations :)
Loved it
Thanks :)
Great tutorial! I love the simple but authentic effect. Very realistic!
thank you! used this for my project..
Aloha from Hawaii,
Mahalo (that’s thank you in Hawaiian) for this terrific tutorial on creating a watercolor text effect. It was very easy to follow and I loved the end results.
Mahalo for sharing.
This tutorial was extremely helpful. I did a search on Google and yours came up. I’ve been wondering how to do this for awhile and now I’m finally able to do it for a personal project. Thanks!!! :D
What photoshop is this using?
I can’t follow these steps with CS5 on my Mac, unfortunately. I can’t figure out how to get the text to stay selected and it wants to rasterize the layer before applying
the brush.
I can get the outline of the text but nothing further.
Thank you so much–this was so excellent and worked like a charm! I’m so grateful!
AMAZING! Thanks so much :) you have answered all of my prayers seriously!!
Just what I needed, thank you!!
Is it easy to make the background transparent and just have the word?