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.
















Loading...
18 Responses
psaddict
Added to http://www.psaddict.com
Anto
very nice
, downloaded, i shall be playing around with this.
Matthew Heidenreich
have fun
, hope you enjoy!
purwasila
very nice…. can you give me CSS your template ?
hahaha
Matthew Heidenreich
I didn’t code this theme. Or if your talking about my current design, since its similar to the result of this tutorial, i can’t really stop you from taking a peek at it.
keletso
nice tutorial, and very helpful i’ll be teaching myself with this tutorial
Tom
Well thats only the skin, what about the css and rest of wordpress theme?
Thanks.
Anto
@Tom
This is a psd site. If there was css and xhtml, or therefore wordpress code, it would be, wpvibe.com or cssvibe.com.
Psd is in the domain name for a reason
Matthew Heidenreich
@Anto
Ha, nice explanation. Though, I don’t have the time to sit down and code it, once I get the funds I will just pay people to code these up for me and release them for free (because i’m a nice guy)
Vasu
Good work man
CgBaran Tuts
Great Tutorial
Business Cards
How chocolatey! Now if I could just grab that Reese’s
Thanks for sharing this tutorial, pretty cool!
Mike
Thanks for sharing this. I have been seeing the sidebar effect more and more and was wondering how to do that.
thanks,
-chicago web design
Lawny
Thanks for the tutorial Matthew i have bloggerized this layout and give you credit in the footer see live demo here http://chocolate-template.blogspot.com and i have released it on my blog here
http://lawnys-templates.blogspot.com/2009/04/2-column-chocolate-style-blogger.html
thanks once again
Louie Anderson
Way to steal icons from commercial products and pretend that you had anything to do with them.
Dave
Turns out “simple little icons” you find on the web have copyrights. Not very professional, mate.
Kyle
Way to steal a logo from Panic.
Rob
So, are you gonna give credit to Panic, Inc. for the little candy icon on the left side of the word “chocolate”? Or just steal intellectual property?