Black & White transparent navigation

1 Star2 Star3 Star4 Star5 Star (7 votes, average: 5.00 out of 5)
Loading ... Loading ...

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

3 Comments »

  1. dot1910 Says:

    pic of inner glow setting is missing!

    comment-bottom
  2. Yes, please fix that pic >.

    comment-bottom
  3. m Says:

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

    please fix it :)

    comment-bottom

RSS feed for comments on this post. TrackBack URL

Leave a comment