This is your final result

1. The first thing we want to do is create a new document. For this tutorial I used the dimensions 1024×998.

2. Using your paint bucket tool fill your background layer with #155281.

3. Next use your rectangle marquee tool to make a rectangle similar to the following and fill it with #0D3D62. This will serve as the back of our navigation.

4. We want to add a little ‘shine’ to the bottom of the horizontal nav menu. Using your rectangle marquee tool make a 1px high selection at the bottom similar to the following and fill it with #FFFFFF

5. Go ahead and change the blend mode to Soft Light and then lower the opacity to about 61%

6. Using your text tool go ahead and add some links in a manner similar to the following. I used Helvetica for the links, with the color #F0F8B9.

7. Next we want to make a search box. Using your rectangle marquee tool make a selection similar to the following and fill it with #FFFFFF.

8. Now insert the following blending options onto its layer

9. Then go ahead and add some text to the search box, and the I used the search icon from the diagonal icon pack.

10. The last thing for your navigational menu is to add a logo. Using your elliptical marquee tool with a feather of 10px, make a selection similar to the following and fill it with #FFFFFF.

11. Next, we want to add a layer mask to this layer. Make a selection similar to the following and click the layer mask icon in your layers pallet.

12. Make sure the ‘link’ between the mask and the layer is unlinked. And then lower the opacity to 59% and change the blend mode to overlay.

13. For the font I used Prototype and used the following blending options

14. It will look something like this

15. Using your Rounded Rectangle Tool with a radius set to 10px, make a rectangle similar to the following

16. Under the layer you just created, we want to add another rounded rectangle similar to the following. This is where all your footer information will be.

17. Now insert the following blending options onto that layer

18. Now its time for our Sidebar. Use your Rectangle Marquee Tool make a selection similar to the following and fill it with #000000.

19. Now insert the following blending options onto its layer

20. Using your Polygonal Lasso Tool make a selection similar to the following and fill it with #0E161D

21. Then do the same thing for the bottom and it will look like this

22. Now I went ahead and added some ‘filler’ content. For the headings (ie. Sponsors, Categories, Top Commenters), I used Helvetica with the color #E3E3E3. For the background of the categories links, I used #222F38, and for the text I used #8BCEF0

23. Next lets go ahead and lay out our posts. Starting with the date box, use your Rectangle Marquee Tool to make a selection similar to the following and fill it with #000000 and place some white text over it.

24. Then go ahead and insert the following blending options onto its layer

25. Use your Rectangle Tool again to make a rectangle similar to the following and fill it with #2B3236 and place the text for the month and year over it.

26. Next go ahead and add some text for your title, and then a bar under it for tags and author information.

27. I used the following blending options for that bar

28. I then added in some filler text and then added a bottom bar to display the amount of comments in the post.

29. I used the following blending options for the comments bar

30. The last thing to do is to add the footer information. It’s pretty straightforward when it comes to this. For the back of the link boxes I used #051E32, and #9EA8B1 for the text.

31. Thats it! When your done it should look something like this

Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly.

 
Get a commercial/public use licence for this PSD (More info)