10　切片和切片选择工具

工具箱　快捷键：C

切片工具可以用于将图像切分成多个区域。将制作好切片的图像存为Web页时，每个切片作为一个独立的文件存储，文件中包含切片的设置、颜色调板、链接、翻转效果及动画效果。使用切片可以加快浏览网页时图片的下载速度。通过切片选择工具还可以移动、组合多个切片，并复制或删除切片，以及设置切片链接信息等。

1　切片工具选项栏

1　正常：可通过拖动鼠标自由定义切片的大小。

2　固定长宽比：输入切片的高宽比并按Enter键，可以创建固定长宽比的切片。

3　固定大小：输入切片的高度和宽度值，然后在画面中单击，可以创建指定大小的切片。

2　切片的类型

在Photoshop中，使用切片工具创建的切片称作【用户切片】（切线为实线）；通过图层创建的切片称作【基于图层的切片】（切线为实线）；在创建的用户切片和基于图层的切片周围都会自动生成切片并占据图像其余区域，这种切片称作【自动切片】（切线为虚线）；通过参考线创建的切片称作【基于参考线的切片】。

1　用户切片和自动切片

在Photoshop中打开“实例1测试原图.jpg”文件，选择切片工具，在工具选项栏的【样式】框中下拉选择【正常】命令，然后在要创建切片的区域上单击并拖出一个矩形框，松开鼠标按键即可创建一个用户切片，其余区域会自动生成自动切片。

如果按住Shift键拖动，则可以创建正方形切片；按住Alt键可以从中心向外创建切片。

2　基于图层创建切片

01　打开“基于图层创建切片原图.psd”文件，并选择图层1。

02　选择【图层】-【新建基于图层切片】，可基于图层创建切片，切片会包含该图层除透明区域外的区域（见上方的大图）；移动图层时，切片区域会随之自动调整（见上方的“移动”图）；按Ctrl+T组合键进行自由变换时，切片区域也会随之自动调整（见上方的“缩放”图）。

3　基于参考线创建切片

01　在Photoshop中打开“实例3原图.jpg”文件。

02　按Ctrl+R组合键显示标尺。

03　分别从水平标尺和垂直标尺上拖出参考线，定义切片范围。

04　选择切片工具，单击工具选项栏中的【基于参考线的切片】按钮。

3　切片选择工具选项栏

1　调整切片堆叠顺序：创建切片时，最后创建的切片是堆叠顺序中的顶层切片。当切片重叠时，单击该选项中的按钮，可以改变切片的堆叠顺序。

置于顶层：将所选切片调整到所有切片之上。

前移一层：将所选切片向上移动一层。

后移一层：将所选切片向下移动一层。

置于底层：将所选切片调整到所有切片之下。

2　提升：单击该按钮，可将所选自动切片或图层切片转换为用户切片。

3　划分：单击该按钮，可以打开【划分切片】对话框对所选切片进行划分。

4　对齐与分布切片：按Shift键的同时选中两个或多个切片后，单击相应的按钮可以让所选切片对齐或均匀分布，这些按钮包括顶对齐、垂直居中对齐、底对齐、左对齐、水平居中对齐、右对齐。如果选择了3个或3个以上切片，可单击相应的按钮使所选切片按照一定的规则均匀分布，这些按钮包括顶分布、垂直居中分布、按底分布、按左分布、水平居中分布、按右分布。

5　隐藏自动切片：单击该按钮，可以隐藏自动切片。

6　设置切片选项：单击该按钮，可在打开的【切片选项】对话框中设置切片名称、类型并指定URL地址等。

4　划分切片

使用切片选择工具选择准备划分的切片，右键单击选择【划分切片】，弹出划分切片对话框。

【水平划分为】选项：勾选该项后，可纵向划分切片。它包含两种划分方式：选择【个纵向切片，均匀分隔】，可输入一个数值，选中的切片将按照所输入的数值进行纵向等分，如下左图所示（设置【个纵向切片，均匀分隔】为3）；选择【像素/切片】，可输入一个像素值，此时将根据输入像素值划分切片，如果不能进行平均划分，则会将剩余部分自动划分为另一个切片，如下右图所示（设置【像素/切片】为210）。

【垂直划分为】选项：勾选该项后，可横向划分切片。它包含两种划分方式：选择【个横向切片，均匀分隔】，可输入一个数值，选中的切片将按照输入数值进行横向等分。

