PROGRAMS REQUIRED: Photoshop version 5+, Dreamweaver version 3+

Ok now in this tutorial we are going to use both Photoshop and Dreamweaver to create a great looking effect for use on your web page that makes your buttons looked like they've been pushed in when the mouse moves over them. This effect is called either a "Mouse-over" or "Roll-Over".

CREATING THE BUTTON

1. In Photoshop Create a 200 x 200 canvas

2. From the VIEW menu click on SHOW GRID. Also make sure that "Snap to Grid" is ticked, if not, click on that too.

3. Using the Elipse Marquee tool: create a selection that fills a 2x2 space on the grid.

4. Now holding down the (SHIFT) key create another selection to the right of the original selection so that now you should have two circles in your canvas

5. Here comes the slightly tricky part: Firstly swap back to the Rectangular Marquee Tool:

Then again hold down (SHIFT) and make a selection from the middle-top of the left circle, down to the middle-bottom and then drag it across to the right circle's middle. You should now have something along the lines of the image below:

6. Now create a new layer and fill the selection with a color (we used black)

7. This filled shaped (we'll call it the Button from now on) is going to form the basis of our rollover effect.

8. Make the size of the canvas smaller by using the Rectangular Marquee tool dragging around the image and then clicking IMAGE > CROP (ALT + I + P).

9. You may also go to the VIEW menu and click on HIDE GRID, as we no longer need it.

CREATING THE DIFFERENT STATES

1. We will now duplicate "Layer 1" to create the base work for our two states: the "Up State" and "Down State" (known in Dreamweaver as the Original Image, and the Rollover Image, alternatively). Call the duplicate "Layer 2" to make it easier to play with.

2. Right Click Layer 1 and click on "Effects". We want to apply a drop shadow to the image so you may leave that option ticked. Click on the effects menu and scroll down to "Bevel & Emboss". Tick the "Apply" Box. Change the Style to Inner Bevel. Click on OK.

3. Now right click on Layer 2 and Click on "Effects". This time we do not want a drop shadow, so untick that. Go to the Effects menu and scroll down to Bevel & Emboss again. This time we need the Style to be Pillow emboss. Click on OK.

4. Now to make it easy to view each individual button Click the Eye to the left of the Layer we don't want to see. In the image below we are looking at the Second instance of the button. If we Click the eye next to Layer 2 and turned the eye back on for Layer 1, then we would be looking at the First Instance of the button (simple huh?)

5. Now we need to make sure that the Layer 2 button is selected and also that the MOVE tool is also selected

6. Use your Right Arrow key on your keypad and move the image right by 2 pixels (each press of the arrow key will move your image in that direction by 1 pixel). Move your image DOWN by two pixels now with your down arrow key.

7. If you wanted to add text to your button now, we would use the same process (ie create your text layer, duplicate it, move the second one to the right by 2 pixels and down by 2 pixels).

8. Make sure that only "Layer 1", your Original State Text, and the Background layer have the "Eye" next to it, and then click on FILE > EXPORT > GIF89a EXPORT. Save it somewhere easy to get to and call it "button1_up.gif"

9. Now make sure that only "Layer 2", your Second State text, and the Background layer have the "Eye" next to them. Click on FILE > EXPORT > GIF89a EXPORT. Save it in the same directory and call it "button1_dn.gif"

10. GREAT! Now we have our two states. Lets create the rollover effect in a HTML document.

CREATING ROLLOVER HTML IN DREAMWEAVER

1. Open Dreamweaver, and make sure your Objects Launcher is visible (go to WINDOW and make sure that "OBJECTS" is ticked)

2. Click the "Insert Rollover Image" button on the Objects Launcher

3. Either browse for each image or type it in to the respective boxes. If you want your button to link to a URL type that in the box too:

Click OK and you are DONE! Simply save your Dreamweaver document, and open it up in either Netscape or IE.

Conclusion: Just remember about duplicating all of your layers and creating one for the first state, and one for the second state. Also remember when exporting your GIF images, what images are currently being viewed with the "Eye" from the Layers Window in Photoshop. GOOD LUCK!

(Shok built this one in Dreamweaver)

by Andrew BlueDesignStudios

This article was brought to you in conjunction with YnotMasters Network