Quick Layout

Step 1.

Open a new document that is 770 x 500 and fill the background with white

Step 2.

Create a new layer & get out the pencil tool, and set it to 1 pixel in diameter.

Now using the pencil tool, draw 4 lines all the way across the top of your canvas like so:

The order of colors I used are:

1 - #E4E3D6 (top)
2 - #D2CFC0
3 - #A3A090
4 - #8F8D84 (bottom)

Step 3.

Create a new layer: Now using the rectangular marquee tool, make a selection on the canvas as I have done here:

and fill this selection with black.

Now double click on the layer, and apply the following blending options:

Gradient Overlay

Stroke

Result:

Step 4.

Create a new layer: Again, using the rectangular marquee tool make a selection like this: Notice it is directly bellow the previous box we'd made:

Fill this selection with #: 375A80 and press Ctrl + D to deselect.

Double click this layer, and apply the following blending options:

Gradient Overlay:

Result:

Step 5.

Create a new layer: Get out the rectangular marquee tool, and make a selection directly bellow this box like so:

Fill this selection with: #FFFFFF (white) and press Ctrl + D to deselect.

Double click this layer, and apply the following blending options:

Gradient Overlay:

Result:

Step 6.

Now set your foreground color to: #C8CED8, get out the pencil tool and set it up like so:

(2 pixel width)

Now draw a 2 pixel line at the bottom of the new box we just made that spans the entire width of the canvas:

Step 7.

Now set the foreground color to: #FFFFFF (white), and set the pencil tool to 1 pixel instead of 2:

Now draw a 1 pixel line across the canvas about 1/4 inch above the bottom of this box like so:

Step 8.

Now change the thickness of the pencil tool to 4 pixels, and draw two vertical lines up this box to separate it as I've done here:

This separates our content areas for the layout.

Step 9.

Create a new layer, using the rectangular marquee tool make a selection like so for the header:

Fill this selection with #FFFFFF, and press Ctrl + D to deselect.

Step 10.

Using the previous box as a guide, place an image into the header area. You can use a Render, or whatever you'd like. I've used a photo of a city street with a massive black tinted glass windows all over it.

Finishing Touches:

At this point you want to continue to refine your header, adding small details. Here I've added a "swooping" overlay and applied a company logo.

This concludes the tutorial. What you'd want to do here is continue to add small details to the layout to make it your own. Here's what I ended up with after adding text, and a few minor details:

Click to enlarge

I hope you've enjoyed this tutorial and have learned a few things along the way!