切图教程新手快速掌握切图技巧

刚接触切图的朋友，是不是一打开设计稿就发懵？图层一大堆，不知道从哪下手，导出来的图片要么糊要么尺寸不对。其实切图没你想的那么难，说白了就是把设计稿里需要的元素单独抠出来，存成能用的图片格式。今天这篇切图教程不整虚的，全是我自己踩坑后总结的实操经验，看完你就能上手。

先选对工具，别在第一步浪费时间

很多人一上来就问用啥软件，其实常见就那几个。PS 最万能，图层、切片工具都成熟，适合做网页切图。Figma 现在做 UI 的多，切图直接导出，效率高。Sketch 是 Mac 专属，也顺手。你要是做游戏 UI 或者安卓切图，PS 加插件基本够用。我刚开始用 PS 的切片工具，切完老对不齐，后来发现是参考线没拉好。建议新手先把参考线拉准，再用切片工具框选，导出时选 PNG-24 或者 JPG，看你要不要透明底。别小看这一步，格式选错，后面返工更麻烦。

切图前先理清图层，别急着动手

拿到设计稿别直接切，先花两分钟看图层结构。把要切的元素单独编组，命名写清楚，比如 btn_ok、icon_search。这样导出时不会漏。我见过有人切完发现少了个图标，又回去翻图层，纯属折腾。还有一点，切图技巧里很关键的是判断哪些该切、哪些该用代码写。像纯色背景、简单边框，能用 CSS 实现就别切，省得图片太多拖慢加载。但复杂渐变、阴影、不规则图形，那就老老实实切出来。新手容易犯的错是啥都切，结果页面图片一大堆，加载慢还不好维护。

导出设置和常见坑，一次说清

导出这块有几个参数得注意。PNG 适合透明背景和图标，JPG 适合大图照片，GIF 现在用得少了。分辨率一般用 1x 和 2x，移动端要 3x。我刚开始做切图的时候，导出 1x 图放到手机上糊得没法看，后来才知道要做 2x 甚至 3x。还有命名规范，别用中文和空格，用英文加下划线，比如 icon_home@2x.png。这样前端拿到直接用，不用再改。另外，切图尺寸别随便改，设计稿标多少就切多少，缩放会失真。要是遇到切出来边缘有白边，检查一下是不是图层没对齐像素，或者导出时选了“消除锯齿”导致边缘发虚。

新手快速上手的练习方法

光看教程不动手等于白看。建议找个完整的设计稿，从头切一遍。先切图标，再切按钮，最后切背景图。切完自己拼个简单页面看看效果。遇到问题别急着问人，先搜一下，很多坑别人都踩过。我当初练切图就是拿一个 App 首页反复切了三遍，第一遍漏图，第二遍尺寸错，第三遍才顺。练多了就有手感了。还有，多看看别人切好的图，分析人家为啥这么切，命名怎么写的，慢慢你就知道切图技巧的核心其实是细心加规范。

最后说一句，切图是个熟练活，别指望看一篇教程就成高手。但按上面这些步骤走，至少能让你少走弯路，快速上手。工具选对，图层理清，导出参数设好，多练几遍，你也能切得又快又准。