Thursday, May 6, 2021

How to Create a Watercolor Font With Brush Fonts and Watercolor Effects (+Ideas)

Learn how to create a watercolor font effect in Photoshop and Illustrator in this walkthrough. We'll also take a look at some awesome watercolor texture Photoshop effects, actions, and more. Want to learn more about how to make a photo look like watercolor in Photoshop? We'll check out some awesome watercolor filters for you too. So, if you love watercolor effects, let's dig in.

photoshop watercolor font effectphotoshop watercolor font effectphotoshop watercolor font effect
Download this watercolor font effect and this elegant calligraphy font on Envato Elements.

Love fonts, textures, and effects? Then make sure to check out Envato Elements. One low price gets you access to millions of creative assets. This means you have unlimited access to thousands of fonts, but you also get watercolor textures, Photoshop actions, and more. It's all included. Check it out today!

Envato ElementsEnvato ElementsEnvato Elements
Download watercolor effects, fonts, brushes and more on Envato Elements.

What You Will Need

We're going to use a host of assets in this walkthrough, including watercolor paper textures, Photoshop effects, and more. Consider this a suggested list, but you can also use any similar assets of your choice.

Interested in things like how to create a watercolor painting effect in Photoshop? If you'd like to explore how to make a photo look like watercolor in Photoshop, stay tuned.

Premio Watercolor Photoshop ActionPremio Watercolor Photoshop ActionPremio Watercolor Photoshop Action
This watercolor Photoshop action can transform your photos, giving them a watercolor look.

We're going to focus on watercolor filter Photoshop effects for text. However, there are some specific photo-to-watercolor Photoshop effects later in this walkthrough. We'll even show you where to get started if you'd like to learn how to make a watercolor brush in Photoshop.

But for now, let's begin with the basics of creating a font that looks like watercolor in Photoshop.

1. How to Create a Watercolor Font Photoshop Effect From Scratch

Let's begin with creating a watercolor font effect, from scratch, in Adobe Photoshop. It takes some Photoshop know-how, but it's doesn't take all that many steps. 

You can use any font you like for this demonstration. I'll be using this script font from Envato Elements, but you could use a serif, sans serif, or any type of font you prefer! The concept works for almost all fonts.

Chamelia ScriptChamelia ScriptChamelia Script
Download this watercolor hand lettering font on Envato Elements.

Step 1

Begin in Adobe Photoshop. Create a New Document, and use the Type Tool to create some text. Again, I'm using the Chamelia font. Move and reposition your type using the Move Tool.

Here's an example you could try to emulate. Not sure how to change the font or the font size? Open the Character panel, by going to Window > Character. This panel can help you further customize your type.

photoshop type toolphotoshop type toolphotoshop type tool

Step 2

Next, let's open up our watercolor texture. I'm using this watercolor texture from Envato Elements. 

Colorful Watercolor texture backgroundsColorful Watercolor texture backgroundsColorful Watercolor texture backgrounds
This beautiful set of watercolor texture backgrounds includes 30 high-resolution textures.

When we open up the watercolor texture, Photoshop will switch to this new document. First, go to Select > All to select the entire image. Then, go to Edit > Copy to copy it. 

Once you've done so, go back to our original document. Go to Edit > Paste and Photoshop will paste our watercolor texture on a new layer, above our text. 

Don't see your layers? Go to Window > Layers to open up your Layers panel.

photoshop new layer pastephotoshop new layer pastephotoshop new layer paste

Step 3

Make sure your Layers panel is open. Our watercolor texture layer needs to be on top of our text layer. 

Then, with the watercolor texture layer selected, right-click on PC or Control-click on Mac. From the resulting menu, select Create Clipping Mask.

This makes the watercolor texture only visible in the space occupied by the text. We can move and reposition the text any way we want. It won't be visible outside of our text now.

photoshop clipping maskphotoshop clipping maskphotoshop clipping mask

Step 4

To finish up, try pasting a watercolor texture onto your background too. I tried this watercolor brush stroke from Envato Elements. This is the same process of copying and pasting as before, only without the Clipping Mask.

You can do this with more type too. Try repeating this process with even more text.

photoshop watercolor effectphotoshop watercolor effectphotoshop watercolor effect

2. How to Use a Watercolor Photoshop Effect

Next, let's try creating a watercolor font look using a Photoshop effect. This is different from a Photoshop action; all we'll need to do is add our type, and the effect is done! Here's the watercolor effect we'll try out in this demo:

Watercolor Scene Text MockupsWatercolor Scene Text MockupsWatercolor Scene Text Mockups
You can download this watercolor brush Photoshop effect on Envato Elements.

And let's try the effect with this modern calligraphy font. It has lovely brushstrokes that will lend themselves well to a watercolor look and feel.

