分类：
Export & Automation
摘要：
使用Photoshop切片工具，全面讲解网页切图与轮播图制作的核心流程；涵盖基础切片操作、导出参数配置及针对轮播图的精确分割技巧，帮助设计师快速完成从设计到开发的切图工作。

功能简介： 切片工具（Slice Tool）能将一张图片分割成多个独立区块，每个区块可作为单独文件导出，或重新组合成网页布局。它位于工具栏的裁剪工具（Crop Tool）下方。选择该工具后，拖拽矩形即可创建用户切片，然后通过 文件 > 导出 > 存储为 Web 所用格式（旧版）(File > Export > Save for Web (Legacy)) 导出。本篇指南涵盖完整流程——从工具箱定位到 Instagram 轮播图制作及常见问题排查。

用切片工具制作 Instagram 轮播图

切片工具在现代的一个常见用途是将宽幅画布等分成若干面板，用于社交媒体轮播图。Adobe 社区论坛上有真实案例：一个 4320×1350 px 的画布被切成 4 块用于 Instagram。

  1. 设置画布。 新建文档，尺寸设为 4320×1350 px（4 张幻灯片，每张宽 1080 px，高 1350 px）。在每 1080 px 处放置垂直参考线：视图 > 新建参考线 > 垂直 > 1080 px，然后重复操作，在 2160 px 和 3240 px 处也放置参考线。
  2. 配置切片工具。 选择切片工具（嵌套在裁剪工具下）。在选项栏中将样式设为 固定大小（Fixed Size），输入宽度 1080 px，高度 1350 px。
  3. 绘制第一个切片。 点击画布左上角附近。Photoshop 会将固定尺寸的矩形吸附到参考线上。出现用户切片（实蓝线），其余区域自动生成自动切片（灰色虚线）。
  4. 创建剩余切片。 切换到 切片选择工具（Slice Select Tool）（嵌套在切片工具下）。按住 Alt（Windows）/ Option（Mac）并将第一个切片向右拖拽，对齐下一条参考线。对第 3、4 张幻灯片重复操作。
  5. 命名每个切片。 双击切片打开切片选项（Slice Options）对话框。输入名称（如 slide1、slide2），该名称将作为导出文件名。
  6. 导出为 PNG。 进入 文件 > 导出 > 存储为 Web 所用格式（旧版）(File > Export > Save for Web (Legacy))。选择每个切片，将格式设为 PNG-24 以保留清晰文字。点击 存储（Save），选择文件夹，确保选择 所有切片（All Slices）。
  7. 按顺序上传。 将导出的文件按顺序上传到 Instagram 或 LinkedIn——切片编号（从左到右、从上到下）与轮播图顺序一致。

画布被参考线分割成四个切片示例

利用参考线分割画布的示例——每个部分可单独导出。

教程缩略图中展示的 Photoshop 切片工具工具栏位置

切片工具位于工具栏裁剪工具组中。

提示： 对于包含文字或 Logo 的轮播图，请使用 PNG-24 以保留清晰边缘。对于纯照片轮播图，JPEG 高（JPEG High）（品质 80+）能在画质损失极小的前提下获得更小的文件。

在任何 Photoshop 版本中找到切片工具

切片工具嵌套在工具栏的裁剪工具下。右键（或长按）裁剪工具图标，即可看到 切片工具（Slice Tool） 和 切片选择工具（Slice Select Tool）。

在 Photoshop CC 2019 及更高版本中，许多用户反映切片工具在默认工具栏中消失。此问题在 Adobe 社区论坛已有超过 42,000 次浏览，是最常见的切片工具问题之一。恢复方法如下：

  • 点击工具栏底部的 …（省略号）按钮。
  • 选择 自定义工具栏（Customize Toolbar）。
  • 在“额外工具”列表中找到 切片工具，将其拖拽到当前工具栏组中。

或者，反复按 Shift + C 键循环切换裁剪工具组——切片工具会出现在循环序列中。

下拉菜单显示裁剪工具、透视裁剪工具、切片工具和切片选择工具

切片工具和切片选择工具嵌套在工具栏的裁剪工具下。

注意： 在 Photoshop Elements 中，切片工具位于专家模式工具栏的裁剪与拉直（Crop & Straighten）组中。自定义工具栏的方法仅适用于完整的 Creative Cloud 版本。

