Photoshop Tutorial – Navigation Bar with Rollover Buttons

Learn how to create a sleek rollover Navigation Bar. In this tutorial you will learn how to create buttons in Photoshop, export the buttons and add rollover effects in Dreamweaver.

Rollover the buttons below to see the final effect.

Tutorial Details

Program: Photoshop CS5, Dreamweaver CS5

Estimated Completion Time: 25 Minutes

Now we have everything we need let’s begin.

Step 1:- First we’ll design the main navigation and then we’ll create the rollover version of our buttons. So let’s start with creating a new file with 70px width and 60px height.

Step 2:- Select the Pain bucket and fill the background with # 000000.

Step 3 – Now select the “Rectangle Tool” and create a rectangle.

Step 4 – Now we’ll add a bit of gradient to our rectangle. So click on Layer> Layer style> Gradient Overlay. And use dark color gradient for this.

Step 5 – Select the Line Tool and create a 1px line with # aaaaaa.

Step 6 – Now we’ll add some outer glow to our line so click on Layer> Layer style> Outer glow.

Step 7 – Now select the Line Tool again and create a vertical line with # 111111 to divide the buttons.

Step 8 – Our line need some Drop Shadow so click on Layer> Layer style> Drop Shadow.

Step 9 – Now select the Text Tool and add our navigation text with color # ffffff.

Step 10 – Click on Layer> Layer style and add a light gradient to our text and a bit of black stroke.

Now our button is completed so to export it, click on File > Save for web. Then choose PNG from the drop-down menus. Remember buttons should always be exported as PNG for good quality.

Step 11 – Now repeat the same process and complete the Navigation bar.

Step 12 – Now we will design the rollover version of our buttons. So first select the Rounded rectangle tool and create a rectangle in the middle.

Step 13 – Now click on Layer> Layer style> Pattern Overlay. Use the pattern mentioned above.

Step 14 – Now add the text and our rollover effect is done.

Step 15 – Now repeat the same process for each button. And Export the images as before.

Source: entheosweb.com

you may also like:

• Photoshop Tutorial – Clean Two-Level Navigation
  Step 1 First off, we need to make a new document; I’ve made a relatively small one for the purpose of this tutorial (600x420px) but yours will probably be for a web design (1000px or so wide). T...
• Photoshop Tutorial – Apple Navigation menu
  Learn how to create the newest Apple navigation bar that is being used at their site. 1. Start by opening a new 500px * 50px file. 2. Using the Rectangular Marquee Tool, set a Fixed Size of 480px ...
• Photoshop Tutorial – High Detailed Plastic Navigation Bar
  Final Result Preview Step 1 Let’s start with creating the background for the navigation bar. The background is going to be bluish; the color will be alike with the color of your oncoming menu. Cre...
• Photoshop Tutorial – White Navigation
  Step 1. First of all, make a new Photoshop document, with dimensions of 44x220 and a black background. Create a selection using the elliptical marquee tool and fill it with grey (C1C1C1) on...
• Photoshop Tutorial – Web 2.0 Nav Bar
  1. Start by opening a new 600 * 140px file. Now select the Rounded Rectangle Tool and make a small rectangle like in the image below 2. Apply these layer styles to it: Inner Glow 3. Gradient...