Slices/Rollovers - Rollover Lesson

In the Web Graphics class we discussed how to slice images using ImageReady. I will be repeating several of those steps in this lesson and adding information about how to add rollover effects to the pages.

Take a look at your mock up and analyze where slicing will need to occur. If you haven't done much slicing you will probably end up doing this a few times. After you gain more experience you will develop a "slicing eye" and it will go more quickly.

Slices are used to

  1. Create navigational areas where rollovers will eventually occur
  2. Separate images which should be saved as JPEGs from those which should be saved as GIFs.
  3. Create areas of solid color which can be designated as table cells with no image and HTML bgcolor code is used to color the cell.
  4. Create areas where text will be entered using HTML.

With those principles in mind, place guides on the screen. To create a guide. View > Show Rulers > use the move tool to drag down a blue line.
Click and drag until the line is where you want it. The line can be adjusted using the move tool.

Here are a few tips regarding creating and moving guides.

  • zoom in for more accurate placement
  • if the guides are jumping make sure "snap to grid" is not selected
  • if the guides don't want to go where you put them change the layer you are on

    • I have used guides to define the photos strip, navigational buttons, the body text, logo, and collage. Refer to this list for an explanation of why each guide was used.


      1. Establishes bottom of photo strip slice.
      2. Bottom of campus name, don't worry that it cuts into the URL
      3-8. These lines set the bottom of the slices for the main navigation. Since I am creating a rollover for each link, I slice each word to create an individual image. If no rollover were to be used, I could make this one slice which would become an image map.
      9. Bottom of color navigational block also the top of the logo slice
      10-12. These lines set the bottom of the slices for the lower navigation


    Now I add the vertical guides. Once again refer to the explanation below.

      1. This guide establishes the right edge of the main navigation
      2. Establishes the left hand edge of the text block and the left edge of the collage
      3. Establishes the right hand edge of the text block and the left edge of the collage
      4. This sets the left edge of the bottom navigation
      5. Final guide determines the left edge of URL



    Now it's time to switch to ImageReady. Don't be frightened, this will be fun! To switch to ImageReady, look down at the bottom of the tool bar and you will see an arrow and the ImageReady icon. Click on that icon to launch ImageReady and display your document.

    After switching to ImageReady access the Slices menu > Create Slices form Guides. Seventy seven slices are created and a film appears over the images. Don't worry, this does not affect the final look of your graphics.



    This option makes creating slices quick and accurate. The downside is that several unnecessary slices have been created.

    To correct this problem use the slice selector tool to select several slices. Where can you find this tool? It is the 3rd tool on the right, below the magic wand. Now, just to make things a bit more confusing there are 2 tools occupying this space on the tool bar, the slice tool and the slice selection tool. We will be using the slice tool in the next lesson, so for now simply click and hold the mouse over the slice tool so the slice selector tool can be accessed.



    Use the "slice select" tool to select slice #1. Holding down the shift key allows you to select several slices at once. Select all the slices which make up the top photo strip (slices 1-6). Now access the Slices menu > Combine Slices. The slices will combine and the remaining slices will re-number to reflect the change. To see the results of combining slices refer to the images below. Here is my screen after all slices have been combined:



      1. photo strip
      2. Hemenway State University
      3. student services
      4. top of gold curve
      5. body text
      6. collage
      7. URL
      8. admission
      9. programs
      10. faculty
      11. administration
      12. empty cell
      13. news and events
      14. bottom of gold navigation
      15. logo
      16. empty cell
      17. search
      18. contact
      19. site map
      20. A-Z index


    The next step is to name each slice. Using the slice select tool to click on the first slice, the slice dialog box should appear. A default name appears in the name area, replace it with a descriptive name. In addition, enter text for the "alt" tag.

    When naming slices that will eventually link to other pages enter a value in the "URL" box. If the site will use frame code enter "target" information. This does not apply to the campus assignment, and will not be used unless your site is built within frames.

    Guidelines for naming slices

  • no spaces, / , or other punctuation in the slice names use a dash - or underscore _ to create a two word file name
  • the slice for admissions will look one way on the opening screen and another on the second level pages. I name the admissions slice on the opening screen "admissions-main" and the slice for all second level pages "admissions". This is true of several image names which appear on both the opening and second level pages, but have a DIFFERENT look.
  • make the names as descriptive as possible
  • use descriptive alt tags "image" or "links" is too vague
  • check with the storyboard for the names of the files the navigational graphics will links to


    • Here is an example of a linked slice that has been properly named and linked.



    When the document was still in Photoshop I made copies of each layer of linking text and changed the color of the text to dark blue. Remember to make a copy of a layer, drag the original layer to the new layer icon at the bottom of the layer window. I also recommend you rename the layer and include the word "over" or "roll" in the name. I place my rollover layers above the layer for the normal link. In the photo below, note how the text appears in the Navigation bar, locate the new roll layer, and find the icon which allows you to create a copy of a layer.



    Next, access the Rollover (if this window is not showing access the Window menu > Rollovers). There will be a thumbnail of the slice with the name of the slice appearing to the right. to create a layer for the rollover image select the new layer icon at the bottom of the window.



    A new layer will appear with the generic name of "Over State". At this stage turn on the layer which holds the dark text which creates the rollover effect.



    by clicking on either the services-index layer or the over state layer you will be able to see the 2 looks for this rollover button. Here is how the button will appear when the rollover state is selected.



    After creating a rollover, make sure you select the original state of the image (in this case the layer titles "services-index"), before moving on to the next slice. I select all the slices which have rollovers and create the rollover layers for each image.

    Now for the final step! Can I have a drum roll please?

    Select the Optimized tab near the top of the image. Analyze the images, many of them will be great as GIFs. The logo, gold navigation block, and URL are Web GIF optimization candidates. The photo strip and collage slice should be saved as JPEGs. The navigation should be saved as an adaptive GIF to avoid dithering of the shadow. Once each slice has been identified as the appropriate GIF or JPEG format I can access the File menu and select > Save Optimized As

    It is essential that you develop an organized system for storing the files created by ImageReady. Students who placed all there images for both clients into one directory will be graded down. Create a new directory named "campus-final". Save the file as index.html and place this file within the "campus-final" directory.

    Here is the final sliced page with rollover effects included.

    home || begin || logos || photos & collage || rollovers (2) || animation || 2nd level || templates