1. 为什么切图是设计师绕不开的基本功：从网页适配到多端交付的真实战场
“PS切图详细教程3种方法切片”——这标题看着像老掉牙的入门课，但如果你真以为只是点几下鼠标导出几张图，那大概率已经在项目返工、开发对接扯皮、上线后图片模糊拉伸的泥潭里踩过三次坑了。我带过二十多个UI/UX设计团队，几乎每届新人入职前三天，我都会盯着他们用PS做一次完整切图流程：不是看会不会，而是看懂不懂“为什么这张图必须PNG-24带透明通道”“为什么这个按钮背景要单独切而不是整页导出”“为什么开发说‘你给的切图命名乱得没法写CSS’”。切图从来不是技术动作，而是设计语言落地的第一道翻译关。
核心关键词“PS”“切图”“切片”背后，实际串联着三重现实压力：第一是交付精度——iOS状态栏高度、安卓刘海屏安全区、小程序胶囊按钮间距，差1像素都可能让前端同学在代码里加十行兼容判断；第二是协作效率——市场部催着改Banner文案，运营要换三张商品图，产品突然要求加个深色模式适配，没有结构化切图体系，改图=重做整个PSD；第三是性能底线——一张未压缩的3000×2000px JPG塞进H5页面，首屏加载直接卡死，而合理切片+WebP格式能压掉70%体积。我见过最惨的一次，某电商App首页因切图未按@2x/@3x规范分组导出，导致iPhone 14 Pro用户看到的是1倍图拉伸模糊，上线两小时紧急回滚，运维同事凌晨三点给我发来截图，上面写着“求求你教教设计师怎么切图”。
这教程讲的三种方法，不是并列选项，而是对应不同战场的生存策略：手动切片工具适合需要绝对控制每个像素边界的图标、按钮、复杂蒙版区域；图层导出（导出为Assets）是现代UI设计的主力，它把命名规则、尺寸缩放、格式选择全交给PS自动处理，解放双手但要求图层命名极度规范；脚本批量切图则是应对“今天要改50张活动页”的救急方案，比如把所有带“banner_”前缀的图层一键导出为WebP。别被“3种方法”误导——真正决定你切图质量的，从来不是工具，而是你对“这张图最终会出现在哪里、被谁用、怎么用”的预判能力。比如“私立高校的教师ps图片”这类需求，表面是修图，实则涉及校徽矢量图嵌入、教师正装照片的肤色统一、招生简章PDF导出时的CMYK色彩管理，切图只是其中一环；而“豆包做小程序游戏可以，但给小程序游戏的效果图切图、换图片时就乱了”，根本问题在于没建立图层分组逻辑——按钮状态、角色动画帧、背景分层必须用PS的图层组+智能对象隔离，否则换图=拆解整个PSD。
所以这教程不教“怎么点菜单”，而是带你重建切图认知：从PSD文件结构设计开始，到导出参数背后的渲染原理，再到交付给开发时的命名公约。接下来我会用真实项目复盘的方式，拆解每种方法的适用边界、参数陷阱和避坑细节——毕竟，一个合格的切图，应该让前端同学拿到资源包后，能直接拖进VS Code写CSS，而不是打开PSD反向工程你的图层逻辑。
2. 切图底层逻辑：为什么PS的“切片”和程序员的“数组切片”本质相通
很多人把PS切图当成美工活，但真正高效的切图师，脑子里跑的是和前端工程师同款的坐标系统。你看“python数组切片”arr[2:5]取的是索引2到4的元素，而PS手动切片工具画的矩形框，本质上也是在定义一个二维数组的坐标范围：[x_start:x_end, y_start:y_end]。区别只在于，程序员切的是内存地址，设计师切的是像素矩阵。理解这点，才能避开90%的切图翻车现场。
2.1 像素坐标系与设备像素比（DPR）的硬约束
所有切图的起点，是搞清你面对的屏幕物理特性。iPhone 13的屏幕分辨率是2532×1170px，但它的CSS像素（逻辑像素）只有390×844px——这意味着1个CSS像素要渲染2.6个物理像素（DPR≈2.6）。PS里设置的“100×100px”图层，在@2x设备上实际要导出200×200px才能清晰。我见过最多的问题，是设计师在PS里用“图像大小”强行把一张200×200px的图缩成100×100px，结果导出后边缘发虚——因为PS的双线性插值算法在缩小过程中丢失了亚像素信息。正确做法是：原始设计稿按@1x基准创建（如750×1334px），所有图层按实际尺寸绘制，导出时再按DPR倍数生成多套资源。比如一个按钮宽200px，在@1x稿里就画200px，在@2x稿里就画400px，而不是在@1x稿里画400px再缩放。
提示：PS里查看当前DPR适配状态，右键图层面板空白处→“图层属性”，勾选“缩放以匹配文档大小”。当文档缩放为50%时，你看到的1px线实际对应2px物理像素，这是检验DPR适配的最直观方式。
2.2 格式选择的本质：PNG、JPG、WebP背后的渲染管线
“ps切图怎么有的是jpg有的是png”——这问题背后是色彩空间与透明度的博弈。PNG-24支持Alpha通道（半透明），适合按钮阴影、图标蒙版、渐变透明效果；JPG采用YUV色彩空间+有损压缩，适合照片类大图，但任何带透明区域的图用JPG导出，PS会自动填充白色背景，导致UI叠加时出现白边。而WebP是近年标配，它同时支持有损/无损压缩和Alpha通道，体积比PNG小30%，比JPG小25%，但iOS Safari 14以下版本不支持——所以企业级项目必须做降级方案：WebP为主，PNG为备。
实测数据：一张含阴影的按钮图（200×80px），PNG-24导出为12KB，JPG质量80%导出为8KB但边缘发灰，WebP质量80%导出仅5KB且透明完美。关键参数在“导出为WebP”对话框里：“损失质量”调至80是黄金平衡点，低于60肉眼可见块状噪点，高于90体积飙升无收益；“混合Alpha”必须勾选，否则半透明区域会生硬锯齿。
2.3 命名公约：让开发不用猜你的心思
“豆包做小程序游戏可以，但给小程序游戏的效果图切图、换图片时就乱了”，根子在命名混乱。我团队推行的命名法则是：模块_功能_状态_尺寸.格式。例如：home_banner_main_@2x.webp（首页横幅主图2倍图）、button_login_pressed_@3x.png（登录按钮按下态3倍图）。其中@2x不是后缀，而是命名的一部分——因为开发工具（如Webpack）会通过文件名识别DPR倍数自动注入CSS。如果写成button_login_pressed.png，前端就得手动写background-size: 50%，极易出错。
更隐蔽的坑是中文命名。某次我们交付用户头像.png给小程序团队，结果微信开发者工具报错“文件名含非法字符”，查了半天才发现是中文顿号“、”被转义成%E3%80%81。从此所有资源强制英文命名，连“icon”都不许用“图标”，用ico_user_avatar替代。
3. 三种切图方法深度拆解：从手动切片到自动化交付
现在进入实操核心。三种方法不是简单罗列，而是按项目复杂度递进：小图标用手动切片保精度，整页UI用图层导出提效率，批量改图用脚本救急。下面用同一张电商详情页PSD（含商品图、价格标签、购买按钮、底部导航）演示全流程。
3.1 手动切片工具：像素级控制的终极武器
手动切片（快捷键C）适合需要绝对控制的场景：比如图标边缘的1px描边、文字阴影的精确范围、复杂蒙版区域（如撕纸效果）。它的优势是“所见即所得”，画框即导出范围，但代价是无法批量操作。
实操步骤与陷阱排查：
- 启用切片工具：按C键切换，或在工具栏长按“裁剪工具”选择“切片工具”。注意此时PS顶部菜单会变成“切片”选项卡，这是关键入口。
- 创建切片：在商品图区域拖出矩形框，松手后自动生成编号切片（如#0001）。这里有个致命细节：切片默认包含图层样式（如投影、内发光），但导出时不渲染这些效果！必须右键切片→“切片选项”，勾选“将图层效果包含在切片中”，否则导出的按钮会丢失阴影。
- 命名切片：双击切片编号，在弹出框输入
product_image_main_@2x。切记不要用空格或特殊符号，PS会自动转义成%20，开发读取失败。 - 导出设置：菜单栏“文件→导出→存储为Web所用格式（旧版）”，这是手动切片的专属出口。在格式选项中，PNG-24必须勾选“透明度”，JPG则要调“品质”至80以上。最关键的一步：点击“存储”前，先点右下角“优化选项”，在“输出设置”里取消勾选“转换为sRGB”——因为设计稿通常用Adobe RGB，强制转sRGB会导致色彩偏淡。
注意：手动切片最大的坑是“切片嵌套”。当你在已存在切片的区域再画新切片，PS会自动生成子切片（如#0001-1），但导出时子切片会覆盖父切片内容。解决方案：右键切片→“合并切片”，或按住Shift键拖动切片边缘调整范围，避免重叠。
3.2 图层导出（导出为Assets）：现代UI设计的效率引擎
当PSD图层超过50个，手动切片就是自杀行为。图层导出功能（右键图层→“导出为Assets”）把切图逻辑从“画框”升级为“定义规则”，核心是用图层命名驱动导出行为。
图层命名规范详解：
- 基础语法：
图层名@尺寸.格式，如btn_cart@2x.png、icon_home@3x.webp。PS会自动识别@2x并生成对应尺寸，.webp指定格式。 - 多尺寸批量：写
btn_cart@1x,@2x,@3x.png，PS一次性导出三套资源，文件名自动为btn_cart@1x.png、btn_cart@2x.png等。 - 智能缩放：对矢量形状图层（如圆角矩形），可写
btn_cart@2x@scale-2.0.png，PS按2倍比例缩放而非简单像素倍增，保持曲线平滑。
实操避坑指南：
- 图层类型限制：文字图层、调整图层、图层组默认不可导出。解决方法：右键文字图层→“栅格化图层”，或把调整图层拖到目标图层下方作为剪贴蒙版。
- 透明度继承：如果图层组包含带透明度的图层（如0.5透明度的遮罩），导出时会保留透明度，但PNG-24格式需确保“导出设置”中勾选“透明度”。我在某次导出中忘记勾选，结果所有半透明按钮导出为纯黑，前端哭着找我重做。
- 路径导出陷阱：矢量路径（钢笔工具绘制）不能直接导出，必须右键→“建立选区”→“新建图层”，再对该图层命名导出。否则PS报错“无法导出空图层”。
3.3 脚本批量切图：应对“改50张图”的终极方案
当运营半夜发来消息：“明天上线，把所有Banner图换成新活动图，原尺寸，格式WebP，质量80”，手动操作等于通宵。这时PS脚本（.jsx）就是救命稻草。我常用的是开源脚本“Export Layers to Files”，但它需要改造才能适配真实需求。
脚本改造实录：
- 下载原始脚本：GitHub搜索“photoshop export layers jsx”，下载
ExportLayers.jsx。 - 修改导出参数：用记事本打开脚本，找到
var exportOptions = new ExportOptionsSaveForWeb();段落，插入以下代码：
exportOptions.format = SaveDocumentType.WEBPLAY; // WebP格式 exportOptions.quality = 80; // 质量80 exportOptions.transparency = true; // 保留透明 exportOptions.includeProfile = false; // 不嵌入色彩配置文件- 添加文件名过滤：在导出循环部分加入条件判断，只导出含特定前缀的图层：
if (layer.name.indexOf("banner_") === 0) { // 只导出banner_开头的图层 layer.visible = true; // 执行导出... } else { layer.visible = false; // 隐藏其他图层避免干扰 }- 运行脚本：菜单栏“文件→脚本→浏览”，选择修改后的jsx文件。PS会自动遍历所有图层，匹配
banner_前缀，导出为WebP。
实操心得：脚本运行前务必备份PSD！曾有同事误删脚本里的
layer.visible = false，导致所有图层同时导出，生成2000+个文件塞爆硬盘。现在我的标准流程是：先新建图层组“EXPORT_TEMP”，把要导出的图层拖进去，脚本只扫描该组内图层，彻底规避风险。
4. 实战全流程复盘：从PSD搭建到交付包验收的12个关键节点
用一个真实案例收束所有知识点：为某银行App设计“理财频道”页面，需交付iOS/Android/H5三端资源。整个流程暴露了切图中90%的典型问题，我把关键节点拆解如下：
4.1 PSD结构设计阶段（决定80%切图质量）
- 画布尺寸：创建375×812px（iPhone SE @1x）画布，所有元素按此基准绘制。
- 图层分组逻辑：
├─ [BG] background（纯色背景，无导出）├─ [ICO] icons（所有图标图层，命名ico_arrow_back@2x.png）├─ [TXT] texts（文字图层，栅格化后命名txt_title_main@2x.png）├─ [BTN] buttons（按钮组，含normal/pressed/disabled状态）└─ [IMG] images（商品图，用智能对象包裹，方便批量替换） - 关键陷阱：按钮图层组内，
btn_submit_normal和btn_submit_pressed必须同尺寸（如200×60px），否则导出后CSS定位错乱。我曾因pressed态多画了2px阴影，导致开发写top: -2px强行对齐。
4.2 导出参数配置实战（每个数字都有意义）
| 参数项 | 推荐值 | 原理说明 | 翻车案例 |
|---|---|---|---|
| PNG-24透明度 | 勾选 | Alpha通道保留半透明信息 | 未勾选→按钮阴影消失 |
| JPG品质 | 80 | 平衡体积与画质，低于60出现明显块状噪点 | 设为50→Banner图边缘马赛克 |
| WebP损失质量 | 80 | WebP特有参数，80为临界点 | 设为90→体积比PNG大20% |
| 色彩配置文件 | 不嵌入 | 开发环境通常用sRGB，嵌入Adobe RGB导致偏色 | 嵌入后→H5页面颜色发灰 |
4.3 交付包验收清单（开发拒绝接收的5个理由）
交付前必须自查的硬性指标：
- 命名一致性：所有文件名不含空格、中文、特殊符号，
@2x必须小写，webp必须小写（WEBP会被某些CDN拒绝）。 - 尺寸精准度：用PS“信息面板”（F8）测量导出图尺寸，
btn_login@2x.png必须是400×120px（@1x基准200×60px）。 - 透明通道验证：用在线工具（如https://www.pngcheck.com）上传PNG，确认“Transparency: Yes”。
- 格式合规性：WebP文件用
file命令检查（Mac/Linux）或Hex编辑器查看文件头，必须以RIFF....WEBPVP8开头。 - 无冗余文件：删除PS自动生成的
_thumb.png缩略图、_backup.psd备份文件——曾有项目因交付包含300MB备份文件，被运维拒收。
最后分享个血泪经验：交付前用手机QQ邮箱发送压缩包，自己用安卓/iOS客户端下载解压，直接在相册里查看图片。如果发现某张图显示为灰色方块，一定是WebP格式不被该系统支持（如旧版安卓），立刻补发PNG备用包。真正的切图完成，不是PS弹出“导出成功”，而是开发在代码里写完background-image: url('btn_submit@2x.webp');后，页面加载瞬间按钮清晰呈现——那一刻，你才真正完成了从设计师到交付者的蜕变。
