网页界面根据功能的需要建立了很多的切片，在不同的切片下可以设置不同的网页链接或网页特殊效果。建立切片后整幅网页界面也被分成了若干个小的图片。这些切片图片有些画面内容丰富，需要拥有较多的颜色信息，而有些则内容简单，这时我们就可以对内容简单的切片进行优化，使其在最大幅度上降低颜色信息，同时也降低整个网页的体积。

在对切片进行优化之前，首先让我们来了解一下切片，切片是图像的一块矩形区域，可用于在Web页中创建链接、翻转和动画效果。通过将图像划分成切片，可以更好地对图像进行控制，也便于网络下载。将图片存储为网页格式时，整幅网页界面图像将根据切片的划分方法，切割为一幅幅的小的图片。如图17-34所示为具有切片的图像效果。

图17-34  具有切片的图像效果

在Photoshop中包含两种切片即用户切片、自动切片。

使用Photoshop的“切片”工具可以直接创建的为用户切片，根据网页需要用户切片可以被移动、复制、组合、排列、对齐和分布，还可以对其单独应用优化设置。而自动切片都链接在一起并共享相同的优化设置。

创建用户切片时，自动切片将填充图像中用户切片未定义的空间。根据用户切片的形状和位置，自动切片会分成很多的块面，但是在对自动切片进行优化设置时，系统将所有的自动切片视为一张图片进行优化。

如图17-35所示，用每种类型的切片都显示不同的图标，用户切片显示为蓝色图标，而自切片显示为灰色图标。

图17-35  用户切片和自动切片的外观区别

下面通过一组操作来掌握怎样分别对图像中的单个切片进行优化。

（1）启动Photoshop，执行“文件”→“打开”命令，打开本书附带光盘\Chapter-17\“切片图像.jpg”文件，如图17-36所示。

图17-36  打开光盘文件

（2）执行“文件”→“存储为Web所用格式”命令，打开“存储为Web所用格式”对话框，如图17-37所示。

图17-37  打开“存储为Web所用格式”对话框

图17-38  选择切片

（4）接着在图像的画质调整选项区，参照图17-39所示的参数，进行设置，将图像优化到最佳。

提示：由于该切片图像位于整个画面的*位置，也是整个画面的中心区域，所以在优化设置过程中应尽量避免画面发生失真。

图17-39  对图像进行优化设置

（5）然后使用“切片选择”工具，在优化预览框中的图像上部选择一个颜色为纯色的切片图像。选择该切片后，其“颜色表”选项卡将显示为图17-40所示的状态。

图17-40  选择切片后“颜色表”选项卡的显示状态

（6）单击“吸管”工具，在选择的切片上单击，其工具箱中的“吸管颜色”选区框中的颜色将改变为和切片图像颜色一致，如图17-41所示。

图17-41  使用“吸管”工具吸取切片图像颜色

（7）在“颜色表”选项卡中选择全部的颜色。首先可选择颜色表中的第一个色块，然后按下键盘上<Shift>键的同时单击颜色表中最后一个色块，可选择全部的色块。选择完毕后单击“颜色表”选项卡底部的“删除选中的颜色”按钮，颜色表中的颜色将被删除，只留下黑色和白色色块。如图17-42所示。

图17-42  删除“颜色表”选项卡中的色块

（8）单击“颜色表”选项卡底部的“在调板中添加吸管颜色”按钮，在颜色表中将添加吸管颜色，这时可发现颜色表中将多出一个

图17-43  在颜色表中添加吸管颜色

（9）下面我们可以将优化之前的图像和优化后的图像进行一个比较，优化之前的切片图像大小为946字节，拥有颜色数量为47种，优化后的切片图像大小为225字节，颜色数量为3种，如图17-44所示。

图17-44  优化之前的图像和优化后的图像进行比较

（10）接下来读者可参照前面介绍的两种优化方法，对图像中其他的切片进行局部的优化，完毕后，在“存储为Web所用格式”对话框中单击“存储”按钮，将文档存储为html格式，图像优化后的效果如图17-45所示。读者也可打开本书附带光盘\Chapter-17\“切片图像.html”文件进行查看。

图17-45  图像优化后的效果