Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop Web Layout Black Sleek Website Navigation
rss

Black Sleek Website Navigation

Author: Aviva Directory More by this author


Start off by creating a New Document (File > New) with the dimensions of 800X100 pixels

image 1

Fill the background with White (#FFFFFF)

Make a black rectangle stretching to each side of the canvas

image 2

Press Ctrl+Shift+N to get a New Layer. Make a selection that is half the width of your black rectangle fill it with white and set the layer opacity to 15%

image 3

On a New Layer draw a 1 pixel thick line across the black box like seen below. Set this layers opacity to "15%"

image 4

On a new layer make a thing rectangle selection and fill this box with grey (c6c6c6).

image 5

For the Grey rectangle, open your 'Blending Options' and add Drop Shadow.

image 6

You should have something like this:

image 7

On another new layer draw a 7 pixel thick line across the canvas.

image 8

For the black line add the following style:

image 9

Set the black line's Layer Opacity to 22%

image 10

Add text for your link in White (#FFFFFF). I chose the font 'Vogel'.

image 11

Go to the Blending Options for your text and add a Stroke.

image 12

Add a Gradient to your text.

image 13

image 14

You should have something like this by now:

image 15

You are now done! This was my final outcome:

Black Sleek Website Navigation Tutorial: Final Result (Click to enlarge)
Click to enlarge



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Black Sleek Website Navigation"