In-Class Exercise: Image Slicing

This exercise includes a combination of experiment and simulation of the process of preparing sliced images for a web that will be used as a navigational element of a web page. The sources for the images you are using in these exercises are listed in the exercises. DO NOT install these images on Grace. We do not have the copyright permissions for public display of these images although they can be used as part of these exercises under the fair use clause of copyright.

Part 1: Slicing the image

1. First, use CTRL-click (right-click on a PC) on this link to download the the ice08.psd file. This file contains a theoretical menu for a virtual art exhibit. We won’t take it further than optimizing this image for the web and making it interactive but you’ll get the idea. Both images and text values will be links. If you have not done so, open the file in Fireworks.

2. To optimize the image, we need to clarify some assumptions. For example, what assumptions are we making about the browsers and equipment used by our audience. Let’s assume that we are targeting a general audience that is using at least version 4.0 or later of either Netscape or IE browsers and that they are using monitors set to a color depth of at least 16 bits. So, we are not concerned in this exercise with using web safe palettes but we are concerned with minimizing the download time while maintaining high-quality visual images.

3. Using those assumptions, slice the image to achieve a balance between size and quality. Pay particular attention to maintaining the quality of the thumbnails of the paintings. Make sure you end up with at least one slice for each image and each text label. They will all have links attached to them in a little while. Now use the Slice Tool to create different slices for each text label and image. Don't forget to use the Optimize Window to switch from gif to jpg.

4. Create a new folder for the output. File->Export to create the html and sliced images.

5. How big is the data total of the sliced images? Your total should be in the range of 15-18K total. If it is larger, check your assumptions and choices and redo Step 3 until you get the right total size.

NOTE: On a Mac, remember that two values are available, the size of the data and the space occupied on the disk (the value inside the parentheses is the data size). The larger regular file size is the space occupied on the disk (in disk blocks, usually a minimum of 2k-4k each depending on the disk size). In other words, even a single pixel image requires a minimum of one block of storage on a disk (on any type computer).

Part 2: Adding links to images

Although Fireworks automatically names everything when you create the slices, and it is very logical, it is not particularly memorable or meaningful. If you look in your folder full of image slices, which one is the horse race or the text label for the horse race? If you are always using Fireworks to work with this sliced image, it is less of a problem but if you want to be able to have others help with the updating process, using more meaningful names will be a real help.

1. Throw the html and folder full of images that you created in the previous part away. You are going to redo the html and slices so these will just get in the way.

2. Slice the image again and this time, rename each slice in the Properties Window. You will need to do this individually for each slice. This time name the image slices homeimage, sportsimage, workimage and upcomingimage respectively. As you slice the text labels, again, rename them hometext, sportstext, etc. Name the text under the upcoming image as “upcoming_title”.

3. Use the Properties Window to Add URLs to the images. For the title of the exhibit (“Everyday Life:…”) link to the Web Museum, Paris’ page of artists

4. For the home, sports and work images, link to a page in the Web Museum that displays a larger version of the thumbnail.

   • Vincent’s Room, Arles
   • Degas’ Race Horses
   • Portraits in an Office, Degas
   • Monet, The Bridge at Argenteuil

5. Once you have renamed slices and added links, File->Export again. Preview it in a browser and test all the links. When it works (redo and export again as necessary), continue on.

Part 3: Changing the table

One of the advantages of slicing an image into a table is that it is easier to update. What if you decide to change the image used for the Upcoming exhibit section to a different Monet painting, like The Bridge at Argeteuil. Here is a jpeg version of this image called “monetnewsmall.jpg” that is the same width as the current version of the image that was included in the table. To update the table, rather than open Fireworks and redo things, you should make the modification by finding the current Monet image in the folder containing the slices. What is the image file called? Remember when you named the slice? The image uses the slice name. It should be a jpeg so the current image can be replaced by the new image if the name of the new image is changed to the same name as the file it replaces. The html will load the replacement image. Make the change and view the sliced image table again. No other change should be necessary if you did things correctly.

NOTE: Preview in Browser may recall information from the cache and make it difficult to load the new image correctly. You may need to reload the file in the browser to see the changes.

Save your work before continuing on.

Part 4: Rollover Effects

One of the most common reasons for slicing an image is to allow you to apply rollover effects to those parts of the image used as links. In the example you’ve been working on, you might expect that putting your mouse over a painting would cause it to change in some way—this is an indication to the user that the item is "active" in some way. Let’s add some rollover effects to the sliced image.

1. In order to create a Simple Rollover, we will need to first create two different frames. Frame 1 holds the initial/default image while Frame 2 will be used to hold the new or rollover image. Select Frame 1 now and duplicate it. Be sure you are back in Frame 1 before you go to step 2.

2. Switch to the Web Layer and select the slice that contains the image for "Home," and then choose Window->Behaviors. (You may also simply click on the small circle at the center of the slice.)

3. Create a simple rollover. Depending on the method you chose in Step 1, click on the "+" icon at the top left corner of the Properties Window and choose Simple Rollover OR simply choose ADD SIMPLE ROLLOVER. Excellent. You have just added a Rollover script to the slice you selected. Redo this step for each image. Now we need to make the rollover effect.

Before you go on, turn off the Web Layer "eye". Only the behavior is assigned to the Web Layer … the rollover effects must be made to the image itself. It will be easier to work with the image if you are not trying to look over the Web Layer.

1. The key to making a rollover in Fireworks is be sure that you match the correct layer choice, the correct effect and the correct frame. Be sure that Frame 2 is selected and switch to the Layers Window. In the Layers Window, select the correct object within the Layer 1. (i.e. "chamber" which represents the image you named home). Can you find an easier way to identify the correct layer component without clicking up and down the layer list?

2. After you have correctly selected the correct layer object, use the Effect tab in the Properties Window to add a drop shadow.

3. Repeat steps 4 and 5 for the sports, work, and upcoming images.

4. CREATE A NEW FOLDER FOR THESE MATERIALS. Don't forget to turn your Web Layer "eye" back on! Now, Choose Export from the File menu. Do not replace the previous HTML from the sliced image; put this HTML in a your new folder.

5. Preview the resulting HTML file in a browser. Go back now and make the drop shadow more pronounced …

6. Compare the HTML from the previous section with the HTML you just generated. What significant difference(s) do you see?

Part 5: Changing the Images Location

All of this works fine if you’re creating a new site with all new folders for images and html content. But what if you’re creating rollover navigation for your IMM web site? You’ll need to make sure the images go into the media directory of your IMM site, and that the HTML properly references them. Happily, Fireworks makes this relatively painless. This section will walk you through the process.

1. Create a folder on your drive called "immtest", and in it put a project2 folder and a media folder.

2. In Fireworks, choose File->Export, and select the new project2 folder you just created as the location for the HTML files.

3. In the Slices section of the export settings, check the box that says "Put Images in Subfolder." The "browse" button should now be active. Click on it, then find and select the media folder you created. You should see the path to the directory appear next to the browse button.

4. Save the files. Fireworks will put the HTML file into the project2 directory, and the associated images in the media directory.

5. Use BBEdit to view the new HTML file. What file path did Fireworks use to reference the images in the document?

Image Slicing & Rollovers

A common technique for optimizing web images, and providing interactivity on the page, is "slicing" the image into separate pieces, and then reassembling it in a table on the page. This allows each separate "slice" to be properly optimized, and also allows some of the slices to have interactive behaviors assigned to them (most commonly "rollover" behaviors that change the image when the mouse "rolls over" it).

We'll discuss the reasons for using this approach to images, and then work with Fireworks to slice an image and add rollover behaviors.