This tutorial is a very simple, easy to follow guide to creating a sleek, shiny, and transparent navigation bar. This tutorial will work mainly with the custom shape tool, gradients, and blending options.
Difficulty:
1 2 3 4 5 6 7 8 9 10
Estimated Time:
3-4 minutes
Start off with a 500px by 500px blank canvas. For this tutorial, I placed the windows XP desktop image as the background.
Next, I put in a black bar at the top of the image.
Then, apply the following layer styles:
Lower the bar’s opacity to about 90%.The next step is to add a white bar in the middle of the black bar, like so:
Lower the white bar’s opacity to 8%.I then added in the following text to the bar. This is white text with a 66% opacity.
Using the custom shape tool, add a white line in between two of the words, like so:
Go ahead and duplicate the divider and space them evenly between the words. I then lowered the opacity of the dividers to 29%.
Using the rounded rectangle tool, add in a black box to the left side of the navigation bar.
Add in the following color overlay:
I then lowered the opacity of this box to 38%.Next, control or command click on the thumbnail for this box in your layers pallet. This will automatically select the box. Using the rectangular marquee tool, hold down alt and drag the box across the bottom half of the selected box until only the top half remains within the crawling ants.
After you have the top half selected, add a white-transparent gradient like so:
Lower the opacity to about 8%.
Next, type whatever you want into this box. I used the word “EliteTuts” with the same fonts as we used earlier
Last, I added a very subtle glow above the home button to represent what the nav bar would look like when the mouse is hovered over a link. To do this, simply use the brush tool with a 0% hardness and add a small dot above the text. Change the color to your desire and lower the opacity.
That’s it! Hopefully you have a shiny, sleek, and transparent navigation bar right now. This was a pretty easy tutorial, but let me know if you have any questions about the steps I used. I hope you enjoyed this tutorial, leave a comment and let me know what you think.
For more Photoshop tutorials check out the new tutorial site, The Tutorialist.
Boomstein - Absinthian Designer
February 7, 2008 at 3:55 am
You secretly love that Vista look don’t you?
Very easy to follow tutorial, well done, with great screenshots. It’s fun playing with different colors and gradients in the bar, and I can see a use for it on websites that are very tight and clean, or possibly video games related websites. I like that little extra idea on the mouse-over though I don’t see much effect in the screenshot.
Brian
February 7, 2008 at 5:57 am
Ha, maybe I do! Next tutorial I’ll do something mac related.
Matthew Griffin
February 7, 2008 at 7:14 am
Great tutorial—very concise and easy to understand. I hope there’s more to come in the near future.
Tiffany
March 3, 2008 at 1:24 am
Hey! Great tutorial! I’m getting stuck adding the white gradient part of the block with EliteTuts written on it.
Brian
March 3, 2008 at 6:18 am
Hey Tiffany –
1. Command or control click on the thumbnail on the layer with the blue rounded rectangle. When you do this, it will automatically select the blue box in the marching ants.
2. With the blue rectangle selected, pick your rectangular marquee tool.
3. Holding down Alt, make a selection on the bottom half of the blue rectangle. If done correctly, it will remove the marching ants from the bottom half of the rectangle.
4. Last step is to just add a white-transparent gradient across the selection you have and then lower the opacity.
Maybe that helps? If not, let me know and I would be more than happy to make screenshots.
Tim
March 7, 2009 at 1:31 pm
It doesn’t really have anything to do with your tutorial, which is excellent by the way, but I am creating a website layout in Photoshop and was wondering how to create a website border/frame (I have no idea what it is called
) like you have all around the main body of the site. Would I do this separately and somehow import it to Dreamweaver or would it be integrated into my layout? If it would be too much to explain it to me, could you post a link to some kind of tutorial for that or at least tell me what it is called 
. Thanks a lot.
akshay chugh
December 30, 2009 at 1:38 pm
after making a navigation bar how do we add this to our website??