写给那些需要自己用PS切图的前端们（pc端无线端通用）

今天和我们公司的前端对接发现，这才发现他们的切图方法不高效，所以才有了这篇文章。

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所示

标签：PS,切图,前端,pc,区域,ui,图层,隐藏
来源： https://blog.51cto.com/u_7605937/2707652