Designing a Generic Blog Layout: Part 2

First create a new photoshop document with the following specifications

Then select the rectangle tool (u) and create a new object that is 900 x 200 px. In the layers panel, change the name of this layer to ‘header’ (make sure that this layer is center, top aligned) Set the color of this layer to #cccccc

Now we will create the sidebar - with the rectangle tool (u) still selected, create a rectangle with the same color #cccccc and with dimensions of 300 x 500px. In the layers panel, change the name of this layer to ’sidebar’

Make sure that there is a 10px space between the bottom of your header and the top of your sidebar

Now, we will create the main content column - with the rectangle tool (u) still selected, create another rectangle with #cccccc as its color and with the following dimensions: 650 x 500px. In the layers panel, change the name of this layer to ‘mainContent’

Again, make sure that there is a 10px space between the bottom of the header and your main content column. Also, make sure that there is a 10px space between the right edge of the main column and the left edge of the sidebar

The final wireframe element that we will create is the footer - with the rectangle tool (u) still selected, create another rectangle with #cccccc as its color and these dimensions:960 x 20px. Make sure that there is a 10px space between the bottom of your main content/sidebar columns and the top of your footer. In the layers panel, change the name of this layer to ‘footer’

Now that we have that done, lets setup some guides along those newly created layers like this

We will now focus on the content & elements of each area. Since we have most of the layout structure set, I will at a faster pace through these next explanations so we can get these elements in place and ready for the graphic skinning.

HEADER

For the header, let’s just create a quick dummy logo & place it like this

Now let’s create a search box & button and place it like so

The last header element will be our navigation, which is just arial, 10px, uppercase and placed like so

MAIN CONTENT

First with the rectangle tool (u), create a rectangle with a black fill and at 160 x 120px

Then using the select tool (v) alt+click on that rectangle and drag out to create a copy of that, repeat that one more time so that you have three rectangles like so

Now with the (u) tool still selected, create another rectangle that is 610 x 140 with the following layer affect applied

Create two copies of this layer just like you did for the one before, make sure that the 3 larger rectangles are beneath the smaller three in the layer pallette align the 6 of them like so

Now lets add some text to each section - the header is arial, 18px, bold & the content is arial, 12px. The link is arial 12px bold #0062d0. Align the text like so

That is our featured posts section - the last thing we need to complete it is a title: arial, 18px. like the following

SIDEBAR

There are a lot of popular blogs that sell advertising spots in their sidebar nowadays. One common size for these is 125 x 125 px. So, select the rectangle tool (u) and create 4 boxes at 125 x 125px like so

Now we will create the recent post section - make a header that is arial 14px like so

Beneath that let’s make some placeholder links that are arial 12px bold #0062d0 like so

The last sidebar element that we will create is the categories, create a copy of the recent post header and change it to say ‘Categories’ like so

After that create a copy of the links in the recent post section and change them to generic category names and place them like so

FOOTER

All we need to do for the footer is make a couple of text links that say ‘Copyright’ and ‘Privacy’ like this

That completes part 2 of this tutorial. Part 3 will be the graphic skinning of this blog layout!