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.

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

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.

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

image 4

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

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

image 6

8. It will look something like this

image 7

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

image 8

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

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

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

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)

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

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

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

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

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

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

image 18

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

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

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

image 21

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

image 22

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

image 23

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

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

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

image 26

27. Your heading will now look like this

image 27

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

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

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



Author's URL: PSDVIBE
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Chocolate Pro WordPress Style Layout"

Captcha