Create a Beautiful Vibrant Watercolor Web Layout

Use of watercolor in website can really lighten up your design. In this tutorial we will show you 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.

Let’s see the result first.


Click on the image for bigger version

1. Notebook and Paper Textures (From this post)

2. Watercolor texture

3. 8 Watercolor Texture Pack ( Used Texture #54)

4. Social Icons

Step 1:Using the Texture for Background

Open up a new document by 1200×800. Fill up the background with #eeb679 and Place the texture from the left side. Like following image.

Step 1

Step 2: Fill up the Edge and Overlay Texture

Like most of my PSD layout tutorials, I fill up the edge of the texture with fill color so the layout won’t look awkward in a big screen. It will blend in.

 Step 2

Now we use the watercolor texture as overlay. You change the properties to overlay from the Layer Properties window. Put the watercolor texture over the paper texture.

Step 3: Creating the Navigation.

Type out the navigation. Use the the ruler if you have to. I am using the Designer notes font. Now we need to draw the menu background. Using the default photoshop brush like the following one brush shown in the picture. Choose #beaa95 for the brush color. Draw and stroke the brush so it covers each menu items background.

We are going to add Gradeint Overlay and Pattern Overlay properties to brighten up the menu background. Here are the settings :

Gradient Overlay Colors #13a4dd and #82d4e9

We are using one of the default patterns that comes with photoshop. Here is the setting or Pattern Overlay:

Here is the end result. You can play around with brush tool and draw as you want. Get Creative!

Step 4: Creating the Content Area.

I am using the notebook paper texture for the content, which is modified version of this one. Just use Photoshop’s Magic Eraser Tool to get rid of the white background. I won’t go into details for that. It is fairly simple. Now, place the notebook paper right below the menu. We need to change the color settings a little. Here are the settings:

Using the Rectangular Margeue Tool select the content area as much as you need and then go to Select > Inverse . It will the select the rest of the area beside the content area. Then you can hit delete or go to Edit > Clear . Now move the paper a little below and resize the paper as you want like the following image.

We are not done yet! The next thing we need to do is add the watercolor texture to the paper. From the Watercolor texture pack that we mentioned in the beginning of the post we are going to use the texture#45. Put it right on the top of the paper and set to overlay mode. Now make it clipping mask. You can do that by right clicking on the texture or by going on the Layer >Create Clipping Mask. Here is how it should look like.

Remember since it is a clipping mask you can pretty much move it around as you want to adjust the page.

Next is the featured works section.

I am using Georgia 14pt, italic for the font. For the featured image use any image you like. I just applied Stroke from Layer Style Properties

Step 6: Adding the Footer

For the footer title I am using Designer Notes font, 30pt. Type out text and using the Rectangular Marquee Tool draw a rectangle behind the text on a new layer. Fill it with Black and turn down the opacity to 11%. Here is how it should look like:

Do the same for rest of the footer titles.

Place the icons and type out the text. The icons are watercolored already. They will match with rest of the design.

For the flickr section use small image and apply Stroke again from the Layer Style.

The rest of title and text are easy. Just type out the text and place the icons for bullets. Use whatever icons you like best. For the copyright text I used Century Gothic , italic.

As you can see using the right texture and right setting you can turn any design into colorful, bright and pleasing to look at. Let’s see the whole layout again.

You can download the PSD file, it is organized in the folders. Feel free to use this layout for personal and commercial use.