Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Black Sleek Website Navigation

Black Sleek Website Navigation


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


Author's URL: Aviva Directory
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Black Sleek Website Navigation"

Only registered users can write comment

No comments yet...