Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks Tutorials
& Resources
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Photoshop Tutorials > Rollover Navigation Bar  


New Photoshop Tutorials

Image Effects

Text Effects

Designing

Others

Free Photoshop Resources

More Photoshop Tutorials

 

Other Photoshop Resources

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


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 1

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

step 2

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

step 3

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 4

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

step 5

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

step 6

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

step 7

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

step 8

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

step 9

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

step 10

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 10b

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

step 11

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 12

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

step 13

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

step 14

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

rollover navigation bar

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 16

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

step 17

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 18

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.


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


best psd templates

Free HTML5 Website

New Photoshop CS5 Tutorials

Fantasy Photo Manipulation

Retouch a Model Portrait with Flawless Natural Skin

Featured Template
Template # 36883
Type: Joomla 1.7 Template
Price: $67