Photoshop Tutorial – Video Sharing Header

This is what the final result will look like, a nice clean header.

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

you may also like:

• Photoshop Tutorial – How to Create Dark Web Design
  I’ve been seeing a lot of Dark Websites lately, and it inspires me to make one. Today we will create dark web design which we will do in Photoshop. I will show you how to achieve the look of dark webs...
• Photoshop Tutorial – Classic navigation menu
  Step 1. Start off with a new document sized 500×80. Fill it with a cream colour. Create a new layer and using the rectangular tool with the colour code below create a shape: Step 2. Add...
• Photoshop Tutorial – Clean White Navigation Bar
  Simplicity is the key to beautiful web layouts. Learn how to draw a beautiful navigation bar in Photoshop. Preview of Final Results   Step 1 To start off with, create a...
• Photoshop Tutorial – Design Studio Header
  This will be your final result 1. First thing we need to do is create a new document. I started with a size of 1000×216. 2. What we want to do next is to add a gradient to our ba...
• Photoshop Tutorial – Sleek Dark Header Design
  1. First things first. We want to create a new document with the size 1024×205. 2. The next thing we would like to do is to add a gradient to our background layer. To do so, lets go a...

One Response to “Photoshop Tutorial – Video Sharing Header”

1. Beginners Computer Tutorial. - TECHNIE TECH TIP BLOG says:

   April 27, 2010 at 07:03

   [...] [Photoshop Tutorial] Video Sharing Header | Beyond Venture Design Tags: Beginners, Computer, Tutorial. Comments RSS feed [...]
2. Mohamed Gazar says:

   April 27, 2010 at 21:37

   really amazing. Thank you so much for sharing.
3. Header with tech look for your web design company | ink9 blog | Web Design Tutorials says:

   October 14, 2010 at 16:08

   [...] will show you today how to create a header for your web design company with a tech [...]