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

Video Sharing Header


1. First thing we want to do is create a new document with the dimensions of 1000x190.

image 1

2. Using your rectangle tool for your tools pallet, make a rectangle similar to the following

image 2

3. Right click your rectangles layer, and choose blending options from the drop down menu and insert the following

image 3

image 4

4. Now using your rectangle marquee tool make a selection two pixels high and all the way across the bottom of your navigation bar and fill it with #FFFFFF

image 5

5. Next, on your newly created layer insert the following blending options

image 6

6. You should now have something that looks like this

image 7

7. Now do the same process for the top of your navigation bar. Create another 2px high selection similar to the following

image 8

8. Now insert the following blending options

image 9

image 10

9. Your document will now look something like the following

image 11

10. Next we want to show what an active link will look like. Using your rectangle marquee tool, create a selection similar to the following and fill it with #FFFFFF

image 12

11. Now on that layer insert the following blending options

image 13

image 14

image 15

12. You should now have something that looks similar to the following

image 16

13. Now using your rectangle marquee tool make a selection 2px high similar to the following and fill it with #FFFFFF

image 17

14. Now insert the following blending options onto its layer

image 18

image 19

15. Your document will now look like this

image 20

16. Now go ahead and insert some text to represent your links

image 21

17. Next we want to create dividers between the links. Make a selection similar to the following (2px wide) and fill it with #FFFFFF

image 22

18. Now insert the following blending options onto its layer

image 23

image 24

19. It will look something like this

image 25

20. Now copy your divider layer and place them in between your links and you'll have something that looks like this

image 26

21. Next we want to go ahead and make a selection similar to the following. Using your elliptical marquee tool and make a selection similar to the following and fill it with #FFFFFF

image 27

22. Now insert the following blending options onto that layer

image 28

image 29

image 30

23. Your document should look like this

image 31

24. Now for a logo I just used a rounded rectangle and a triangle with some simple text and you should have something that looks similar to this

image 32

25. The last step is to create a search field. Since this is for a video site, we want to make our search field distinct. So using your rectangle marquee tool make a selection similar to the following and fill it with #FFFFFF

image 33

26. Now insert the following blending options onto that layer

image 34

image 35

image 36

27. Next we want to make our search button. Using a rectangle tool make a rectangle similar to the following

image 37

28. Now insert the following blending options onto its layer

image 38

image 39

image 40

29. Place some text on it and your done! I added a little extra to my navigation bar to show someone being logged in and this is your final result

Video Sharing Header



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 "Video Sharing Header"

Captcha