Slicing Images/ Creating Rollovers

Slicing images allows you to remove any parts of your image that can be represented by your Web page background, thereby reducing the download time for your page. Slicing also allows you to include rollovers which are images that change when the user's cursor rolls over them.

1

Create your page image. You can do this in Photoshop or another image editing program that provides a layers feature.

Note:
You can create your rollovers at the same time you slice your image (and create an html page for it) or you can use Dreamweaver to create the rollovers. If you have ImageReady the first method is the easiest. (If not see the steps at the end of this page.)

In this case, you would create your page image with second state rollover images included but with these second states hidden (their layers are turned off).

Then import this into Image Ready and proceed to slice the image as illustrated below. When you have created your slices from the guides (before you 'Save Optimized As') you will select the slices that contain the first state for the rollovers and follow the link in step 5 to create the rollover code in ImageReady. ImageReady will then create an html page complete with rollovers.

Also see Making Rollover Slices in Photoshop.
2

Determine the table that will contain your page image.

Why do you need a table? To hold a sliced image together seamlessly. Also: if you want to create rollovers it is usually best to include the images that will change in their own cell.
3 Put your guide lines in place. Your image will be sliced along these lines.
4 Create slices from the guides.
5 At this point you would use the rollover creation feature of ImageReady to make your rollover code. (Another option is to create your rollover in Dreamweaver from slices created in ImageReady. See 'Option' below).
6

Save the sliced image and rollover effect and create an html page.



 

Open the html page created by ImageReady in Dreamweaver to continue your web development.

You can delete spacer images included by ImageReady at this point.
End  
 
Option

If you will be using Dreamewaver to create your rollovers you will follow the steps below:

ImageReady creates an html page with a table for you. This table contains all your sliced images, held together seamlessly.

Open this ImageReady - created page in Dreamweaver. Use the Properties Inspector to find the name of the slice you will use as your rollover state.

Open this image up in Photoshop and create the second state on another layer (same document). Save as different name into the 'images' folder.

Select the first state slice again in your Dreamweaver document. Use Dreamweaver's Behavior window to create the rollover. Window > Behaviors then in the Behaviors palette choose Swap Image from under the "+" pulldown menu. Then find the second state image you just created. Preview in a browser to see the effect.