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

MyBlues WordPress Style Layout


1. The first thing we want to do is create a new document. For this tutorial I used the dimensions 1024x998.

MyBlues WordPress Style Layout image 1

2. Using your paint bucket tool fill your background layer with #155281.

3. Next use your rectangle marquee tool to make a rectangle similar to the following and fill it with #0D3D62. This will serve as the back of our navigation.

MyBlues WordPress Style Layout image 2

4. We want to add a little 'shine' to the bottom of the horizontal nav menu. Using your rectangle marquee tool make a 1px high selection at the bottom similar to the following and fill it with #FFFFFF

MyBlues WordPress Style Layout image 3

5. Go ahead and change the blend mode to Soft Light and then lower the opacity to about 61%

6. Using your text tool go ahead and add some links in a manner similar to the following. I used Helvetica for the links, with the color #F0F8B9.

MyBlues WordPress Style Layout image 4

7. Next we want to make a search box. Using your rectangle marquee tool make a selection similar to the following and fill it with #FFFFFF.

MyBlues WordPress Style Layout image 5

8. Now insert the following blending options onto its layer

MyBlues WordPress Style Layout image 6

MyBlues WordPress Style Layout image 7

9. Then go ahead and add some text to the search box, and the I used the search icon from the diagonal icon pack.

MyBlues WordPress Style Layout image 8

10. The last thing for your navigational menu is to add a logo. Using your elliptical marquee tool with a feather of 10px, make a selection similar to the following and fill it with #FFFFFF.

MyBlues WordPress Style Layout image 9

11. Next, we want to add a layer mask to this layer. Make a selection similar to the following and click the layer mask icon in your layers pallet.

MyBlues WordPress Style Layout image 10

MyBlues WordPress Style Layout image 11

12. Make sure the 'link' between the mask and the layer is unlinked. And then lower the opacity to 59% and change the blend mode to overlay.

MyBlues WordPress Style Layout image 12

13. For the font I used Prototype and used the following blending options

MyBlues WordPress Style Layout image 13

MyBlues WordPress Style Layout image 14

MyBlues WordPress Style Layout image 15

14. It will look something like this

MyBlues WordPress Style Layout image 16

15. Using your Rounded Rectangle Tool with a radius set to 10px, make a rectangle similar to the following

MyBlues WordPress Style Layout image 17

16. Under the layer you just created, we want to add another rounded rectangle similar to the following. This is where all your footer information will be.

MyBlues WordPress Style Layout image 18

17. Now insert the following blending options onto that layer

MyBlues WordPress Style Layout image 19

MyBlues WordPress Style Layout image 20

18. Now its time for our Sidebar. Use your Rectangle Marquee Tool make a selection similar to the following and fill it with #000000.

MyBlues WordPress Style Layout image 21

19. Now insert the following blending options onto its layer

MyBlues WordPress Style Layout image 22

MyBlues WordPress Style Layout image 23

MyBlues WordPress Style Layout image 24

MyBlues WordPress Style Layout image 25

MyBlues WordPress Style Layout image 26

20. Using your Polygonal Lasso Tool make a selection similar to the following and fill it with #0E161D

MyBlues WordPress Style Layout image 27

21. Then do the same thing for the bottom and it will look like this

MyBlues WordPress Style Layout image 28

22. Now I went ahead and added some 'filler' content. For the headings (ie. Sponsors, Categories, Top Commenters), I used Helvetica with the color #E3E3E3. For the background of the categories links, I used #222F38, and for the text I used #8BCEF0

MyBlues WordPress Style Layout image 29

23. Next lets go ahead and lay out our posts. Starting with the date box, use your Rectangle Marquee Tool to make a selection similar to the following and fill it with #000000 and place some white text over it.

MyBlues WordPress Style Layout image 30

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

MyBlues WordPress Style Layout image 31

MyBlues WordPress Style Layout image 32

25. Use your Rectangle Tool again to make a rectangle similar to the following and fill it with #2B3236 and place the text for the month and year over it.

MyBlues WordPress Style Layout image 33

26. Next go ahead and add some text for your title, and then a bar under it for tags and author information.

MyBlues WordPress Style Layout image 34

27. I used the following blending options for that bar

MyBlues WordPress Style Layout image 35

MyBlues WordPress Style Layout image 36

28. I then added in some filler text and then added a bottom bar to display the amount of comments in the post.

MyBlues WordPress Style Layout image 37

29. I used the following blending options for the comments bar

MyBlues WordPress Style Layout image 38

MyBlues WordPress Style Layout image 39

30. The last thing to do is to add the footer information. It's pretty straightforward when it comes to this. For the back of the link boxes I used #051E32, and #9EA8B1 for the text.

MyBlues WordPress Style Layout image 40

31. Thats it! When your done it should look something like this

MyBlues 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 "MyBlues WordPress Style Layout"

Only registered users can write comment

Reader's comments