理解四种切片类型

Photoshop 使用四种切片类型，每种都有独特的视觉标识和行为。了解它们有助于决定使用哪种类型以及排查问题。

用户切片（User Slice）——实蓝线。使用切片工具手动绘制。可命名、调整大小、移动并单独优化。徽章图标指示是图像（Image）还是无图像（No Image）内容。

基于图层的切片（Layer-Based Slice）——实蓝线。通过 图层 > 新建基于图层的切片（Layer > New Layer-Based Slice） 从图层创建。当图层内容移动或改变时，切片区域自动更新。

自动切片（Auto Slice）——灰色虚线。Photoshop 自动生成以填充未被用户切片或基于图层的切片覆盖的区域。它们相互关联，共享优化设置。可提升为用户切片以便单独修改。

子切片（Subslice）——灰色虚线。当切片重叠时自动生成。无法选择或编辑，切片堆叠顺序改变时重新生成。

切片编号从 左上角 开始，从左到右、从上到下。添加或删除切片时编号会更新。导出时，切片可通过 HTML 表格或 CSS 层重新组装——不过 HTML 输出基于较旧的表格布局。

创建你的第一个切片

根据是从头开始、使用参考线还是围绕特定图层构建，有三种创建切片的方法。

手动创建用户切片

选择切片工具，在选项栏中选择一种样式：

  • 正常（Normal）——拖拽任意矩形。
  • 固定长宽比（Fixed Aspect Ratio）——输入宽高比（例如 1:1 表示正方形）。
  • 固定大小（Fixed Size）——输入精确的像素尺寸（适用于轮播图面板）。

在画布上拖拽。Photoshop 会自动创建自动切片填充剩余区域。

从参考线创建切片

在画布上放置参考线（视图 > 新建参考线 (View > New Guide)）。然后点击选项栏中的 从参考线创建切片（Slices From Guides） 按钮。如果该按钮呈灰色不可用——这是 CS6 及更早版本中的已知问题——请使用以下变通方法：启用 视图 > 对齐（View > Snap），手动绘制第一个用户切片，然后使用切片选择工具按住 Alt/Option + 拖拽 复制。

基于图层的切片

在图层面板中选择一个图层，然后进入 图层 > 新建基于图层的切片（Layer > New Layer-Based Slice）。切片会自动包裹图层内容。如果移动或编辑图层，切片边界会跟随——非常适合按钮、图标等在设计迭代中可能移动的元素。

重要： 如果图层动画或移动范围较大，基于图层的切片可能变得过大。在制作动画前，请将其转换为用户切片（右键 > 提升为用户切片（Promote to User Slice）），以便精确定位。

编辑和整理切片

创建切片后，使用 切片选择工具（Slice Select Tool）（嵌套在切片工具下）进行修改。

  • 选择与移动： 点击切片选中它；拖拽可移动位置。自动切片会自动调整。
  • 调整大小： 拖拽角手柄。按住 Shift 可保持比例。
  • 复制： 按住 Alt（Win）/ Option（Mac），用切片选择工具拖拽。
  • 命名： 双击切片打开切片选项（Slice Options）对话框。名称将作为导出文件名。
  • 删除： 右键点击用户切片，选择 删除切片（Delete Slice），或按 Delete 键。在切片选择工具选项栏中使用 删除全部（Delete All） 可一次性移除所有自动切片。
  • 提升： 右键点击基于图层或自动切片，选择 提升为用户切片（Promote to User Slices），以解锁单独控制。

将切片导出为独立文件

在较新版本的 Photoshop（CC 2020+）中，正确的导出路径是 文件 > 导出 > 存储为 Web 所用格式（旧版）(File > Export > Save for Web (Legacy))。旧版本则直接使用 文件 > 存储为 Web 所用格式（File > Save for Web）。

在“存储为 Web 所用格式”对话框中：

  • 每个切片显示为单独的缩略图。点击切片即可选中。
  • 为每个切片选择格式和质量——照片用 JPEG 高（JPEG High），含文字的图形用 PNG-24，纯色素材用 PNG-8。
  • 自动切片 默认共享优化设置。若需单独修改，先选中并将其提升为用户切片。
  • 点击 存储（Save），选择文件夹，确保 所有切片（All Slices） 已选中。每个切片将作为独立文件保存，文件名为之前设置的切片名称。

