Create a set of Rollover Images


1. Find a set of six images you want to work with; all the images should be related. Bring them into Photoshop and using the Image > Image Size menu, make sure each one is 300 pixels high. Check "Constrain Aspect Ratio" if this has not been selected.

2.Using the Layers > Duplicate Layer menu, create a second layer, Name it "rollover layer."

3. Open the Layers palette by choosing Window > Layers. Make sure the rollover layer is selected. Now make changes to the layer: use a Filter, distort part of the image using the Liquify tool, add a lens flare, lighten the image, or anything else you might want to do to make the rollover version different.

4. Now choose the File > Export > Save for Web & Devices menu. Select a compression scheme from the pulldown menu at the top right. Use "JPG" and "Medium" or "Low" if you don't have any text in the rollover; use "GIF" and "Adaptive" and "No dither" if you do have text. Compare the original image with the new compressed one by clicking on the "2-Up" tab at the top left.

important note: Save this jpg and all the others you will make in a folder called "rollovers" on the Desktop.

5. Click "Done" to save the new image. Since this new image is the rollover version, put a large "R" at the end of the image name, just before the extension, like this: "moonR.jpg."

6. Go back to the Layers window, and hide the rollover layer by clicking on the eyeball icon on the rollover layer. You should now be seeing the original image.

7. Again, choose the File > Save for Web & Devices menu. Save the file using JPEG or GIF compression again. Since this is going to be the normal version of the image, give it the same name you did last time but without the "R".

8. Open the Dreamweaver application (the green "DW" in the dock) and choose File > New. Choose "Blank Page", "Page Type: HTML", and Layout "<none>". BEFORE YOU DO ANYTHING ELSE SAVE THIS NEW PAGE to the rollovers folder.

9. From the Insert menu, choose Table. In the dialog box that follows, enter 2 for the number of Rows and 3 for the number of Columns. Click OK.

10. Click your cursor inside of the first cell of the table and choose Insert > HTML > Rollover Image. In the dialog box that follows, find the "Image name" box and give the image a unique and descriptive name that contains no spaces or special characters.

11. Find the text box that says "Original Image." Use the "Browse" button to find the normal version of your rollover image, the one without the R at the end of the filename.

12. Find the text box that says that says "Rollover Image" and use the browse button again to find the rollover version of your file (the one that ends with the R). Click OK to exit.

13. Repeat steps 10-12 in the other five cells of the table.

14. Finally, choose File > Preview in Browser > Safari (or Firefox or Chrome) to see your rollovers in action.