“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. Let’s get it started!”Alvaro Guzman

Here is a link to the written version of the tutorial Create a Watercolor-Themed Website Design with Photoshop and the video version is below.

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. Let’s get it started!

Final Image Preview

Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.

Tutorial Details

• Program: Adobe Photoshop CS4
• Difficulty: Intermediate – Advanced
• Estimated Completion Time: 4 hours

Video Tutorial

Our video editor Gavin Steele has created this video tutorial to compliment this text + image tutorial.

Before Getting Started

This tutorial should not be followed as a step by step guide, many of the steps are descriptions of the creative process involved on the making of this particular design style. Even though this isn’t a basic tutorial, it can be easily followed by any level of Photoshop user, but I’ll skip the explanation of very basic instructions like adding a Guide or creating a Layer mask.

As a full time web designer I have experience dealing with clients which need a design finished in a matter of days or even hours, and when you’re running out of time every minute is precious gold, so I’ll try to give you some time saving tips that will come in handy later.

Not all designers knows CSS, if you’re one of them you must know from the very beginning that you’re designing something that will be sliced and put into pieces; repeating backgrounds, text layers, and large image backgrounds must be perfectly placed into the design to avoid undesired changes.

Imagine What You Want to Achieve

It’s a good practice to start with a sketch or a wireframe in order to have an idea of where to put the elements in the canvas. Here is my rough draft:

For this design I’ll go for a fixed width and center aligned elements. Let’s start designing!

Step 1 – Setting Up the Template

We will download a PSD template from 960 Grid System, open the 12 columns template. This isn’t mandatory, you can start creating a 960px width document and draw some guides on it, but downloading the template will save a couple of minutes. Open it and Save it with any name you want.

You’ll need to expand the image’s width in order to see how your design looks on wider resolutions, for this go to Image > Canvas size and set the width value to 1420 pixels, from the center to the sides. I’m putting all the template’s built-in layers into a folder named "Template."

Step 2 – Main Repeating Background

Find a good paper texture, I’m using this one. This image will repeat all across the page background but it needs some previous editing. Select a square from the paper texture using the Rectangular Marquee Tool, Copy the area and paste it into a new document (You can chose Clipboard from the Preset dropdown). Then, go to Filter > Other > Offset and there change the Horizontal and Vertical values in order to put the borders’ offset close to the center. Next using the Clone Tool fix the hard lines in the middle. Once you have finished the cloning, Select All (Command + A) and copy the edited image on the clipboard.

Step 3 – Set up the Repeating Background

Paste the piece of paper and paste it into the main document. Using the Free Transform Controls paste the right side of the image over the middle Guide and the left side over the first Guide from the left and the Top border matching the top of the document.

Once you’ve perfectly place the first piece of paper, duplicate it and place it to the right, this way you’ll be covering the actual 960px area. Then duplicate the Paper pieces twice to the left and right of the 960px bounds in order to cover the entire canvas surface, then grab the 4 paper layers and duplicate them vertically and place them below the existing ones, do it as many times as needed until you cover all the canvas. Finally put all the Paper layers into a folder named "Background Texture," and if you want it for easier manipulation duplicate it and Merge the Group then hide the original folder.

Step 4 – Header Background

Now let’s add the header’s background, for this I’m using this image of a mountain landscape. Using the Marquee Tool select a wide portion of the image and paste it into the main document and name the layer something like "Landscape."

Now we will give this picture a fake HDR style, that will make it look more like a painting than a photography. Duplicate it and hit Command + I to invert the colors, set the Saturation to -100 in the Hue/Saturation panel (Command + U) and then change its Blending Mode to Overlay. Finally Select both layers "Landscape" and "Landscape copy" into one.

Step 5 – Using the Art History Brush

Now we will use the Art History Brush to make our picture look like a painting, select the Art History Brush by Clicking and holding over the History Brush Tool (Y) in the Tools Panel. To make this wonderful feature work, you will need to create a Snapshot first to work with, for this go to Window > History to show the History Panel, and click over the New Snapshot button at the bottom. Then in the Options Panel, chose any irregular Brush Tip (I’m using a 36px Chalk tip) set Mode to Normal, Opacity to 25% Style Tight Short, Area 25px and Tolerance 0%. Then paint over the "Landscape" layer, you will see how the image turns into a painting fairly easily.