Calligraphy FontCalligraphy FontCalligraphy Font
Download this calligraphy watercolor font on Envato Elements.

Step 1

Begin by opening up the watercolor effect template in Adobe Photoshop. Then, open your Layers panel by going to Window > Layers.

We have a bunch of folders here we can sort through. In this case, click on the folder called Text 1. Inside of it, we have a Smart Object

Double-click on the thumbnail of this Smart Object layer. 

photoshop text effect photoshop text effect photoshop text effect

Step 2

Then, Photoshop takes us inside this Smart Object. Toggle visibility off on any of the existing layers, unless you want them to remain visible.

Use the Type Tool to add some new text to our Smart Object. In this demo, we'll use the Sweet Pattern font. You can add as little or as much text as you'd like.

Once you're happy with your text, Save this document by going to File > Save.

watercolor smart objectwatercolor smart objectwatercolor smart object

Step 3

Once you've saved your work within the Smart Object, go back to the template document. Photoshop has updated the content here for us. Simple, right?

Now your custom text has a watercolor font effect applied.

photoshop watercolor textphotoshop watercolor textphotoshop watercolor text

3. How to Use a Watercolor Effect in Adobe Illustrator

We can also work with watercolor font effects in Adobe Illustrator. Let's try out this easy-to-use vector watercolor effect. It will also work with any font we'd like to try.

AquaLab - Vector Watercolor EffectAquaLab - Vector Watercolor EffectAquaLab - Vector Watercolor Effect
Download this watercolor font effect for Adobe Illustrator on Envato Elements.

Let's try out another font, too. This time, we'll use this modern calligraphy font called Butterie. Again, hand-drawn fonts and script fonts tend to lend themselves well to a watercolor aesthetic. 

Calligraphy FontCalligraphy FontCalligraphy Font
This watercolor calligraphy font is available for download on Envato Elements.

Step 1

Begin by creating a new document in Adobe Illustrator. 

Then, open up the Graphic Styles panel by going to Window > Graphic Styles

With the Graphic Styles panel open, click on the menu icon, at the top right-hand side. From this list, select Open Graphic Style Library > Other Library. Then, choose watercolor.ai, the style included in our Illustrator Watercolor effect.

This opens up a watercolor Graphic Style panel with multiple textures we can choose from, as shown below.

watercolor vector effectwatercolor vector effectwatercolor vector effect

Step 2

Next, use the Type Tool to create some text.

To change the font and font size, use the Character panel. You can find it via Window > Character. In this example, we've used the calligraphy font Butterie at 230 points.

illustrator calligraphy fontillustrator calligraphy fontillustrator calligraphy font

Step 3

Use the Selection Tool to make sure your text is selected.

Then, return to our watercolor Graphic Style panel. Choose one of the colorful textures supplied here, and Illustrator will apply it to your text for you. Here is an example of what this looks like. Pretty, right?

Once you're happy with your selection, you can go to Object > Rasterize to rasterize your work.

illustrator watercolor effectillustrator watercolor effectillustrator watercolor effect

Check Out These Watercolor-Friendly Fonts

Now that we've looked at some watercolor font Photoshop and Illustrator techniques, let's check out some stylish fonts you could try. These fonts would be perfect for watercolor paper textures, Photoshop actions, watercolor templates, and more. 

All of these fonts are included, for one price, on Envato Elements. When you sign up, you get to download them all with unlimited downloads. It's an awesome bargain. 

Check out these stylish brush, calligraphy, and textured fonts.

1. The Soulmate: Brush Script

The Soulmate - Brush ScriptThe Soulmate - Brush ScriptThe Soulmate - Brush Script

This stylish brush font would look awesome with a watercolor texture effect over it. Try it in solid colors too. It has such interesting texture.

2. Font Brush

Font Brush - Brush FontFont Brush - Brush FontFont Brush - Brush Font

Here is a chunkier brush font. Check out the preview here with a gold overlay. It would look just as good with a watercolor overlay. You can apply these techniques to other textures too.

3. Hands Brush: Strong Urban Brush

Hands Brush - Strong Urban BrushHands Brush - Strong Urban BrushHands Brush - Strong Urban Brush

Don't these brushstrokes have interesting contrast? We really see the tip get smaller where the strokes start and finish. Imagine this one with added texture. 

4. Dirty Brush Watercolor Writing Font

Dirty BrushDirty BrushDirty Brush

This brush font has so much amazing texture. All of the little details really help make these brushstrokes look realistic. Imagine it with watercolor applied to it. 

5. Justin Brush Watercolor Cursive Font

Justin BrushJustin BrushJustin Brush

Here is a fun, cursive font that you can try out with watercolor text effects. It has a fun, ink vibe even before you take it into Photoshop.

