Part 1: The Head
Covers the layout planning, header and the navigation bar.

1. Begin with a fresh canvas, with a width of 800 by 665 pixels.  Using the standard screen resolution, 72.  Fill your canvas with white and using your guidelines, align them like the following screenshot.  It does not have to be exactly the same!
Note: The following screenshot is at a zoom of 93% and is not very precise.
Image

2.  Now that you have your layout planned out, time to make those pixel squares.  So get your rectangular marquee tool (M).  We are now going to make the header, so if you look back at the previous screenshot, you will see what I'm talking about.  So with a new layer and your tool, make a selection at the top left corner.  But remember not to cross your boundary line!  The selection should be about 300px in width and 95px in height.  After you made your selection, fill it with white.
Image

3. Next use the following layer style options on the layer.  This will give it that nice pixel border.
Image
Image

4. Now if you move the guidelines you have a nice smooth border.  We will be doing this for each of the parts and areas that were colored in faded red in the step 1 screenshot.  So if you need to look back, feel free.  Next we will do a pixel border to the navigation bar beside the header.  I will not need to outline how to add the style to the layer as I have already did, you can easily set the layer to the specific style through your styles palette, so be sure to name that style to 'OnePixelBorder'.  So next with your rectangular marquee tool (M), make a selection with the same height as the header but it should start ONE pixel away from your header border.  It should stretch all the way to your boundary line.
Image

5. After you've finished with the selection, fill it with white and set the style to the 'OnePixelBorder'.  Next we will make the pixel border for the welcome message area that is under the header box.  So make sure, before you start your selection that you leave 1 pixel space from under the header's pixel border.  Then start from the left side of the boundary area and to a width of about 300px.  And a height of 225px.
Image

6. After you did your selection, fill it with white and set the style to 'OnePixelBorder'.  Next we see the same procedure as the 3 previous pixel border areas.  Thus, I will not explain any further of the pixel border procedure.  Though, I will show you through the images, once you've made a selection remember to fill it with white and set it to the 'OnePixelBorder' style.  Also, remember to always leave 1 pixel space between to pixel borders!  This is very important to the look of your template!
Image
Image
Image
Image
Image

7.  Now after all the hard work, the following image should be what you should have, or something similar.  As you can see each box is neatly and professionally aligned with each other!
Image

8.  Next we will begin by adding detail to each box.  So let us begin with the header, first get your rectangular marquee tool (M) and starting at the very top left corner of your header, with a new layer.  Make a selection with the height of 5-7 pixels and the width just as wide as the whole header.  Then fill it with #bcd321. 
Image

9.  Now add text to decorate and your finished! 
Image

10.  Now we are going to work on the navigation bar, which will then conclude this part of the tutorial.  Next, we are going to add another top bar just like the lime green one we did on the header.  The only difference is that the color of it will be #767676.  Also the width should be just as the width of the whole navigation bar area.  Now we will work on the first button.  You may want to zoom in, I've done so at 200%.  Next, we are going to make all our button layers under the grey top bar.  So get your single column marquee tool (M) and make selection.  With a width of 1 pixel and a height that is the same as the whole navigation bar box except less by 4 pixels.  Once selected fill it with #d3d3d3.
Image

11.  Next add a small rectangle selection and an arrow and position like the following screenshot, fill it with #d2d2d2.  Also add a triangle selection.
Image

12.  Now add text to spice it up and it is finished.  An easy way to create more buttons of the same form is just to group all the layers of one button.  Then duplicate that group into how many buttons you want.  Then just change the text and align them together and viola!
Image

You have complete Part 1 of the tutorial, please proceed on to Part 2.
Tutorial Index