Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Rollover Buttons

Rollover Buttons


1. Start by make a new document 150 x 75. Add a new layer (Shift+Ctrl+n), call it button and make a selection with the Rectangular Marquee Tool, fixed size 100 x 25. Fill the selection with the Linear Gradient Tool. In this example

I've used white as foreground colour and gray (#999999) as background colour. Drag the gradient from top to buttom.

image 1

2. Add a Bevel & Embross Layer Style, Layer > Layer Style > Beveled and Emboss, and set the size to 1. Click ok. Now we are finished making the normal state of the button.

image 2

3. Copy the button layer, call it button_own. Open the Bevel and Embross Layer style and change the direction to down. You should now have to layers with different layer styles.

image 3

4. Now turn of the visibility by clicking on the eye to the left of the button_down layer. Go to File > Save for Web and save the image.

Do the same once more with the button_down layer visible. Remember to use different names on the two images.

Rollover Buttons

5. The last thing we need do is to insert the two images into your homepage with Dreamweaver. Open Dreamweaver and go to Insert > Rollover Image.

In the new window click on the first Browse.. button (original image) and select the first image you made. And in the second one select the second image. Enter the URL and you are finished. I would recomend that you place the rollover button inside a table.



Author's URL: Annesdesign.net
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Rollover Buttons"

Captcha