在制作网页时，可以用切片工具对页面进行分割 | 创建与修剪切片

时间：2023-09-26 16:06:02 | 来源：网站运营

时间：2023-09-26 16:06:02 来源：网站运营

在制作网页时，可以用切片工具对页面进行分割 | 创建与修剪切片：文 | 曹阳

在制作网页时，通常要对页面进行分割，即制作切片。

通过优化切片可以对分割的图像进行不同程度的压缩，以便减少图像的下载时间，还可以为切片制作动画，链接到URL地址，或者使用它们制作反转按钮。

| 1

了解切片的类型

在Photoshop中，使用切片工具创建的切片称作用户切片，通过图层创建的切片称作基于图层的切片。

创建新的用户切片或基于图层的切片时，会生成附加的自动切片来占据图像的其余区域，自动切片可填充图像中用户切片或基于图层的切片未定义的空间。

每次添加或编辑用户切片或基于图层的切片时，都会重新生成自动切片。

用户切片和基于图层的切片由实线定义，而自动切片则由虚线定义，如图1和图2所示。




| 2

实例：使用切片工具创建切片

① 打开电脑中的素材。

选择“切片工具”，在工具选项栏的“样式”下拉列表中选择“正常”选项。

如图1所示。

② 在要创建切片的区域上单击并拖出一个矩形（可同时按住空格键移动定界框），如图2所示。

放开鼠标即可创建一个用户切片，它以外的部分会生成自动切片，如图3所示。

如果按住Shift键拖动，则可以创建正方形切片；

按住Alt键拖动，可以从中心向外创建切片。

切片工具选项栏：

图4所示为切片工具的选项栏。

在“样式”下拉列表中可以选择切片的创建方法，包括“正常”、“固定长度”和“固定大小”。

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

固定长宽比：输入切片的高宽比并按下回车键，可以创建具有固定长宽比的切片。例如，要创建一个宽度是高度两倍的切片，可以输入宽度2和高度1。

如图5所示。

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

如图6所示。

| 3

实例：基于参考线创建切片

① 打开电脑中的素材，如图7所示。

按下Ctrl+R快捷键显示标尺，如图8所示。

②分别从水平标尺和垂直标尺上拖出参考线，定义切片的范围，如图9所示。

③选择切片工具，单击工具选项栏中的“基于参考线的切片”按钮，即可基于参考线的划分方式创建切片，如图10所示。

| 4

实例：基于图层创建切片

① 按下Ctrl+O快捷键，打开电脑中的素材，如图11、图12所示。

② 选择“图层1”，如图13所示，

执行“图层-新建基于图层的切片”命令，基于图层创建切片，切片会包含该图层中的所有像素，如图14所示。

③ 移动图层时，切片区域会随之自动调整，如图15所示。

此外，编辑图层内容，例如进行缩放时也是如此，如图16所示。

| 5

实例：选择、移动与调整切片

创建切片以后，可以移动切片或组合多个切片，也可以复制切片或者删除切片，或者为切片设置输出选项，指定输出内容，为图像指定URL链接信息等。

① 打开电脑中的素材。

使用切片选择工具单击一个切片，将它选择，如图17所示；

按住Shft键单击其他切片，可以选择多个切片，如图18所示。

② 选择切片后，拖动切片定界框上的控制点可以调整切片大小，如图19所示。

③ 拖拽切片则可以移动切片，如图20所示；

按住Shift键可将移动限制在垂直、水平或45°对角线的方向上；按住Alt键拖拽鼠标，可以复制切片。

Tips：

创建切片后，为防止切片被意外修改，可以执行“视角-锁定切片”命令，锁定所有切片。再次执行该命令可取消锁定。

如图21所示。

小提示：在“首选项”对话框中可以修改切片的颜色和编号，点击“编辑-首选项”或者Ctrl+K打开，然后点击“参考线、网络和切片”进行设置，如图22所示。

切片选择工具选项栏：

切片选择工具的选项栏中提供了可调整切片的堆叠顺序、对切片进行对齐与分布的选项，如图23所示。

调整切片堆叠顺序：在创建切片时，最后创建的切片是堆叠顺序中的顶层切片。

当切片重叠时，可单击该选项中的按钮，改变切片的堆叠顺序，以便能够选择到底层的切片。

