Video Sharing Header

In this tutorial you will learn how to create a header for a video sharing website. This would be great to implement on a script such as PHPMotion. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Author:

Matthew Heidenreich

Category:

Photoshop

This is what the final result will look like

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

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

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


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

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


6. You should now have something that looks like this

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

8. Now insert the following blending options


9. Your document will now look something like the following

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

11. Now on that layer insert the following blending options



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

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

14. Now insert the following blending options onto its layer


15. Your document will now look like this

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

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

18. Now insert the following blending options onto its layer


19. It will look something like this

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

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

22. Now insert the following blending options onto that layer



23. Your document should look like this

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

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

26. Now insert the following blending options onto that layer



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

28. Now insert the following blending options onto its layer



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

 

Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly.

If you enjoyed this tutorial please take a moment to visit one of our sponsors

Show Some Love
Thank you for your support

12 Responses

Leave a Comment

Name (required)

Mail (required)

Website

Message

 

Sponsors