Graphics Programs Reference
In-Depth Information
9 Repeat this process for the Store slice, typing store in the Name text field, store.html in the URL text
field, and Store in the Alt Tag text field. Then click OK.
10 Choose File > Save to save this file. 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 file that con-
tains the code needed to create the final navigation bar on a web page.
1 With the advps1007_work.psd file still open, choose File > Save for Web.
2 In the Save for Web window, choose the Slice Select tool from the toolbar in the upper-left corner, and
click each slice once. Note that you can choose a different 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 sol-
id colors.
5 Choose Perceptual for the Color reduction algorithm, which creates a custom color table by giving pri-
ority 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 dif-
ferent colored pixels throughout an image to make it appear as though there are more colors than are
actually present. 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.
8 Select the Transparency check box.
A portion of the Save for Web dialog box.
9 Click Save. In the Save Optimized As dialog box, navigate to the advps10lessons folder and double-
click to select the site folder located inside.
10 In the File Name text field, type index . This page will be the initial start page for the test website.
11 In the Format drop-down menu, choose HTML and Images
12 Choose Other for Settings; the Output Settings dialog box appears. In this dialog box you can set
your preferences for how you want Photoshop to create your code. Click the Next button on the right
to move to the Slices settings.
Search WWH ::




Custom Search