Post-Thumbnail

A few weeks ago we posted a Vertical Navigation Menu freebie on Creativeoverflow so I decided to do a tutorial on how I created the menu. Its a detailed tutorial and not just for those starting in the web design industry. In the tutorial you will learn how to setup guides, use a layer mask and make simple gradients look beautiful. Let’s get started.

Author: An1ken Creative
Tools: Photoshop
Time Needed: 45 minutes

Final Preview

Step 1

Firstly it’s time to open Photoshop and create a new canvas with a size of 1000×600 with a 72dpi. Now fill the background with a greyish color #e3e3e3 and then go to Filter>Noise>Add Noise and set the amount to 1% – Distribution to Gaussian and make sure Monochromatic is ticked and then hit OK. You should have something like this below.

Step 2

Now that we have a background to work on go to View>New Guide… make sure the orientation is Vertical and set the position to 50% (Not 50px) and hit OK. This basically sets up a guide to show you the vertical center of the canvas. If you don’t see anything hit (Shortcut: CTRL + H) this will activate your extras, but if you still don’t see anything go to View>Show>Guides make sure the guides tab is active.
Now we are going to create some more guides. You will basically use the exact steps as mentioned above, but you will use the properties listed below.

  • Orientation: Horizontal | Position: 125px
  • Orientation: Horizontal | Position: 475px
  • Orientation: Vertical | Position: 350px
  • Orientation: Vertical | Position: 650px

You should have something like this below.

Step 3

Now that we have some guidelines setup for the menu. It’s time to start with the actual menu. My menu has rounded corners, however you aren’t limited to that. Go to the Rounded Rectangle Tool or Press (Shortcut: Shift + U) till the tool is selected. Make sure the radius for the corners are set to 10px and now it’s time to create the shape. Draw the shape within the guidelines to make sure that centered and the correct for the tutorial. It should something like this once the paths have been created.

Now go to your pen tool or press (Shortcut: P) to select the tool. Now go to Layer>New>Layer to create a new layer for the shapes filling. Now with the pen tool selected right-click on the canvas and select Fill Path. Set the color to anything you like, I used #333333. Once the shape is filled, right click on the canvas and select (Delete Path). You won’t be using the background color as we will be changing the tab colors using Blending Options. Your canvas should look like this now.

Step 4

Now its time to setup the tabs for the menu. Time to setup some more guides. Use the exact same steps as we did previously, but use the values below.

  • Orientation: Horizontal | Position: 175px
  • Orientation: Horizontal | Position: 225px
  • Orientation: Horizontal | Position: 275px
  • Orientation: Horizontal | Position: 325px
  • Orientation: Horizontal | Position: 375px
  • Orientation: Horizontal | Position: 425px

You should have something like this below.

Now we will be creating the individual tabs by using the fill tool and layer masks. That’s how we will be creating the individual tabs. Grab your Rectangular Marquee Tool (Shortcut: M) and select the top tab in the guides. Should look like this.

Now create a new layer – Layer>New>Layer and fill the selection with #AAAAAA, we will be changing the colors soon. Now you must be wondering why the top piece of the menu suddenly has square corners? This is where Layer Masks come in. Select the menu background layer and go to Select>Load Selection and hit OK this should select the menu background (Shorcut: CTRL + Click on Layer window) Should look like this.

Now with the menu selection click on the new layer you created and filled for the top tab of the menu and with the top tab layer selected go to Layer>Layer Mask>Reveal Selection. Now you should be seeing some rounded corners again. You might have some underlining pixels at the moment, but once you hide the menu background layer they will disappear.

Now with the steps used above you have to create new tabs for all the sections on the menu. The only time you really have to use the layer mask is for the top and bottom tab with the rounded corners. The rest of the tabs is a simple selection and fill in a new layer. Once you have created tabs for each section you can hide the menu background layer (We will be using it later). Your canvas should look like this now. The menu is basically just going to be another color for the moment.

Step 5

Now it’s time to start adding some gradients to the tabs. First right click on your top tab layer and select Blending Options. Now drop the Fill Opacity to 90% and then select Bevel and Emboss and Color Overlay – Orange #ff3300. Use the settings below.

Your top tab should now look something like this.

Step 6

