Create a clean Navigation menu

In this tutorial we will create a clean Navigation menu in photoshop. Many beginners to photoshop have no idea where to start when creating a menu so I tried my best to explain it here.

Step 1

Create new document 800x 200 pixels with background color #212121
Create New document

Step 2

Next set the your foreground color #00b5e9, Select the rectangle marquee tool and create a rectangle box across leaving about 20px on both sides.
Set colors

Step 3

Now let’s add a gradient overlay to our new rectangle layer. Right click on layer>Blending Options>Gradient overlay. Now lets add a stroke to our Nav. 1px color#fff.
Add Gradient
Add Text

Step 4

Ok it is now time to add some text to our Nav.
Add Text

Step 5

For the final step we will add some dividers between our text.

Select the rectangle marquee tool color #fff, and make a 1px line like the one below, Then duplicate the layers
Congratulations, you now have a cool Navigation Menu to show off on your website

Joe Granados the author

Joe Granados is the owner of WebDevTuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts

Leave a Reply