创建切片

上次更新時間 2026年10月29日

了解如何在桌面版 Adobe Photoshop 中使用切片工具、指南或图层,将图像分开为可导出的区域,以便进行 web 优化。

切片工具可将图像分开为更小的部分,您可以在导出到 web 之前分别增强各部分,或为其指定不同的 URL 关联。

使用切片工具创建切片

创建用户切片时,Photoshop 会自动用自动切片填充未覆盖的区域。用户切片使用实线边框,而自动切片使用虚线边框。

若要使切片工具与参考线或其他切片工具对齐,请在绘制前选择 视图 > 对齐到。

选择 切片工具 工具。

在选项栏中,从下拉菜单中选择一种样式:

  • 普通: 绘制自由形式的切片。
  • 固定纵横比: 限制比例。
  • 固定大小: 指定精确的像素尺寸。

在图像中您要创建切片工具的区域拖动。

注释

您可以按住 Shift 并拖动,将切片限制为正方形;也可以按住 Alt 并拖动 (Windows) 或按住 Option 并拖动 (macOS),从中心开始绘制。

重复操作以创建更多切片。

基于参考线创建切片

根据参考线创建切片工具会删除文档中现有的所有切片工具。如果您需要保留当前的切片配置,请保存文件副本。

选择 视图 > 参考线 > 新建参考线,然后选择定义所需切片工具边界的 垂直 或 水平 参考线,并选择 确定。

选择切片工具。

在选项栏中选择 基于参考线的切片工具。

从图层创建切片

从图层创建的切片会在您移动或编辑图层时自动调整其边界,因此非常适合动态设计。它们会显示为实线边框并带有图层图标标记,除非您将其转化为用户切片,否则无法调整其大小。

请避免对您计划在大范围区域中制作动画的图层使用基于图层的切片工具,因为切片工具尺寸可能会变得大到不切实际。

在 图层 面板中,选择包含要切片内容的图层。

选择 图层 > 新建基于图层的切片。

创建切片后,您可以使用 切片选择工具移动、调整大小或修改其属性。用户切片具有出色的灵活性。要显示切片边界,请选择 视图 > 显示 > 切片。

选择 文件 > 导出 > 存储为 Web 所用格式,为每个切片设置导出选项,然后保存文件。Photoshop 会将每个切片导出为单独的图像文件,并生成在网页上显示切片所需的 HTML 或 CSS。