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

Tutorial Site Blog Design


1. Create a new document with the dimensions of 1024x998. Of course this may vary depending on big you would like it.

Tutorial Site Blog Design image 1

2. Next we want to go ahead and change our background color. So using your Paint Bucket Tool for your tools pallet fill your background layer with #0E1926

3. The first thing we will do is go ahead and work on our top navigation bar. Go ahead and use your Rectangle Marquee Tool and make a selection similar to the following and fill it with #FFFFFF

Tutorial Site Blog Design image 2

4. Now right click your newly created layer and insert the following blending options by choosing blending options from the drop down menu

Tutorial Site Blog Design image 3

Tutorial Site Blog Design image 4

5. Next go ahead and use your text tool to add some links to your navigation menu. For the links I choose to use #FFFFFF and for the RSS I used #F08A13

Tutorial Site Blog Design image 5

6. Next, in between our links we want little 'dividers'. Make a selection similar to the following with your Rectangle Marquee Tool and fill it with #FFFFFF

Tutorial Site Blog Design image 6

7. Then copy your divider and place it between each link. It should look something like this

Tutorial Site Blog Design image 7

8. Next make a 1px high selection at the base of your navigation that goes from one side of the document to the other. Fill it with #FFFFFF. It should look like this

Tutorial Site Blog Design image 8

9. Now change the blending mode to Soft Light

Tutorial Site Blog Design image 9

10. The next thing we want to do is create our logo. Using your Rectangle Marquee Tool create a rectangle similar to the following and fill it with #FFFFFF

Tutorial Site Blog Design image 10

11. On this newly created layer insert the following blending options

Tutorial Site Blog Design image 11

Tutorial Site Blog Design image 12

Tutorial Site Blog Design image 13

12. Next lets go ahead and add some simple text to our box. I used helvetica for my font, and made a couple little squares for a logo, and this is what I came up with

Tutorial Site Blog Design image 14

13. Now we want to go ahead and use our Rectangle Marquee Tool to make a selection similar to the following and fill it with #FFFFFF

Tutorial Site Blog Design image 15

14. Now insert the following blending options onto its layer

Tutorial Site Blog Design image 16

Tutorial Site Blog Design image 17

15. Next we want to go ahead and add a little white line at the bottom of our pink box. Make a 1 pixel high selection and fill it with #FFFFFF

Tutorial Site Blog Design image 18

16. Then lower the opactiy to about 57%, and then change the blending mode to Soft Light

17. Now we want to add a little 'shadow' line at the bottom of the pink box. Make a selection similar to the following across the bottom of your box and fill it with #000000

Tutorial Site Blog Design image 19

18. Go ahead and lower the opacity to 20%, and then change its blending mode to Soft Light

19. Now lets go ahead and make our search box. Using your rectangle marquee tool, make a selection similar to the following and fill it with #252B32

Tutorial Site Blog Design image 20

20. Now go ahead and use your Polygonal Lasso Tool to make a selection similar to the following to give it a ripped effect

Tutorial Site Blog Design image 21

21. After its selected choose Edit>Clear. Then go ahead and put the following blending options onto its layer

Tutorial Site Blog Design image 22

22. Now just use your rectangle marquee tool to make a simple input box and a simple search button and you will have something that looks like this

Tutorial Site Blog Design image 23

23. For the other space in my header, I chose to have it so there was space for random tutorials to be displayed. Your document will look something like the following

Tutorial Site Blog Design image 24

24. Next lets move onto our sidebar. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #FFFFFF

Tutorial Site Blog Design image 25

25. Now insert the following blending options onto its layer

Tutorial Site Blog Design image 26

Tutorial Site Blog Design image 27

26. Now lets use our Rectangle Marquee Tool yet again to make a selection similar to the following to house our contents header. Fill it with #000000

Tutorial Site Blog Design image 28

27. Now insert the following blending options onto its layer

Tutorial Site Blog Design image 29

Tutorial Site Blog Design image 30

28. Now lets go ahead and use some black text and name our box. For this tutorial, I chose to make a Sponsors box

Tutorial Site Blog Design image 31

29. We want to give our text some depth, so add the following blending options to your text layer

Tutorial Site Blog Design image 32

30. Go ahead and add some content and it will look something like this

Tutorial Site Blog Design image 33

31. Following those same steps I made a Recent Comments box. Your document should look something like this at this point.

Tutorial Site Blog Design image 34

32. Now we want to go ahead and show what our posts will look like. Using your Rectangle Marquee tool yet again, make a selection similar to the following and fill it with #FFFFFF.

Tutorial Site Blog Design image 35

33. Now insert the following blending options

Tutorial Site Blog Design image 36

Tutorial Site Blog Design image 37

34. Now just insert some text and a thumbnail preview for your post and thats it! For my footer I just made a simple box filled with #050D15. Your final results should look something like this

Tutorial Site Blog 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 "Tutorial Site Blog Design"

Only registered users can write comment

No comments yet...