Modern Layout Complete

Step 1

Create a new document in photoshop that is 800 x 600 in size, and fill the background with black (#00000).

Step 2

Create a new layer. First we will start by creating the header for our layout. Get out the rectangular marquee tool ( ) and make a rectangular select near the top of the canvas as I've done here:

Set your foreground color to: #230000 and your background color to #AF0000.

Get out the gradient fill tool ( ), choose "foreground to background" as the gradient type:

Result:

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

Bevel & Emboss

Result:

Step 3

Create a new layer. Set your foreground color to #FF4E00 and get out the Pencil Tool ( ) and set it up like so:

Now draw a line across the bottom of the rectangle we had made in the previous step as I've done here. Holding the Shift key while drawing this line will ensure your line is perfectly straight:

This should be done on the same layer.

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

Result:

Step 4

Create a new layer. Get out the rectangular marquee tool ( ) and make a rectangular selection as I've done here:

Fill this selection with #434343 using the paint bucket fill tool:

Set your foreground color to #FF4E00, and draw a 5 pixel line across the bottom of this box with the pencil tool, just like we did in the previous step.

This should be done on the same layer.

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

Result:

Step 5

Create a new layer, get out the rectangular marquee tool ( ) and once again make a selection as I've done here:

Fill this selection with #434343 using the paint bucket fill tool.

Step 6

Create a new layer, once again using the rectangular marquee tool ( ) make a selection as I've done here:

Fill this selection with #585858 using the paint bucket fill tool.

Go to "Edit->Stroke" and apply the following settings:

Result:

Step 7

Press Ctrl + J on your keyboard to duplicate this layer.

Press 'V' on your keyboard to get out the move tool.

Drag this duplicate layer over to the left as I've done here.

Holding down the Shift key while moving this item will ensure it stays perfectly aligned with our other content box:

Step 8

Create a new layer. Next we'll begin to create an area for the navigation panel.

Get out the rectangular marquee tool ( ) and make a selection as I've done here:

Fill this selection with #363636 using the paint bucket fill tool.

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

Result:

Next I created a new layer, and used the same technique used in Step #2 to create a header for the navigation area:

Step 9

Create a new layer. Get out the rectangular marquee tool ( ) and make select as I've done here:

Fill this selection with #2C2C2C using the paint bucket fill tool.

Press Ctrl + J on your keyboard to duplicate this layer.

Press 'V' on your keyboard to get out the move tool.

And position the duplicate content area to the left as I've done here. Holding the Shift key down while moving the object will ensure it stays perfectly aligned with the previous content box:

Step 10

Create a new layer, get out the rectangular marquee tool ( ) and make a selection as I've done here:

Fill this selection with a dark grey color the paint bucket fill tool.

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

Stroke:

Result:

Press Ctrl + J on your keyboard to duplicate this layer.

Press 'V' on your keyboard to get out the move tool.

Move the duplicate content box over to the right as I've done here. Holding down the Shift key while moving this object will ensure that it stays perfectly aligned with the previous content box:

I also added headers to each of these content boxes using the exact same techniques used in Step #2. Result:

Step 11

Finally we'll begin to create the header for our web page layout.

Create a new layer. Get out the rectangular marquee tool ( ) and make a selection as I've done here:

Set your foreground to Black (#000000) and your background to white (#FFFFFF).

Pressing 'D' on your keyboard will automatically reset your foreground and background colors for you.

Go to "Filter->Render->Clouds":

Leave the selection still active.

Step 12

Create a new layer. Go to "Filter->Render->Clouds".

Go to "Filter->Render->Difference Clouds".

Press Ctrl+ F on your keyboard 6 times to repeat the Difference Clouds filter six times.

Drop the opacity of this layer down to 73 percent:

Result:

Step 13

Go to "Layer->New Adjustment Layer->Color Balance" and apply the following settings:

Result:

Leave the selection still active.

Go to "Layer->New Adjustment Layer->Brightness and Contract" and apply the following settings:

Result:

Step 14

Next I created the buttons for the navigation area. Start off by creating a new layer.

Get out the rectangular marquee tool ( ) and make a selection as I've done here:

Set your foreground color to #4D4D4D and your background color to #1A1A1A.

Get out the gradient fill tool ( ).

Choose the "Foreground to Background" fill type:

Fill this selection with your gradient as I've done here:

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

Inner Glow:

Stroke:

Result:

Leave the selection active.

Step 15

Create a new layer. Get out the rectangular marquee tool ( ) hold down the Alt key on your keyboard and deselect half of the selection as I've done here:

Go to Select->Modify->Contract with a setting of 1 pixel:

Set your foreground color to white (#FFFFFF), get out the gradient fill tool ( ) and choose the "foreground to transparent" fill type.

Fill your selection as I've done here:

Step 16

Create a new layer. Now get out the Polygon Lasso Tool ( )

Using this tool, make a selection as I've done here. Holding down the Shift key will ensure nice straight lines, and angles:

Now while holding down the Alt key, deselect a portion of this selection as I've done here:

Fill this selection with white (#FFFFFF).

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

Inner Glow:

Gradient Overlay:

Stroke:

Result:

Step 17

Create a new layer. Next get out the Pencil Tool ( ) and set it up like so:

Set your foreground color to: #FF7200

Draw 3 dots in the bottom right hand corner of your button to give it a little more detail as I've done here:

Finally the only thing left to do is to place the text onto the button. I didn't use any fancy fonts here, just a 10pt Tahoma (Windows standard font) with a color of white #FFFFFF:

Now you can easily copy these buttons by creating a folder, and placing each of the button layers into the folder and copying once for each button your layout needs, here's how mine ended up:

Here I've added my company logo and website name to the header area.

As well as a few images that are relevant to the pages theme:

At this point the page is nearly ready to be sliced up and coded. Here is how this particular web layout might look in a working environment for an R&B net radio website:

Click to enlarge

Thank you very much for reading this tutorial, I hope you've enjoined it!

Download Modern Layout Complete Source Package here.