How to Design a Modern Blog Layout

Step 1

Create a new document (1000X1450px). Fill the top 450px of your canvas with 267ac0, and the area beneath this with 236faf.

Step 2

Now create a layer called 'header gradient' and create a linear gradient at the top of your canvas ranging from 115085 to transparent. This should give a shadowed effect to the top of your design.

Step 3

Now create a new layer called 'header highlight'. Use your radial gradient tool to create a range of 'light spots', whereby the gradient ranges from white to transparent. Drag a few of these out across your header area.

Then change your layer blend mode to 'overlay', and reduce it's opacity to 20%.

Step 4

Now create a new layer called 'header circle gradient'.

Use your circular marquee tool to create a circular selection in the top left of your canvas. Then drag a linear gradient (white to transparent) upwards to fill your selection. Finally, reduce this layer's opacity to 7%, and change it's blend mode to 'overlay'.

Step 5

Type out some logo text in the top left of your canvas.

I used the free font Mido (download here) size: 48pt, kerning: -50.

Then I added a drop shadow blending option (35% opacity, distance: 1px, size: 0px). This just gives a little added emphasis to the text.

Step 6

Now I want to construct a search form at the top right of my canvas.

I start by creating a rounded rectangle (5px radius, white). Then I reduce this layer's opacity to 20% and add a stroke blending option (3px size, 30% opacity, 0c3456 color).

Step 7

Now create a submit button, using your rounded rectangle tool and the blending options below:

Step 8

Now type out some text over your form area and submit button (Arial, 12pt, -50 kerning).

Also overlay this great magnifying glass icon.

Step 9

Now create some guides, with the vertical guides at 50px and 950px and the horizontal guides at 150px and 1150px.

Create a white rounded rectangle (10px radius) within these guides, and apply a stroke blending option (settings below):

Step 10

I want to create a menu for my design. The easiest way to create a menu that will fit the rounded corner top of my main content area is to create a rounded rectangle with the same 10px radius, and then rasterize this layer, and cut off the bottom rounded area. This way the top of your menu fits the rounded top corners of your content area, but the bottom part is flat.

Once you've created your menu shape, apply the blending options shown below (gradient overlay and inner shadow).

Step 11

Now apply some menu text (Arial, 16pt, -50 kerning, 646464).

Also, I wanted to apply an active menu state, demonstrating which page the blog was currently on. To do this, I just used my lasso tool to create a simple triangle, which I filled with the same light gray as the menu. In order to create a perfectly triangle hold shift while using your lasso tool to create perfect 45, and 90 degree angle selections.

Step 12

Now create a new layer above all layers EXCEPT for your menu related layers. This is because we're about to create the area directly beneath our menu, and we want our active menu arrow to be visible ABOVE this new area.

Create a selection ranging across the top part of your content area, but beneath your menu.

Fill your selection with 0c3456.

Step 13

Option+click on your dark blue area layer in your layers palette. This should select your dark blue area only. With your selection still in place, create a new layer above this one called 'highlight featured area'. Drag a radial gradient (white to transparent) from the very left of this area towards the right of it).

Then reduce this layer's opacity to 30% and change it's layer blend mode to 'overlay'. This should create a nice highlight effect over your dark blue area.

Step 14

Now as this is the featured post area, we need a post thumbnail. I took one from a recent PSDFAN tutorial, and pasted it over the dark blue area.

Then to make it stand out I applied a stroke blending option (settings below):

Step 15

Now apply some text to the right of your thumbnail. I used Mido for my header (a8cff0), and arial for my main text.

Step 16

Create a new layer called 'side column' and create a yellow left column for your layout. Your column should be 250px wide, and should fit the bottom left rounded corner of your content area (use the same technique for this as for your menu shape).

Your side column should be light yellow (fae8b5), with a slightly darker top area (f5dd98).

I also create a 1px line to divide the two areas (e3d19d).

Step 17

Create a heading 'SUBSCRIBE' at the top of your darker yellow area.

I used Mido, 18pt, -50 kerning, 3d3d3d, for my heading text.

Then I laid out various social networking icons beneath this header area.

Step 18

Plenty of blogs use advertising, so I added some basic ad blocks to my site!

Step 19

To complete my sidebar I duplicated my 'subscribe' area and moved it down beneath my ads. Then I change the heading text to 'WRITE FOR US', and added some relevant text beneath this.

Step 20

Now we move to the right column of our layout!

I create a heading 'Latest Posts' (font: Mido, color: 494743, size: 30pt, kerning: -50).

Then a work on creating my latest post areas.

I paste in a thumbnail taken from PSDFAN, and then add my post title (Mido, 2372b4). Then I used Arial text for my post description and 'read more' link.

Step 21

Ensure that the content for your 'latest post' (thumbnail, post title, and description) are placed within a layer folder. Then duplicate this layer folder 5 times to make up the rest of your latest posts.

Step 22

Create a new layer called 'more posts button'. Create a rounded rectangle (10px radius) beneath your latest posts and then apply the inner shadow and gradient overlay blending options shown below (settings below). This should give your button a sleek metallic look.

Step 23

Complete your button by adding a circular gradient effect, white arrow custom shape and some text (Arial, 14pt).

Step 24

Now add some content to your footer. Create 3 headings:

Popular Posts
Latest Comments
Latest Forum Posts

The headings should be Arial, 18pt, 8ec7f7, bold.

The text beneath them should be Arial, 14pt, c2e3ff, bold.

Use relevant icons next to each heading.

Step 25

Create a rectangle at the bottom of your canvas called 'copyright area'. Fill it with 12548c.

Then reduce this layer's opacity to 55%.

Apply an inner shadow effect (settings below), and then some text (Mido, 18pt, white). Reduce your text layer's opacity to 30%.

And We're Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome: