How to Make Roll-Over Buttons
Page Three


Step Nine
:
Now select Layer 2 to Highlight it, and again choose Layer/Effects/Bevel and Emboss, and select values that look good. This will be the 'UP' state.

Step 9



Step Ten
: Go to Layer/Effects/Drop Shadow and choose values such as below. You'll be able to see how it looks as you change values.

Step 10



Step Eleven
: Click on Layer 3 to Highlight it, go to Layer/Effects/Bevel and Emboss, Choose Pillow Emboss, and select values that appear as if the Button is being pushed. You're almost done, and you can see pretty much how it's going to look now. The magic is done with the script that your webpage program writes as you Insert Roll-Over image.

Step 11




Step Twelve
: Click on the little Eye on Layer 3 to turn it 'Off' so that it is no longer visible.Now click File/Save for Web and choose either .gif or .jpg, and see how small of a file you can get without losing any resolution of the Button. This is your Up Button.

Step 12



Step Thirteen
: Now, click the little Eye again on Layer 3 to turn it 'On', and again save this image. This is your Down Button. If you want to do a series of Buttons, be sure to save your original with the layers as a .psd so that you can simply change colors, add text, etc.


Step 13


Hey, that's all there is to it. Now when you 'Insert Roll-Over Image' in your webpage program, choose the Up and Down Buttons, and the program will write the script necessary. Easy, huh? Remember, the more you do something, the easier and faster it gets, so just practice, practice, practice. ;-)

Page 1   Page 2   Script Page
Page 1
'
Page 2
'
Script

CrowDesigns 1998-2006