1. Let's start by importing the 960 grid template into Photoshop. The 960 grid template is a very usefull tool for designers, which can be downloaded for free here.
2. Time to create our background. Pick the paint bucket tool and fill the background with #27343C.
3. Now, let's tracing our website main content area. Pick the rectangular marquee tool and create a square of 960px wide for approximately 725px height. Create a new layer, and fill it with light grey (#EEEEEE)
4. Create a new layer, pick the rectangular marquee tool and create a rectangle of 420 px wide, starting at the 6th red column from the 960 grid template. Fill the rectangle white white (#FFFFFF).
5. On the layers window, right click on the last created layer and select "Blending options". Apply the "Drop Shadow" effect with the following parameters:
6. Let's create our main navigation menu: Simply create a new layer, and create a 960px wide squareon the top of the page. Fill it with light grey (#EEEEEE).
7. Pick the text tool and select the Arial font. Select #27343C as text color, and type your menu items (Should be "Home", "About us", etc. Use the grid template to align the menu items.
8. Our design starts to look great, don't you think? It's now time to fill up the main content space.
Create a new layer set and name it "Post".
For the post titles, I chose a 24pt, bold Georgia font. Color is #27343C.
The thumbnail size is 180*180 pixels. It is inclued in the resource pack of this tutorial.
The excerpt text is italic, 12pt arial with a #555555 color.
9. Let's take some time to add fancy details to our post display. Pick up the rectangular marquee tool and create a 269px wide rectangle. Fill it with background color (#27343C). Once done, Type your text using 12pt bold arial font, color #EEEEEE.
10. Make sure that all designs elements of the "post" content area are in the "Post" layer set. Then, duplicate the layer set (Cmd + J) to fill the content space as shown in the screenshot below:
11. Now, let's populate the right sidebar. Due to its small size, it is particulary great for 125*125px ads. Create a new layer set, name it "right sidebar", then pick up some advertisment images and insert it in the design.
12. We now have a great looking right sidebar! Time to fill up the white space on left sidebar with useful information that you can find on any good blog: author info, recent posts, etc.
Create a new layer set and call it "Left sidebar" for left sidebar content. When using WordPress, sidebar info is often contained within widgets, so I kept widgets in mind when designing.
13. I chose to first add author information. The first thing to do is to add your picture (90*128px). Once you added the picture to the design, right click on the picture layer in the layers window, and select "blending options" in the menu. Go to "Stroke" and add a 5px #DDDDDD stroke. Then, add some text to tell the reader a bit more about yourself. I have used Georgia font, italic, with a size of 14pt.
14. For the title, I have choosen 18pt Arial Black font with #27343C color.
15. For the "Read more about Jean" text, create a new layer, pick the rectangular marquee tool and create a rectangular shape of 180*27 pixels. Fill it with #27343C. For the text, the font used is bold Arial, 12pt.
16. To finish our widget, we have to create a separator. To do so, pick up the line tool and draw a horizontal line below the text. Color used is #CCCCCC. Once the line is created, right click on its layer in the layers windows, and select "Rasterize layer".
17. Left sidebar is starting to look great! Repeat steps 13 to 16 as necessary to fill up sidebar's space with the information useful to you.
18. We're almost done. Let's add some information on the footer. Simply pick up the text tool, the #FFFFFF Georgia italic font, and add your footer info.
19. The final step is to create and add a logo to our design. Let's start by writing some text, like for example "A Webdesigner Weblog". I have used the Santa Fe LET font. Once the text is written, we can add some style. Right click on the text layer on the layers window and select "Blending options".
Select "Stroke" and add a 4 pixel stroke. Then, select "Color overlay" and fill the text with background color (#27343C).
To inclinate the text layer, make sure the layer is selected, hit Cmd+T (Ctrl+T for Windows users) and then rotate the layer a bit. To make the logo looks a bit better, we should definitely add an icon; I got that nice painting palette icon on Iconfinder.
20. Work's done! Look what we created together:
More Tutorials: 
