Chocolate Pro WordPress Style Layout

In this tutorial you will learn how to create a brown ‘Chocolate’ WordPress style layout that is very professional. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Author:

Matthew Heidenreich

Category:

Photoshop

This will be your final result

1. The first thing we want to do is create a new document. For the purpose of this tutorial, make it around 1024×998.

2. Next we want to go ahead and change our background color. Using your Paint Bucket Tool fill your background layer with #B2CFD7.

3. Now we want to go ahead and define our main content area for the document. Using your Rectangle Marquee Tool create a selection similar to the following and fill it with #402E18

4. Next add the following blending options to its layer by right clicking your layer and choosing blending options from the drop down menu.

5. Now we want to start from the top and work our way down. So using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #321E09

6. Using your Rectangle Marquee Tool again make a similar selection to this and fill it with #42301a on its own layer.

7. Now using your Rectangle Marquee Tool yet again make a selection parallel to the last box you made 1px high and fill it with #56462F

8. It will look something like this

9. Now do the same thing for the following selections, but instead fill it with #50391F

10. When you zoom out your document will look like this

11. Next lets go ahead and add our category links. Using your Text Tool with the font Helvetica Neu, place the text similar to this

12. We want to have something dividing each category, so with your Marquee Tool make a 1px wide selection and fill it with #50391F. Repeat that process between each link and you should have something that looks like this

13. Now we want to add a little logo to the theme. The main color in my text logo is #F8F0A5. The secondary title font color is #A3D7E5, and then I just used a simple little icon I found on the web (the candybar application icon)

14. Now we want to make an area for the links the various pages we will have on our blog. For your active link use the color #FFFFFF, and for our non-active links use the color #F8F0A5

15. We want something inbetween each link to act as a ‘separator’, and to give it more detail. So zoom in and make a selection with your Rectangle Marquee Tool similar to the following and fill it with #402E18

16. Next copy the layer you just created and place it in between each of your links and it will look like this

17. We will be using the same process for our feed subscription area on the right side of our template. The font colors for each word are as follows:

Subscribe = #FFFFFF ; Posts = #F08A13

I then threw a little standard RSS Icon in the mix and you’ll have something that looks like this

18. This last step for the header is optional depending on your taste. I wanted to add a little texture to our header. So I found this Cement Texture and placed it on a layer above the first 2 layers for our header. Set the blending mode to Multiply and then lower the opacity to something around 37% and you should have something like this

19. Now its time for the sidebar. Shall we? Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #483723

20. Next right click your newly created layer and choose blending options from the drop down menu and insert the following

21. Then lets make sure the background to our Sidebar is 1px away from the border of our content area. Using your move tool, just nudge it over 1px so the border of your sidebar appears light and dark like the following

22. We then want to work on the headings for each section of our sidebar. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #C7BD80

23. Then using your Polygonal Lasso Tool make a selection similar to the following

23. Go to EDIT>CLEAR and it will look like this

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

25. Next we want to show the the heading “Folding” behind the layout. To get this effect make a selection using your Polygonal Lasso Tool similar to the following and fill it with #B4AB73

26. The last step is adding some text to our heading. For our font color I used #321E09, and used the following blending options on our text layer

27. Your heading will now look like this

28. Go ahead and repeat the process and add some content and your sidebar will look like this

29. Now all thats really left is the post area on the left side. Go ahead and lay your posts out something similar to the following

30. For the footer I used a background color of #2C1B0A, and a font color of #705F45. I also used an icon to give the option to jump to the top of the page. When you finish you should have something that looks like the following

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

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.

If you enjoyed this tutorial please take a moment to visit one of our sponsors.

Show Some Love
Thank you for your support

18 Responses

Leave a Comment

Name (required)

Mail (required)

Website

Message

 

Sponsors