The watercolor style in graphic design has recently become fashionable. Web sites and designers often use this style.
In this lesson, you will learn how to use the Archive Art Brush, create a unique background image of the header, and more. Let’s start!
Here is what we will create:
(click on image to enlarge)
Materials for the lesson:
960 Grid System
Paper texture
Landscape
Brushes watercolor
Brush
Icons
Icon pack
To begin with, draw a sketch of what you will do, then to have an idea of where to put the elements in the template. Here is my sketch:
This template will be our fixed width with the alignment of elements in the center. Let’s start the design!
Step 1 – Template Setup
Download the PSD template from the 960 Grid System (This is optional, you can create a document with a width of 960px and just draw a few guides), open the template, create a new group and place all the layers there. After you need to increase the width of the image to see how your project looks at wider resolutions, to do this, go to “Image> Canvas size“and increase the width to 1420 pixels.
Step 2 – Texture Editing
Find the paper texture, or take it from the archive. This image will be the background of the page, but it needs some editing. Copy paper texture and paste into new document.
Then go to Filter> Other> Offset (Filter> Other> Shift) and move the image so that its borders are centered. Further using the tool Clone tool
(Tool “Stamp”) remove the border. After you have finished cloning, select everything (Ctrl + A) and paste a copy of the edited image into our template.
Step 3 – Setting the Background
Using the tool “Free transform“(Free Transform) transform the layer so that it covers about half of the pattern. After you place the first layer with paper, duplicate it and place it near the first layer, so you will cover virtually 960px areas. Then duplicate these layers twice to place them to the left and right of the border to cover the entire surface of the canvas, then merge these 4 layers, then duplicate them vertically and place them below the existing ones, do this as many times as necessary until you cover all Finally, create the Background group and place all the texture layers there.
Step 4 – Background for Heder
Now let’s add a background for the header. For this, I use the image of a mountain landscape. Using Marquee tool
(Selection tool) select the wide part of the image and paste it into the main document and name the layer something like “Landscape”. Now we will make the image more similar to the picture than to the photo.
Duplicate the layer and click Ctrl + I to invert colors then go to panel Hue / Saturation (Ctrl + U) and reduce the Saturation to -100, then change its blending mode to Overlay. Finally, merge both the “Landscape” and “Landscape Copy” layers into one.
Step 5 – Use the Archive Art Brush
Now we will use “Archival art brush“to make our image look like a real picture, select Archival art brush (Y) in the Toolbar. To make this image special, the first thing you need to do is take a snapshot of the work. To do this, go to Window> History (Window> History) to view group history, and click on the “New shot“at the bottom. Then in the Options panel, select the brush (I use 36px Chalk tip), set” Mode: Normal “, and” Opacity: 25% “,” Style: Tight Short “, Size: 25px and Tolerance: 0%. Now easy With a brush stroke, turn a simple image into a picture. After that, play around with the settings and process the edges of the image to paint the border.
Step 6 – Watercolor Layer Mask
Create Layer mask
for the “Landscape” layer, now we will try to make the image blend better with the background. To do this, use some watercolor brushes. I use watercolor brushes.
Download this set of brushes, as we will use them throughout the process. Take any brush, set the foreground color to black and click a few times. These brushes have different opacities, so you can play with them, in case you use other brushes you have to change the opacity of the brush and the flow value each time you paint. Try to place watercolor stains all over the border and in some places inside the image.
Step 7 – Adding a Gradient
To make coding a little harder (just kidding) we will add a vertical gradient (# 96AFCE – # FFFFFF). Mode for a layer with a gradient Linear burn (linear dimmer).
Step 8 – Content
Using Rounded rectangle tool
(Rectangle with rounded corners) (U), radius – 15px, draw a rectangle starting from the second guide on the left and ending at the penultimate guide on the right. Fill (reduce) to 35% and add a 1px Stroke (# FFFFFF) “Position: Inside” to this layer. You can name this layer “Content”.
Step 9 – Modifying the Content Block
Duplicate the “Content” layer and place a copy above it. Set Fill to 100% and hide the stroke. Now add a layer mask and fill it with a Linear gradient (# 000000 – #FFFFFF).
Step 10 – Navigation
Using Rounded rectangle tool (Rounded Rectangle) (U), add a blue (# 3F5060) rectangle at the top of the template, set its Fill value to 50% and add a layer style to it. Stroke 1px blue (# 3F5060). Take the tool Text 
,font “Futura Std” (but you can change it).
Step 11. Next, rasterize the “Content” layer or convert it into a smart object, add a layer mask to it and, using a soft black brush, hide the upper part of the block as shown in the picture.
Step 12 – Logo
Let’s add a site logo. I used the font “Futura Std”, colors: # F2F6FC and # E1EDFF. Now take any brush from the set (which we downloaded earlier), color (# 112C37) and click once on a new layer, place this layer under the logo layer and change its blending mode to Soft light (Soft light). Create a new group “Logo” and place these two layers there.
Step 13. In order to increase the visual impact of the background, add more watercolor strokes of different colors, place them all over the top border just above the “Landscape” layer. Then change its blending mode to Overlay (overlap). Finally, add a big blue sky (# 51D3D3) on a new layer with any brush, paint the sky as in the image below, and place this layer right above the “Landscape” layer and below the “Content” layer. Then change the blending mode to Overlay (Overlap).
Step 14 – Adding a Brush
Using real life objects in web design is very fashionable; we will add a real brush image to our project. Open the image and remove a part of the brush and paste it into the template.
Step 15 – Add Realistic Shadow
Duplicate the brush layer, name the copy “Shadow” and place it under the original, and then go to the panel Hue / Saturation (Hue / Saturation) and change its Saturation to -100. Now let’s go to Filter> Blur> Gaussian Blur (Filter> Blur> Gaussian Blur) radius 4px, then change its opacity to 50%.
Step 16. Lighten and Dim
I always use tools Dodge 
(Lightening) and Burn
(Fade) after removing and adding shadow.
Step 17 – Block “about us”
Add text, I used the Futura Std font for headings and Tahoma (11px, Sharpness: No) for the main text, and the gray line as the separator (use the tool Line
, to do this). Let’s add a short text field. Draw a Rounded Rectangle with a radius of 15px and fill it with green (# 434726), then apply the Stroke style with the same color and change its value Fill (Fill) up to 50%. Next, convert the layer to smart object and add layer mask to him. Use a large, black, soft brush to hide some parts of the background, as in step 11. Finally, you can add additional details, such as the watercolor mark under the “About Us” text layer, as shown in the image below.
Step 18 – Some Details
This is an absolutely optional step, you can add some layer styles for the logo and title just to increase the contrast between them and the background. I’ll just add some shadow this time. Also, I don’t like the way the brush looks behind the navigation bar, so I’ll move it forward, but you can follow your instincts and do as you like.
Step 19 – Main Ajax Banner
It is often necessary to show more than one piece of information on the site, so we will create an Ajax slider. Add a large image as an active banner and place it around eight columns of the template guides.
Below are four to five square thumbnails of the rest of the banners. Finally add a blue (# 5D8CB6) triangle (you can do this with Polygon tool (Polygon tool)), which indicates the active banner.
Tip: Use real photos and not just image fillers.
Step 20 – Banner Text
Some existing libraries include the option to add some text on the banner, in which case I will use Futura Std fonts for headings and Tahoma 11px for content. Use a white rectangle, Fill (Fill) 50% and 1px white stroke as background.
Step 21 – Sidebar Background
And so, we have already finished the most difficult part of the process, but there are still some important areas on the left, such as the sidebar. We will start with a simple background using Rounded Rectangle (radius 5 pixels) draw a white rectangle. Change the Fill layer to 25% and add a 1px Stroke (#FFFFFF).
Step 22 – Background Messages
Add some watercolor marks to the new layer, above the background content. Any color matching background.
Step 23 – Messages
Now we will add one message. Use Futura Std fonts for headings and Tahoma for a brief description and 1px for the height of the line as a separator. After on the new layer, draw one blue sign using a watercolor brush for the comment background, “Number of comments” write using Futura and the word “comments” with Tahoma.
Step 24 – RSS Icon
It’s time to add content to the sidebar, and we’ll start using the RSS button. Download icons. Open the RSS icon, copy and paste it into the layout, add the appropriate text RSS: email, subscription form, number of readers and 1px line height as a separator.
Step 25 – Search
Add watercolor strokes as background. Above the background, draw a rectangle with rounded corners (radius 5 pixels), color: # 1D1D1D. Add Stroke 1px (#FFFFFF), Fill value decrease to 50%. Using tool Text and the Tahoma font write the word “search.” Finally download this Icon Pack and insert the magnifying glass icon as a search button. Put it all in a group called “Search” or something like that and go to the next step.
Step 26 – Announcements
The standard format for creative advertising is 125 by 125 pixels, so we will add a few blocks in the sidebar. Tip: To save time, you can create a 125 by 125 pixel document with a nice advertising placeholder design, and then convert it into a smart object and save it somewhere. You can use it for many designs without having to redesign it every time. If you have enough time, here is a list with most of the standard ad sizes (through the Google ad sense). Consider working on a PSD with some placeholders for them?
Step 27 – Twitter
As a big fan of Twitter, I decided to put a prominent link just below the ads. Add some watercolor background, copy / paste the Twitter icon from the library (discussed in Step 24). Enter the text, “Follow Us” or something like that. Put all these layers in a group called “Twitter”.
Step 28 – Sidebar Tabs
Using rounded rectangle , draw a white rectangle with 1px gray (# 979797) Stroke, just below the Twitter box. Now draw three smaller rectangles behind them, they will be tabs. Draw a small white rectangle between one of the tabs and a background for the active tab.
Step 29 – Add Text on Tabs
Add tab names, I used the Futura font. For the content I will add a couple of recent posts on the first tab.
Step 30 – Footer
This footer will be very simple, we just draw a few random watercolor signs of different colors, then repeat the process of steps 8 – 9, make a couple of rounded rectangles. Finally, it’s time to add the footer text, a small navigation bar and copyright information is perfect for it, plus I added a 1px line as a separator. You can design the footer you want.
Conclusion
Hope you enjoyed it! Of course, this lesson is just a small example of what you can do with this style in web design, feel free to experiment with technology and surprise us with something new!
