做前端或者做设计的应该都碰过这种场景：设计稿定稿了，需求方一句“明天上线”，然后你打开设计源文件，几百个图层糊在一起，图标、背景、照片、按钮状态全在一个画布上，旁边还堆着几版废弃的稿子。这时候“利用 Photoshop 进行快速切图”就不只是会不会用工具的问题，而是能不能在半小时内把一批干净、命名规范、尺寸正确的图片资源和样式说明交出去的问题。我这些年接过不少这种临时救火的项目，也帮几个团队梳理过切图流程，发现真正卡住人的往往不是软件功能不会，而是没有一套稳定的路径：先干什么、后干什么、哪些交给工具自动化、哪些必须人工核对。

这篇内容面向三类人：刚入行、只会用移动工具拉框然后“存储为”的新手；做了一段时间但每次切图都靠手工重复劳动的中间层；以及需要给团队定规范、让切图这件事可交接的负责人。我会从流程设计讲到具体参数，从切片工具讲到图层导出、图像资源自动化、动作批处理和简单的脚本，把每一步为什么这么做、参数为什么这么选都说清楚，最后附上我自己踩过的坑和一份问题速查表。工具在更新，但“让交付物一次到位”的思路不会过时。

1. 先想清楚切图在交付链路里的位置

1.1 切图交付的到底是什么东西

很多人对切图的理解停留在“把图抠出来存成 PNG”，这只是三分之一。一份完整的切图交付实际包含三类产物：第一类是位图资源，比如照片背景、复杂的渐变底纹、带纹理的插画，这些东西用 CSS 复现成本极高、还原度还差，必须导出成图片；第二类是矢量资源，也就是图标、简单图形，理想状态下应该导出 SVG 交给开发内联或者作为外部文件引用，而不是导出一堆 @2x、@3x 的 PNG；第三类是样式信息，颜色值、圆角半径、投影参数、字号字重行高，这些不该做成图片，应该以标注或者说明的形式给出去。

之所以要先把这三类分开，是因为混在一起切是效率最低的做法。我见过有人把整个按钮连同文字和投影一起切成一张图，结果后面改文案要重新切，改主题色要重新切，适配不同屏幕密度还得再切三份。而如果一开始就判断“这个按钮的背景是纯色加圆角加一层阴影，交给 CSS；里面的图标单独导出 SVG；只有那个带噪点纹理的插画才切图”，工作量会直接砍掉一大半，后续维护成本也低得多。

判断标准其实很简单，可以按下面的顺序过一遍：能被 CSS 三行以内写出来的（纯色、线性渐变、圆角、边框、单层阴影），不切；能用字体图标或者 SVG 矢量还原的（线性图标、几何图形、logo），走矢量；只有在语义上就是“一张图”的东西（照片、插画、复杂合成图、无法用代码还原的特殊纹理），才老老实实切位图。这条判断线一旦建立，你会发现真正需要导出的图片数量远比想象中少。

1.2 为什么这件事仍然值得用 PS 来做

现在设计工具很多，很多新工具自带标注和导出面板，一键就能出资源。但在实际项目里，PS 依然有它不可替代的位置：老项目的历史设计稿都在 PS 里，客户给的源文件是 PSD，外包团队交过来的也是 PSD，你不可能要求所有人换工具。而且 PS 在图层级别的控制力、批处理能力、脚本扩展能力上依然很强，尤其是当你要处理几十个 PSD、几百个图层的批量导出时，那套“动作 + 批处理 + 脚本”的组合拳是很多新工具给不了的。

我的实际策略是：新稿优先用带标注能力的工具产出，老稿和批量任务回到 PS 处理。而在 PS 内部，也不是只有一条路。切片工具、图层导出、图像资源生成器、脚本导出，这四条路径各有适用场景，选错了会多花好几倍时间。后面几节我会把每条路径的边界讲清楚。

1.3 三条主流路径的能力边界对比

先给一张对照表，让你在选择方案时有依据，不至于学了一个工具就想拿它解决所有问题。

表格里“自动化程度”这一列是我自己的主观排序，不是绝对标准。关键在于：单次、少量、结构混乱的稿子，用切片工具手动切更快；重复、批量、结构规范的稿子，值得花时间配置自动化。很多人一上来就想搞全自动，结果在一个图层命名乱七八糟的稿子上折腾两小时，还不如老老实实手切二十分钟。

2. 动手之前的准备工作决定了后面一半的效率

2.1 先另存副本，再谈切图

