切片概述

为 web 设计图形时，图像的不同部分通常需要独立运行。某个区域可能需要关联到某个 URL，另一个区域可能需要加载得更快，还有一个区域可能需要不同的增强设置。切片工具会将单个图像拆分成由较小部分组成的网格，这些部分可以共同构成一个网页，同时让您能够分别控制每个部分。

Photoshop 使用 HTML 表格或 CSS 图层在网页上重新组合切片图像。使用 文件 > 导出 > 存储为 Web 所用格式 命令导出切片图像时，Photoshop 会将每个切片存储为单独的文件。它还会生成在浏览器中以单个合成形式显示图像所需的 HTML 或 CSS。

切片的工作原理

切片沿不可见的网格线分割图像，从而创建可用作独立文件的矩形部分。每个切片在整体布局中保持其位置，同时作为具有自身属性、增强设置和行为的独立元素运行。

这种方法具有以下几个实际优势：

• 分配不同的 URL 链接，以创建可点击的导航元素
• 应用不同的压缩设置，以在各区域间平衡质量和文件大小
• 更新个体部分，无需重新导出整个合成内容

按创建方式划分的切片类型

Photoshop 会根据切片的创建方式对其进行分类，在您编辑图像时，每种类型的行为都有所不同。

• 用户切片工具：使用 切片工具 工具手动定义的部分。您可以完全控制其大小、位置和属性，在您移动或修改之前，它们会保持原位。
• 基于图层的切片：切片包含图层中的所有像素。当您移动或编辑图层时，其边界会自动更新。对于经常更改的内容，它们效果很好，但与用户切片工具相比，对精确定位的控制力较弱。
• 自动切片工具：填充图像中未被用户切片工具或基于图层的切片工具覆盖的剩余空间的切片工具。Photoshop 会自动生成这些切片，并在您添加、移除或修改其他切片时重新生成它们。图像中的所有自动切片共用相同的增强设置。
• 子切片：当切片重叠时显示的一种特殊类型的自动切片。子切片显示了当您保存增强文件时，Photoshop 将如何划分重叠区域。您无法独立于其底层切片选择或编辑子切片。

按内容分类的切片类型

切片还会根据其所包含的内容类型进行分类。

• 图像切片：可视内容的默认切片类型，包含来自 Photoshop 文档的图像数据。
• 无图像切片：用于 HTML 文本或纯色的空表格单元格。Photoshop 不会将这些内容导出为图像文件，因此它们适用于实时可选文本。
• 表格切片：用于定义 Photoshop 如何构建 HTML 表格的切片，该表格用于在浏览器中重新组合切片后的图像。

切片视觉提示

Photoshop 使用视觉提示，帮助您在工作时区分切片类型。

• 切片线：实线标记用户切片或基于图层的切片，虚线标记自动切片。
• 切片颜色：蓝色符号表示用户切片和基于图层的切片，灰色符号表示自动切片。
• 切片编号：每个切片左上角的编号从左到右、从上到下排列，并会在您重新排列或修改切片时自动更新。
• 切片徽章：小图标用于标识切片的内容和类型。例如，图像图标表示包含图像内容的用户切片，带删除线的图像图标表示不包含图像内容的用户切片，图层图标表示基于图层的切片。

识别这些视觉差异有助于您快速识别切片类型，并在您对网页进行切片时更高效地处理复杂的切片布局。