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