不知道你有没有遇到过这种情况——设计稿明明超惊艳，一上线却变得面目全非？就像精心准备的晚宴，端上桌却成了外卖盒饭。别急着甩锅给程序员，90%的问题可能出在切图这个环节。今天咱们就来聊聊这个让无数新手抓狂的"技术活"。
一、切图到底在切什么？
很多人以为切图就是把图片裁裁剪剪，其实这里头大有门道。必须切的元素主要有三类：代码搞不定的（比如金属质感的光效）、会变样子的（按钮的点击状态）、体积太大的（背景图）。举个栗子，微信那个发送按钮按下去会变浅色，这个状态图就得单独切出来。
这里有个新手常犯的错——把用户头像也切进去了。其实动态内容像用户上传的图片，根本不用提前切。就跟炒菜似的，食材要分清楚哪些是提前备好的，哪些是现用现切的。
二、工具选得好，下班回家早
| Photoshop | Figma | 在线工具 | |
|---|---|---|---|
| 上手难度 | ⭐⭐⭐ | ⭐⭐ | ⭐ |
| 团队协作 | 要传文件 | 实时同步 | 受限 |
| 特殊功能 | 智能对象 | 组件库 | 无需安装 |
| 刚入门建议先用Figma练手，它的切片工具就跟美图秀秀一样简单。要是公司还在用老旧的PS，记得把图层转成智能对象再切，这样缩放才不会糊——就像给图片上了个"抗摔保险"。 |
最近发现个偷懒神器，某在线工具能自动识别切图区域。不过实测下来，复杂图形还是得手动调整。工具终究是工具，关键还得看用工具的人。
三、手把手实战教学
假设要切个电商网站的导航栏，记住这四步曲：1、合并多余图层（别留几十个分散图层）；2、标清点击区域（程序员不是读心专家）；3、导出前做像素对齐（避免出现马赛克边缘）；4、命名按"模块_状态_尺寸"格式（比如nav_click_200x40）。
遇到过最崩溃的事是什么？有次切了50个图标，导出时发现全部存成了JPG，透明背景变成白底。所以啊，导出设置千万要检查三遍：PNG-24保透明，JPG选85%质量，GIF留给动画。
四、避坑指南（血泪教训）
Q：切图必须关设计软件？
错！用Figma的"快速导出"功能，边改边切两不误。上周赶项目时，我就是开着设计稿和程序员同步调试的。
Q：切出来的图为什么变形？
八成是没做"九宫格切法"。像那种会伸缩的长条按钮，得切成左中右三部分，中间部分允许拉伸。这个技巧做聊天框特别管用，微信那个输入框就是这么处理的。
Q：切图文件怎么管理？
按这个结构来准没错：
- 主文件夹用日期+项目名（20250411_双十一专题）
- 子文件夹分模块（header/main/footer）
- 版本号别忘加（v1.2_final真的不是最终版）
有次手滑删了PSD源文件，结果甲方要改个颜色，只能哭着重做。现在养成了个习惯——本地存一份，网盘传一份，甚至会在微信收藏里再备份个压缩包。
五、进阶玩家的骚操作
听说某大厂的设计师会往切图里埋彩蛋，比如在404页面切图里藏猫咪图案。虽然不建议新手这么玩，但这种思路值得学习——切图不仅是技术活，更是设计师与程序员的加密对话。
最近在琢磨自动化切图，用Python脚本批量处理icon。不过实测发现，机器切的图总差点意思，就像外卖再好吃也比不上现炒的锅气。或许这就是设计的魅力所在吧？
说实话，切图这门手艺，最重要的不是软件玩得多溜，而是懂得换位思考。下次切图时不妨多想一步：这个渐变背景能不能用CSS实现？那个动画效果是不是可以拆分成矢量元素？毕竟少切一张图，网站加载就能快0.5秒，用户体验可是实打实的提升。
