How to Create a Blog Layout in Photoshop

January 23, 2012 · 2 comments

by sanjay

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!


ElegantThemes
ThemeForest

Advertisement

Blog Layout

How to Create a Blog Layout in Photoshop

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.

How to Create a Blog Layout in Photoshop

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.

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

In Gradient, follow this colors and hit OK.

How to Create a Blog Layout in Photoshop

Follow the Gradient Settings above.

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

You should have something like this.

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

Here is your logo.

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

Your navigation should look like this.

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

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.

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

Copy the gradient color settings above.

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

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!

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

In gradient, follow the settings above.

How to Create a Blog Layout in Photoshop

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

How to Create a Blog Layout in Photoshop

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.

How to Create a Blog Layout in Photoshop

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 :)

How to Create a Blog Layout in Photoshop

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.

How to Create a Blog Layout in Photoshop

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.

Author : Sanjay Khemlani

Sanjay is a Web Designer from Philippines, he is dedicated to clean coding and effective design. He also writes tutorials about Web IU and Web Design on his blog.

 

{ 2 comments… read them below or add one }

alfian saputra November 11, 2012 at 9:06 am

thanks guys

Reply

Mark Weller January 24, 2012 at 7:48 am

This goes along fine until the instruction to “drag andd drop the image”. There is no image to drop that I can see.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post:


Web Analytics