这是我最想强调的一条，也是最容易被跳过的一条。拿到 PSD 的第一件事不是打开图层面板找元素，而是另存一份副本，专门用于切图。原因很实在：切图过程里你会做大量破坏性操作——合并图层、栅格化文字、隐藏元素、删除切片、改变画布尺寸，这些操作一旦做在原稿上，设计后续要改稿就没法回溯了。更麻烦的是，有时候需求方看到你导出的图觉得“这个图标再大两像素”，你得回到原始状态重来。

副本的命名我一般用“原文件名_切图_日期”这种格式，放在单独的目录里，和设计稿目录分开。目录结构大概长这样：

项目名/ design/ 设计源文件，只读不改 slice/ 切图工作副本 export/ 导出产物，按模块分子目录

这个结构看起来是小事，但当项目里有五六个页面、每个页面都要切图的时候，你就能体会到“导出的东西不会和源文件混在一起”有多重要。我吃过一次亏：导出的图和源文件放在同一目录，结果批处理的时候把导出的 PNG 又当成输入处理了一遍，产出几百张莫名其妙的缩略图，清目录清了半小时。

2.2 图层结构体检：切图效率的真正分水岭

打开副本之后，别急着动手，先花几分钟做一次“图层体检”。我看一份 PSD 能不能快速切图，基本就看这几件事：图层有没有命名、同组元素有没有打组、有没有大量隐藏图层、有没有用智能对象、有没有把整页内容摊平在一个图层里。

如果图层是一堆“图层 12 拷贝 3”这样的名字，那自动化路径基本废了，只能手切；但如果图层命名相对规范，你能省下大量找元素的时间。这时候如果时间允许，我会顺手做一轮整理：把同一模块的图层打组并命名为模块名，把需要导出的元素单独拎出来放到一个“export”分组里，给它们统一加上后缀标记。这一轮整理花十分钟，后面能省半小时。

体检时还要特别注意两类隐藏陷阱。第一类是半像素问题：元素的位置坐标带小数（比如 x=100.5），导出后边缘会发虚，尤其在 1x 图上非常明显。解决办法是全选图层，用对齐像素或者把位置值取整。第二类是图层样式的外扩：投影、外发光、描边这些效果会让元素的实际视觉范围超出图层边界，直接用图层边界导出会被裁掉。这种情况要么手动扩展画布，要么导出时留足边距。

提示：如果设计稿里存在大量被隐藏的废弃图层，导出前一定要确认导出选项里的“仅限可见图层”是勾选状态，否则会导出一堆空白图或者错误内容。

2.3 工作区和导出相关设置的一次性配置

工作区这件事，配置一次能用很久。我习惯给切图单独存一个工作区，面板只留四个：图层面板（放大，方便看命名）、信息面板（看坐标和尺寸）、历史记录（切图过程经常要回退）、动作面板（如果要用批处理）。其他面板全部关掉，画布可视面积最大化。这个工作区存成“切图”名字，以后一键切换，比每次手动拖面板省事。

导出相关的设置有两个地方值得提前改。一是首选项里的“导出”相关选项，确认“快速导出为 PNG”的行为符合预期，比如是否包含画板、是否使用画板作为导出边界。二是颜色配置，如果设计稿用的是非 sRGB 的工作空间，导出前记得转换，否则同一张图在不同设备上看颜色会飘。这一条在纯网页项目里影响不大，但如果是给移动端做资源，颜色偏差被测试提出来过不止一次。

3. 切片工具：老派但依然好用的整页切图方案

3.1 切片工具的三种切片类型及其取舍

切片工具的本质是“在画布上画框，让软件按框导出”。它生成的切片分三种：用户切片（你自己拉的框）、基于图层的切片（从图层创建的切片）、自动切片（软件为了补全区域自动生成的）。真正有用的是前两种，自动切片是麻烦的来源——它会在你所有切片之间的空隙里自动生成额外的切片，导出时多出一堆没用的图。

所以用切片工具的第一条纪律是：先把切片画完，再统一清掉自动切片。具体操作是在切片选择工具下点“隐藏自动切片”或者直接把自动切片删掉。我一般会在导出前的最后一步检查一遍，因为只要你在画布上又拉了一个新切片，自动切片就会重新生成。

用户切片适合两种情况：一是不规则区域，比如整块的头部区域、整张背景图；二是你需要精确控制边界的元素。基于图层的切片适合元素已经有独立图层且边界清晰的情况，直接从图层创建切片，改稿后切片会跟着图层走，比手拉的稳。实际工作中我会混着用：整页结构用用户切片划分大区，元素级别的用图层切片。