如下左图所示（设置【个横向切片，均匀分隔】为3）；选择【像素/切片】，可输入一个像素值，此时将根据该像素值划分切片，如果不能进行平均划分，则会将剩余部分自动划分为另一个切片，如下右图所示（设置【像素/切片】为210）。

5　转换为用户切片

因为基于图层的切片与图层的像素内容相关联，所以在对切片进行移动、组合、划分、调整大小和对齐等操作时，唯一的方法是编辑相应图层。如果想使用切片工具完成以上操作，则需要先将这样的切片转换为用户切片。此外，在图像中，所有自动切片都链接在一起并共享相同的优化设置，如果要为自动切片设置不同的优化设置，也必须将其提升为用户切片。

使用切片选择工具选择要转换的切片，单击工具选项栏中的【提升】按钮，即可将其转换为用户切片。

提示：切片移动操作技巧

创建切片后，为防止切片被意外修改，选择【视图】-【锁定切片】，锁定所有切片，再次执行该命令可取消切片锁定。在使用切片移动工具调整切片时，可按Ctrl+R组合键显示标尺，拖出参考线以辅助定位，然后调整切片位置。在分割网页图片时，如果存在相互包围的情况或者堆叠的情况，那么在进行网页布局时就可能会出现图片无法对齐的现象，因而建议采用相互独立的切割方法，或者使用切片移动工具进行细微调整。

6　组合切片和删除切片

组合切片：使用切片选择工具选择两个或更多的切片，如左图，右键单击打开下拉菜单，选择【组合切片】，将所选的切片组合为一个切片。

删除切片：选择一个或多个切片，按Delete键可将其删除；选择【视图】-【清除切片】可删除所有用户切片和基于图层的切片。

7　设置切片选项

使用切片选择工具双击切片，打开【切片选项】对话框。

切片类型：可以选择要输出的切片内容类型，即在与HTML文件一起导出时，切片数据在Web浏览器中的显示方式。其中，【图像】为默认类型，所输出的切片将包含相关数据；选择【无图像】，可以在切片中输入HTML文本，但不能将其导出为图像，并且无法在Web浏览器中预览；选择【表】，切片导出时将作为嵌套表写入HTML文本文件。

名称：用来输入切片名称。

URL：输入切片链接的Web地址，在浏览器中单击切片图像时，即可链接到此选项设置的网址和目标框架。该选项只能用于“图像”切片。

目标：输入目标框架名称。

信息文本：指定哪些信息出现在浏览器中。这些只能用于图像切片，并且只会在导出的HTML文件中出现。

Alt标记：指定选定切片的Alt标记。Alt文本在图像下载过程中取代图像，并在一些浏览器中作为提示工具出现。

尺寸：X和Y选项用于设置切片的位置，W和H选项用于设置切片的大小。

切片背景类型：可以选择一种背景色来填充透明区域。

实例：运用切片和切片选择工具制作网页切片

01　在Photoshop中打开“寿司网页原图.jpg”文件，按Ctrl+R组合键显示标尺，辅助定位。

02　分割时，应该按照从上至下、从左到右的原则进行分割。从标尺中拖出3条参考线，对网页进行分割，如左图所示；单击切片工具选项栏中的【基于参考线的切片】创建切片。

03　对于包含有按钮的图片，在利用切片进行分割时应将按钮作为独立部分进行分割。

04　为了提升加载速度，可将大图分割成多个切片。右键单击切片选择【划分切片】，在弹出的对话框中输入数值进行划分。

05　使用切片选择工具，对已划分区域进行微调，微调完成后选择【文件】-【存储为web所用格式】。

06　在【存储为web所用格式】对话框中选择存储，在【将优化结果存储为】对话框中选择【HTML和图像】。

07　单击【确定】按钮导出的两个文件：“images”文件（里面包含分割好的切片）；HTML格式网页文件（在Web浏览器中打开能看到分割好的网页）。

提示：网页切片分隔要点

通常利用Photoshop来设计页面的整体外观，然后利用Photoshop切片工具将图片进行分割。利用切片工具对网页版面进行分割时，应该按照从上至下、从左到右的原则进行分割。为了方便后期利用第三方软件（如Dreamweaver）进行处理，对于包含有按钮的图片，在利用切片进行分割时应将按钮作为独立部分进行分割。经过这样处理后，在网页进一步实现过程中，按钮就可以作为单独的部分来处理和替换。对于较大的网页头图，不提倡作为一个整体进行切割，而是建议将头图切成几个部分，这样在网络带宽有限的情况下，能够分步下载各个小图片，从而有利于加速大图的下载和显示速度。