单击置为顶层按钮

可将所选切片调整到所有切片之上，；

单击前移一层按钮

可将所选切片向上层移动一个顺序；

单击后移一层按钮

可将所选切片向下层移动一个顺序；

单击置为底层按钮

可将所选切片移动到所有切片之下。

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

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

对齐与分布切片：选择了2个或多个切片后，单击相应的按钮可以让所选切片对齐或均匀分布，它们是顶对齐、垂直居中对齐、底对齐、左对齐、水平居中对齐和右对齐；

如果选择了3个或3个以上切片，可单击相应的按钮使所选切片按照一定的规则均匀分布，这些按钮包括按顶分布、垂直居中分布、按底分布、按左分布、水平居中分布和按右分布。

| 6

划分切片

使用切片选择工具选择切片，如图24所示。

单击工具选项栏中的“划分”按钮，可在打开的对话框中设置切片划分方式，如图25所示。

水平划分为：勾选该项后，可在长度方向上划分切片。

它包含两种划分方式，选择“个纵向切片，均匀分隔”，可输入切片的划分数目；

选择“像素/切片”，可输入一个数值，基于指定数目的像素创建切片，如果按该像素数目无法平均地划分切片，则会将剩余部分划分为另一个切片，

例如，如果将100像素宽的切片划分为3个30像素宽的新切片，则剩余的10像素宽的区域将变成一个新的切片。

图26所示为选择“个纵向切片，均匀分隔”后，设置数值为3的划分结果；

图27所示为选择“像素/切片”后，输入数值为200像素的划分结果、

垂直划分为：勾选该选项后，可以在宽度方向上划分切片。

它也包含两种划分方法。

图28所示为选择“个横向切片，均匀分布”选项后，设置数值为3的划分结果；

图29所示为选择“像素/切片”选项后，设置数值为200像素的划分结果。

大家发现没，选择“像素/切片”选项后，设置数值为200，则剩余的73像素区域变成一个新的切片。

预览：在画面中预览切片划分结果。

| 7

组合切片与删除切片

组合切片：

使用切片选择工具选择两个或更多的切片，如图30所示。

单击鼠标右键打开下拉菜单，选择“组合切片”命令，可以将所选切片组合为一个切片，如图31所示。

删除切片：

选择一个或多个切片，按下Delete键可将其删除。

如果要删除所有用户切片和基于图层的切片，可以执行“视图-清除切片”命令。

| 8

转换为用户切片

基于图层的切片与图层的像素内容相关联，因此，在对切片进行移动、组合、划分、调整大小和对齐等操作时，唯一方法是编辑相应的图层。

如果想使用切片工具完成以上操作，则需要先将这样切片转换为用户切片。

此外，在图像中，所有自动切片都链接在一起并共享相同的优化设置，如果要为自动切片设置不同的优化设置，也必须将其提升为用户切片。

使用切片选择工具选择要转换的切片，如图32所示，

单击工具选项栏中的“提升”按钮，即可将其转换为用户切片，如图33所示。

| 9

设置切片选项

使用切片选择工具双击切片，或者选择切片然后单击工具选项栏中的

按钮，可以打开“切片选项”对话框，如图34所示。

切片类型：可以选择要输出的切片的内容类型，即在与HTML文件一起导出时，切片数据在Web浏览器中的显示方式。

“图像”为默认的类型，切片包含图像数值；

选择“无图像”，可以在切片中输出HTML文本，但不能导出为图像，并且无法在浏览器中预览；

选择“表”，切片导出时将作为嵌套表写入到HTML文本文件中。

名称：可以输入切片的名称。

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

该选项只能用于“图像”切片。

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

信息文本：指定哪些信息出现在浏览器中。

这些选项只能用于图像切片，并且只会在导出的HTML文件中出现。

Alt标记：指定选定切片的Alt标记。

Alt文本在图像下载过程中取代图像，并在一些浏览器中作为工具提示出现。

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

切片背景类型：可以选择一种背景色来填充透明区域（适用于“图像”切片）或整个区域（适用于“无图像”切片）。

——END——

本文由不吃羊的草原创，每天更新，带你一起学习平面设计知识！感谢大家的阅读和评论。

如果您想提高自己平面设计能力，欢迎关注我。