After that, you just need to change the Opacity, Area and Brush Tip values according your needs, e.g. I’m using a larger Brush Tip and increasing its area to paint over the borders.

Step 6 – Watercolor Layer Mask

Create a Layer Mask > Reveal All to the "Landscape" layer, now we will try to merge the image better with the repeating background using some watercolor Brushes. I’m using this Watercolor brushes set by mcbadshoes. Keep this brush set handy since we will use it during the entire process.

Grab any of the brushes, set the foreground color to Black and paint some marks directly over the Layer Mask, which is important. These brushes have different opacities so you can play with them; in case you’re using another brush set, you must change the Brush Opacity and Flow values every time you paint a mark. The idea of this step is to melt down the image’s borders with the paper background, try to place your watercolor marks all across the border with some spots inside the image.

It doesn’t matter if the landscape is out of the template Guides, you can slice the header as a large background image when coding.

Step 7 – Add a Top Gradient

Just to make the coding a little bit more difficult (just kidding) we will add a vertical Gradient Fill Layer (#96AFCE – #FFFFFF) and set its Blend Mode to Linear Burn.

Step 8 – Content Background

Using the Rounded Rectangle Tool, set the Corner Radius to 15px in the Options panel and draw a rectangle from the second Guide from the left to the penultimate Guide at the Right side. I often use those guides just in case I need to add a drop shadow or some other effect to the background later. In this case we will leave the Rounded Rectangle as is, just changing its Fill value to 35% and adding a 1px Inside Stroke style. Changing the Fill Opacity makes the Layer Effects retain plenty of color so the stroke look really good and you can still allow some watercolor background through the fill. You can name this layer "Content Bg."

It’s important to set every stroke effect Inside the object, adding a stroke outside will increase the element’s dimension and we don’t want that.

Step 9 – Think Like a Coder

Even our translucent background looks pretty good, coding it will be a little bit hard, yet not impossible. It’s easier to code a plain color background than a transparent one, so duplicate the Rounded Rectangle and place the copy above it. Set the Fill to 100% again and hide the Stroke Style. Now add Layer Mask > Hide All to it and fill it with a Linear Black to White gradient in order to hide the top of the new Rounded Rectangle. You can help yourself with a couple of extra Horizontal Guides.

How does it work? This content must be vertically scrollable, so the repeating white background should be easy to expand to the bottom; let’s try it!. Grab the Direct Selection Tool (A) and select the bottom points of the Vector Rectangle, then using the Cursors move the points a few pixels down, it should work fine.

Step 10 – Pages Navigation

Using the Rounded Rectangle Tool, add a blue (#3F5060) rectangle at the top of the design, set its Fill value to 50% and add a 1px blue (#3F5060) Stroke layer style to it. Using the Type Tool, type the pages over the navigation background layer, I’m using "Futura Std" typeface this time, but feel free to change it.

Next, paint a small white watercolor mark behind the text as a hover effect and change the selected word’s color into dark blue (#223A54).

Step 11 – Melting Backgrounds

Next rasterize the "Content Bg" layer or convert it into a Smart Object, add a Layer Mask > Reveal All to it and using a black, soft Brush paint some spots over the Layer Mask. This process will melt down the "Content Bg" with the Watercolor landscape giving the design a polished look.

Step 12 – Page Title

Let’s add the Page Title. I’m using the "Futura Std" Typeface. I’m using these colors for the type: #F2F6FC and #E1EDFF. Now for the background, paint a single blue (#112C37) watercolor mark into a layer below the logo layers and change its Blend Mode to Soft Light. It’s a good idea to organize our layers into folders, so we will put all the involved layers into a folder named "Logo."

Step 13 – More Watercolor Marks

In order to increase the visual impact of the background, add more watercolor marks using several colors, place them all across the top border just above the "Landscape" layer. Then change its Blending Mode to Overlay. Finally add a big sky blue (#51D3D3) watercolor mark into a new layer just above "Landscape" and below "Content B.g" Then change its Blend Mode to Overlay as well.

Step 14 – How About Adding an Actual Paintbrush?

Using real life objects in web design is very trendy, we will add an actual paint brush image to our design. Open this picture extract a part of the paint brush and paste it into the main design across the header with its tip close to the watercolor mark created in the previous step. You can use a Layer Mask and a little, soft, black brush to feather the brush tip.

Continue Learning…