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.
Step 15 - Add a Realistic Drop Shadow
Duplicate the "Brush" layer, name the copy "Bush shadow" and put it behind the original, then go to the Hue/Saturation panel and change its Lightness value to -100. Now apply a 4px radius Gaussian Blur, next change its Opacity to 50%.
Step 16 - Dodge and Burn
I always leave Dodge and Burn after extracting and placing the shadow.
Step 17 - About Us Box
Start adding the text, I'm using Futura Std for the title, Tahoma (11px, Sharpen: None) for the body text, and a gray Line as a divider (use the Line Tool to draw it).
Let's add a box for the brief text. Draw a 15px radius Rounded Rectangle and fill it with green (#434726), then apply a Stroke Effect with the same color and change its Fill value to 50%. Next convert the Rounded Rectangle into a Smart object and add a Layer Mask > Reveal All to it. Use a big, black, soft brush and paint on the mask in order to hide some parts of the background melting it with the watercolor landscape just like in the Step 11.
Finally you can add further details, like a watercolor mark behind the "About us" Text, as shown at the bottom of the image below.
Step 18 - Some Details
This is absolutely optional step, you can add some layer styles to the logo and the titles, just to increase the contrast between them and the background. I'll keep it simple this time by just adding a really small Drop Shadow. Plus, I didn't like how the paint brush looks behind the navigation bar, so I'll arrange it forward, as that looks better to me, but you can follow your instinct and work this as you prefer.
Step 19 - Main Ajax Banner
Often it's necessary to show more than a single relevant piece of information on the homepage, that's why we'll take hand of Ajax and create an image slider. It's very important to keep in mind that not every design can be coded easily, start doing research through some sites listing ajax libraries to see which one can work good with your design.
In this case we'll add a big image as an active banner placed around eight columns of the template's guides. Below are four to five square thumbnails of the rest of the banners. Finally add a blue (#5D8CB6) triangle (you can draw it by using the Polygon Tool) that points to the active banner.
Tip: Do use real pictures and not only image placeholders.
Banner Text (Optional)
Some existing libraries enable the option of adding some text over the changing banner, in this case I'll use Futura Std Light Condensed for the title and Tahoma 11px for the content. Use a White rectangle, Fill 50% and 1px white stroke as a background.
Step 20 - Sidebar Background
Let's move forward, most of the difficult parts of the process are already finished, but there are still some important areas left, like the sidebar. We will start with a simple background, using the Rounded Rectangle tool (5px radius) draw a white rectangle covering the empty 4 columns at the right side of the main banner.
Notice that I'm separating the sidebar background 20 pixels from the main banner and 20 pixels from the "Content Bg" layer. Change its Fill layer to 25% and add a 1px white Stroke Layer Style. No further editing is necessary since it seems to melt down pretty good with the "Content Bg" layer.
Step 21 - Featured Posts Background
We have plenty of space below the banner area, we'll put some featured posts there. But first let's add some pastel watercolor marks into a new layer obviously above the content background. Any color is fine, but it must be really light, close to white.
Step 22 - A Post
Now we will add a single post. Use Futura Std Condensed Light for the title, Tahoma for the brief and the meta and a 1px height line as a divider, this isn't difficult at all. Following into a new layer draw a single blue mark using a watercolor brush as the comments' background, type the comments number using Futura and the word "comments" with Tahoma.
This is really easy and quick, some tips though:
- For the body text never use Black (#000000) because of difficult readability, you can help yourself by adding some color guides for the text's colors (I'm including them in the source file) or using the Swatches panel, even you can help yourself with some add-on like Kuler.
- Always place your layers into Layer Groups (Folders) or Smart Objects, since they are easier to change and duplicate. We will do it now, duplicate the folder where you put your featured post content (I named it "Post") and duplicate it three times, then place the copies in their respective places following a two column layout using the template guides as reference.
Step 24 - RSS Icon
It's time to add content to the sidebar, and we will start with the RSS button. First download these Social Icons Hand Drawn by TheG-Force. Open the RSS icon, copy and paste it into the design, add the RSS related text: email, feed subscription, number of readers and a 1px height line as a divider.
Step 25 - Search Form
First add some watercolor marks as a background. Above that, draw a Rounded Rectangle (5px radius) filled with this color: #1D1D1D. Add a 1px white Stroke, set its Fill value to 50%; this will be our search input background. Using the Type Tool and Tahoma typeface type searching instructions over the search box. Finally download this Watercolor Icon Pack thanks to Tutorial9 and paste the magnifier icon as a search button. Put all this into a Group named "Search" or something and move on to the next step.
Step 26 - 125 by 125 Ads
The standard format for creative ads is 125 by 125 pixels, so we will add some of those in the sidebar.
Tip: To save time, you can create a 125 by 125 px document and design a nice advertisement placeholder, 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 (via Google's ad sense). Consider working on a PSD with some placeholders for them?.
Step 27 - Twitter
As a huge 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 the Step 24. Type some text related to the little blue bird like "Follow me" or your followers and updates number. Put all these layers into a Group named "Twitter."
Step 28 - A Tabbed Pane on the Sidebar
Using the Rounded Rectangle Tool, draw a white rectangle with a 1px gray (#979797) Stroke just below the "Twitter" area. Now draw three smaller rectangles behind them, these will be the tabs. Draw a little white rectangle between one of the tabs and the background to design a selected tab.
Step 29 - Adding Some Content to the Tabs
Change the unselected tabs' background colors. Add some titles to the tabs, I'm using a bolder version of the Futura typeface. For the content I'll add a couple of Recent Posts on the first tab. Then if you want to, design the content for the other tabs, put each one into a folder to keep your design organized.
Step 30 - Finally the Footer
This footer will be really simple, just paint some random watercolor marks with some pastel colors, then repeating the process of Steps 8 - 9, draw a couple of Rounded Rectangles and melt them down with the watercolor background. Finally add the footer text, a small navigation bar and the copyright information fits perfect there, besides I add a 1px Line as a divider and applied a Reflected Gradient Layer mask to it.
Feel free to design an advanced footer if you want to.
Conclusion
Hope you liked it! Of course this tutorial is just a small sample of what you can do with this style in webdesign, feel free to experiment with the technique and amaze us with something new!
via by psd.tutsplus.com 
