This is my 2nd attempt of creating a attractive blog layout in photoshop, My previous attempt : How to Create Greenary Wordpress Layout In Photoshop had a fair amount of response and had even been converted to working Blogger theme which is being used by more than 100′ds for blogspot blogs !!

This design which have grey and blue as their main base colours, PSD file have been attached at the end of the tutorial for your convenience, but please note i haven’t been able to get much time to arrange the layers and release, so you have to cope with un-arranged layers, and as always this theme is free and can be used on any commercial or personal purposes (i prefer the proper credit be given though). If anybody want to convert it into working theme don’t forget to let me know how you did

Final Layout

Creating The Header & Menu

1) Create a New File  (Width 1020, Height 1550)

2) Use the rectangle tool to draw a rectangle in the top.

3) Open Layer Style Palate and give it a gradient as shown in image below.

4) Create another rectangle just below the upper rectangle and add the following layerstyle.

It will look like below after your done.

5) I’ve created the top right menu using Myriad Pro (condensed) 16pt.

6) The main top menu text have been done using Myriad Pro (Bold Condensed) 24pt #444444. In the logo Myriad Pro (Black Condensed) 76pt have been used and layer style shown below have been added. Slogan is 18pt Myriad Pro (Black Condensed). If you dont have Myriad Pro, i’d recommend using Impact for the logo and Arial in other areas.

Creating Featured Section & Polishing Borders

7) Now similar to what you have done with menu, create a rectangle just below menu with approximately double height of the header, and add a light grey to medium grey, linear gradient using layer styles. This box will be used for the featured post section.

8 ) Now we’ll learn how to polish the edges to make them look more edged, this is a very easy trick, all you have to remember is that we need to 1px lines side by side, 1 will be of darker colour and another lighter colour. Check the image below.

If you are unsure about the colour, just add 1 black and one white line and play with the opacity slider in layers panel.

9) The featured post Heading text have been created using Myriad Pro (Semi Condensed) 36pt, and a gradient have been added (linear #7d7e7d to #oeoeoe). The paragraph text : Arial 14pt #434343.

10) For the button select Rounded Rectangle tool and select 20pc as radius, then draw a small rectangle. Give it a grey to white gradient and 1pc white stroke. The text is Arial Bold 18pt, with a inner shadow, the setting can be checked using the PSD file.

11) The image have to have the following style.

13) Now the last thing we need for the featured section is a shadow, which is very easy thing to add, create a new layer behind the featured post layer and create a elliptical circle, then give it a guassian blur of 25-35 px, and the readjust the position and lower the opacity to 33.

The final image uptil now for what we have done.

Creating The Posts

14) Creating the main body is easy as hell, 1st divide the width of document using the guides into two sections for your convenience. Then draw a white rectangle just below the menu rectangle. On the left section where the blogposts are visible, I have used Arial 24pt Bold, dark blue colour texts. Then i have used the line tool to draw a wide line below of two colours one light blue and one dark. Then on the right i have used Arial 12pt text. Check the image below.

For the paragraphs i have used Arial 14 pt, light grey color.

15) Next you again need to draw a rounded rectangle with 5px radius just below the paragraph, and add a 1 pc inner shadow of white colour, layer style to normak and choke to 1oo, and distance to 0, and also add a light grey  gradient , and a stroke or 1 px light grey outside. Then using Arial font write comments on left and read more on right. Go to custom shape tool and select arrow shape and draw a small arrow beside read more, and change the colour to blue.

Same way do this for the 2nd post only changing the content and the positions.

Creating the Sidebar

16) Now the main thing that need to learn about the sidebar is the box style, create a rectangle with 5 px radius, and follow the styles given below.

17) For the heading i have used Myriad Pro (Semibold Condensed, and Condensed) 36pt, with a medium grey to dark gey gradient. For the search box draw a white rectangle with 1px grey border, The search butoon is self explanatory.

18) For the catagories text and popular article text refer to the image below.

19) The last thing that is left is the divider, which i have mentioned earlier, is a dark and light line, side by side, check the image below for explanation.

Creating The Footer

20) Now as before create another rectangle below the middle rectangle, and add a linear gradient, #2a2a2a to  #373737. The big texts are created using 30pt Arial Bold white color, and Arial Bold 12pt color #747474. Now as always use the dark line and white line as the divider.  And the last thing you need to do is add a shadow, by the process mentioned above using a an ellipse and then blurring it and changing opacity. And yes you theme is finished.

Epilogue

I’m very much interested to know if you like the theme and am also interested in seeing your own personalised versions which you come up with. If its good i will even add it in this tutorial with your name beside it Hope you enjoyed the tutorial as much as i did writing it. Below is the download link for the PSD file.