Stylish Glossy Clan-Themed Navigation Bar

Web Design | on June 23rd, 2006 with 22 Comments
Advertisement

This is what we’ll be creating:

Stylish Glossy Clan Navigation Bar

A nice, glossy-style navigation set, good for your local clan website! ;)

1. Making the Navigation Bar

Start off by creating a new document, any old size will do. Now fill your background with a very dark color (I’ve used #1a1a1a here.)

Create a new layer, then get out the Rectangular Marquee Tool, using it make a navigation-bar-sized selection on your document, fill your selection with the same color as used in the background.


(note that my selection was 40 pixels in height, width doesn’t matter)

After filling your new layer, apply this gradient overlay to make it stand out a little bit.

Create another new layer them use the rectangular marquee tool to make a selection on the top of the navigation bar, this time make it only half the height of the navigation bar itself, and all of the width.

Using the Gradient Tool, make a white to transparent gradient from the top to the bottom of your selection, if you don’t know how to do this, just fill the selection with white.

Change the layer mode for your ‘shine’ layer to either Soft Light or Overlay, and lower the opacity to about 20-50%.

2. Creating the Buttons

Under your ‘shine’ layer, make a selection, all the height of the bar but only about 80-120 pixels in width.

On a new layer named ‘button,’ fill the selection with a nice blue (#2a88c5) and apply the same Gradient Overlay as used before on the navigation bar layer. You should have something that looks like this now:

3. Add Text Navigation

Create a new layer and write out some text on top of your button layer, use white as the primary text color. After you’ve made your text apply the following layer styles:

  1. Outer Glow
  2. Stroke

I added in the rest of the bits of text with a slightly different stroke and added a few tiny highlights to my navigation bar, and I’m finished!

Stylish Glossy Clan Navigation Bar

Thanks for reading the tutorial everyone, I hope you enjoyed it!


Advertisement

  • Daniel

    Excellent tutorial, thanks!

  • http://adasdsd Inf

    Good tutorial! nice

  • http://shaxxer.org/~ruxa RuxA

    nice thx

  • http://www.mowglitech.com web designer India

    really a nice tutorial. Keep going

  • http://www.a0x.info a0x

    sweeeeet:)

  • http://elitegfx.com/ EliteGFX.com

    Hey, really good tutorial, good job :)

  • kameleon

    That’s great ! Very good tutorial&good job !!! ;) :D :D

  • http://nathan.ziarek.com Nathan Ziarek

    Nice tutorial (I especially like that you explain some of the other choices – colors of the backgrounds, etc). I don’t typically like my text sunk in that far, but find that Bevel & Emboss don’t really offer a good “1px” bevel.

    Instead, I take the image/word/etc, make a mask, new layer and fill it with white. I then drag the new layer behind the original and nudge the white layer down one pixel. Depending on the lightness of the background, fading the opacity to around 40% produces a nice stamped look.

    Thanks!

    Nate

  • http://www.eliburford.com/ admin

    Hey thanks for the in-depth comment, Nathan.
    Thanks everyone else for the comments aswell. I quite like the result I made with this tutorial heh :)

  • http://mont-ferrutx.com kieran

    Great tutorial, thanks very much

  • bluEyez

    tkz a lot :) verry usefull :D

  • http://www.callampas.cl/ Dark Wolf

    Wow! Thanks!!
    Very useful, you are a master =D

    The color selection it’s awesome!!!

    No more comments…

    Thanks! Thanks!!!!!

  • http://ViperFX.net ViperFX

    Thank you very much.
    This rocks and i actually got it right!
    It will look lush on my site, well when i upload it, it will.
    once again Thank you !x

  • http://www.frontbass.com/ FrontBass.Com

    it’s awesome.thanks

  • http://www.iluvbrazil.com Thiago Prado

    very good tutorial
    congratulations!!!!

  • http://volkann.vo.funpic.de volkann

    very very useful and real good tutorial thanks

  • http://www.dalehay.com Dale Hay

    This is a very nice tutorial!

    Also if people are wondering how the extra bit at the end is done, then simply make a selection with the marquee tool – about 5 pixels in height. Then just fill it with a white to transparent gradient (top – white, bottom – transparent) then change its layers blending mode to overlay. :-)

  • Ernie

    AWESOME!

    Does anyone know the name of the font used on here???

  • http://-- JEENA

    Great and greatest tutorial

    Very useful things

    Thanks a lot…

  • http://--www.jeena.com JEENA

    Great and greatest tutorial

    Thanks a lot

    Wonderful!!!!!!!!!!!!!

  • mimzy

    Dale Hay ,
    it’s not so simple to as you mentioned for the end, there is inner glow and stroke need to be applied, you can see the bottom for better understanding :0)

  • Unicorn

    thxn a lot!