Now it’s time to sort out the rest of the tabs. Right click on the 2nd tab layer and select Blending Options. Now select Gradient Overlay and use the settings below. The colors used are #dbdbdb to #f8f8f8.

Now hit OK when you are done setting up the gradient and then right click on the layer you just edited and select Copy Layer Style. Now select the rest of your tabs, and then right click>Paste Layer Style. You should have something like this now.

Now to create the hover effect. Right click on your top tab layer and Copy Layer Style and then choose the tab you want and Paste the Layer style on it. Now you have your hover effect setup as well. Easy isn’t it?

Step 7

Now let’s create the dividers for the menu. All the strokes are 1px in size and is pretty easy to create. Let’s select the menu background layer that you hid in Step 4, it will create a selection around the entire menu. Now make sure you create a new layer on top of all your other layers and then go to Edit>Stroke. Now your Width: 1px, Color: #CACACA and Location: Outside. Now hit Ok. You should see a nice stroke around your entire menu.

Now select your Rectangular Marquee Tool and in the top toolbar click on the Style: drop down menu and select Fixed Size. Make the Width: 300px and Height: 1px now create a new layer and make your foreground color #CACACA. Now click on your canvas and you will see a thin striped selection appear, place it within your guidelines and between the tabs.

Once you have the placement right, select your fill tool (Shortcut: G) and fill it with #CACACA in the newly created layer, go to Select>Deselect(Shortcut: CTRL+D). Now all you have to do is duplicate the layers and place them in between the tabs correctly. To duplicate right click on your newly filled layer and select Duplicate Layer (Shortcut: CTRL+J). Now just place the newly duplicated layer in between the next two tabs and continue the process till you have this below.

Step 8

Time to label the menu. In my original Freebie I used Helvetica-Condensed to label the menu, but it isn’t a free font, so I will make use of Arial Bold for the tutorial.

Let’s start with the Navigation label. Font Size: 21pt | Color: #FFFFFF now create the label in all caps and place it centered on the top tab. You can add a little drop shadow too if you really want some depth for the text. Your label should look like this.

Now for the other labels. Font Size: 19pt | Color: #5a5a5a once you have labeled your other tabs it should look like this.

Now for the Hovered label. Font Size: 19pt | Color: #FFFFFF place it on your hovered tab and you could add a subtle drop shadow if you want too. That was your final step for the menu and you are all done. I added in a shadow below the menu just for preview purposes.

Final Preview


I hope you enjoyed the tutorial. There will be a lot more tutorials coming to Creativeoverflow soon, be on the lookout.

Buffer
About the Author:
Jacques is the CEO and Founder of the An1ken Group. Connect with him: Jacquesvh.com - @Jacquesvh - Facebook - Instagram - Pinterest - Google+

16 Comments so far

  1. Nice and clean nav, good work!

  2. Web Guy says:

    Why not use CSS? You can do this in about 15 minutes and easily make changes on the fly.

  3. Andrew says:

    Thanks for sharing, it was beautifuly done!

  4. Striker says:

    Nice result, very useful tut.

  5. This was the best explanation i have read it become so easy to implement now

  6. This is simple & very coool. Thanks for the post

  7. BSCC says:

    great tutorial, simple yet beautiful navigation!

  8. Awesome turorial, thanks so much for sharing!

  9. Man, that’s a great tutorial, and the menu looks great!

  10. tata photon says:

    TATA Photon Plus Provides Free Home Delivery and Installation call Me 9266555507 On Spot Activation. Limited Time 
    Offers Hurry Visit Now Buy Online Tata Photon.

  11. Roulette is world Famous CASINO GAME, online roulette for money, play roulette, we offer top three Casinos Games, roulette tips, online roulette.

  12. Cheap SSL says:

    Resources like the one you mentioned here will be very helpful to me ! I will article a link to this page on my weblog. I am sure my site visitors will find that very helpful.

  13. Kitchen Renovations and Designers in Sydney, Australia! Space Kitchen offers complete kitchen solutions for kitchen design and renovations. Contact now to arrange your free Kitchen designer consultation!

  14. Kitchen Renovations and Designers in Sydney, Australia! Space Kitchen offers complete kitchen solutions for kitchen design and renovations. Contact now to arrange your free Kitchen designer consultation!

  15. Prasaath says:

    THANKS A LOT MY MENTOR 

Have your Say