Create a Clean Navigation Menu in Photoshop

Create a Clean Navigation Menu in Photoshop

Divi WordPress Theme

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.


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.


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.


Now apply the next layer`s styles:




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.


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.


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.


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.


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.


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.


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”.


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


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:


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:


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:


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!


realistic broken glass effect

Written by
AsHok Jain
Join the discussion

This site uses Akismet to reduce spam. Learn how your comment data is processed.