Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Chocolate Pro WordPress Style Layout

Chocolate Pro WordPress Style Layout


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

Chocolate Pro WordPress Style Layout image 1

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

Chocolate Pro WordPress Style Layout image 2

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

Chocolate Pro WordPress Style Layout image 3

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

Chocolate Pro WordPress Style Layout image 4

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

Chocolate Pro WordPress Style Layout image 5

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

Chocolate Pro WordPress Style Layout image 6

8. It will look something like this

Chocolate Pro WordPress Style Layout image 7

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

Chocolate Pro WordPress Style Layout image 8

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

Chocolate Pro WordPress Style Layout image 9

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

Chocolate Pro WordPress Style Layout image 10

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

Chocolate Pro WordPress Style Layout image 11

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)

Chocolate Pro WordPress Style Layout image 12

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

Chocolate Pro WordPress Style Layout image 13

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

Chocolate Pro WordPress Style Layout image 14

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

Chocolate Pro WordPress Style Layout image 15

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

Chocolate Pro WordPress Style Layout image 16

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

Chocolate Pro WordPress Style Layout image 17

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

Chocolate Pro WordPress Style Layout image 18

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

Chocolate Pro WordPress Style Layout image 19

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

Chocolate Pro WordPress Style Layout image 20

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

Chocolate Pro WordPress Style Layout image 21

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

Chocolate Pro WordPress Style Layout image 22

23. Go to Edit >Clear and it will look like this

Chocolate Pro WordPress Style Layout image 23

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

Chocolate Pro WordPress Style Layout image 24

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

Chocolate Pro WordPress Style Layout image 25

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

Chocolate Pro WordPress Style Layout image 26

27. Your heading will now look like this

Chocolate Pro WordPress Style Layout image 27

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

Chocolate Pro WordPress Style Layout image 28

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

Chocolate Pro WordPress Style Layout image 29

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

Chocolate Pro WordPress Style Layout Tutorial: Final Result



Author's URL: PSDVIBE
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Chocolate Pro WordPress Style Layout"

Only registered users can write comment

No comments yet...