Web Design with HTML and CSS

110

Slicing an image

Web Design with HTML and CSS Digital Classroom

7 Type recipes into the Name text box, recipes.html into the URL text box, and

Recipes into the Alt Tag text box. Click OK.

8 Continue this process by double-clicking the third slice, Books. (Double-clicking a slice

is another way to open the Slice Options dialog box.) In the Slice Options dialog box,

type books in the name text box, books.html in the URL text box, and Books in the

Alt Tag text box; then click OK.

9 Repeat this process for the Store slice, typing store in the Name text box, store.html in

the URL text box, and Store in the Alt Tag text box; then click OK.

10 Choose File > Save to save this fi le. Keep it open for the next part of this lesson.

You are now ready to optimize these images and create your HTML page.

Saving slices out of Photoshop

In this section, you will learn to optimize your sliced images and save them to an HTML fi le

that contains the code needed to create the fi nal navigation bar on a web page.

1 With the web0507_work.psd fi le still open, choose File > Save for Web & Devices.

2 In the Save for Web & Devices window, choose the Slice Select tool from the toolbar in

the upper-right corner, and click each slice once. Note that you can choose a diff erent

optimization setting for each slice. This is useful for images that have a lot of gradients in

one section and solid colors in another.

3 Click the About slice, and then Shift + click the Recipes, Books, and Store slices. All the

slices are now selected.

4 Choose PNG-8 from the Optimized File Format drop-down menu, since this image

only has a few solid colors.

5 Choose Perceptual for the Color reduction algorithm, which creates a custom color table

by giving priority to colors for which the human eye has greater sensitivity.

6 Choose No Dither from the Specify the Dithering Algorithm drop-down menu.

Dithering scatters diff erent colored pixels throughout an image to make it appear as

though there are more colors than there are, this can result in a grainy appearance in

your solid spans of color.

7 Choose 16 from the Colors drop-down menu. The image used for this exercise appears

to have two colors, blue and white, but it has more. Transparency is a color, and the

transition between the white text and the blue background contains many shades of

color. If you reduce the colors too much, you will have a pixelated result.