Navigation Bar with Rollover Buttons

the final effect.

Tutorial Details

Program: Photoshop CS5, Dreamweaver CS5
Estimated Completion Time: 25 Minutes

---

Tutorial Assets

---

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.

Step 16 - Now our all 5 buttons are ready both the basic and rollover version. So let’s start with the Dreamweaver. So create a new HTML file.

Step 17 - Now click on Insert> Image objects> Rollover image.

Step 18 - Now browse the main button in the “original image” and roll over version of our first button in the “Roll over image”.

Step 19 - Repeat the same process with each button and then save the file as “Navigation.html’. You can easily change the height and width of any button by locating Height and width in our dreamweaver code. Simply change the height or width by adding a new number.
Finally, our Sleek Rollover Navigation Bar is ready.

Tutorial Details

Program: Photoshop CS5, Dreamweaver CS5
Estimated Completion Time: 25 Minutes

---

Tutorial Assets

The following assets were used during the production of this tutorial.
Abstract Nebula Textures

---

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.

Step 16 - Now our all 5 buttons are ready both the basic and rollover version. So let’s start with the Dreamweaver. So create a new HTML file.

Step 17 - Now click on Insert> Image objects> Rollover image.

Step 18 - Now browse the main button in the “original image” and roll over version of our first button in the “Roll over image”.

Step 19 - Repeat the same process with each button and then save the file as “Navigation.html’. You can easily change the height and width of any button by locating Height and width in our dreamweaver code. Simply change the height or width by adding a new number.
Finally, our Sleek Rollover Navigation Bar is ready.

Posted in: tip dan trik poto shop