切图必备的3个高效技巧新手也能快速上手

刚接触切图的朋友，多半都有过这种体验：明明照着教程一步步点，导出来的图不是缺一块就是糊成马赛克，改来改去一晚上就没了。其实切图这事真没那么玄乎，问题往往出在几个最基础的环节上。今天就把我自己踩过坑之后总结的3个切图技巧拿出来说说，都是新手能直接用的，不用背快捷键，也不用啃厚教程，看完打开软件就能试。

第一招：先把选区弄干净，别让切图从一开始就跑偏

很多人切图慢，不是手速不行，是选区没弄对。最常见的毛病就是直接拿选框工具框一下就开始导，边缘多出来一两个像素自己都看不出来，放到页面上才发现对不齐。我的习惯是切图之前先放大到200%以上，沿着元素的边缘慢慢调，宁可多花十秒，也别回头返工十分钟。

还有个新手容易忽略的点：图层要选对。有时候你看着画面上是一个按钮，实际上它由三四个图层叠在一起，只选中最上面那层切出来的图就是残缺的。切图之前先在图层面板里点一遍，确认要导出的内容都在选中范围内，这一步能省掉后面很多麻烦。

另外，遇到带透明背景的图标，记得把背景图层先关掉再切图，不然导出来自带一块白底，放到深色页面上特别难看。这个坑我最早做切图的时候踩过好几次，后来养成习惯就好了。

第二招：导出格式和参数别乱选，切图清晰不臃肿全靠这一步

选区弄好了，接下来就是导出。这一步新手最容易犯的错就是所有图都导成同一种格式。其实切图导出是有讲究的：图标、logo这类颜色少、边缘规则的，用SVG或者PNG；照片、渐变背景这类颜色丰富的，用JPG更合适；要是做网页切图，小图标尽量走SVG，放大缩小都不糊。

PNG又分PNG-8和PNG-24，前者体积小但颜色会有损失，后者保留透明通道更完整。做切图的时候如果发现导出来的图标边缘发虚，多半是格式选错了，换成PNG-24再试一次基本就能解决。

还有导出倍率的问题。现在手机屏幕分辨率高，切图只导1倍图放到移动端就是糊的。通常做法是导2倍图甚至3倍图，然后在代码里用CSS控制显示尺寸。这一步刚开始会觉得麻烦，但习惯了就是顺手的事，切图质量能明显上一个台阶。

顺便提一句，导出之前把文件命名规范一下，比如btn-primary@2x.png这种，后面找图的时候能省不少时间。切图不只是导出来就完事，后续管理也算在里面。

第三招：批量切图用对方法，重复劳动能砍掉一大半

如果你一次要切几十个图标，一个一个导出真的会切到怀疑人生。这时候就该用批量切图的功能了。不管是PS的切片工具，还是Figma、Sketch里的批量导出，核心思路都是一样的：先把要切图的范围统一框好，命名规则设好，然后一次性导出。

我自己的做法是，做页面切图之前先花两分钟把图层按模块分好组，该合并的合并，该命名的命名，然后选中所有需要导出的图层，一次性设置导出参数。这样一轮下来，几十个切图几分钟就能搞定，比一个个点快太多了。

不过批量切图也有个坑：如果图层里混了不需要导出的隐藏图层，导出的时候可能会多出一堆没用的文件。所以批量操作之前先检查一遍图层可见性，把不需要的关掉。这个细节看起来小，但实际做切图的时候特别影响效率。

另外，批量导出之后建议随机抽几个图检查一下尺寸和清晰度，别导完就直接用。有时候参数设错了，整批图都有问题，早点发现比后面返工强。

说到底，切图这个事就是一层窗户纸，捅破了就发现没什么难的。选区弄干净、格式选对、批量处理用起来，这三步做到位，新手也能切得又快又好。别一上来就追求什么高级技巧，先把这几个基础动作练熟，后面遇到再复杂的切图需求也不慌。你要是刚开始学切图，今天就打开软件照着试一遍，比看十篇教程都管用。