PSDFan Extra

How to Design a Modern Blog Layout

Final Image

As always, this is the final image that we’ll be creating:

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:

About the Author:

Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

Leave a comment


  1. A nice blog design. As more and more people are using blogs, you need to have something that really stands out and represents the blog visually as well as the content that is growing within it.

  2. Tom says:

    Thanks guys! I definitely tried to make something that really ‘pops’ with this design :)

  3. markcung says:

    What could I say except What a Great Tuts!?

  4. Tar says:

    Great Tutorial, Thanks a lot.

  5. great tutorial! i love the background colors used on it

  6. Hello Tom, just finished the tutorial, love it :) It was easy to follow, and the final output looks really nice.

  7. Very detailed, step by step, tutorial. Hope I can see template making tutorial for e-commerce type website. Thanks, mate!

  8. Vic Elliott says:

    Excellent looking, but the part I’m stumped at is how to make WordPress use it as a template? I want to use the templates I’ve created for a website for a client for the blog portion of his site but I don’t have the slightest idea how to make WordPress look like anything but the “themes” available. Any suggestions on a quick guide to putting it all together?


  9. Tom says:

    Thanks for the great comments everyone.

    Vic Elliott: I think you’re referring to a coding tutorial. We’ll be releasing some of these in the future, but right now we’re sticking to design tutorials.

  10. Great blog design tutorial and as more people are starting to blog, this is a good starting point for anyone who wants to have their own blog site. Thanks for sharing this.

  11. wow, I have very often wondered how that was done, having just started a photo blog, I am going to have a go at this, great tutorial thanks Lyndon

  12. izrada sajta says:

    Very usefull, thanks for share!

  13. web dizajn says:

    Exsellent, tutorial thanks …..

  14. Web dizajn says:

    Just finished the tutorial, i just want to thank you as the author and also my friend Marko for referring the link to me!

  15. milos says:

    Nice work, thanks

  16. Hi Tom, very nice tutorial.

  17. Great design tutorial, very detailed and looks really nice.

  18. Nikola says:

    Very nice tutorial, thanks for sharing this

Leave a Comment:

Related Posts

Your Design Work, But More Awesome:

Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.