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. You can download it here.

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?