6. Aidercy Brush Calligraphy Watercolor Font

Aidercy BrushAidercy BrushAidercy Brush

Isn't this brush calligraphy font stylish and elegant? It already has organic edges that help make it look like ink. A watercolor texture could push this even further. 

7. Amazing Watercolor Calligraphy Font (Handwritten Brush)

Amazing - Handwritten Brush FontAmazing - Handwritten Brush FontAmazing - Handwritten Brush Font

Here is another awesome brush font with natural variations in the strokes. This one has a lot of energy; it looks as if the strokes were drawn quickly, doesn't it?

8. Rouged Brush Watercolor Hand Lettering Font

Rouged BrushRouged BrushRouged Brush

A rough edge can really push a brush font further. Check out this stylish brush font. It could be a wonderful choice for adding additional texture, like watercolor effects.

9. Gradies Brush (Script Brush Font)

Gradies BrushGradies BrushGradies Brush

Prefer a thicker stroke with contrast? This font definitely has the "thick thin" aesthetic that we often see in hand lettering. Try this out in different colors and textures. 

10. Rustic Brush Handwriting Script Font

Rustic BrushRustic BrushRustic Brush

This brush script font has a lot of signature style. Try it in darker colors to simulate ink, or try it in vibrant, watercolor textures for an entirely different look.

11. Diamonds Brush

Diamonds BrushDiamonds BrushDiamonds Brush

This script font has thinner strokes, but plenty of texture to play off. Doesn't it look good in gold? Imagine this one with pretty watercolor textures and varying opacity.

12. Rawk Brush All Caps Handwriting Font

Rawk BrushRawk BrushRawk Brush

Brush fonts come in all caps too, just like this trendy brush font. Notice how we can simulate different paints here. In solids, it rather seems like a more opaque paint. 

13. Hugehito Brush Script Font

Hugehito BrushHugehito BrushHugehito Brush

This handwritten font has some calligraphic inspiration and some stylish modern inspiration too. This one could look amazing on invitations, branding, and more. 

14. Rasha Brush Font

Rasha Brush FontRasha Brush FontRasha Brush Font

Isn't this a cute font? Try this sugary sweet design in a variety of different watercolor textures and colors. You could place this on a watercolor textured background too.

15. Madelican Calligraphy Font

Madelican CalligraphyMadelican CalligraphyMadelican Calligraphy

If you love the romantic look of a calligraphy font, then try a style like this one. It has alternates and extras to help create an elegant look and feel.

Watercolor SVG Fonts

Looking for a font that looks like watercolor, right out the box? Consider trying out some SVG fonts. These amazing SVG fonts have advanced opacity and can bring a whole new level to your digital watercolor work. Take a look!

1. Hello Friday: SVG Watercolor Alphabet Font

Hello Friday - Watercolor SVG FontHello Friday - Watercolor SVG FontHello Friday - Watercolor SVG Font

Isn't this SVG font cute? It has all of this wonderful variation in opacity that makes it look real. Jump in and try this font out for yourself. 

2. Spring Rain SVG Watercolor Alphabet Font

SpringRain SVG watercolor brush fontSpringRain SVG watercolor brush fontSpringRain SVG watercolor brush font

This font download includes both an SVG font version and a solid version, so you can use it any way you prefer. Try out the beautiful, natural opacity here. It's so pretty.

3. Pastelle SVG Watercolor Effect Font

Pastelle SVG FontPastelle SVG FontPastelle SVG Font

Isn't this font charming? We get a lot of natural opacity here in the brushstrokes, and being an SVG font, it's easy to experiment with these letters. 

4. Bersihkan: Watercolor Cursive Font Signature SVG

Bersihkan - Watercolor Signature SVGBersihkan - Watercolor Signature SVGBersihkan - Watercolor Signature SVG

We really get the handwriting look and feel with this SVG font. Download this watercolor font today and start experimenting with these hand-drawn letters. 

Watercolor Font Effects to Download Now

Looking for even more watercolor text effects? Check out these stylish choices. We've got options for both Adobe Photoshop and Adobe Illustrator, so choose your favorites. Whether you prefer actions or smart objects, there's something for everyone.

1. Watercolor Effect Illustrator: Editable Text Effect

Watercolor - editable text effect, font styleWatercolor - editable text effect, font styleWatercolor - editable text effect, font style

This watercolor text effect is for Adobe Illustrator. It's fully editable and vector, so you can scale it to the size you need. Download and try this effect today.

2. Watercolor Font Photoshop Effect

Water Color EffectsWater Color EffectsWater Color Effects

Prefer working in Photoshop? This Photoshop effect uses Smart Objects, just like the ones we tried out in this tutorial. Simply add your content and enjoy the results. 

3. Watercolor Painting Photoshop Effect

