Sidebar Ads

Sunday, August 16, 2009

Stylish Glossy Clan-Themed Navigation Bar

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

0 comentários:

Post a Comment

Comments System Facebook/Blogger/Disqus

disqus

Disqus Shortname

oddthemes