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

Clean and Dark Navigation Bar


1. First we have to make a rectangle to do this we are going to select the Rounded Rectangle Tool,it doesn't matter if the size and shape are a little bit different and also color doesn't matter. I'm going to use Radius with 5px.

image 1

2. And you will have something like this:

image 2

3. Then double click in the layer to open the Layer Style or right click/Blending Options. Once open select Gradient Overlay and put the following colors to make the Gradient or if you prefer can use your own. #262626,This one has to be located in 50% #2f2f2f and the Color Midpoint in 70%, #3c3c3c.

image 3

4. Now you should got something like this:

image 4

5. After these we are making a border, to do it, press Ctrl+Click over the shape layer thumb to select it. Then go to Select/Modify/Contract and put 2 px.

image 5

6. Now your selection should look like this:

image 6

7. Now fill the selection with the bucket, color doesn't matter, press Ctrl+D to deselect or Select/Deselect.

8. In the layers' window change the fill of this layer to 0%.

9. Then double click over the layer to open the Layer Style and select Stroke. Change size to 1px and Opacity to 15%, And for the Gradient use a Transparent to White gradient.

image 7

10. We used the photoshop's logo and some text we used Arial 14pt in white and this is the result.

Clean and Dark Navigation Bar
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 "Clean and Dark Navigation Bar"

Captcha