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.

What’s in the Pack?

With the grunge style in full swing, you can never have enough grungy resources at hand. In this pack you’ll find textured brushes in many different styles such as denim, canvas, concrete, wood, scratches, speckles and several random dirty brushes, most of which are in a soft, subtle form.

There are a total of 20 brushes in the pack, several of each type of texture. The brushes range in sizes from 543px to 1379px in resolution although most are around 600-800px in size. Each brush either fades out on the edges or was carefully cut as to not leave straight lines or noticeable cut-off points.

These brushes are completely free! Feel free to use them in personal or commercial projects without linking back or giving credit. Just don’t be “that guy” by stealing them and offering them on your site or linking directly to the download.

A Few Examples…

Using Denim 3 at two different angles and varying opacities.

Using the Canvas 1 brush to add a dirty feel to the background and worn feel to the text.

Using a combination of two random brushes, one to add a grungy background and another to chip away at the text.

These are just a few quick examples, there are plenty more brushes in the pack.

Download the Brushes

Download Grunge Brushes | .zip Format | 1.82 MB

You know how in just about every Photoshop tutorial one of the first steps is to go and download a set of brushes? Well, it’s time to change that. Making your very own custom Photoshop brushes is a simple process that we can all take advantage of. In this tutorial we will focus on making a subtle textured brush, but the technique is the same for any type of brush that you’re after.

Subtle Textured Brush Tutorial

Subtle or soft textured brushes are great for adding a little character to designs. While there are probably a hundred different ways to make subtle textured brushes, the technique that I’ll present here is pretty quick and easy.

Step 1:

You’ll need to start by finding the perfect image. Perfect is a pretty relative term isn’t it? Look for something that represents the style that you’re after. Could be an aged look, something with some cracks or maybe a fabric type texture. In this tutorial we will hunt down a canvas texture with a little grunge appeal and work off of that.

Ahh, this one should do the trick:

Note: If you’re following along with this same image you’ll notice that the dimensions are 1575 x 2200 px, much larger than the screenshot images.

Step 2:

Open up your image in Photoshop and Image>Adjustments>Desaturate it. You should have something that resembles this:

Step 3:

So far so good. Now we need to play with the levels of the image. Go to Image>Adjustments>Levels and start sliding around the input levels to brighten the image. You’ll want the area that you wish to use for the brush to show only slight characteristics of its original self. Here is what I ended up with in this particular example:

Step 4:

Now, grab the gradient tool and place a radial gradient from transparent to white over the part of the image that you wish to turn into a brush. If you want more of a square brush, use the linear gradient to peel away what you don’t need. The idea is to eliminate the parts of the image that you won’t be using. Don’t worry if you don’t get it right the first time, just hit Ctrl (Cmd) + Z to start over.

Note: It may be difficult to see the canvas texture in the screenshot below, being a subtle brush it is very faint. If you don’t see anything, try playing around with the contrast and brightness settings on your monitor.

Step 5:

Almost done! Take your lasso tool and outline the good stuff. Once you’re satisfied, place the selection on a new layer (right-click>layer via copy).

Step Last:

Let’s turn this into a brush. With your new layer selected, go to Select>All from the menu bar. A dotted line outlining the project will indicate that it is selected. Then choose Edit>Define Brush Preset… and name your new brush. Congratulations, you have just successfully made a subtle textured brush in Photoshop.

Access your new brush by grabbing the brush tool or eraser tool and then clicking the drop-down option for the brushes. Your new brush should be the last one at the bottom of the collection.

Let’s put this baby to work. The examples below were made using a brush following the exact steps above.

Background Use:

You can use it to add an instant subtle grunge texture to backgrounds.

Text Use:

Here I’ve used the brush as an eraser to chip away at the text and blend it into the background.

Some Tips

Brushes are a great resource for adding subtle effects and textures to graphic design work. Of course you can use Photoshop brushes however you wish, but here are a few tips to help you get the most out of them.

• If the brush is too subtle, use it twice in the same spot
• Change the angle of the brush when using it multiple times to prevent repeat effects
• Use different opacity levels for gradual effects
• Try using the brush with the eraser tool to chip away at layers
• Choose images with lots of little details and imperfections as a source for your brushes
• Fabric textures, concrete textures and scratched glass work well for brush making

So if you didn’t already know how, you can now go out there and start making your own custom Photoshop brushes. If you enjoyed the tutorial or have some of your own tips to share, I’d love to hear your thoughts in the comment section. Thanks!