3.2 切片的命名规则和导出目录结构

切片的命名是在切片选项里改的，双击切片就能打开对话框。这里的命名会直接变成文件名，所以规则必须提前定。我用的规则是“模块-元素-状态-倍图”，全小写、用连字符、不用中文、不用空格、不用特殊字符。比如home-banner-bg@2x.png、detail-btn-normal@2x.png。

为什么不用中文？因为不同系统、不同服务器环境对中文文件名的处理方式不一样，导出后可能变成乱码，上传到 CDN 或者打包进项目时容易出问题。为什么不用下划线？其实可以用，但混用连字符和下划线会让团队里不同人的命名风格打架，统一一种就行。

导出目录这一块，在“存储为 Web 所用格式”的对话框里，输出设置可以指定“切片命名”规则，也可以选择“将图像放入文件夹”，让每个切片按切片名前缀自动分目录。如果切片数量多，我建议开启分目录，否则一个目录里几百个文件，找起来很痛苦。

3.3 格式与参数选择：每个选项背后的理由

这是切图里最容易被“随便选一个”糊弄过去的环节，但格式选错，后面压缩、加载、清晰度的问题会一个个冒出来。下面这张表是我常用的对照，具体数值可以微调，但判断逻辑不变。

几个参数背后的原理值得说清楚。仿色（Dither）是在颜色数不足时用像素点混合来模拟中间色，开启后渐变过渡更平滑，但体积变大；纯色图形完全不需要，开到 0 反而更干净。杂边（Matte）是处理透明边缘时用来填充半透明像素的底色，如果选错颜色，导出的图放在深色背景上会出现一圈浅色描边，这是最典型的“切图翻车”现象之一，正确做法是选“无”或者根据实际背景色选。交错 / 渐进式不改变最终画质，只影响加载时的呈现方式，网络图片建议开。

还有一条经验：导出参数确定后，用“存储为 Web 所用格式”对话框左下角的预览体积做决策，不要凭感觉。同样是 200×200 的图标，PNG-24 是 8KB，PNG-8 降到 32 色可能只有 2KB，这种差距在图标数量多的时候非常可观。

3.4 一次导出多个切片的操作流程

完整流程我按顺序写一遍，照着做基本不会错：先在副本文件里把需要导出的区域用切片工具划分好；双击每个切片设定名称和类型；删掉自动切片；打开“存储为 Web 所用格式”对话框，在右侧预览区逐个切片设置格式和参数，但注意——对话框里选中的是“所有切片”时统一设置，选中单个切片时可以单独调；左下角看总体积和单张体积；确认输出设置里的目录和命名规则；点“存储”，选择导出目录，软件会自动按切片名生成文件。

这里有个细节：对话框里默认可能只导出“选中的切片”，一定要在导出范围里选“所有切片”或者“所有用户切片”，否则你会发现导出的文件数量对不上。另外导出完成后建议立刻在文件管理器里按修改时间排序看一眼，确认数量、命名、尺寸都对，别等到开发拿着图来问“这个图怎么是空的”才发现问题。

4. 图层导出、图像资源与批处理：真正省时间的自动化路径

4.1 图层导出为：适合结构清晰的元素批量出图

当图层已经规范命名、元素各自独立成层时，“将图层导出到文件”是比切片更省事的路子。它能按图层或图层组批量导出，并且支持按组导出成单独文件、给文件名加前缀、选择只导出可见图层。我用它最多的场景是图标包和按钮状态包：一个组里十几个图标图层，一次导出全是 SVG 或者 PNG，命名直接继承图层名。

关键在于图层命名。导出时文件名来自于图层名或者组名，所以导出前我会花两分钟把图层名整理成最终文件名，省得导出后还要批量重命名。如果要导出 SVG，图层本身必须是形状图层或者文字图层（文字最好转成形状），普通的像素图层导出 SVG 只会得到一张内嵌的位图，失去矢量意义。

4.2 图像资源：改个图层名就自动出图

“图像资源”这个东西很多人不知道，但一旦用上就回不去了。它的逻辑特别简单：打开生成器开关之后，你把某个图层或者图层组命名为xxx.png、xxx.jpg、xxx.svg，软件就会自动在指定目录生成对应文件；你改了图层内容，文件自动更新；你加了倍图后缀，它会自动导出多份。

