Photoshop快速切图：切片、图层导出与自动化批处理

做前端或者做设计的应该都碰过这种场景设计稿定稿了需求方一句“明天上线”然后你打开设计源文件几百个图层糊在一起图标、背景、照片、按钮状态全在一个画布上旁边还堆着几版废弃的稿子。这时候“利用 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 三条主流路径的能力边界对比先给一张对照表让你在选择方案时有依据不至于学了一个工具就想拿它解决所有问题。路径适合场景自动化程度主要短板切片工具 存储为 Web 所用格式整页切图、需要按区域批量出图、老版本 PS中可一次导出多个切片切片管理混乱改稿后切片位置容易错位图层导出为 / 导出为图标、按钮、独立元素图层已规范命名中高可按图层批量导出依赖图层命名和结构图层乱了就废图像资源生成器需要按倍图自动产出、需要随改随出高改图层名即出文件需要在源文件里维护命名后缀团队协作要约定动作 批处理 / 脚本几十上百个文件的重复导出、统一规格极高一次配置长期复用前期调试成本高出错不容易定位表格里“自动化程度”这一列是我自己的主观排序不是绝对标准。关键在于单次、少量、结构混乱的稿子用切片工具手动切更快重复、批量、结构规范的稿子值得花时间配置自动化。很多人一上来就想搞全自动结果在一个图层命名乱七八糟的稿子上折腾两小时还不如老老实实手切二十分钟。2. 动手之前的准备工作决定了后面一半的效率2.1 先另存副本再谈切图这是我最想强调的一条也是最容易被跳过的一条。拿到 PSD 的第一件事不是打开图层面板找元素而是另存一份副本专门用于切图。原因很实在切图过程里你会做大量破坏性操作——合并图层、栅格化文字、隐藏元素、删除切片、改变画布尺寸这些操作一旦做在原稿上设计后续要改稿就没法回溯了。更麻烦的是有时候需求方看到你导出的图觉得“这个图标再大两像素”你得回到原始状态重来。副本的命名我一般用“原文件名_切图_日期”这种格式放在单独的目录里和设计稿目录分开。目录结构大概长这样项目名/ design/ 设计源文件只读不改 slice/ 切图工作副本 export/ 导出产物按模块分子目录这个结构看起来是小事但当项目里有五六个页面、每个页面都要切图的时候你就能体会到“导出的东西不会和源文件混在一起”有多重要。我吃过一次亏导出的图和源文件放在同一目录结果批处理的时候把导出的 PNG 又当成输入处理了一遍产出几百张莫名其妙的缩略图清目录清了半小时。2.2 图层结构体检切图效率的真正分水岭打开副本之后别急着动手先花几分钟做一次“图层体检”。我看一份 PSD 能不能快速切图基本就看这几件事图层有没有命名、同组元素有没有打组、有没有大量隐藏图层、有没有用智能对象、有没有把整页内容摊平在一个图层里。如果图层是一堆“图层 12 拷贝 3”这样的名字那自动化路径基本废了只能手切但如果图层命名相对规范你能省下大量找元素的时间。这时候如果时间允许我会顺手做一轮整理把同一模块的图层打组并命名为模块名把需要导出的元素单独拎出来放到一个“export”分组里给它们统一加上后缀标记。这一轮整理花十分钟后面能省半小时。体检时还要特别注意两类隐藏陷阱。第一类是半像素问题元素的位置坐标带小数比如 x100.5导出后边缘会发虚尤其在 1x 图上非常明显。解决办法是全选图层用对齐像素或者把位置值取整。第二类是图层样式的外扩投影、外发光、描边这些效果会让元素的实际视觉范围超出图层边界直接用图层边界导出会被裁掉。这种情况要么手动扩展画布要么导出时留足边距。提示如果设计稿里存在大量被隐藏的废弃图层导出前一定要确认导出选项里的“仅限可见图层”是勾选状态否则会导出一堆空白图或者错误内容。2.3 工作区和导出相关设置的一次性配置工作区这件事配置一次能用很久。我习惯给切图单独存一个工作区面板只留四个图层面板放大方便看命名、信息面板看坐标和尺寸、历史记录切图过程经常要回退、动作面板如果要用批处理。其他面板全部关掉画布可视面积最大化。这个工作区存成“切图”名字以后一键切换比每次手动拖面板省事。导出相关的设置有两个地方值得提前改。一是首选项里的“导出”相关选项确认“快速导出为 PNG”的行为符合预期比如是否包含画板、是否使用画板作为导出边界。二是颜色配置如果设计稿用的是非 sRGB 的工作空间导出前记得转换否则同一张图在不同设备上看颜色会飘。这一条在纯网页项目里影响不大但如果是给移动端做资源颜色偏差被测试提出来过不止一次。3. 切片工具老派但依然好用的整页切图方案3.1 切片工具的三种切片类型及其取舍切片工具的本质是“在画布上画框让软件按框导出”。它生成的切片分三种用户切片你自己拉的框、基于图层的切片从图层创建的切片、自动切片软件为了补全区域自动生成的。真正有用的是前两种自动切片是麻烦的来源——它会在你所有切片之间的空隙里自动生成额外的切片导出时多出一堆没用的图。所以用切片工具的第一条纪律是先把切片画完再统一清掉自动切片。具体操作是在切片选择工具下点“隐藏自动切片”或者直接把自动切片删掉。我一般会在导出前的最后一步检查一遍因为只要你在画布上又拉了一个新切片自动切片就会重新生成。用户切片适合两种情况一是不规则区域比如整块的头部区域、整张背景图二是你需要精确控制边界的元素。基于图层的切片适合元素已经有独立图层且边界清晰的情况直接从图层创建切片改稿后切片会跟着图层走比手拉的稳。实际工作中我会混着用整页结构用用户切片划分大区元素级别的用图层切片。3.2 切片的命名规则和导出目录结构切片的命名是在切片选项里改的双击切片就能打开对话框。这里的命名会直接变成文件名所以规则必须提前定。我用的规则是“模块-元素-状态-倍图”全小写、用连字符、不用中文、不用空格、不用特殊字符。比如home-banner-bg2x.png、detail-btn-normal2x.png。为什么不用中文因为不同系统、不同服务器环境对中文文件名的处理方式不一样导出后可能变成乱码上传到 CDN 或者打包进项目时容易出问题。为什么不用下划线其实可以用但混用连字符和下划线会让团队里不同人的命名风格打架统一一种就行。导出目录这一块在“存储为 Web 所用格式”的对话框里输出设置可以指定“切片命名”规则也可以选择“将图像放入文件夹”让每个切片按切片名前缀自动分目录。如果切片数量多我建议开启分目录否则一个目录里几百个文件找起来很痛苦。3.3 格式与参数选择每个选项背后的理由这是切图里最容易被“随便选一个”糊弄过去的环节但格式选错后面压缩、加载、清晰度的问题会一个个冒出来。下面这张表是我常用的对照具体数值可以微调但判断逻辑不变。内容类型推荐格式关键参数理由照片、复杂渐变合成图JPEG品质 70 到 80勾选渐进式有损压缩体积小品质 80 以上肉眼难辨差异渐进式让加载过程有过渡需要透明背景的元素PNG-24 或 PNG-32勾选透明度杂边选无保留完整透明通道避免边缘出现白边简单图标、纯色图形必须位图时PNG-8颜色数按需降到 64 或 32仿色 0体积可缩小一大截纯色图形降色后几乎无损动图GIF 或 WebP控制颜色数和帧延迟兼容性优先选 GIF体积优先选 WebP需要极致体积的静态图WebP品质 75 到 85同画质下体积明显小于 JPEG但要确认目标环境支持几个参数背后的原理值得说清楚。仿色Dither是在颜色数不足时用像素点混合来模拟中间色开启后渐变过渡更平滑但体积变大纯色图形完全不需要开到 0 反而更干净。杂边Matte是处理透明边缘时用来填充半透明像素的底色如果选错颜色导出的图放在深色背景上会出现一圈浅色描边这是最典型的“切图翻车”现象之一正确做法是选“无”或者根据实际背景色选。交错 / 渐进式不改变最终画质只影响加载时的呈现方式网络图片建议开。还有一条经验导出参数确定后用“存储为 Web 所用格式”对话框左下角的预览体积做决策不要凭感觉。同样是 200×200 的图标PNG-24 是 8KBPNG-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是矢量。倍图后缀写在扩展名前面比如icon2x.png、icon3x.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 常见问题速查表下面这张表是我这些年遇到频率最高的问题按现象、原因、解决方式整理遇到问题可以先对照着排查。现象常见原因处理方式导出的图边缘有一圈白边透明区域杂边设置错误或者图层样式外扩被裁杂边选“无”导出前扩展画布留出边距导出的图是空白的图层被隐藏或导出范围选错只导出了空切片勾选“仅限可见图层”导出范围选“所有用户切片”图片边缘发虚、不锐利图层坐标带小数存在半像素全选图层对齐像素位置值取整导出的文件数量比切片多自动切片未被清除切片选择工具下删除或隐藏自动切片中文命名的图打不开或者乱码文件名编码问题全部改用英文小写加连字符批处理后文件互相覆盖动作里写死了绝对保存路径使用批处理的输出目录设置勾选覆盖存储命令图像资源不自动生成生成器未开启或图层名后缀拼写错误检查生成菜单是否勾选核对后缀格式导出的 SVG 变成位图源图层是像素图层而非形状图层重新用形状工具绘制或做图像描摹后再导出图标在深色背景上出现浅色描边PNG 半透明边缘混合了白色导出时杂边选无或在设计稿里处理边缘像素同一元素在 1x 和 2x 下视觉大小不一致1x 是缩小生成的抗锯齿处理不一致从原始尺寸按倍数导出不要先出 1x 再放大6.2 几条不太会写在文档里的实操心得第一条切图前先问清楚交付格式。这话听起来像废话但我真的遇到过切完一整套 PNG对方说“我们项目里图标统一用 SVG”的情况。开工前花三十秒确认格式、倍图、命名规则、压缩要求比返工两小时划算得多。第二条不要在切图过程中随手保存源文件。切图时的操作大多是破坏性的一旦保存历史记录清空想回退都难。我的习惯是整个切图过程只在副本上操作导出的产物单独存放源文件只在确认交付完成后才关闭。如果中途需要给设计反馈问题直接截图标注不要改动原稿。第三条大批量导出分批做。一次导出几百张图软件的内存占用会飙上去中途卡死的话前面全白干。我的做法是按模块分批每批二三十张导完立刻检查。另外导出目录最好每次清空重建避免旧文件混在新文件里导致交付了过期资源。第四条留一份可复现的配置记录。动作、脚本、导出参数、命名规则这些东西配好之后写在一个文本文件里跟着项目走。半年后需求方说“再出一版”你打开文件就能照着复现不用凭记忆重新摸索。团队协作时这份记录更值钱它让切图这件事从“某个人的手艺”变成“可交接的流程”。第五条定期检查工具版本带来的行为变化。导出面板、生成器、脚本接口这些小地方不同版本之间可能有细微差异比如某个选项默认值变了、某个菜单项挪了位置。升级之后先用一个小稿子跑一遍完整流程确认产出没变再处理正式项目。这个习惯帮我避免过至少两次批量导出参数错乱的事故。最后分享一个小技巧如果一批图标需要统一处理比如统一加内边距、统一改颜色、统一导出多倍图与其一个个手动改不如在源文件里把它们做成智能对象用同一个源对象派生多份改一处全部生效。这个操作在图标数量超过十个之后效率差距会非常明显。