Posted on September 3, 2008 - by Matthew Heidenreich
Professional Dark Header
Introduction…
In this tutorial you will learn how to create a simple, yet effective navigation for your website. We will show you the steps on how to create it using Adobe Photoshop. If you have any questions, please leave a comment below.
Download the PSD…
Don’t have time to do the tutorial, but would like to see the results? The PSD is available to anybody who would like to use it. You can download it here.
Lets get started…
1. First thing we need to do is create a new document. For the purpose of this tutorial, I have created a document size of 891×132.
2. We want to go ahead and unlock our background layer, so double click it to unlock it. Now that its unlocked, we can add Blending Options to it. To do so, right click the layer and choosing blending options from the menu and input the following:
3. Your document should look like this now, with a nice dark brown gradient:
4. Now we want to create our navigation bar. To do so create a selection similar to the following with your Rectangle Marquee Tool and fill it with white.
5. Go ahead and right click that layer and input the following blending options on that layer:
6. The background to your navigation should look something like this now:
7. We want to add a little 1px shine to the top of the navigation to give it a little bit more detail. Using your Marquee tool, create a 1 px selection similar to the following and fill it with white on its own layer above the rest.
**Note, you you most likely have to zoom in to get it exactly right. Use CTRL and + to zoom in (command on mac)
8. You can go ahead and deselect and then change the layer style to Soft Light and lower the opacity to about 43% and it will look something like this
9. Next thing we want to do is add the text that will represent the links in our navigational menu. I used Helvetica as my font of choice, and used these blending options on the font layers:
10. You should have something similar to this at this point:
11. Now what we need to do is create something to act as a divider for each link. To do so we will get our Marquee Tool out again. We want to make a 2 px selection like the following:
While on a new layer, fill that with white and then put in the following blending options:
12. This seems to be a little strong, so what we want to do is lower the opacity a bit on that layer to around 20% and you will have something that looks like this:
13. Now, just copy that layer and put them in between the other links and you’ll have something similar to the following
14. We now want to choose how we want active links to be represented. So, on a new layer above your navigation background, make a selection similar to the following and fill it with any color:
15. And on that newly created layer, input the following blending options:
16. Your document should be coming together now and will look like this:
Now we could stop there, but what we the fun in that be? Lets go ahead and add a search field.
17. Next thing we want to do is create another layer. With this new layer, create a selection similar to the following and fill it with black.
18. Now, right click that layer and input the following blending options:
19. Your search field will now have a little bit more detail on it, and will look something like this:
20. Next, we want to create the search button. So we want to use our Rounded Rectangle Tool from the Tools Pallet with a radius of about 5px and create a selection like the following:
21. Lets go ahead and add some blending options to that layer now
22. You will now have a dark green submit button.
24. We don’t want to stop there though. CTRL+Click the layer you just created to select the submit button. While keeping it selected, create a new layer above it and fill it with white. While selected, go to SELECT>MODIFY>CONTRACT and choose 1px. Then choose EDIT>CLEAR and you should have something like this:
25. Now, change the layer style to Soft Light, and the opacity to 47%
26. Now all you need to do is add a shine to the button to give it that fresh look, and it will look like this:
27. Thats it! Just add some text in various locations and your results may look something like this:
**If you have any problems, or have any questions about this tutorial. Please leave your comments and I will get back to you. Also, remember the PSD to this tutorial is available for download.
If you enjoyed this tutorial, why not check out our other Adobe Photoshop Tutorials?
Visit My Website
September 5, 2008
Permalink
Easy to read one tutorial and by the way, I just love Your webdesign style!
Keep up the good work!
Visit My Website
September 5, 2008
Permalink
thanks Dainis, happy you enjoyed reading it.
Visit My Website
September 5, 2008
Permalink
LOL the news!
Visit My Website
September 5, 2008
Permalink
nice tutorial easy to follow thanks alot
Visit My Website
September 5, 2008
Permalink
i love all the tutorials !!! thank u so much
Visit My Website
September 5, 2008
Permalink
hey can i get all these tutorials on pdf ???
Visit My Website
September 6, 2008
Permalink
yeah patrick, thought i’d get a little creative with it
@fahim
I currently don’t have these set up for a pdf
Visit My Website
September 6, 2008
Permalink
Wow.. Didn’t knew you could make this kind of stuff in photoshop
Saves me alot of work.. thanks dude!
Visit My Website
September 6, 2008
Permalink
wow this is amazing! you very helped me with this thank you!
Visit My Website
September 6, 2008
Permalink
always willing to help out
I normally like adding all the little steps that other tutorials don’t add for the people that don’t fully understand, because I remember when I was new to it.
Visit My Website
September 7, 2008
Permalink
Nice tut, but i cant fill the selected area white its stays grey how can i set it white instead of the grey gradient?
Visit My Website
September 7, 2008
Permalink
Alexander, can you tell me which step your referring too?
Visit My Website
September 8, 2008
Permalink
Wow… nice dark header… it suit in my needs. Thanks.
Visit My Website
September 10, 2008
Permalink
Thank you
Visit My Website
September 10, 2008
Permalink
Happy I could help everyone out!
Visit My Website
September 11, 2008
Permalink
Very nice job, but I think the slogan and the news text are too similar. The slogan could be a bit darker (like the “Search” text), or something to differ from the text below.
Visit My Website
September 11, 2008
Permalink
Very nice Matthew, but why those document dimensions? 960px width is standard
Visit My Website
September 11, 2008
Permalink
I just choose that size for the tutorial
Visit My Website
September 11, 2008
Permalink
Nice outcome.
Visit My Website
September 14, 2008
Permalink
Great tutorial. I learned a lot
Thanks!
Visit My Website
September 14, 2008
Permalink
Nice tutorial, thank you for sharing. Well, for me almost everything works fine, but Im unable to complete the submit button. I dont understand the 24st step.
here is my menu: http://img508.imageshack.us/img508/8793/sanstitre1mu1.jpg
Visit My Website
September 20, 2008
Permalink
@mihai, sorry for such a late response, but hopefully this helps out a little more.
On the background layer for your button, the green part, you should be able to hold CTRL and then click on the layers thumbnail on your layers pallet. It ’should’ then create a selection around the button (marching ants if you will). Then you need to create a new layer above the background layer, and fill that selection with white. If it becomes deselected after you fill it with white, you can use the CTRL+Click method again to reselect. Then all you have to do is go to SELECT>MODIFY>CONTRACT and input 1px, and then it should make your selection a little smaller. Then just clear everything and you’ll be left with a 1px line around your button. Hopefully this helps out!
Visit My Website
September 29, 2008
Permalink
[...] Author: Matthew Heidenreich Source: http://www.idotutorials.com/ [...]
Visit My Website
October 2, 2008
Permalink
I have seen thousands of sites using such navigation and now I have found how to do it myself - great!
Visit My Website
October 3, 2008
Permalink
[...] Photoshop tutorial from idotutorials.com, you’ll learn how to design a professional dark web header with nice navigation bar using [...]
Visit My Website
October 3, 2008
Permalink
This is awesome, subscribed!
Visit My Website
October 9, 2008
Permalink
hey i where wondering do i save all the links in jpg’s or can i just use the photoshop file and a php document or something? you got an tutorial on how to set it up on a webpage?
Visit My Website
October 9, 2008
Permalink
@TML
I currently do not have a tutorial for coding this tutorial. You would have to slice and code the PSD using something like Dreamweaver. This header isn’t too complicated, so i may make a tutorial to some point for coding it, but I have not done so as of yet.
Visit My Website
October 10, 2008
Permalink
okay that could be really nice so dont have to make loads og jpg’s and do mouseover code’s
Visit My Website
October 10, 2008
Permalink
thanks for the nice tutorial. there is just a small thing i missed out on. That is step nr 26, how did u do that?
Visit My Website
October 10, 2008
Permalink
@Thomas - What I did was to CTRL+Click that Rounded Green button layer to make a selection of it, and then I created a new layer above it and filled it with #FFFFFF. After that I used my marquee tool to select the bottom half of the ‘white’ button and went EDIT>Clear. The you just have to lower the opacity to what you like. Hopefully I explained it well enough
Visit My Website
October 18, 2008
Permalink
its good ,i like it. a one of a great job
Visit My Website
October 18, 2008
Permalink
great man
Visit My Website
October 18, 2008
Permalink
[...] Professional Dark Header . . . [...]
Visit My Website
October 24, 2008
Permalink
i made a version that fits my needs just great. but i have one problem. how can i set up the search area to actually search my database. would i do that while editing the slices, how would i go about that?
Visit My Website
October 24, 2008
Permalink
@matthew
You would have to use PHP, or some similar programming language to achieve that.
Visit My Website
October 25, 2008
Permalink
Professional Dark Header…
In this tutorial, it will show you how to create a “Professional Dark Header” for your web site. In fact, web sites can succeed with their simple designs. In our previous tutorials, you may have experienced many different kind of creations. And thi…
Visit My Website
November 2, 2008
Permalink
very nice and clean design. thx for this tut!
reg,
decimus
Visit My Website
November 4, 2008
Permalink
wow, that looks realy nice
Visit My Website
November 6, 2008
Permalink
Really wonderful interface tutorial. I learned some new techniques! Keep it up. Thank you for sharing.
Visit My Website
November 7, 2008
Permalink
[...] Professional Dark Header [...]
Visit My Website
November 9, 2008
Permalink
I know this post was made a while ago, but you have some awesome tutorials here, and just the stuff I need to learn more techniques as a web designer. Thanks and keep up the great work.
Visit My Website
November 11, 2008
Permalink
Professional Dark Header…
In this tutorial you will learn how to create a simple, yet effective navigation for your website. We will show you the steps on how to create it using Adobe Photoshop….
Visit My Website
November 13, 2008
Permalink
[...] Professional Dark Header [...]
Visit My Website
November 18, 2008
Permalink
[...] 6.Professional Dark Header [...]