Result:
Click here to view!

Part I: The Head - Covers the making of the header of the template.
Part II: The Neck - Covers the making of the navigation bar and the ad boxes.
Part III: The Body - Covers how to design the body and structure of the template.
Part IIII: The Foot - Wraps it up by covering the finishing components of the template, the footer.

Part 1: The Head
This section covers the making of the header of the template.
Preview

1. Start off with a new canvas, then fill your canvas with white, and make a new layer. Next you have to figure out what your template boundaries are going to be. For example in the following screen shot, I'm using the pink lines to align and line up my template, the lines are representing my boundaries, NOTHING should pass these lines through out your whole template.
Image

2. After you have aligned up everything, time to get down to business. So, we are going to start on by making a border, so make a new layer and using your rectangular marquee tool (m) make a rectangle on the left side of your that is as big as the boundary lines. Then with the selection still on, make a 1 pixel stroke on it and the color #d5d5d5. Next remove the very top horizontal alignment lines.
Image

3. The space inside that border you just created it your header, so its up to you how you want your header to look like. But i advise to stick with the theme of the template, so make it very simple and straight forward, not too graphical. Anyways, next we are going to work on the right side. So, get your polygonal lasso tool (L) and make a small triangle and color it #b4c75c.
Image

4. Now, we are almost done with the header. Next make a new layer and using your rectangular marquee tool (m) make a selection from one end of the vertical boundary line to the other like the following:
Image

After you have made the selection, fill your selection with a diagonal line pattern, which can be found at our downloads section. After you have filled it, lower the opacity of the layer to 30%.

5. Next make ANOTHER selection UNDER the previous selection by about 0-2 pixels. Then make the same exact selection as before except with the height size of about 1-3 pixels. After you made the selection, fill it with #838383.
Image

Part 2: The Neck
Covers the making of the navigation bar and the ad boxes.
Preview

1. Start off by making a new layer, and make a selection using the rectangular marquee (m) under your separator lines and fill it with #838383, like so:
Image

2. Next take, name that layer 'nav.bar' and take out the layer style window for that layer, use the following settings:
Image
Image

You will need to download the gradient that I'm going to use because you can't make it out, too complex for the eye, so you can download it here.
Image

3. Now make a new layer, and make a selection around the nav.bar layer, but make sure your still on the new layer. So now, get your gradient (g) tool and just make a light White to Transparent gradient from the bottom of the selection to the top, like the following screen shot:
*Make sure to lower the opacity of your gradient and set the blending mode to screen!
Image

4. Next I'm going to add another shine to it, using the rectangular tool (m) make a small selection from the top of the nav.bar layer to about a quarter of it. After you had done so, fill your selection with white and lower the opacity to 20%.
Image

5. Now, all you need is some text and some separators, i will leave the text part for you guys, but ill show you how to make very cool looking separators. So make new layer, you may want to zoom in too about 500% would be good. Now, using your rectangular marquee tool (m) make a one pixel selected rectangle with the height of your navigation bar, but not including the strokes! This is very important, if you do not know what i mean, look at this screen shot for an example:
Image

6. After you've made your selection, fill it with white. Do NOT de-select! Now, make a new layer and move your selection one pixel to the right of your last selection. And fill it with #737373. Next merge both layers, ctrl+e, and then give it the following layer style options:
Image
Image

7. Now go to Layer > Layer Mask > Reveal All , Now using your gradient tool (g) set your foreground color to black and using a Black to Transparent gradient, start from the bottom of your separator and pull your gradient all the way to about half the header we had made earlier, so it should look somewhat similar to this:
Image

8. Next add some text and duplicate your separator layer to how many buttons you have, and align it and viola!
Image

9. We are now finished with the navigation bar and we're going to start on the ad bars, i will be showing you how to make one ad bar, and then all you have to do is just duplicate the layers and you'll have as many as you want! So start off by making a new layer and then using your rectangular marquee tool (m) make a rectangle and fill it with #9d9d9d, like the following screen shot:
Image

10. Next take out the Layer Style window of that layer and use the following settings:
Image
Image
Image
Image

11. Now lets spice it up a bit. So make a new layer and using your rectangular marquee tool (m) make a selection on top of the rectangle we just made and fill it with #b4c75c.
Image

12. Next open up the layer style window for that layer and use the following settings:
Image

Part 3: The Body
The Body - Covers how to design the body and structure of the template.
Preview

1. First off, we are going to make our browse menu. So get your rectangular marquee tool (m) and make a rectangle under your first ad bar you had made in the previous tutorial section, make sure you align the width of it with the same width as the ad bar, and fill it with white, like the following screen shot:
Image

2. Next, apply the following layer style settings to the layer:
Image
Image
Image

3.Now add a green line on top of the layer, you should already know how to do this, i will not bother explaining this, because we did it in the previous part, here's a screen shot if your confused:
Image

4. We now are done the Browse menu, i added some text and a bit of extra things to spice it up.
Image

5. Now we are going to work on the little Newsletter menu bar. So make a new layer and using your rectangular marquee tool (m) make a rectangle below the browse menu, make sure the width of the selection is the same as the browse menu and fill it with white.
Image

6. Next, use the same style we used for the Browse menu rectangle, you should be saving the styles we do, as they will be useful for you in the future. After you have applied the layer style settings, we are going to add a small header for this bar. So make a new layer and using your rectangular marquee tool (m). Make a selection on top of the previous selection we made but make sure its like the following:
Image

7. Once you've made your selection, fill it with #727272 and apply the following layer style settings:
Image
Image
Image

8. Looks good eyh? Well, next you should add a green line, i hope i don't need to explain that anymore because we've made quite couple in this tutorial, and i added a shine and some text, and your now done the newsletter bar!
Image

9. Now we are going to work on the content bar. So make a new layer and make a rectangle using your rectangular marquee tool (m) as big as this one:
Image

10. After you have made your selection, fill it with white and use the same layer style as the previous bars. Next we are going to make a header the same style as we did with the Newsletter bar header, so make a new layer and make a selection over the bar we just made as a bg for our content bar.
Image

11. Once you've made your selection fill it with #727272 and then use the same layer style as the newsletter header bar. After that, add the green line that we've made tons of times and you should know how to make from pervious parts (look at Part II if you don't know how).
Image

After your added the green line, spice it up, with a shine and some text and your done with this part!

Part 4: The Foot
The Foot - Wraps it up by covering the finishing components of the template, the footer.
Preview

1. Start off by making a new layer, we are going to make some separator lines, if you have done all the previous parts you should know what these are. So get your rectangular marquee tool and make a selection about 5 pixels under all your content and newsletter bar, the width of this bar is going to be from one boundary line to the other, once you made your selection fill it with #727272.
Image

2. Next we are going to use the same method to make another separator line, this time the height will be 5 pixels and we will fill it with a diagonal line pattern, then lower its opacity to 30%. After doing so, add some text at the bottom for your credits, etc. And you are done this tutorial! If you did this whole tutorial with all the parts, you have my respect!
Image

This concludes our tutorial, you should have something similar to this:
Click here to view!

This tutorial's .PSD file is only valid to forum premium members! So why not register today and become a premium member?