Through the use of brushes and various combinations of often pastel and neutral colors, creating that digital watercolor style in Photoshop can be a fun and rewarding experience. If you’re interested in creating this technique, try following along with one of the many tutorials listed below. To help you gather resources, I’ve also included 15 of some of the best Photoshop watercolor brush sets available, located just below the tutorial roundup. Enjoy!

Photoshop Watercolor Tutorials

In an effort to only bring you the best watercolor tutorials available, I spent quite a bit of time hunting down the collection below. Most of these tutorials will require the use of Photoshop brushes to execute the technique and offer links to the ones used. If you want to change things up a bit and use a different brush, make sure and check out the roundup of PS brush sets below this collection of tutorials.

Super Cool Watercolor Effect In 10 Steps

“Last year I wrote a Photoshop tutorial for PSDTUTS showing how to create a very nice design using watercolor brushes. It was inspired by the work of guys such as Bruno Fujii, Margot Mace, Raphaël of My Dead Pony and Stina Person. This time I will create another effect but it will be using Masks and Watercolor brushesl; it’s inspired by another great digital artist, the master Scott Hansen the mind behind ISO 50 and also some images from the daily inspiration.” - Fabio Sasso

Create a Grungy, Translucent Web Portfolio Design

Not only have watercolor brush strokes become a popular trend in modern web design, but so have advanced layers of transparency (or what is called, translucence). The new Envato design has received a lot of kudos for using this effect, and this tutorial will show you how to create a similar effect, while combining it with other popular web trends.

Transform a Photo into a Chinese Painting

Follow along with this tutorial using Photoshop brushes and images to create a watercolor inspired Chinese painting featuring a Tiger. There are only 8 steps from beginning to end and all links to images and brushes are included.

Creating an Abstract Watercolor Wallpaper

There are plenty of ways to create a Watercolor Effect in Photoshop. Some are very cheesy and you can easily tell that a simple filter has been used. In this tutorial, we will be using Layer Masking. It is one of the most fascinating and powerful Photoshop method, to use layer masks in your designs.

Create a Nature Inspired Painted Background

“When I first saw the Viget Inspire Blog, I was very impressed. The background just grabs and pulls the reader right in. After studying it for a while, I still couldn’t determine if it was made from an actual painting or if it was all created from scratch in Photoshop. Regardless of how it was created, it makes for a great looking design. In this tutorial, I will you show you my own technique for creating this type of background.”

Brilliant Matte Dispersion Effects

In this tutorial, you’ll be taken through, step by step, the creation of some custom brushes, and application of them to a stock image to create a matte dispersion effect.  You’ll learn how to create and save brushes, utilize complementary colors, and manipulate stock images for a visually stunning final result.

Create a Watercolor-Themed Website Design

Watercolor in graphic design has become very trendy the last couple of years, many websites and incredible designers are using this style and taking it to another level. Even knowing the technique is important in this kind of design, is more about creativity and experimentation. You will learn how to use the Art History Brush and combine it with watercolor custom brushes to create a nice background header image and more. Check out the screencast for the tutorial as well.

Watercolor Text

Follow along in this Photoshop tutorial as you learn how to create a watercolor text effect with a watercolor paper background. You’ll learn about a few of the the Brushes palette options and how they can help achieve a realistic watercolor result

Create Cool Watercolor Effects in Photoshop

“Some time ago I wrote an article on my blog listing some fashion-style illustrations from really amazing designers such as Bruno Fujii, Margot Mace, Raphaël of My Dead Pony, Stina Person, and others. The coolest thing in their design work is their use of watercolor effects. So in this tutorial I will show a quick way to simulate that effect using only Photoshop and some brushes.” – Fabio Sasso

Create a Beautiful Vibrant Watercolor Web Layout

Use of watercolor in website can really lighten up your design. In this tutorial you’ll learn how to combine textures in your layout to create a beautiful watercolor layout. You will see how integrating the element of painting in your webpage can make your layout very artistic and creative.

Design A Grungy Floating Island

This tutorial will walk you through how to create a grungy floating island, complete with a watercolor textured background. The tutorial focuses heavily on how layer blending modes can be combined to great effect.

Dynamic Recessed Watercolor Typography

In this tutorial, you’ll learn how to mix vector elements and watercolor effects with text to create a stunning design. It’s a quick process that depends heavily on good choices of images and colors.

Easy Watercolor Painting Effect

In this Photoshop tutorial you’ll learn how to easily make a photo look more like a watercolor painting. This photo effect works best on images where maintaining rich colors and strong contrast is more important than keeping any fine details, since you’ll be losing a lot of detail with this effect.

