My Blog
Designing A Sleek, Transparent Navigation
Subtitle
- February 6th, 2008
- COMMENTS 6
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.
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.
Ha, maybe I do! Next tutorial I’ll do something mac related.
Great tutorial—very concise and easy to understand. I hope there’s more to come in the near future.
Hey! Great tutorial! I’m getting stuck adding the white gradient part of the block with EliteTuts written on it.
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.
[...] someone can run me through how to make a website border/frame in photoshop like on this website? Designing A Sleek, Transparent Navigation i want pretty much the same thing, except maybe with a little more gloss effect, i can pretty much [...]