Saving a Rollover Image for the Web

In this lesson you will learn how to save (and name) the second of two images for use as a rollover.

Note: Even though ImageReady is Photoshop's rollover generator, we will be using Dreamweaver to insert the images and generate the Javascript for the rollover.

1. Select a multi-layered Photoshop file to begin (the one I'm using is just an example)
   
   Any two images will work so long as they are the same file format (both either JPEG or GIF—not one of each) and the same size (height and width)
   
   In this example we will Save for Web with different layers visible and name the files as follows
   
      
   
   Note: We have already saved the first example as detailed on this page
   
   
   
2. With the layers visible as shown in the Layers Palette (above right) this image looks like:
   
   
   
   
   
3. Press Shift-Option-Command-S or...
   
   
   
   
   
4. Change the settings in the Save for Web dialog box as before (see this page if you can't remember how)
   
   
   
   
   
5. Click OK
   
   
   
   Note: Again, we could have done further optimizing but that's another lesson
   
   
   
6. Navigate to your Local Root Folder (if necessary) but do not click Save
   
   
   
   
   
7. Click between toontown and .jpg to insert _over into the file name
   
   Note: Always name your rollover image the same as the original image with the addition of _over
   
   (When you begin to insert rollovers using Dreamweaver's Insert Rollover command you will understand why)
   
   
   
   Save your renamed rollover image
   
   
   
8. Switch back to Dreamweaver to confirm for yourself that the program is keeping up with your changes
   
   
   
   This image is now properly optimized and named for use as a rollover on the Web
   
   
   
9. Save your Photoshop file (Command-S) and close the window (Command-W)
   
   Note: The original image will not be resized and its layers will be intact
   
   
   Important: Your Photoshop file (in this example, toontown.psd) does not go into your images folder or anywhere else inside your Local Root Folder. I suggest you create a companion folder that contains only the Photoshop files you saved for the Web.
   
   It is incredibly helpful to name your files logically and consistently
   
        toontown.psd
        toontown.jpg
        toontown_over.jpg
   
   Since your Website will contain dozens of images, I suggest you consider a sound strategy for keeping track of your graphic files
   
   More on this in another lesson

Congratulations! You now know how to optimize an image for use as a rollover on the Web.

Dreamweaver | Photoshop | Digital Art | Web Design