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

GreenPress WordPress Theme Design


1. The first step we want to make is to create a new document with the dimensions of 1024x 1478 for the purpose of this tutorial.

GreenPress WordPress Theme Design image 1

2. Now we want to go ahead and set up our logo and links in the top right. For the logo I used Helvetica with the color #000000 set to Regular, and Anti-Alias set to Crisp. The second half of the logo I used the color #6B9913, with it set to Bold and the Anti-Alias to Crisp. For the links I used the color #323232

GreenPress WordPress Theme Design image 2

3. Next use your Rectangle Tool with any color to make a rectangle similar to the following

GreenPress WordPress Theme Design image 3

4. Using your Polygonal Lasso Tool make a 'triangular' shape under your home link and fill it with the same color as your rectangle layer, on your rectangle layer.

GreenPress WordPress Theme Design image 4

5. Now go ahead and right click your layer and choose blending options from the drop down menu and insert the following

GreenPress WordPress Theme Design image 5

GreenPress WordPress Theme Design image 6

6. On a layer under your newly created rectangle, make a selection similar to the following with your Rectangle Marquee Tool and fill it with #000000

GreenPress WordPress Theme Design image 7

7. Now lower the opacity to 10% and you'll have something that looks very similar to the following

GreenPress WordPress Theme Design image 8

8. At the bottom of your rectangle make a selection similar to the following and fill it with #FFFFFF. Make sure its nudged up a pixel from the bottom

GreenPress WordPress Theme Design image 9

9. Then just go ahead and set its blend mode to Soft Light.

10. Now for a search box. Go ahead and create a new layer and fill it with black in a similar shape to the following and lower the opacity to 28%. This will serve as the housing for our search field.

GreenPress WordPress Theme Design image 10

11. Next go ahead and place a white rectangle inside of it to serve as the search input field. Make sure its own its own layer and fill it with #FFFFFF

GreenPress WordPress Theme Design image 11

12. Then we want to go ahead and make a search button. Using your rectangle marquee tool make a selection similar to the following and fill it with #FFFFFF.

GreenPress WordPress Theme Design image 12

13. Now insert the following blending options onto its layer

GreenPress WordPress Theme Design image 13

GreenPress WordPress Theme Design image 14

14. Go ahead and add some text similar to the following and you should have something that looks like this

GreenPress WordPress Theme Design image 15

15. To fill up the rest of the banner we can add a summary for what our website does and add a nice icon. You can use the icon that I used by downloading the source files at the end of the tutorial.

GreenPress WordPress Theme Design image 16

16. That's it for the header, so lets go ahead and show how our posts will be displayed. Go ahead and make a rectangle in similar width going down your entire document and fill it with any color (we will be overriding it).

GreenPress WordPress Theme Design image 17

17. Now right click this layer and choose blending options from the drop down menu and insert the following

GreenPress WordPress Theme Design image 18

GreenPress WordPress Theme Design image 19

18. Next we want to make a background for each separate post. to do so use your rectangle marquee tool and fill it with #000000 similar to the following

GreenPress WordPress Theme Design image 20

19. Now go ahead and insert the following blending options onto its layer

GreenPress WordPress Theme Design image 21

GreenPress WordPress Theme Design image 22

20. Next all you need to do is add some fake content and it will look something like this

GreenPress WordPress Theme Design image 23

And then you can just repeat that for the left side.

21. Now lets move onto our sidebar. We will be doing the same thing as in Step 17, and you'll have something that looks like this for the sidebars background

GreenPress WordPress Theme Design image 24

22. Then just add in some fake content like so and you have a sidebar!

GreenPress WordPress Theme Design image 25

23. For the dividers between content I used #FFFFFF on the bottom, and #E7E7E7 on the top

GreenPress WordPress Theme Design image 26

24. Now its time for the footer. Go ahead and make a selection at the bottom similar to this and fill it with any solid color

GreenPress WordPress Theme Design image 27

25. Now insert the following blending options onto its layer

GreenPress WordPress Theme Design image 28

GreenPress WordPress Theme Design image 29

26. Like the header, we wan to make a selection at the top of the footer and fill it with #FFFFFF. Make sure its own its own layer

GreenPress WordPress Theme Design image 30

27. Then set its layers blend mode to Overlay.

28. Now we want to make sure our footer is pretty simple. For the rectangles, All i did was create a rectangle and lower the opacity to 29%. For the text in the rectangles I used #FFFFFF font and lowered the opacity to 65%. Arrange it like so

GreenPress WordPress Theme Design image 31

29. Now just do something similar for Archives and a little contact area and you should come up with something like the following

GreenPress WordPress Theme Design image 32

30. When it all comes together you should have an end result like this

GreenPress WordPress Theme Design 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 "GreenPress WordPress Theme Design"

Only registered users can write comment

Reader's comments