后缀规则要记牢：.png是默认位图，.png8是 8 位索引色，.png24是 24 位，.jpg是 JPEG，.svg是矢量。倍图后缀写在扩展名前面，比如icon@2x.png、icon@3x.png，导出时按后缀倍数缩放。还有一个很实用的用法是百分比缩放，icon.png200%这种写法可以按任意比例导出。

这套机制的效率提升在于“一次配置、持续生效”。改稿阶段设计每改一次图标，导出目录里的文件自动就更新了，不需要你再走一遍导出流程。但它的代价是对命名纪律要求极高：团队里只要有人把图层名改成“图标 拷贝”，那个文件就消失了。所以用这条路之前，必须和设计侧约定好命名规范，并且把导出目录加入版本控制或者至少定期备份，避免误删。

4.3 动作与批处理：几十个文件的重复劳动交给机器

如果手上是几十个 PSD，每个都要按同样规格导出，那就该上动作加批处理了。动作的录制逻辑是：新建动作 → 开始录制 → 手动完成一次完整导出（打开文件、选择导出路径、设置参数、保存） → 停止录制 → 用“批处理”把动作应用到整个文件夹。

这里最容易出错的地方是导出路径的变量设置。录制时如果写死了绝对路径，批处理跑完你会发现所有文件都覆盖到同一个位置，只剩最后一张。正确做法是在动作里把保存路径设置为相对路径或者使用批处理对话框里的“目标”选项指定输出目录，并且勾选“覆盖动作中的‘存储为’命令”，让每个文件按原文件名保存到指定目录。

还有两个坑：一是动作录制对弹窗敏感，导出过程中如果有任何确认框弹出并且你点了“是”或者“否”，那个选择就会被录进动作，后续所有文件都按这个选择走；二是不同 PSD 的结构可能不一样，比如有的稿子图层多、有的图层少，动作里如果包含“合并可见图层”这种操作，可能会合错。稳妥的做法是先用两三个文件试跑，确认产出符合预期再批量应用到全部。

4.4 脚本导出：需要精细控制时的最后一招

当动作不够灵活、导出规则又有明确规律时，脚本是更可靠的选择。PS 支持用 JSX 写脚本，能遍历图层、按名字匹配、批量导出并控制尺寸。下面这段是我常用的一个简化版本，作用是遍历当前文档的顶层图层组，把名字里带export的组按 2 倍尺寸导出成 PNG 到指定目录。

// 遍历顶层图层组，导出名称含 export 的组为 2 倍图 PNG var doc = app.activeDocument; var outFolder = new Folder("~/Desktop/export"); if (!outFolder.exists) outFolder.create(); app.preferences.rulerUnits = Units.PIXELS; for (var i = 0; i < doc.layerSets.length; i++) { var group = doc.layerSets[i]; if (group.name.indexOf("export") === -1) continue; var bounds = group.bounds; // 返回 [left, top, right, bottom] var w = bounds[2].as("px") - bounds[0].as("px"); var h = bounds[3].as("px") - bounds[1].as("px"); var dup = doc.duplicate(); app.activeDocument = dup; var target = dup.layerSets.getByName(group.name); // 只保留目标组，其余删除 for (var j = dup.layers.length - 1; j >= 0; j--) { if (dup.layers[j].name !== target.name) dup.layers[j].remove(); } dup.crop([bounds[0], bounds[1], bounds[2], bounds[3]]); dup.resizeImage(UnitValue(w * 2, "px"), UnitValue(h * 2, "px"), 72, ResampleMethod.BICUBIC); var opts = new PNGSaveOptions(); var f = new File(outFolder + "/" + group.name.replace("export", "") + "@2x.png"); dup.saveAs(f, opts, true, Extension.LOWERCASE); dup.close(SaveOptions.DONOTSAVECHANGES); app.activeDocument = doc; }

这段代码的重点不在“能不能跑”，而在于它示范了一种思路：把“哪些图层要导出”这件事变成一个可判断的规则，然后让机器去执行。你可以把规则改成颜色标记、改成图层名后缀、改成图层组内的固定位置，随项目需要调整。第一次写要花点时间调试，但同一个项目里要跑几十次导出时，这个投入很快就能回本。

5. 导出的图能不能直接用：交付前的收尾工作

5.1 命名规范和清单核对

