Close Search Box
Search Box

Search: From:

Close
Newsletter

9Tutorials to your Inbox



Black & White transparent navigation

Black & White transparent navigation
Author lv1 (2000/5000)
4,785 views
1 Star2 Star3Star4 Star5 Star (4 votes, average: 5 out of 5)

Create a good looking transparent navigation menu

Welcome. In this tutorial you are going to learn how to create a semi-transparent navigation bar like below:
1201

Step 1.
Make a new document with the size you want. I made it 400×150.

Now choose a background color, I choosed a blue color. Grab the Rounded Rectangular tool and make a shape like below on a new layer:
menu

Step 2.
Select the layer with the shape and click the Layer Style button and click Blending Options:
22
Add the following modifications:
201
Drop Shadow
301

asdas -4

Gradient Overlay
501
This is how It should look like:
701

Step 3.
Grab a brush size 1 Px white and on a new layer create a straight line(to create a straight line mouse click press and hold shift and go to the point you want the line to end.) and lower the layer opacity to around 30%.
801

Step 4.
In this step I am going to show you how to create a shine. So set your color to white. Make a new layer. Grab the Rounded rectangular tool and make a shape like below.
1001
The shape should be white. If not you fill it white using the bucket and lower the layer opacity to 20% or so. Note I also used the eraser to delete the edges of the straight 1px line to make it look better.
11
Now simply add your text and you are done!
1202

This also looks good with a pattern background.
13

del.icio.us:Black & White transparent navigation digg:Black & White transparent navigation spurl:Black & White transparent navigation newsvine:Black & White transparent navigation blinklist:Black & White transparent navigation furl:Black & White transparent navigation reddit:Black & White transparent navigation blogmarks:Black & White transparent navigation Y!:Black & White transparent navigation magnolia:Black & White transparent navigation segnalo:Black & White transparent navigation
Login




Friends' Sites

Contact Us

Categories

Sponsors

Featured Links

Post a Comment »








Safari hates me

Comment Guidelines

  • Hyperlinks are automatically generated.
  • <em>italic</em>
  • <strong>bold</strong>
  1. dot1910 July 21, 2007

    pic of inner glow setting is missing!

  2. lifesteala August 11, 2007

    Yes, please fix that pic >.

  3. m August 15, 2007

    pic of stroke seting is missing
    and some colors are missing too

    please fix it :)