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

Shift+Ctrl+M.

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.

il

i OpJ iniii*

Preset! iSSECQEHEE -]

Formal; JgIF

■V Color Table

Redudbni JSeleetive » |

Ql

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 Secrets

Photoshop Secrets

Are You Frustrated Because Your Graphics Are Not Looking Professional? Have You Been Slaving Over Your Projects, But Find Yourself Not Getting What You Want From Your Generic Graphic Software? Well, youre about to learn some of the secrets and tips to enhance your images, photos and other projects that you are trying to create and make look professional.

Get My Free Ebook


Post a comment