Watercolor Painting - Photoshop ActionWatercolor Painting - Photoshop ActionWatercolor Painting - Photoshop Action

This watercolor effect Photoshop action is easy to use. Add your content, open your Actions, and then click play to have Photoshop create a stylish look for you.

4. Watercolor Effect Font for Illustrator

Watercolor for IllustratorWatercolor for IllustratorWatercolor for Illustrator

Here is another stylish set of effects for Adobe Illustrator. This is a great choice if this is your preferred software and you're looking to start with vector art.

5. Watercolor Writing Font Effects for Photoshop

5 Watercolor Text or Shape Effect Templates5 Watercolor Text or Shape Effect Templates5 Watercolor Text or Shape Effect Templates

This watercolor Photoshop effect uses smart objects like the ones in this tutorial. Try it with text and shapes to easily create beautiful watercolor designs. 

Watercolor Photoshop Actions and Effects for Photos and More

Looking for an easy way to make a photo look like watercolor in Photoshop? Here are some awesome watercolor effect Photoshop actions and objects to try. There are different styles to choose from here too, so take in the design inspiration and download your favorites.

1. Watercolor Filter Photoshop Effect

Water Color EffectWater Color EffectWater Color Effect

Isn't this a beautiful watercolor style? Place your image and enjoy the artistic results in a snap. It's easy to use, and the outcome is so pretty. Try it with many different photos.

2. Watercolor Photoshop Action (Watercolor Texture Photoshop)

Water Color Painting Photoshop ActionWater Color Painting Photoshop ActionWater Color Painting Photoshop Action

Want to explore how to create a watercolor painting effect in Photoshop? Why not start with a Photoshop action like this one? It creates a beautiful, spattered look from your photos.

3. Real Watercolor Photoshop Action

Watercolor Photoshop ActionWatercolor Photoshop ActionWatercolor Photoshop Action

Prefer a higher level of detail? This watercolor Photoshop action is a popular one, and it's easy to see why. Try it out with portraits, landscapes, and more. 

4. Pen & Watercolor Photoshop Action

Pen & Watercolor Photoshop ActionPen & Watercolor Photoshop ActionPen & Watercolor Photoshop Action

Here is a different style to consider. You get the watercolor look here, but with pen included too. Isn't it a stylish look? What photos would you try in this style?

5. Photo to Watercolor Photoshop Template

Watercolor from Photo TemplateWatercolor from Photo TemplateWatercolor from Photo Template

Check out this trendy look. How about giving your favorite photo this artistic treatment? It's easy to apply this style with this convenient Photoshop effect. 

Watercolor Drawing Photoshop Brushes

Ever wanted to try a watercolor brush on Photoshop for drawing? With a watercolor brush, Photoshop has even more possibilities. Try using these alongside a real watercolor Photoshop action, to add extra details.

Try these wet watercolor brushes; Photoshop makes it easy to simulate the look and texture.

1. Wet Watercolor Brushes Photoshop (15 Brushes)

Watercolor Photoshop BrushesWatercolor Photoshop BrushesWatercolor Photoshop Brushes

You get 15 watercolor brushes to choose from in this watercolor brush Photoshop download. Try them for background work or for painting your subject. 

2. Watercolor Painting Photoshop Brush Set

Watercolor Photoshop Brush SetWatercolor Photoshop Brush SetWatercolor Photoshop Brush Set

Looking for an even bigger set? Check out this collection of watercolor drawing Photoshop brushes. There are 48 brushes included, so there's a lot to experiment with.

3. Watercolor Brushes (Watercolor Drawing Photoshop)

Watercolor BrushesWatercolor BrushesWatercolor Brushes

Aren't these demo illustrations cute as a button? Create cute watercolor artwork with this giant set of 55 watercolor brushes for Photoshop.

Looking for a Watercolor Photoshop Tutorial?

Learn how to use your watercolor brush in Photoshop, here on Envato Tuts+. Ever wanted to learn how to make a watercolor brush in Photoshop? We've even got a watercolor Photoshop tutorial on making brushes of your own (and Illustrator too!).

Learn some new watercolor drawing Photoshop or Illustrator techniques today:

Which Are Your Favorite Watercolor Effects?

What would you create with watercolor effects? Which font do you think is the perfect watercolor font for your project? There are so many cool options out there, and so many different techniques to try!

Remember, you can download all of the assets we looked at on Envato Elements, for one low price. One fee, and you get access to a giant library of brushes, Photoshop effects, templates, fonts, and much more. This is with unlimited downloads, so you can download as many as you want. It's an awesome resource. Sign up today!

Want to learn more about watercolor actions, watercolor text effects, and all things watercolor? Check out these free tutorials from Envato Tuts+:

No comments:

Post a Comment