ImageReady notes: Slices
syllabus | schedule | assignments | Web Resources | ARTC courses
[Intro]     [Tags]     [CSSStyles]     [Lists]     [Links]     [ImageTypes]     [Optimization]    [GlobalCSS]     [CSSBackgrounds]
[Tables]     [Slices]     [IR Rollovers]     [Animated GIFs]     [JS Rollovers]     [CSS Margins]     [Windows]     [Video]     [Metatags]     [Imagemaps]     [FormInput]     [FormAtttributes]    [AdvancedForms]    [WhatisJavaScript]    [Windows2]    [Windows3]    [BrowserInfo]    [StatusBar]    [Alerts]    [Randomness]    [Frames]    [iFrames]    [Frames2]   
ImageReady Slices

• Slicing divides an image into distinct ZONES.
• Divides up a large image to enable it to download faster (group of small slices downloads faster than a single large image) because you can optimize each slice individually.

Types of slices

• Slices you create using the slice tool are called user-slices;
• Slices you create from a layer are called layer-based slices.

When you create a new user-slice or layer-based slice, additional auto-slices are generated to account for the remaining areas of the image. Auto-slices fill the space in the image that is not defined by user-slices or layer-based slices. Auto-slices are regenerated every time you add or edit user-slices or layer-based slices. User-slices, layer-based slices, and auto-slices look different--user-slices and layer-based slices are defined by a solid line, while auto-slices are defined by a dotted line.

A sub-slice is a type of auto-slice that is generated when you create overlapping slices. Sub-slices indicate how the image will be divided when you save the optimized file. Although sub-slices are numbered and display a slice symbol, you cannot select or edit them separately from the underlying slice. Sub-slices are regenerated every time you arrange the stacking order of slices.

To Slice An Image Into Equal Parts Using A Command: Creates a Grid.

1. Slices > Promote to User-slice.
2. Slices > Divide Slice.
3. Check Divide Horizontally Into AND/OR Divide Vertically Into; enter desired # of slices or # of pixels/slice for height / width of each H/V slice.
4. OK; label appears in upper left corner of each slice to identify as it's slice number (01, 02, etc.) left > right, top > bottom.

• Use Slice Select Tool and click on slice to select. In the web content menu, choose slices to name the individual slices.

To Slice An Image Manually:

1. Choose Slice Tool.
2. Drag diagonally across the image to select first slice area; a label and frame appear; IR will divide the rest of the image into auto-slices.
3. OPTIONAL: draw more slices; auto label; IR will re-divide.
4. OPTIONAL: to divide into smaller slices: (grid):

With Slice Select tool:
• Click on a slice to select.
• Slices > Divide Slice and click OK.

Selected slice looks normal, non-selected is dimmed.

Plotting Slices Using Guides:

1. Display Rulers, drag guides where you want them.
2. Slices > Create Slices from Guides.

This deletes all previous slices; creates checkerboard, not irregular.

Deleting Slices:

1. Slice Select Tool (K)
2. Shift select; Slices > Delete Slice OR hit Backspace/Delete

Resizing Slices: drag slice border handles when slice is selected.

Combining Slices:

1. shift select more than one;
2. Slices > Combine Slices

Attaching a URL / Multiple Links:

Once slices are created:
4. Choose Slice Select Tool.
5. Click on a slice (will be highlighted in the web content palette).
6. Open SLICE menu and enter URL in URL field (* remember relative or absolute!)
7. OPTIONAL: Enter target =_blank for new window, or a frame target.

 

Linking Slices
Lets you share optimization settings between slices. When you apply optimization settings to a linked slice, all slices in that linked set are updated.

Linked slices in GIF format share a color palette and dither pattern. The dither pattern is applied across adjacent slice boundaries to prevent the appearance of seams between the slices.

To Link Slices:

Using Slice Select Tool
1. Shift select multiple slices.
2. Slices > Link Slices.

Each linked set of user-slices is assigned a different color for the slice display graphics in the upper left corner of the slice. This helps to identify all the slices in one set.

Unlinking Slices:

• To unlink a user-slice, select the slice, and then choose Slices > Unlink Slices.
• To unlink all user-slices in a set, select a slice in the set, and choose Slices > Unlink Set.
• To unlink all user-slices in an image, choose Slices > Unlink All.

 

Creating layer-based slices
When you create a slice from a layer, the slice area encompasses all the pixel data in the layer. If you move the layer or edit the layer's content, the slice area automatically adjusts to encompass the new pixels.

Layer-based slices are especially useful when working with rollovers. Start by placing the rollover element on a separate layer, and then create a slice from that layer. If you apply an effect to the layer--such as a drop shadow or glow--to create a rollover state, the slice automatically adjusts to encompass the new pixels. However, do not use a layer-based slice when you plan to move the layer over a large area of the image during an animation, because the slice dimension may exceed a useful size.

To create a slice from a layer:

1. Select a layer in the Layers palette
2. Choose Layer > New Layer Based Slice.

 

Converting layer-based slices to user-slices
Because a layer-based slice is tied to the pixel content of a layer, the only way to move, combine, divide, resize, and align it is to edit the layer. You can convert a layer-based slice to a user-slice to unlink it from the layer.

To convert a layer-based slice to a user-slice:

1. Select a layer-based slice. In ImageReady, you can select multiple slices.
2. Choose Slices > Promote to User-slice(s).