Full Layout

What you are about to complete is HavenFX's longest tutorial, and maybe most complicated. Do take note that this tutorial is not meant for the beginner. Intermediate users and up should have no problem completing this tutorial. I have also taken an uncharacteristic step and not put images after every single step. This means that you will have to trust yourself that you know what you are doing and will have to read carefully. Preliminary talks done and let's go to the tutorial. Step-by-step instructions proceed...

1. Open up a new image, 800x600.

2. Fill the images in with #666666. This is always a great grey that will match any color scheme, which is in our case, dark blue.

3. Create a New Layer (Layer>New>Layer or Ctrl+Shift+N) and name it "First Line." Make your Foreground color #999999 and then take out the Rectangular Selection Tool. Make a selection (8-10 pixels wide) on the very edge of the left side and go down for the length of the image. Fill it with your Foreground color (Alt+Backspace). Don't deselect yet but copy the selection and paste it. Move it all the way to the right side. Now, Merge Down (Ctrl + E).

4. Go to the Layer's Palette (Window>Layer) and select "First Line" layer. Go to Blending Options by clicking the little 'f' at the bottom. Then go to Stroke. Once the Stroke window is open, change the settings to: Color - Black, Position - Outside, Size - 1 px.

(Note: Image cropped and scaled down, stroke placed around the outside for effect)

5. Make another New Layout (we're going to be making a lot of layers) and name it "Second Line." Change your Foreground color to #476876. Take out your Rectangular Marquee Tool once again and make a selection down the left side, beside the first line, the same as the first time (DON'T OVERLAP THE BLACK STROKE!). Fill the selection in with your Foreground Color. Copy the selection and paste it on the other side in the same spot. Now, Merge Down (Layer>Merge Down or Ctrl+E). Go to the Layer's Palette and click on the little 'f' to access the Blending Options menu. Go to Stroke and apply the same settings as before.

6.Create a new layer and name it "Header." We are now going to make the top header; however, you may import your own header or make you own more advanced one. If you are sticking with me on this header, let me tell you that this header is going to be very simple just to save time. Anyways, continuing with the tutorial. Reset the color (D) and make a selection at the top, INBETWEEN the two blue lines. Don't go over the strokes. (Tip: For more accuracy, make a selection kind of close to what we actually need. Then, just zoom in and right-click within the selection. Go down the menu and click Transform Selection and just adjust the anchors.)

7. Now, before we start the effects show, I want to let you know that the header MUST ALWAYS continue to be selected for these filters to work. Otherwise, Photoshop Go to Filter>Render>Clouds. Then go to Filter>Distort>Wave and hit Randomize until you get something you like. Whatever you choose will be fine! Now, go to Filter>Brush Strokes>Accented Edges and apply the following settings: Edge Width - 2, Brightness - 50, and Smoothness - 5. For the last filter, we'll put on a Motion Blur. So go to Filter>Blur>Motion Blur and make the Angle - 45 and the Distance - 20. You can play around with these settings to accomodate your pleasure.

8. Your header selection should still be in effect as we going to change the Color. Go to Image>Adjustments>Hue/Saturation or hit Ctrl+U. Check the Colorize and set the Hue: 192, Saturation: 25, and Lightness: -12. Next, we will change the Levels settings. Go to Image>Adjustments>Levels and enter the following values in the three Input Levels boxes at the top: 16 .70 225.

9. It's OK to deselect now as we will make a new layer called "Pencil Line." Grab the pencil tool and set it to 1 px and the color black. Hold SHIFT and draw a line straight across the width of the header, right underneath (Zoom in for better results). You may wonder, "Why not just do a Stroke?" Well, I tried it but something was messing up when I actually applied the stroke; an inner shadow was coming up.

10. Go ahead and create a new layer called "Bar." Make a rectangular selection right underneath the black line of the header and inbetween both blue lines. Make it around 10 px in height. Fill the selection with #999999. Now, open up the Layer's Palette and go to the Blending Options (little 'f'). Apply the following settings:

Bevel and Emboss


Inner Glow


Stroke - 1 px, outside, black

You should have something like this now:

11. Here we will make the Navigation. Go to the Layer's Palette and create a new layer set by clicking the file folder at the bottom. Name it "Navigation." All your navigation layers will be put in the file folder by just drag-and-drop. Jump to the Full Navigation tutorial to create the navigation. If you have already done this, just import it into the layout. Also, make sure the navigation system is on the left side with ample space around it indicated by the image below.

12. Now, we will construct the content box. Create a new layer called "Content box" and grab your Rectangular Marquee Tool. Make a selection of a fairly good size in the open space to the right of the navigation. Keep it on the same level as the navigation. Fill the selection with #999999.

13. Go to the Layers Palette. Instead of putting in the Blending options again, we are just going to use the "bar" layer's. Find the "bar" layer in the palette and you should see a drop-down menu directly underneath labeled Effects. Click and drag Effects all the way up and drop it right under the "Content Box" layer. If done properly, the same effects that were applied on the "bar" layer should now be on "content box."

14. If your content box is not already selected, go to the Layers Palette and Ctrl+Click the "Content Box" layer to select it. Now go to Select>Modify>Contract and enter 20 pixels. Click OK and then hit delete. There should be a gaping hole in the content box. Don't deselect and then go to the Select>Modify>Contract menu again and enter 1 pixel. Click OK. Don't deselect yet.

15. Make a new layer and name it "Content Fill." Fill the selection on the new layer with #476876. Go to the Layers Palette and then head on over to the Blending Options ('f'). Apply these settings:

Bevel and Emboss

Stroke: 1 px, outside, black

That was the last step and we are now finished creating the graphical part of a nice clean layout. All you need to do now is to slice it up and code it out. Here is what you should have.

Don't stop here but go ahead and playing around with different looks and adding text. Make sure you add your site name in the title in the best way you see fit.

Click to enlarge