How to Create a Blog Layout in Photoshop

Creating a blog layout isn’t that hard, the only thing you need is what kind of layout do you want. It maybe two column, three column and the list goes on. Keep in mind however that most themes have multiple page templates today e.g. blog index, archive page, contact page, front page (for CMS style sites where the blog is just an element). Today we will create a blog layout (the blog index page) in Photoshop, and convert it onto HTML / CSS (on the next series) and finally on a convert it again on a WordPress Theme. I hope you are ready because everything will be from scratch.

Our first part is to create the layout in Photoshop, and we are using a two column layout for our blog.

I suggest you subscribe to our RSS because this will be a series of tutorials and you don’t want to be left behind!

Advertisement

Blog Layout

Let’s begin!

Create a new file as shown below.

Open your canvas and set the sizes to 1000px for width and 1300 for height.

Fill your background with #f9faf9 and go to filter > noise > add noise, set the amount to 1%.

Create a new layer name header, grab your Marquee Tool (M) and select 100px on top, fill it with #404040.

We will now create a logo, select the color #ff6f17 and use the font Eras Bold ITC 53PT.

Select Blending Options > Drop Shadow and set the color to #dbdbdb, the rest is default.

On Inner Glow, set the color to #fbfbfb and size to 1px.

In Gradient, follow this colors and hit OK.

Follow the Gradient Settings above.

In Stroke, set the color to #fcc19f and size to 1px.

You should have something like this.

For the “Magazine” word, select drop shadow color #000000, size and distance to 1px.

Here is your logo.

We will create the navigation, use Arial Regular 28pt color #fff except on “Home” which is color #000000.

Grab your Rounded Rectangle Tool (U) radius 8px, and create the shape under home layer.

Select Marquee Tool (M) and delete the lower part of the current layer.

Your navigation should look like this.

Now on the content. Grab your Rounded Rectangle Tool (U) raduis 3px and select the left side of the canvas.

Still on content layer, go to blending options > drop shadow, use the color #dfdfdf. Blending Mode to normal, and the rest are defaults.

In stroke, color is #dcdcdc and set the size to 1px.

Grab Marquee Tool (M) and select a rectangular shape inside content layer.

Drag ‘n drop the image and right click > create clipping mask. The image will be inside the selected box.

On our image layer, select inner glow  and set the blending mode to normal, the rest are defaults.

Stroke color is #959595 and set the size to 1px, Opacity to 40%.

Check out the border of the image. I also added some text, for the title I use Bebas 32pt color #505050 and the exceprt is Arial 28pt color is #888888 Regular.

Duplicate the layers and post different pictures so it’ll look more alive.

Now we will work on the sidebar, grab Rounded Rectangular Tool (U) and set the radius to 3px.

Blending Option > Drop Shadow, set your foreground to #818181 and distance to 1px.

Inner Glow, change blending mode to normal and size to 1px.

Copy the gradient color settings above.

In stroke, color is #b1b1b1 size is 1px, Opacity 100%.

You should have the same image as above, I also added some text. I use Bebas 28pt color #8f8f8f. Next is to sunken the text!

For our sunken text, in drop shadow color #ffffff, blending mode normal and distance & size are 1px.

Inner shadow color is #f2f2f2 and distance and size is 1px.

This is our title sidebar, compare the one you have above

Now we will create an advertisement holder, select Marquee Tool (M) and draw a 125px by 125px on the sidebar. Fill with #5f5f5f.

In gradient, follow the settings above.

Now we have these ads holder. Next is to add some text.

I added some text, I use Arial 19pt Regular color is #fffff. And then I added some dropshadow set the color to #00000, size and distance to 1px. Duplicate the layer and display 2 in a row.

For sidebar title just duplicate the one that we created above. Create some text for random post section, I use Bebas 24pt color #505050.

Grab your Elliptical Marquee Tool (M) and draw a line under the title of the post. Create a new layer and fill the first one with #d9d5d7, create a new layer again (for the second one) and fill it with #ffffff. I use brush for filling the lines with colors

Now, press your down arrow keys once to drop 1px and show the first layer of line. See the sunken line effect on close up.

Duplicate the layer and fill in those left titles. You can compare your work now

For footer, select Marquee Tool (M) and fill it with #404040. For the text I use Arial 12pt color #8f8f8f with a little bit of drop shadow.

There you have it! You see creating a blog layout on Photoshop isn’t that hard, and we are just getting started. The next part is converting this into HTML and CSS, remember we will convert this into a full working WordPress Theme so I suggest to subscribe on RSS so you’ll know when will be the next part. See you on the next series

Download the free PSD file here.