Photoshop 还可生成一个 HTML 文件，通过表格布局重新组装切片。不过，生成的代码依赖于已淘汰的表格结构。现代工作流程更常用的是直接使用独立文件，自行构建自定义 CSS 或轮播图。

提示： 如需 Retina（2x）导出，可在切片前将画布缩放至 200%，然后在“存储为 Web 所用格式”对话框中对每个切片将图像大小设置为 50%。这样无需手动放大即可获得清晰的倍率素材。

常见切片工具问题排查

切片工具从工具栏中消失（CC 2019+）
解决方法：点击工具栏底部的 自定义工具栏 按钮（… 图标），将切片工具拖回工具栏。或按 Shift + C 键循环切换裁剪工具组。

“从参考线创建切片”按钮无效
解决方法：该按钮在 CS6 及更早版本中呈灰色不可用——官方未提供补丁。变通方法：放置参考线后，启用 视图 > 对齐（View > Snap），手动绘制第一个用户切片，然后使用切片选择工具按住 Alt/Option + 拖拽 复制。

需要切分包含视频图层的图像
解决方法：切片工具会忽略视频内容。先将视频导出为静态帧，或在 Premiere Pro 等专用编辑器中分割视频，再导入 Photoshop 合成。

基于图层的切片在动画过程中变得过大
解决方法：在制作动画前，右键点击基于图层的切片，选择 提升为用户切片（Promote to User Slice）。这样可固定边界，不会随图层移动而扩展。

使用动作自动化切片导出

如果你经常切分多面板布局（产品网格、轮播图、邮件横幅），可通过 Photoshop 动作实现自动化。

  1. 录制动作： 打开动作面板（窗口 > 动作 (Window > Actions)），创建新动作，命名为“切片与导出轮播图”之类的名称。
  2. 设置参考线： 录制过程中，在所需间隔处放置垂直参考线（例如每 1080 px 用于轮播图）。
  3. 创建切片： 使用 从参考线创建切片（Slices From Guides） 按钮（或之前介绍的手动方法）。
  4. 打开“存储为 Web 所用格式（旧版）”： 动作仍在录制时，打开导出对话框，设置首选格式和质量。
  5. 保存并停止： 选择目标文件夹并设置保存选项，然后停止录制。
  6. 批量处理： 使用 文件 > 自动 > 批处理（File > Automate > Batch），将动作应用于整个文件夹的图片。

如需更高效的抠图和导出工作流——尤其是需要快速导出带透明背景的单个切片时——Layerbench 面板提供了一键主体选择、无损图层导出及边缘清理功能。它直接集成到 Photoshop 中，在处理复杂合成切片时是一个实用的辅助工具。

切片工具 vs. 现代替代方案——你该用哪个？

切片工具已在 Photoshop 中存在数十年。由于生成的 HTML 依赖表格结构，一些设计师认为它在完整网页布局中已显老旧，但它在素材提取、轮播图和网格切片方面仍然非常高效。下表将其与最常见的现代方法进行了比较。

任务 切片工具 裁剪 + 导出为 Adobe 生成器
将一个布局拆分为多张图片 配合参考线快速完成；自动命名；适合轮播图和网格 每张手动操作；无自动命名；多张图片时较慢 不支持直接拆分单张图片
导出单个图层素材（图标、按钮） 可行，但需手动创建切片 “导出为”可快速导出单个图层 生成器可自动导出命名图层，支持 @2x
生成包含 HTML 表格的完整网页 生成基于表格的代码——已不适合现代响应式网站 不适用 不适用
Retina（2x）导出 切片前缩放画布，或在“存储为 Web 所用格式”中调整图像大小 “导出为”可放大单个图层 生成器原生支持 @2x 命名约定

哪种方法适合你的场景？

  • 使用切片工具： 适用于轮播图、产品网格以及任何需要精准对齐和顺序命名的多片段导出。
  • 使用“导出为”或 Adobe 生成器： 适用于导出单个图层——速度更快且无损。
  • 避免使用 HTML 生成功能： 除非你正在处理一个明确需要基于表格组装的旧项目。

切片工具在特定工作流中仍然是实用的选择。通过搭配参考线、固定大小设置和批量自动化，你可以高效处理从社交媒体轮播图到多页邮件布局的各种需求。