2) On your background layer, using your paint bucket tool, fill the background with color “333333”
*Please note you may change the color scheme if you wish. If you follow this tutorial’s color suggestions, you will end up with a grey color scheme.

3) Create a new layer; name it “Top-Gray Background.” When naming layers, you should always think about their page position, and a one or two word description so you can find it later if you have to edit something.

4) Select the “Top-Gray Background” layer. Next go to View>Rulers and make sure they are checked. From the top ruler, drag a guide to the 150 pixel mark vertically. (See picture for example) Select the area above it. Next select your paint bucket tool and fill the area with color “666666.” Deselect your selection. See image below for review of this step.

5) Now we are going to add the basic lines, of the top grey bar to divide it into three sections. First clear your guide by going View>Clear Guides. Now, we are going to add more guides. From the left side, drag a ruler horizontally to the 234 pixel mark and the 519 pixel mark. They should be pretty exact..

6) Create a new layer, name it “Top-BlackDividers”. Now, choose your pencil tool, and set it to one pixel on black foreground. Along your guides, draw a line with a small space at each end. (See picture). Duplicate this layer by right clicking on it, and rename the new layer “Top-WhiteDividers.” Nudge this layer one pixel to the right. In order to change the lines from black to white go to Image>Adjustments>Brightness-Contrast and do +100 brightness. Repeat this step. See image for visual of current progress.

7) Create a new layer. Name it “TopMiddle-NavigationSeparation.” We will now create the dividers between your links. I am going to have a 30px gap which will allow me to have 7 total links. In this step we will create 4 and the final three will be in the next step. If 7 links is good, use these guide settings. Drag 5 guides to these locations, which should space them evenly.

Ruler 1- 10px
Ruler 2- 40px
Ruler 3- 70px
Ruler 4- 100px
Ruler 5- 130px

Along these guides, draw 1 pixel white lines with the pencil tool along guides 2-4. Clear your guides and see what you have created. In the picture below, I turned down the opacity and made the end smoother with my eraser. This is up to you! Experiment however you wish.

8) In order to make our sites unique, this step will be a little vague. I will just show a sample of what I have done with the rest of the Top Grey section. As well, it will vary with the site you are creating. Therefore I will just show a sample. For the rest of the tutorial, in the layer palette images, the folder name “Stuff I didn’t cover” could be disregarded because they are just the layers I used in creating this:

9) FINALLY your done with the top part. The rest of the tutorial is about building the content area of the website. Drag a guide from the top to 150 pixels. Drag another guide from the left to the 234 mark. Make a new layer named “Left-Box Content Background.” Select this whole rectangle that the guides make and fill it with color “CCCCCC.” Next go to the layer settings and apply these settings. Clear guides. Image

10) Now, go to your layers palette, and while holding CTL, click on Left-Box Content Background layer. This should load the selection. Go to select, Modify, contract by 5 pixels. This should decrease the selection size by 5 pixels on all sides. If it does not get smaller on all sides, manually shrink them by using the marquee tool and holding alt.

Once you have your selection, create a new layer named “Left-Box Content Fill” and use your paint bucket tool to fill this area with color “161616” My image looks like this: