Simple Blog Layout

Step 1

Create a new document in photoshop that is 700x600 in size, and fill the background with #F3F6F8.

Step 2

Create a new layer, get out the rectangular marquee tool ( ) and make a selection similar to this:

Using the Flood Fill paint bucket tool, fill this selection with white (#FFFFFF).

Double click this layer and apply the following blending options:

Drop Shadow:

Stroke:

Result:

Press Ctrl + D on your keyboard to deselect this selection.

Step 3

Create a new layer, get out the rectangular marquee tool ( ) and make a selection similar to his:

Fill this selection with white (#FFFFFF).

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

Gradient Overlay:

Stroke:

Result:

Step 4

Create a new layer. With the rectangular marquee tool ( ) make a selection similar to this:

Fill this selection with #60B9F1:

Now open up an image you would like to use for a background. You can make your own, or find a great looking render off of the net. Try using some of the great effects you've created with other "effects" tutorials here at PhotoshopForce.com.

Once the image is open, press Ctrl + A to select everything.

Press Ctrl+ C to copy everything to your clipboard.

Go back to our layout document.

Create a new layer above the "blue" rectangle we have just made, and press Ctrl + V on your keyboard to paste the render.

Now press Ctrl + Alt + G to group this layer with the previous, your layers pallet should look like this afterwards:

Now you may need to maneuver, or move the render a bit, that is usual. Press 'V' on your keyboard to get out the move tool, and you can drag the 'header background' image around and position it just like you want it. Sometimes you need to resize the render as well. This can easily be done by pressing Ctrl + T to get out the free transform tool.

Once you are happy with the position of the render, change the "blending mode" of the layer the render is on to "overlay" in the layers pallet to highlight it a bit, and make it look a little nicer:

Result:

Step 5

Create a new layer get out the rectangular marquee tool, and make a selection similar to this at the footer of your document:

Fill this selection with #D1D2D5.

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

Stroke:

Result:

Step 6

Create a new layer. Get out the rectangular marquee tool, and make a selection similar to this:

Fill this selection with #EDF0F2.

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

Bevel & Emboss:

Leave the selection still active.

Step 7

Create a new layer. Go to "Selection->Modify->Contract" with a setting of around 8 pixels:

Fill this selection with #EDF0F2, right click on this layer and

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

Bevel & Emboss:

Step 8

Create a new layer. Set your foreground color to #D3D5D6 . Get out the pencil tool ( ) and set it up like so:

Press and hold the SHIFT key on your keyboard and draw a vertical line in the middle of your content box to act as a content divider:

Step 9

The only thing left to do with this layout is apply the text to the buttons/navigation area, and in the header. You should choose whatever font you like. I've decided to use a font called "Alpha Male Modern" for this particular layout, with a black color (#000000).

I also added the following blending options to the text, just to give it a little depth:

Drop Shadow:

Step 10

Finally to add some dividers between the text in the header area.

Create a new layer, set your foreground color to #4F718B. Get out the pencil tool ( ):

Now draw a vertical line mid-way between your navigation text(s) with the pencil tool like so:

Click to enlarge

Next set your foreground color to #EBEDF1, and draw another line on each side of your navigation dividers using the pencil tool similar to this:

Do this for each of the button dividers in your navigation bar.

Here is what the layout looks like so far:

Click to enlarge

Here is how this layout would look in a real life application, on a personal website for a possible team of motor cross enthusiasts:

Click to enlarge

Thank you for read!