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
Click to enlarge


Author's URL: Aviva Directory
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Black Sleek Website Navigation"

Captcha