导出完成后不要直接打包发出去，先过一遍清单。命名规范是其中最重要的一环，因为它直接影响到开发能不能“看图识意”。我的规范是全部小写、用连字符分隔、按“页面-模块-元素-状态-倍图”的顺序，状态用normal、hover、active、disabled这类通用词，倍图用@2x、@3x后缀。不出现拼音缩写、不出现日期、不出现“最终版”“新版”这种词，因为版本一多就彻底乱套。

核对清单我一般按这五项过：数量对不对（和切片数、图层数对得上）、尺寸对不对（按倍图检查实际像素）、透明通道对不对（把图放在深色和浅色背景上各看一遍）、体积是否在预期范围（单张图标超过 20KB 就要考虑降色或者改格式）、有没有重复文件（同一张图导出两遍、名字不同）。这五项花不了五分钟，但能挡住大部分返工。

5.2 倍图策略和适配逻辑

倍图这件事经常被误解。@2x 不是“把 1x 的图放大两倍”，而是“按 1x 的尺寸逻辑，导出双倍像素的图，让高密度屏幕显示得更清晰”。所以正确的做法是从设计稿的原始尺寸出发，按目标倍数重新导出，而不是导出 1x 之后用工具放大。放大出来的图边缘发虚，和高分辨率导出的效果完全不同。

实际操作里，如果设计稿本身就是按 2x 画的（很多移动端稿子是这样），导出时要注意区分：导出 @1x 需要缩小一半，导出 @2x 是原尺寸，导出 @3x 是放大 1.5 倍。放大这一步不可避免会有损失，所以在条件允许的情况下，建议让设计侧提供矢量源或者更高倍率的原始素材，尤其是图标类资源。

5.3 压缩与最终校验

导出后的压缩我只做两件事：一是用无损工具把 PNG 里的冗余信息去掉，通常能省 10% 到 30% 的体积，画质完全不变；二是检查 JPEG 的元数据，把拍摄信息、颜色配置之外的无用信息剥掉。有损压缩我不会再动，因为导出时已经选定过品质，二次压缩只会让画质进一步下降，而这个损失是不可逆的。

最终校验建议在真实环境里做一次。把图放进页面，在普通屏和高密度屏各看一遍，重点看三个地方：透明边缘有没有白边或者黑边、细线条在缩放后会不会消失、小尺寸图标在深色背景上会不会糊。这三个问题在图片查看器里往往看不出来，只有放进真实背景才暴露。

6. 那些年踩过的坑和排查思路

6.1 常见问题速查表

下面这张表是我这些年遇到频率最高的问题，按现象、原因、解决方式整理，遇到问题可以先对照着排查。

6.2 几条不太会写在文档里的实操心得

第一条，切图前先问清楚交付格式。这话听起来像废话，但我真的遇到过切完一整套 PNG，对方说“我们项目里图标统一用 SVG”的情况。开工前花三十秒确认格式、倍图、命名规则、压缩要求，比返工两小时划算得多。

第二条，不要在切图过程中随手保存源文件。切图时的操作大多是破坏性的，一旦保存，历史记录清空，想回退都难。我的习惯是整个切图过程只在副本上操作，导出的产物单独存放，源文件只在确认交付完成后才关闭。如果中途需要给设计反馈问题，直接截图标注，不要改动原稿。

第三条，大批量导出分批做。一次导出几百张图，软件的内存占用会飙上去，中途卡死的话前面全白干。我的做法是按模块分批，每批二三十张，导完立刻检查。另外导出目录最好每次清空重建，避免旧文件混在新文件里，导致交付了过期资源。

第四条，留一份可复现的配置记录。动作、脚本、导出参数、命名规则这些东西，配好之后写在一个文本文件里跟着项目走。半年后需求方说“再出一版”，你打开文件就能照着复现，不用凭记忆重新摸索。团队协作时这份记录更值钱，它让切图这件事从“某个人的手艺”变成“可交接的流程”。

第五条，定期检查工具版本带来的行为变化。导出面板、生成器、脚本接口这些小地方，不同版本之间可能有细微差异，比如某个选项默认值变了、某个菜单项挪了位置。升级之后先用一个小稿子跑一遍完整流程，确认产出没变再处理正式项目。这个习惯帮我避免过至少两次批量导出参数错乱的事故。

最后分享一个小技巧：如果一批图标需要统一处理（比如统一加内边距、统一改颜色、统一导出多倍图），与其一个个手动改，不如在源文件里把它们做成智能对象，用同一个源对象派生多份，改一处全部生效。这个操作在图标数量超过十个之后，效率差距会非常明显。