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

Stylish Dark Menu Bar


Create a new document with gray color then create a new layer, use Rounded Rectangle Tool to make a selection and fill the color: #313131.

Stylish Dark Menu Bar image 1

Go to Blending Option of this layer, set properties as shown below:

Stylish Dark Menu Bar image 2

Stylish Dark Menu Bar image 3

Stylish Dark Menu Bar image 4

The result of this step:

Stylish Dark Menu Bar image 5

Create a new layer, use Rounded Rectangle Tool to make a selection and fill the color: #313131.

Stylish Dark Menu Bar image 6

Blending Option this layer:

Stylish Dark Menu Bar image 7

Stylish Dark Menu Bar image 8

Stylish Dark Menu Bar image 9

The result of this step:

Stylish Dark Menu Bar image 10

Create a new layer, use Rectangular Marquee Tool to make a selection and fill the color: #262626.

Stylish Dark Menu Bar image 11

Blending Options this layer:

Stylish Dark Menu Bar image 12

Stylish Dark Menu Bar image 13

Create a new layer, use Rectangular Marquee Tool to make a selection like this, fill white color and adjust Opacity 10%.

Stylish Dark Menu Bar image 14

The result of this step:

Stylish Dark Menu Bar image 15

Create a new layer, make a selection, use Gradient with white color ( Radial Gradient ), drag from center of selection, adjust Opacity 30%.

Stylish Dark Menu Bar image 16

The result of this step:

Stylish Dark Menu Bar image 17

Continue to make a selection like this:

Stylish Dark Menu Bar image 18

Press Ctrl+J to duplicate this layer, we have:

Stylish Dark Menu Bar image 19

Continue to press Ctrl+J to duplicate layer, then move it to the top like the picture below:

Stylish Dark Menu Bar image 20

Finally you will merge all layers, duplicate the button then add some texts to each button.

The final result:

Stylish Dark Menu Bar Tutorial: Final Result



Author's URL: Photoshop8x.com
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 "Stylish Dark Menu Bar"

Only registered users can write comment

No comments yet...