Home >> Software Help >> ImageReady >> Graphics Optimization and Slicing

Using ImageReady to slice layout and optimize graphics

You can optimize a Photoshop file for the Web (make it a GIF or JPG) by going to File --> Save for Web

But if you have designed a layout, (see below) you will want to bring this file into ImageReady (or Fireworks) and slice it to export individual images. For example, the blue and orange navigation bars at the top are rollover graphics, they will be GIFs. The image of the 3 men would compress better as a JPG.

1. Open your photoshop file in Image Ready

2. Every image that you want to be a rollover (like my top navigation bar) needs to be a SLICE. ImageReady and Fireworks handle this process of slicing differently. In ImageReady, you can create layer based slices or user slices. Layer based slices will create a slice for the content of a layer, user slices allow you to define the slice yourself. Most of the time, you will use layer based slices.

To create a slice for the top rollover graphics, right click on the appropriate layer in your layer panel and select New Layer Based Slice

Create a layer based slice for each rollover and for each element you want to optimize individually.

I would create a layer based slice for the top rollovers, the layer with the photo of the 3 men and the layer with the van (because these will be JPG and the rest GIF)

IMPORTANT NOTE: You do not need to create a layer based slice for both the on and off layers, only one to define the area of the slice. I will select the layer "aboutmona-on" and make a slice, but if "aboutmona-off" is directly over it, I so not need to create another layer based slice for that layer, because aboutmona-on covers it.

What Slices Look Like:

Once I have my layout sliced, I can define my rollover graphics

Go on to Creating Rollover Graphics in Fireworks