Design Watercolor Effect Menu

This is a two-part tutorial on how to create an artistic and un-typical CSS list menu as seen on Web Designer Wall. In the first part (this article), you will learn how to design a watercolor effect menu in Photoshop. Then in next tutorial, you will learn how to slice the menu and code in CSS.

Fascinating Watercolor Effect in Photoshop

Watercolor is one of those effects that can be difficult to replicate digitally, but with a little practice and experimentation you’ll find it to be rather fun. This tutorial will be based around creating a really cool watercolor effect, but this technique works just as well when creating paintings in Photoshop.

Photoshop Watercolor Brushes

So you’ve seen the tutorials and maybe completed one or two. Now it’s time to make your own digital watercolor creations. To help you get started with some resources, here is a collection of 15 Photoshop watercolor brush packs.

Watercolor Brushes Vol. 1

A pack of 20 watercolor brushes at a resolution of 1000px wide. You may not use these brushes commercially without the authors permission.

Watercolour Brushes Set 1

A collection of 26 high resolution watercolor brushes at a resolution between 1480px – 2500px. You can find set 2 here.

Hi-Res Watercolor Photoshop Brushes

A collection of 20 high resolution water color Photoshop brushes at a resolution of 2500px. This is set 2 of the collection. Set 1 can be found here.

WaterColor Reloaded

A huge pack of 83 watercolor brushes with a resolution of 700px – 1200px. Compatible with PS7 and up.

Artistic Photoshop Brushes

18 Photoshop watercolor brushes made to imitate watercolor droplets and brushstrokes, globs of paint, ink drops, acrylic brushstrokes and various other artistic media.

Watercolor 2 Brushes Pack

A combination of 25 Photoshop watercolor brushes compatible with PS 7 and up.

Watercolor II

This collection includes 9 watercolor Photoshop bushes created in CS3. The PSD file is included for those who have earlier versions.

Watercolor Splatters

Complete set of 32 high resolution Photoshop splatter brushes. Created with artist-quality watercolor paint on cold press watercolor paper.

Hi Res Watercolor Brushes

A large collection of high resolution watercolor brushes ranging from 900px – 2000px in resolution.

Watercolor Brushes

Realistic collection of 10 Photoshop watercolor brushes.

Watercolor Brushes 2

Large collection of 40 watercolor Photoshop brushes ready to download.

Starwalt Watercolor Brushes

5 watercolor brushes for Photoshop created in CS4.

HQ Watercolor Brushes

Brushes range in size from 400px – 1000px and were originally painted on paper using poster paint.

Free Watercolour Brush Strokes

A collection of 14 brushes in an extremely high resolution ranging from 1597px – 2500px. PSD source files included.

Watercolor Splodges and Drops

A set of 4 high resolution watercolor brush sets (22 for premium members) each characterized by lots of beautiful details including shades, contrasts and enhanced edges.

For those of you have been keeping up with the blog, you’ve probably noticed that I’ve kind of been on a hand-drawn frenzy lately, incorporating the style within several recent posts. Most notably was the use of the doodled matchstick man in the recent post Photoshop Shortcuts – The Fun Way, which I really enjoyed putting together.

To kind of wrap things up as we move on to other avenues around here, I thought that I would go ahead and roundup some rather cool doodle Photoshop brushes. Use them as part of a design, use them to create a cool scene or just use them to play around with when you’re bored. Here are 30+ Scribbles and Doodles Photoshop Brush Sets.

Urban Scrawl Photoshop Brushes

Scribbles and Doodles Brushes

Paisley Doodle Photoshop Brushes

Doodles

Floral Ornament Brushes

Scribble Pack 1: Punk

Boney Doodles

Sketchbook Scribble Brushes

Dirt2 Secret Garden Brushes

Doodles Brushes

Handmade Doodles

Cool Brushes

Random Doodle Brushes

Doodle Photoshop Brushes

Doodle Arrow Brushes

Doodle Photoshop Brushes 5

Swirly Scribbles

Comic Style Brushes

Doodle Garden

Free Cute Doodles Brush Set

Robot Doodle Brushes

Techno Doodles

Doodle Brush Set

Cutsie Vector

Doodle Brush Pack

Hand-drawn Doodle Brushes

Sketchy Circles

From The Sky Brushes

Retro Sryle

Creative Doodles Photoshop Brushes

Bored In Class

Have a Favorite?

While there are 30+ sets in this collection, there are a total of more than 300 brushes to choose from. If you’ve downloaded a set or two and used it, tell me your favorite or send a link to what you’ve created.