Posted on September 20, 2008 - by Matthew Heidenreich
Retro Dark Blue Header Design
Introduction…
In this tutorial you will learn how to create a dark blue header with a retro spin on it. If you have any questions about this tutorial be sure to ask in the comments and i’ll be happy to answer any questions. Also, remember with all the tutorials, the psd is available for download.
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.
Lets get started…
1. First things first, we need to create a new document of 1000×170. This will serve as our workspace for this tutorial.
2. First thing we want to do is change our background color to #161f26.
3. Next we want to create a new layer and make a selection similar to the following and fill it with any color
4. Next, right click that layer and input the following blending options on it:
5. We want to go ahead and create the back of our navigation. Using your marquee tool again, create a selection similar to the following and fill it with a solid color:
6. Now, open up its blending options and input the following
7. Your document will look like this:
8. Next we want to create what our active link will look like. So to begin, we want to use our rounded rectangle tool with a radius of 5px to create a rectangle like the following:
9. Next, we want to add the following blending options to that layer
10. We want to go ahead and add a bit of a shine to our active button. To do so create a new layer and make a selection like the following and fill it with white.
11. Now change the blending mode to soft light and lower the opacity to around 32%, and it will look something like this after you add some text.
12. Next we want to create what our other links will look like. The non-active ones. everything is going to be the same as steps 8-11. The only thing that changes is the gradient we will be adding to our blending options panel. Instead of using the blending options in step 9, use the following:
13. And it will look something like this if all goes well:
14. Now you can just add as many links as your little heart desires, and it will look something like the following:
15. Next we want to add a search field. To do so we will just use our marquee tool to make a selection similar to the following and fill it with #ffffff
16. we want to go ahead and add a border to the box to distinguish it more from the navigation bar. So we need to add the following blending options:
17. Next we want to add a simple search button. Using your marquee tool yet again, make a selection similar to the following and fill it with any solid color.
18. Then put in the following blending options on that layer:
19. Add some text, and a little shine and you should have something that looks like this:
20. Now, we want to add a tab that clearly shows users where our search field is located. So we need to pull out our rounded rectangle tool and set the radius to around 15px and make a selection like the following.
21. We then want to go ahead and add some blending options to this layer, so input the following:
22. Now you can use your custom shapes tool and create a couple arrows. Set them to soft light and then just add some text and you’ll have something that looks like this:
23. Now all you have to do is add some text for your logo and thats it!
24. I went ahead and added some text showing where you could place rss feed details. Also I used Halftone pattern from the gomedia vector pack 3 to add the dotted effect, and this was my final outcome.
**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 23, 2008
Permalink
Thanks for the awesome tut! I stumbled upon this site by accident…consider it bookmarked!
Visit My Website
September 23, 2008
Permalink
thanks, happy you enjoyed
Visit My Website
September 23, 2008
Permalink
[...] headers. We think the more techniques you know the better looking the design will look. Over at iDoTutorials they made a header that has a nice retro spin to [...]
Visit My Website
September 28, 2008
Permalink
All tutorial youve been posted are realy helpful for the intermediate user like me…Can you post how to make a lightning sword? hope it soon…:)
Best regards,
ekyb0i
Visit My Website
September 30, 2008
Permalink
I just can’t get it to look nice
Visit My Website
September 30, 2008
Permalink
@BaldPhotoshop
If you post what you’ve got done so far, i’ll try and help you figure out what your doing wrong
Visit My Website
October 2, 2008
Permalink
[...] 5. Create a Retro Dark Blue Header Design - PSD avaliable for download with tut [...]
Visit My Website
October 4, 2008
Permalink
Thanks for the tut!! I am new to this stuff, I wanted to know, how do we make it so that we actually can type things in the search bar, if there is a tut, can you tell me here or by email.
Visit My Website
October 4, 2008
Permalink
Thanks for the tut, can you tell me how to type things in the search bar, if there is a tut can you post it or email it to me. thanks
Visit My Website
October 4, 2008
Permalink
@Rahul
This is just a tutorial to make the beginning steps in Photoshop. You would have to code it to make the search field and everything else functional
Visit My Website
October 7, 2008
Permalink
Could someone possible link a tutorial for that if it isnt against the rules cheers.
Visit My Website
October 7, 2008
Permalink
@Nickeh
Are you talking about using this design and coding it and making a tutorial? If so, I have no problem with you doing that (I would actually put a link to it in the post). If you just want to copy the whole tutorial and place it on your site, i’d rather you just link to it. Hope that answers your question
Visit My Website
October 8, 2008
Permalink
Im sorry i put the wrong idea across i ment is there a tutorial you know about that codes the search bar?
Visit My Website
October 17, 2008
Permalink
I have an infatuation with the circular polka dots, but I encounter a great deal of difficulty when I rise to the challenge of how to obtain those circular circles.
Visit My Website
November 7, 2008
Permalink
[...] Retro Dark Blue Header Design [...]
Visit My Website
November 11, 2008
Permalink
Retro Dark Blue Header Design…
In this tutorial you will learn how to create a dark blue header with a retro spin on it….
Visit My Website
November 13, 2008
Permalink
[...] Retro Dark Blue Header Design [...]
Visit My Website
November 18, 2008
Permalink
[...] 1.Retro Dark Blue Header Design [...]
Visit My Website
November 19, 2008
Permalink
Great !!!, but now :(, how can I do it for htm, somebody help me or recommend me one tutorial page.
Thanks !!!
Visit My Website
November 24, 2008
Permalink
[...] 1. Retro Dark Blue Header Design [...]