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.

Video Sharing Header image 1

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

Video Sharing Header image 2

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

Video Sharing Header image 3

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

Video Sharing Header image 5

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

Video Sharing Header image 6

6. You should now have something that looks like this

Video Sharing Header image 7

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

Video Sharing Header image 8

8. Now insert the following blending options

Video Sharing Header image 9

Video Sharing Header image 10

9. Your document will now look something like the following

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

Video Sharing Header image 12

11. Now on that layer insert the following blending options

Video Sharing Header image 13

Video Sharing Header image 14

Video Sharing Header image 15

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

Video Sharing Header image 16

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

Video Sharing Header image 17

14. Now insert the following blending options onto its layer

Video Sharing Header image 18

Video Sharing Header image 19

15. Your document will now look like this

Video Sharing Header image 20

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

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

Video Sharing Header image 22

18. Now insert the following blending options onto its layer

Video Sharing Header image 23

Video Sharing Header image 24

19. It will look something like this

Video Sharing Header image 25

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

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

Video Sharing Header image 27

22. Now insert the following blending options onto that layer

Video Sharing Header image 28

Video Sharing Header image 29

Video Sharing Header image 30

23. Your document should look like this

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

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

Video Sharing Header image 33

26. Now insert the following blending options onto that layer

Video Sharing Header image 34

Video Sharing Header image 35

Video Sharing Header image 36

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

Video Sharing Header image 37

28. Now insert the following blending options onto its layer

Video Sharing Header image 38

Video Sharing Header image 39

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

Only registered users can write comment

No comments yet...