- Under: Tutorials,
Designing A Sleek, Transparent Navigation
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.
Want More Articles?
-
45+ Most Creative Abstract Wallpapers
Your desktop wallpaper should be something that inspires you, fuels your creativity, bolsters your imagination, and gets your thoughts flowing – so why are you still using the de...
-
22 Most Creative Web Portfolios
As another installment in this list series going on at Elite By Design, I wanted to show everyone some really neat web portfolios that I've seen around the internet. As web desig...
-
Three Most Common Ways Web Designers Lose The Client
When Brian approached me about writing for Elite By Design, I immediately accepted. I've kept up with Elite By Design for awhile now, and it's an honor to be here as a gu...
-
School Is In Session – 100 Design Articles To Keep You Motivated : Part 4
Here comes part four in this five part series of 100 design articles to keep you motivated. This series is turning out extremely well as we round up our 60th through 80th design ar...
-
16 Best Earth-Colored Website Designs
Web design revolves so much around colors, brightness, hue, and contrast. Some web designs are made complete simply based on their colors. So today I wanted to bring you the best o...
Share the love:
- Website: http://elitebydesign.com
- About: Brian is a blogger and web designer at Elite By Design. He has been blogging for over a year providing quality design-related articles for the community.
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.
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.
[...] 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 [...]