Demo 4: Rollovers in ImageReady
  1. Go to your GDT 150 Class Folders. Find demo4.psd and spacer.gif, and drag them onto your desktop.

  2. Create a folder called demo4, within your in_class folder.

  3. Put demo4.psd and spacer.gif in the demo4 folder.

  4. Open demo4.psd in Photoshop.

  5. **Because of incompatibility issues of opening of Adobe PSD's on a PC that were saved in Adobe CS version on a Mac, we have to save our Photoshop files as Photoshop PDF's in this class. Go to File>Save as... and choose Photoshop PDF. Save the file with the ZIP encoding (this is lossless whereas JPG is lossy).

  6. "Jump" to Adobe ImageReady.

  7. Make sure your Rollovers, Slice, and Optimize pallettes are all visible by going to Window and make sure Rollovers, Slice, and Optimize are all checked.

  8. Choose your slice tool. We will now create slices within our document. Ultimately each slice will be its own image file. Because we are going to create rollovers, we want to temporarily enable the visibility for every layer in the Layers pallette. Create one large slice for the head of the document, one for each of the navigation items, and one for the square area where the photo appears. Then slice the "blank" white areas as well. Be careful not to overlap your slices as you do this.

  9. Now choose your Slice Select tool. Click on the various slices you just created. This is one way of selecting slices. As you do this, look down at the Slice pallette and see that the Slices have been automatically named by ImageReady. Now go to your Rollovers pallette. You will notice that the slices are also listed and selectable within this pallette. These slices can be renamed within the Rollovers pallette, or the Slice pallette.

  10. Now disable the visibility for these layers: peonies, daffodil, peonies text rollover, daffodil text rollover, tulip text rollover, (For Demo 5).

  11. Rename the slices for the header(header), navigation items (tulip-btn, daff-btn, peonies-btn), and tulip photo (tulip). Don't worry about re-naming the other slices.

  12. Now check your optimization settings. Select each of the slices with text and make sure they are set to GIF in the Optimize pallette. For the tulip slice, make sure it will be a JPG.

  13. Select the tulip-btn slice in the Rollovers pallette.

  14. Go to the icon that looks like a new page at the bottom of the rollovers pallette and add a Rollover state. With the Over State selected, go to the Layers pallette and enable the visibility of the tulip text rollover layer. Now go back to the regular state and see that the tulip text rollover is once again invisible.

  15. Repeat step 13 for the daff-btn and peonies-btn.

  16. Go to File > Preview in Internet Explorer to make sure it works properly as HTML. If so, go to File>Save Optimized As... and have your settings match the following:
    Use the drop-down menu and choose these settings for HTML, Slices, and Saving Files:
  17. ImageReady will automatically create a folder for your images, called "images". If you'd like this folder named something else, type that in.

  18. We still have to optimize the daffodil photo and the peonies photo. Go back to demo4.pdf and disable the visibility of the tulip layer and make the daffodil layer visible. Rename this slice daff. With this slice selected, go to File>Save Optimized As> and this time choose these settings, so that you are saving Images Only, and Selected Slices as shown below. Repeat this step for the peonies.jpg too.

  19. Put spacer.gif into the images folder.
Demo 4: Rollovers, Part 2
  1. ImageReady has created an HTML for your file. Open Dreamweaver and to got File>Open, and open up demo4.html.

  2. Set up the links so they go to index.html for the tulip link, daff.html for the daffodil link, and peonies.html for the peonies link.
  3. Take note of the the white "spacer" images dimensions. Replace these images with the file spacer.gif, just change its dimensions to match the previous spacers. Save demo4.html again.

  4. Now save the file as "daff.html" and again as "peonies.html"

  5. For index.html, change the tulip-btn.gif to be tulip-btn-over.gif. Remove the # from the Link text box. You will get an alert that the JavaScript events will be removed. Just press OK. Save index.html.

  6. Now open up daff.html. Change tulip.jpg to be daff.jpg. Change daff-btn.jpg to be daff-btn-over.jpg, and remove the #. Press OK. Save daff.html.

  7. Now open up peonies.html. Change tulip.jpg to be peonies.jpg. Change peonies-btn.jpg to be peonies-btn-over.jpg, and remove the #. Press OK. Save peonies.html.

  8. Add Alternate Text to each of the images. For each of the text images, just type in whatever the word says. Add a link to demo4/index.html on your index.html page.