Home / Tutorials / Create a Clean Navigation Menu in Photoshop

Create a Clean Navigation Menu in Photoshop

/
/
167 Views

In this tutorial I`m going to show you how to create a clean and modern navigation menu in Photoshop. The navigation will have a dropdown menu and a beautiful ribbon as a home button. Along the way, we`ll use different Photoshop techniques and layer styles explained in very detailed images to help you following the tutorial with ease.

Don’t forget to  Subscribe to Email Newsletter Follow us on Twitter and  Like us on Facebook – for recent updates.

download

Let`s get started. Open Photoshop, create a new transparent canvas of 600×450px and paint it with a gray color (#e6e6e6). You probably wonder why only 600px in width. Well, I use this dimension to offer you high-quality images so you can see the details better. You can use a normal width of 1280px so you can build a normal menu of 960px in width. Is your choice.

new-canvas


My menu will be composed of 6 boxes, each of 95px in width. The height of the menu will be 55px. So, select the Rounded Rectangle Tool(U) and with a radius of 5px draw a rectangle of 570px( 95*6 ) x 55px.

stark-nav


Now apply the next layer`s styles:

gradient

inner-shadow

stroke


To delimit each button, use the line tool and add 2 vertical lines at every 95px like in the image below. The 2 lines will create a beautiful in-depth effect into the navigation.

lines


Now duplicate the set of lines 4 times and arrange them so you may obtain 6 boxes of 95px each. Then inside the boxes, add the text-navigation.Make sure to leave the first box empty, because the home button will have a different look. I used Georgia font – 13px.

nav


Let`s build the drop-down menu. I chose the Portfolio for the dropdown. Select the Rectangle Tool and draw a rectangle of 94×53px. Use #70939f for the background color and make sure to place the layer above the navigation layer. Move the rectangle at the bottom of the navigation, to hide the bottom stroke. Then select the Custom Shape Tool(U) and add a small arrow near the button or if you want, just import an arrow from the web.

portfolio


Select the Rounded Rectangle Tool(U) and with a radius of 5px, under the navigation layer, draw a rectangle of 140×150px. Move up the layer so you can obtain rounded corners at the bottom and straight corners at the top. Also, make sure to add a small drop-shadow and to color the layer with the same blue you used on “portfolio” button.

dropdown


Now add some text into the drop-down and after each item list, draw 2 horizontal lines this time, exactly as you did on the main navigation. With this final touch, the drop-down is ready.

drop-done


We`re going to build now the home button. This step will test your creativity and dexterity because we`ll create an uncommon shape and will make use of the Pen Tool(P).

Select the Rectangle Tool(U) and draw an yellow shape of 50×70px. Right click on the layer and hit “Rasterize Layer” so we may edit it.

yellow


Select the Pen Tool(P) and make sure you`re in Paths Mode. Then create a path at the bottom of the shape like in the image and transform it to selection by right-clicking inside it and selecting “Make selection”.

path


Delete the selection you just made by pressing the “Delete” key from the keyboard so you may obtain a nice ribbon shape.

ribbon


With the same Pen Tool(P) but in “Shape Layers” mode this time, draw a gray shape like in the image to create a nice shadow effect:

shape


The button is almost done. I want to show you how to create a seams effect. So, let`s add some seams. Use the Line Tool(U) to add vertical small lines on the right and left side of the button. The image might help you:

lines-ribbon


Last step, add a small home icon at the middle of the button. Download this Home Icon and add it to the project. Change its color to white and add a small drop-shadow at the top of it:

small-drop


The button is done, and with this final touch, the entire project is done and the navigation ready to be coded. I thank you for watching the tutorial, hope you`ve learned something today and hope to see you again, next time, for another photoshop lesson. If you have any questions, drop us a comment. Till then, take a look at what we`ve done today!

navigation-ready

realistic broken glass effect

Subscribe to our Newsletter

If you liked this article, then please subscribe to our newsletter for latest web resources. You can also find us on Twitter and Facebook.

3 Comments

  1. Hi Ashok, Maybe you want to change the link to download the psd file from :
    http://psd.p2ptuts.com/create-clean-navigation-menu-photoshop/psd.p2ptuts.com/wp-content/uploads/navigation-menu.zip
    to
    http://psd.p2ptuts.com/wp-content/uploads/navigation-menu.zip
    Nice menu – thanks for sharing
    Regards,
    Hans.

Leave a Reply