阅读对象：UI设计师，前端开发工程师（web，安卓，ios），阅读时间：10分钟。
序
如何输出设计稿，交接资料是否齐全(切图、标注、规范、稿件版本号等)都决定了处于工作流下游的前端工程师们的工作顺利与否。
不像做纸质媒体那样，设计好了打印输出即可，设计稿仅仅扮演一个展示宣传的目的，作为电子媒体的设计人员，你的设计不光有展示作用，大多涉及到和用户的交互，所以，掌握精准的切图规则是输出你作品的重要一步。
一：锁定哪些地方需要切图：
要想输出一份相对精准的切图，首先要知道哪些元素是需要切图，哪些元素是代码可以实现的。比如文字、单色背景或是规律性渐变的背景、边框和一些标准的集合图形（圆，椭圆，矩形等）是不需要提供切图的。例如：一个带有圆角的搜索框只需要在标注中标好尺寸大小、圆角大小、描边粗细、色值即可，程序员会根据这些参数去复现它。
例1：
输入框.png
这张图，需要的切图有2个地方：1）锁 ， 2）五角星；其他代码可以实现。
要切的位置.png
例2：
某设计图头部.png
这张图：需要的切图有3个地方：icon（如下）
要切的位置.png
注意：这里再切图时候，要把背景层隐藏，也就是皮粉色这层。也就是尽量保证切出来的图是不受到其他视觉层的影响，纯净的状态，以后设计稿微调了，这个icon的背景色变化时候，这份切图依然是能用的，不用从新切。
二：怎么切
切图时候注意的几点
1：划分动静态：
从视觉上大致划分出哪些要切的以外后，还要从语义上进一步划分下，即找出哪些是一成不变的，哪些是动态变化的。举个列子：
移动端电商页局部.png
为了看的清晰，隐藏掉所有不涉及切图的文本
隐藏文本后.png
这时候，很明显会发现，页面上的所有视觉区域中这类商品图（内容填充型的图片）是会变化的，所以它虽然满足第一步中的切图条件，但是这里要对它放行不处理。
2： 尺寸
切图时候边界时候清晰不夹杂多余像素
3：偶数倍像素输出
移动端的屏幕大小都是双数值，所以如果是单数切图的话，手机系统就会自动拉伸切图，从而导致切图元素边缘模糊，尤其在小的icon上或是小的点击区域体现明显。这里附上网上找的一个例图：
单双倍切图的影响.png
这里为什么拿44px举例呢，顺便说下，这个尺寸是人为可点击的最为合适的范围，对应的物理可点击尺寸是7-9mm，对应到屏幕上的像素：1倍屏幕：44px，2倍屏幕：88px；
4：格式的选择：
一般所切视觉元素不是矩形的或是含有半透明状态的，保存时候格式为.png，支持透明。其他保存成.jpg即可。
5: 尽量降低图片质量。
在肉眼识别不出来的基础上降低图片大小，有时候在你切完图片后，文件大小比较大，比如一个小的icon可能几十KB，一个背景、装饰类图片大小几百KB快达到MB级别了，这个时候要稍微注意了，看看压一下。
ps:
这里也注意下是PC端设计还是移动端设计，大家都知道移动端的流量是很宝贵的，不要用户访问一下你家的
网站，小半个月的流量包就用完了，一个普通小页面就是几兆甚至十几兆的走，我想他上完这家网站，流量
报警了得哭。PC端的用户一般是宽带网络，一般流量上不是大问题，但是这个又影响到我们的服务器的带宽，这点在用户群小的站点上体现不明显，如果是淘宝等大的互联网站点上，由于你一个切图上一次不留神，多了一像素，导致百万级用户向我淘宝服务器请求这个页面上的这张切图时浪费了不少流量，这个值还是不可小觑的，所以综上，不管是图片质量还是切图时候边界时候清晰不夹杂多余像素都很重要。
三：补充说明
1： 图片分类不同，要求不同
按照交互规格来看，设计稿上的图片元素大致分为三类：装饰类，展示类，功能类。前两类基本都是静态的视觉元素，功能类基本都是和用户发生动作交互的视觉元素，比如按钮。处理这三类的视觉元素时候，原则略有不同，比如:装饰类的一般是背景以及一些规则或是不规则的图案底纹等，这类输出一般都是比较大的切图，但是又不会抢用户视觉的地方，所以在压缩时候做清晰度和文件大小上做取舍时候，质量上可以衰减许多都没关系的。展示类：一般是要给用一个清晰良好的呈现状态，压缩时候清晰度优先。功能类一般是和用户发生互动的点击、滑动、拖拽等区域，这个区域的一般是规则图形（圆角矩形居多），背景上一般都是单色或是规则的渐变，所以不需要切图，如果有背景图或是不规则的渐变（多个渐变层的叠加），那么此时需要整块区域切出来，清晰度优先。
2： 什么时候需要做雪碧图
雪碧图，又称精灵图，把所有的小图标拼接在一张图片中。
目的：
从工程角度看，减少了网络请求的次数，属于优化处理范畴。
何时出雪碧图：
当页面上出现icon大小级别的视觉元素并且出现数量大于2个的时候，就有必要考虑做成雪碧图，说白了就是把无数个小图做到一张大画布上。
按照什么规则出：
1：格式：png支持透明的格式
2：排布：从上到下依次排开，每张图间留有一定间距，5-10px左右。
使用雪碧图注意什么：
对于采用rem布局的项目，使用雪碧图时候，涉及到对应的缩放处理，这里不要使用：background：cover或是contain,他们此时是无法满足你需求的了。因为元素的背景其实是sprite图片的局部，contain和cover只能对整张图片进行缩放，没办法控制到局部的大小。这时我们要给background-size取具体值，其值为雪碧图的大小。
示例代码：
比如我们以iPhone5为例，此时dpr为2，页面scale为0.5，基准字体大小为100px。比如我们的元素为50 * 50px，sprite图片为200 * 50px，那css应该如下：
div{ width: 0.5rem; height: 0.5rem; background-image: url(sprite.png); background-size: 2rem 0.5rem;
}3: 设计稿尺寸说明：
一份尺寸合适的设计稿是切图的工作进行前的基础，那么选择几倍屏的设计稿呢。
市面上由于安卓手机的屏幕尺寸五花八门，我们不大会按照他们的尺寸，而苹果机相对正规许多，另外考虑苹果手机端retina屏（视网膜屏），为了能在视网膜屏下清晰显示，一般我们跟谁iPhone的机型尺寸，所以也有的我们约定成俗的“几倍屏的说法”；出一倍屏设计稿宽度就是：375，出二倍屏就是750，plus系列对应的dpr是3所以如果让设计在其机型上完美显示，设计稿出3倍屏。当然我们还要考虑安卓市场上大多数的dpr在什么等级上，为了折中，我们一般采用的是2倍屏，大体上能保证所有设备清晰显示。
4：切图管理
切好图，要有规范的命名，另外注意版本和对切图进行分组，方便查找。
切图管理.png
四：附文***
如果，阅读至此，应经可以上手工作了，那么下面的内容不建议阅读了。
由于一整张大的设计图内容太多，这里拿具体的设计图的局部，举了2个例子。
案例1：
设计稿局部.png
分析思路：
1：剥离出需要切图的部分：
首先动静分离，把会发生改变和一成不变的内容分出来，文字类都是灵活的，而且这些文字都是设计时候使用文字图层写上去的，不是钢笔等路径工具绘制，所以代码中按照你设计时候的文字参数可以复现。小icon和背景基本不会变动，不会变的视觉元素划到要切的范畴。
步骤1.png
2：先切哪：
这个看个人习惯，我习惯先重最后一层向上切，也就是先切背景层。
快速操作：
ps中：v-切换到自动选择工具，注意此时切换到选中图层档，按住ctrl+单击背景层。
image.png
然后，在右侧图层视口中，按住Alt键+单击小眼睛icon(图层可见性开关)，这样只显示当前层，然后开切，Firework切图也是类似过程。
image.png
切好后效果图：这里稍微注意下命名规范，便于后续使用好找，通常采用：页面-区域-功能角色 格式。假如这个是首页的banner区域，那么命名：home-ban-bg 或采用驼峰方式：homeBanBg。
页面-区域-功能.png
其实，到这里，细心发现，这里背景可以细化成两部分，上边带有图案和下边的纯色部分，所以我们只要切上半部分即可。
image.png
背景切好后，向上推，到了进度条这里，可以先把画面中小的元素（两只锁头和进度标头）隐藏，大概看下构成。
image.png
这里墨绿色部分加了内阴影的效果，所以前端想完全复现这种效果不大好做，涉及到出切图，由于其长度是动态变化的，所以考虑完全切下来不能解决问题。这种两边带有圆角，且不是纯色的圆角矩形，切图分三步：
1：左侧圆角切出
image.png
2：中间部分任意选择1像素
代码实现时候，会根据数值长度平铺这1px。即最小可重复单元。
image.png
3：右侧圆角切出
与步骤一同。
其实借助这个思路，刚才切的背景部分还可以这样切，遵循的原则是：切出的像素越少越好。这样在请求静态资源时候就能小点。
image.png
墨绿色部分切好后，隐藏掉，看下进度条的背景，带有纹理的，所以可以采用刚才切圆角矩形的规则，也可以整个切下来，因为它的长度是固定的。
整个切.png
注意：
为了保留其该有的透明部分。格式要为.png
格式问题.png
然后，把进度标头层放出来
image.png
隐藏与之发生层叠的两层进度条层，开切。
image.png
同理，接下来把其它小icon都切下来：
image.png
image.png
image.png
注意：尽量做到切下来的图，一像素不多也不少。
ok，到这里整个区域切图完毕。然后把可以整合的小icon做成一张精灵图。对于存在透明状态的icon,建议出2分精灵图，一份用于使用，一份加个背景色用于工程师查看。尤其是白色透彻icon，不做背景衬出来，干脆看不到在哪。
出2份精灵图.png
image.png
案例2：
分析一下这张设计稿，哪些地方需要切图。
image.png
按照语义大致分为3个区域：
image.png
每个区域单独分剥离出需要切图的元素。每个区域可按照图层顺序由底向上看
1号区：涉及到两处切图
看下背景层，有渐变效果，
image.png
看下渐变参数
image.png
这里有个渐变缩放参数：代码里是没办法实现的，所以复现出来的不能保证和设计稿一致，所以需要切图。
image.png
这里用代码实现了一下：
复现对比图.png
当然，对于一般用户不细心是看不出差别的，如果是活动类短期需求，或是要求不是特别严格的场景可以不提供切图，具体看项目。
另外，是banner底部的白色半透明波浪部分。
隐藏背景切出即可.gif
2号区：涉及到的切图分两类：
一类是每张扑克牌上都有的淡红色三角，一类是icon。
大致切图.png
这个三角形，使用代码也可以勉强实现，但是上的渐变不好调整，所以完全复现原设计需要切图。
image.png
注意格式的选择
格式对比图.jpg
3号区：都是文本信息，不涉及到切图。
小结：
本文尽量细致的讲解了如何切出一份符合工程要求的设计图，有阐述不清晰或不够准确的，欢迎指正，学习交流。按照以上陈列的规则，基本可以满足80-90%的切图场景。
作者：麦壳儿UIandFE2
链接：https://www.jianshu.com/p/e6fad90e6c82
随时随地看视频
