设计稿切图

一、切图工具：ps、markman

二、过程：
一般设计稿是psd格式，用ps拉线或画块切片，提取图片素材，待用。然后导出一张完整jpg设计稿，在markman上划分各种标注。
注意点：
1、要切的内容：有效果的字体或不常见的字体、图片（背景图而言，先将上层内容隐藏）。

2、图片导出格式：png用于色彩变化较小的图片，而jpg则用于色彩丰富的（保证视觉效果下，尽量压缩品质）。

3、不同的页面/模块建立不同的切图文件夹存放，方便引入。

4、命名规则：模块类别功能状态@n.png（@n代表几倍图，“”可以避免安卓不兼容“-”）

5、常用命名单词

image

6、屏幕大小都是双数值，切图资源尺寸必须为双数，否则会导致切图元素边缘模糊。

7、同类图片而言，尺寸要大小统一，手法：复制图层、确定选区。

8、图标切图输出应根据标准尺寸输出，如iPhone的2倍图和Plus版的3倍图。

9、可点击部件应当注意其点击区域不小于88px，人类舒适的触击范围需在7-9mm的大小。

10、可点击部件要把相关状态都切图输出，尽量把页面中会出现的各种状态展示出来，比如正常状态、点击状态。

三、切图工具扩展：
Tinypng：在线压缩工具。平衡压缩和画质。
Cutterman：PS插件。高效切图。

四、点九切图法：安卓；平铺切图：iOS。
作用：主要是为了适配多种多样的手机机型适配，这种方法可以将图片进行横向和竖向的随意拉伸，并且不会损坏图片效果。另一个重要的作用就是可以减少不必要的图片文件大小，极大提升页面加载速度。是安卓平台重要的切图方法。