Creating and Optimizing Slices

Dividing an image into slices has many advantages when displaying visual information in a web page. Each slice can have different compression settings, so better overall optimization can be achieved (quality level versus file size). Slices can host rollovers and advanced animation effects. Furthermore, transmitting multiple smaller images rather than one large image is more efficient. Let's start by editing a sample file in ImageReady.

1. Open the sample file Slices.psd in Photoshop from the companion CD (see Figure 9.18). The file shows imagery from many of the chapters in this book.

2. Click the Edit In ImageReady button at the bottom of the Photoshop toolbox or press


Wait a few moments for ImageReady to launch. Four tabs are at the top of the document window: Original, Optimized, 2-Up, and 4-Up. These are the same tabs seen in the Photoshop Save For Web dialog box. (See the section "E-Mailing Images" earlier in this chapter.)

3. Click the Optimized tab. Select the Optimize palette and choose JPEG Medium from the Preset drop-down list box. The entire image in the document window is displayed with the chosen compression setting.

fdtjtijl: (JiuWy

Qtiilitvi Ho dun:

fmftntl [3(1 TliTTI

Hkrl pi 3

There are several kinds of slices in ImageReady: layer-based, user, auto, table, and subslices. We will create layer-based slices and later use the Slice tool to make user slices. Auto slices fill the spaces in between the other types and are created automatically. If there is overlap between slices, those areas are considered subslices.

NOTE Table slices are an advanced web design topic that you can read more about in the ImageReady Help.

Layer-based slices divide image areas using the outer borders of layers. You will create several layer-based slices now.

4. Right-click the Site Plan layer, and choose New Layer Based Slice from the context menu. Repeat this process and create new layer-based slices on the Illustration, Compositing, and Glass layers.

Notice how the slices are identified in the document window. Layer-based slices have a solid edge, and auto slices fill the in-between spaces with dotted edges. Each slice is numbered and labeled.

5. Click the Slice tool in the toolbox, or press K. Drag rectangular windows around the kitchen plan, elevation, and two text layers to create corresponding user slices (see Figure 9.19).

Auto slices are identified by grayed-out labels that show the link symbol; auto slices are linked to layer-based and/or user slices and fill the in-between spaces (with white pixels in this example).

Figure 9.19

Layer-based, user, and auto slices

Figure 9.19

Layer-based, user, and auto slices

Now that you've sliced the image, apply different optimization settings to selected slices to reduce the overall file size (and loading time) of the web page. JPEG compression is preferable for continuous tone images, and GIF is better for text (see the "Choosing a Compression Format" sidebar earlier in this chapter).

6. Choose the Slice Select tool in the ImageReady toolbox, or press O. Click slice 20 (text layer) and select the Optimize palette. Choose GIF 32 No Dither from the Preset drop-down list box. The text slice is reduced to displaying 32 shades of gray in indexed color mode for greater compression.


i OpJ iniii*

Preset! iSSECQEHEE -]

Formal; JgIF

■V Color Table

Redudbni JSeleetive » |


CdorSi 132 J Q

[> Dither

\> Option;

7. Click slice 21, and then choose GIF 32 No Dither from the Preset drop-down list box. Text renders more clearly with a lossless compression format.

8. Optionally, click any layer-based or user slice and change its compression settings using the Optimize palette. This is like having Photoshop's Save For Web command available for each slice.

Photoshop CS Mastery

Photoshop CS Mastery

Artists, photographers, graphic artists and designers. In fact anyone needing a top-notch solution for picture management and editing. Set Your Photographic Creativity Free. Master Adobe Photoshop Once and For All - Create Flawless, Dramatic Images Using The Tools The Professionals Choose. Get My Video Tutorials and Retain More Information About Adobe Photoshop.

Get My Free Videos

Post a comment