Result (coded version):
Click here to view!

Part 1: The Head - Covers the making of the header of the template.
Part 2: The Neck - Covers the making of the navigation bar and the banner.
Part 3: The Body - Covers how to design the body and structure of the template.
Part 4: The Foot - Wraps it up by covering the finishing components of the template, the footer.

Before you begin…
*The measurements given in the following tutorial are measurements at a zoom of 100%
*Guidelines are used to help you, they will not appear on the end product.
*It is suggested that you be well experienced with photoshop for over a year. If not, please see previous extreme template tutorials of lower difficulty.

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

1. Begin with a fresh canvas, 800 by 600.  Fill your whole canvas with #4e585f.  Make a new layer, using the Rectangular Marquee Tool (M) select [from the top of your page] about 40% of your canvas.
Image

2. Once you've made the select, get your gradient tool, set the gradient to 'foreground to transparent', where your foreground color should be white.  Then on a new layer drag your [from the top of your select] to the end of the select.  You should get some sort of shine.  Now set the blending mode to overlay and duplicate the layer (ctrl+J) and then set the opacity of the duplicate to about 25%.
Image

3. Now you can add a diagonal pattern on the whole canvas if you would like, and set it to soft light with an opacity of 10%.  You can find the diagonal pattern at our downloads page.

4. Next we are going to be using our guidelines.  So make sure you have your ruler (ctrl+R) and also make sure the measurements are in Pixels.  Now drag one guideline from 0 to 100px.  The other one we will drag from 0 to 700.  Please note that these measurements are according to an 800 by 600 canvas!  So if you have a different sized canvas you will have to compromise and try to get the measurements similar.  Basically what we are doing is the space that is in between these two guidelines is going to be the space and width of our template; we will not go and cross these guidelines.
*Make sure your zoom is at 100%!
Image

5. Once you have your vertical guidelines, we will need some horizontal ones.  So drag the guidelines from the top of your canvas all the way to the 196px on your ruler.  Then drag another one all the way to your 540thpx.
*Make sure your zoom is at 100%!
Image

6. Next we will start creating our template.  So first get your Rounded Rectangle Tool (U) set the radius to 5px, make sure 'shape layers' is set and the color should be #53616c.  Now make a big rounded rectangle from the top left corner of your guidelines square [marked in red in the previous screenshot] all the way to the bottom right corner.  Do NOT cross the guidelines.
Image

7. Now we will need to delete all of it and just leave the top part.  So get your rectangular marquee tool (m) and measure about 15-20px down from your first top horizontal guideline.  Once you’ve made your measurement, select the rest of the shape except your measurement and then delete those parts.
Image

8. Once you’ve finished, duplicate the layer and flip it vertically, Edit > Transform > Flip Vertical.  Then move the duplicate layer all the way to the bottom, so that it is placed just right above the bottom horizontal guideline.
Image

9. Next add some text on top of your first rounded rectangle shape.  I used "Micra (T1)" at size 12px.
Image

Part 2: The Neck
Covers the making of the navigation bar and the banner.

1. Now we are going to start working on the navigation bar buttons and the banner.  Please know that I will only be showing you how to make one button [the home button] and then you can just duplicate the layers and look back here to see how you make the rest of your buttons.  So begin with a new layer, get your rectangular marquee tool (M) and change the style to 'fixed size' then insert the measurements of 118px (width) and 49px (height).  This is the size of the button so make this selection 1-3px. And then fill it with #464f54.
Image

2. Next we will create another one for a rollover button; this is only if you want a rollover button!  If you wish not to have a rollover button, then you can skip this step.  So duplicate the button layer and take out the blending options window.  Go to Color Overlay and change the color to #5a6469.  Now just make the layer invisible so that we put it back to its original state.

3. Once you've finished, now we are going to work on the bottom of the layer.  So hold ctrl and click on the original button layer.  This will select the whole layer.  Now using your rectangular marquee tool set it as 'subtract from selection' and change the style to normal.  Now deselect everything ONLY leaving about 2px at the bottom.  Then make a new layer [with the selection still active] and fill it with #10c5da. 
Image

4. Next add some text; I used 'Century Gothic' at size 12px.  Then I aligned it near the bottom right corner.  And this concludes our steps in making the buttons, now you will have the repeat the steps for four more buttons.  Do not worry; it shouldn't take long as you can just duplicate the layers.
Image

5. Now we are going to make work on our banner [image].  Of course I will not show you how to make your banner, so make sure you have a banner before hand.  So begin with a new layer and get Rounded Rectangle Tool (U).  Now first, set a horizontal guideline about 1-3px under the buttons.  Then using the rounded rectangle tool [make sure the color is set to #2f373b], make one starting from the top left corner of the guideline you just made and ending about 140px below it. It is preferred that you get it at 140px, but a few pixels off won't do much.
Image

6. Next using your rectangular marquee tool, with a new layer, select [inside the rounded rectangle] leaving about 5-10px of space and then making a rectangle selection.  Make sure you keep the 5-10px of space on all sides of selection.  This selection will be where your banner is, so put in your banner there.
Image

7. Next with the selection still active, you can add a 1px stroke.  So right click on the selection and click 'stoke'.  Make sure the settings are the same as the following.  
Image

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

1. Now make a new layer and get your rounded rectangle tool, set your color to #6b757e.  And leaving about 1-3px of space away from your banner, make a rounded rectangle that is the same width as your 2 vertical guidelines but with the height all the way to the bottom rounded rectangle shape that we had created in part 1.  But remember to leave about 1-3px of space.  Note that the measurements are at a perspective of 100%.
Image

2. Next, with a new layer, we are going to make another rounded rectangle.  So get your rounded rectangle tool and set the color to #4d545e.  But before you do so, set a guideline at the top and bottom of the rounded rectangle you created in step 1.  And also place a guideline about 410px to the right of the left vertical guideline."
Image

3. Once you’ve placed your guidelines, get your rounded rectangle tool and set your color to #4d545e.  Then starting from the top left corner of your square [marked in red in the previous screenshot] and leave space [down] of 20-25px.  Also leave some space of about 5-10px to the left and then start your rectangle.  Make sure to end the width of it all the way to the left guideline that you had created in the previous step.  And you should also leave some space of 5-10px at the bottom, please take a look at the following screenshot for a clearer approach.
Image

4. Next, we are going to work on the news bar and the search bar, so first let's put a guideline at the top and bottom of the content background that we just made.  Next get your rounded rectangle tool, set your color to #4d545e.  Make a rounded rectangle that is about 10px away from the vertical guideline that is on the right side of the content BG.  It should also be about 5px away from the far right guideline.  The width of the rounded rectangle should be around 175px on a zoom of 100%.  Its height should be 235px.
Image

5.  Next we are going to create another rounded rectangle under the previous one.  So it should be the same width and same spacing, just the height of it is 70px.  Make sure to leave 20px of space from the bottom of the previous rectangle to the top of the rectangle that we are just making.
Image

6. Now we are done, add some text.  And that will conclude this part!
Image

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

1. You are almost done!  Only this step and you have finished this tutorial.  So to finalize our template, add some text on top of the rounded rectangle shape that we had created earlier.
Image

This concludes our tutorial, you should have something similar to this (coded version):
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?