Dark Style Navigation Menu
Tutorial in Basics, Drawing, Web
Let’s learn some tricks and hints with ((Rounded Rectangle Tool)). Also, using ((Rectangular Marquee Tool)) I will show you how to create a Dark style navigation menu.
Open a new document (500×400px and transparent background).
Select ((Gradient Tool)), radial, and trace the gradient using: #cdc5ae y #eae3d4.
Create a ((New Layer)).
With ((Rounded Rectangle Tool)), radius: 10px, draw a rectangle (250×300px and white background).
Double click the layer to apply ((Layer Styles)).
((Outer Glow)).
Save the changes and you will get the results.
Ctrl + Click the rectangle layer to activate the selection.
Create a ((New Layer)) and fill it in with #161614.
Locate the layer below the white rectangle layer.
Stand in the new layer (the one with the dark rectangle, Ctrl + Click it, and move it downwards about 10 or 15 píxels.
Stand in the white rectangle layer and press delete.
Repeat the last two steps in a new layer that will be in the middle of the other two layers, with a rectangle that will be filled in with green, and a minor separation of pixels. Check out the following image.
Using the Helvetica font, write the title of the menu.
Now apply ((Gradient Overlay)) to the title. Go to menu ((Layer))-((Layer Style))-((Gradient Overlay)). The gradient is from white to transparent.
Save the changes.
Let’s add the titles to the buttons. Select the font Verdana and write the titles.
Create a ((New Layer)).
Choose #ebebeb as the main color.
Now with ((Line Tool)), 1px, trace the lines of the menu.
Pressing Ctrl + J, duplicate the button.
Then with ((Free Transform)) (Ctrl + T), move the line 30px downwards. You can do it pressing the Shift + the down arrow 3 times until you complete all the lines.
In a ((New Layer)), with ((Rectangular Marquee Tool)), draw a selection that occupies the whole “Tutorials” line. Fill it in with color #f7f7f7. If you have doubts, take a look at the image below.
Duplicate the green frame (Ctrl + J) and go to menu ((Edit))-((Transform))-((Rotate 180º)). Then place it in the inferior part of the menu. Take a look at the following image.
This is the final result of this great navigation menu.
