今天和我们公司的前端对接发现，这才发现他们的切图方法不高效，所以才有了这篇文章。
ui在做图标的时候会给底部加一个切图区域的矩形框，这是为什么呢，第一方便ui做图标的时候有个参考范围，第二点就是为了前端切图的时候可以按照底部的矩形区域去切图，其实是为了方便了前端更好的切图（当然不用切图的前端就不用往下看了）；
例如下图所示，tab bar中每一个icon都底部都有一个隐藏的切图范围，ui一般保存psd的时候会将其隐藏掉，方便看效果图
如图所示如果icon都贴着边切的话，就会出现一个问题，tab bar这三个图标大小不一致，所以不方便前端书写代码。那么该怎么利用这个隐藏的切图范围呢？
1.首先切图当然是要先隐藏背景，如图示
2.将切图区域全部显示出来
3.将3个icon的切图范围选中，注意看右侧图层选中情况
4.点击【图层】-【新建基于图层的切片】
5.现在的话3个等大的切图就好了，这时候将红色的切图区域隐藏，点击【文件】-【导出】-【储存为web常用格式】即可
当然使用这种方法的话其实是没有@1x @2x @3x图的，当然安卓要切得尺寸更多一些，那么我再录一个cutman插件的切图方法吧，道理其实一样，都是需要一个切图区域，然后标记切图区域，然后隐藏自己的画的那个切图区域，切谁点击谁，ios或者Andriod，然后点击导出选中的图层即可导出@1x @2x @3x 和XXXHDPI 等图，如gif所示
原文：https://www.cnblogs.com/ddzzyy/p/12102700.html