作为UI设计师，过完稿和开发对接时，需要标注设计稿和切图，把标注切图文件给到开发。这个时候就犯难了，那么多尺寸怎么切图，iPhone就有8个版本，更别提安卓那一堆尺寸。今天这篇好文分享一个意想不到的切图方法，帮你高效切图。
不管iOS和Android手机型号有多少，只要我们了解它的屏幕分辨率之后就好办了。
有人会发现一个问题，6S、6S plus的尺寸呢？因为他们的分辨率和6、6 plus尺寸一致的。
从上图可以看出不同分辨率对应不同的倍率，这样的话我们适配的时候就知道怎么切图了，@2x表示两倍图，@3x表示三倍图；以上的那些尺寸图，重点看这张图就可以同时适配iOS和Android的切图了。
工欲善其事，必先利其器
现在PhotoshopCC2015已经出了切图就更方便了，但是对于电脑的配置要求比较高，不然卡死，土豪就不用担心，随便安装，对于电脑配置比较低的可以这样干，作图的时候用CS6，文件在这里面做好之后，只需要启动CC2014或者CC2015进行切图操作就可以了，我现在就是这么干的，毕竟高配置的电脑成本比较高。
现在开始来捣鼓CC2014或者CC2015吧。
1、调出首选项Command（Ctrl）+k，勾选启用生成器，默认是不够选的。
2、文件-生成-图像资源，这个是后期的时候用的比较多的一个选项。
切图要点
1、不同的模块建立不同的切图文件夹存放。
这样做的目的：一方面，方便自己以后查找；另一方面，方便咱们的开发工程师查找文件，因为有时候是分工合作，需要第一时间找到对应的文件。
2、命名规则
建议采用以下方法命名：
公式：模块_类别_功能_状态.png
例子：new_icon_share_nor.png
说明：最新_图标_分享_正常.png
备注：2倍图和3倍图的时候需要在后面加2x、3x，以便明确这是几倍图，比如：new_icon_share_nor@2x.png new_icon_share_nor@3x.png；命名的下划线一定要用“_”这个不能用“—”这个，在安卓上面不支持，并且使用这个符号也不是很规范。.png绝对不能丢，因为CC需要这个后缀来进行切图的输出，没有的话就输出不了。
3、常用命名单词
4、切图文件大小必须是偶数，格式为PNG-24。
5、iPhone的3倍图怎么切？
如图所示，左边是需要切的icon，右边是命名，@2x图和@3x图，从图中可以看到有一个红框，刚开始肯定会纳闷，@2x图和@3x图唯一的区别就是前面多了百分比150%，后缀变成了@3x，命名没变，为什么是150%的比例而不是其他的？
这是由iPhone6和iPhone6plus的屏幕尺寸比得来的，750/1080≈1334/1920≈2/3，因为iPhone5/s与iPhone6的屏幕分辨率是一致的，都是326ppi，所以它们用的是一套图，也就是@2x图，6和6plus的屏幕宽高比是2/3，当5/6使用@2x图的时候，6plus使用的@3x的图，也就是5/6的图片资源宽高的各1.5倍，换算成百分比刚好就是150%。
6、切图尺寸大小怎么统一？
这是一个坑，并且还是亲自被埋过，埋得死死的，然后才爬起来的，当时也是查资料，来回试了好几次才找到方法，刚开始我在做的时候就纳闷，为嘛我的切图切出来大小不一样，大的大，小的小，还有一些乱七八糟的尺寸。
怎么处理的呢？在上面的第五点中可以看出，命名截图的旁边有个黑色的东西，那是啥？有人想到了，那是蒙板，不错，那就是蒙板，使用蒙板就可以解决掉了尺寸大小不一致的问题了，是不是很简单，虽然简单，但是，这个坑没踩过，你是记不住的，也不知道怎么处理，下面来看看具体怎么做。
这个切图的尺寸是140*140px的，我在做的时候是用矩形选取框画了这么大的区域，让切图文件居中对齐，拉参考线，这个时候的图层是图1的样式，然后，点击添加图层蒙板（图2），图层变成了图3，多了一个图层蒙板，蒙板里面白色是高亮的，是要保留的区域，黑色的部分就是去掉的部分（去黑留白），白色区域的大小决定你的切图文件的大小，这样就解决了切图文件大小不统一的问题。
注意事项：整个过程中不要取消选区，不要误触了Ctrl（command）+D。
输出
这个时候，就开始输出了，因为咱们的准备工作都已经弄完了，下面就需要用到CC2014或CC2015的图像生成器了，前面的利其器的部分的增效工具里面的启用生成器一定要打勾，然后就可以直接操作，文件>生成>图像资源，然后你会看到，切图文件的旁边多了一个文件夹，文件夹的名称一般是“文件名-assets”，里面就是你的切图文件了。
安卓的呢？？？
莫急，安卓的其实已经出来了，咱们只需要把iOS的@2x的图拷贝一份，然后建个文件夹命名为android，拷贝进去，去掉命名后面的@2x就可以了，有人会问，就这样？
还记得上面提到的5/5s、6/6s的屏幕分辨率是326ppi吧？而，安卓的320dpi分辨率对应下的，1dp=2px，尺寸是720*1280，他们的分辨率是接近的，那么咱们直接就可以共用@2x的图给安卓使用，不过需要去掉后面的@2x，并且只需要提供一套切图就可以了，至于其他的安卓尺寸，就交给安卓开发工程师解决了，他们会使用点九的方式进行适配。
不过，需要注意一下的是，点九是有限制的，一般适用于button、对话框、背景这样的地方，不规则的icon在应用的时候。
如果在大屏里面有虚边的情况，需要切大图给到开发进行替换；当然，你也可以用Cutterman进行输出切图，不过命名后面需要去掉.png，看个人的习惯选择输出软件。
移动UI设计切图是UI设计师最重要的设计输出物，切图资源输出是否规范直接影响到工程师对设计效果的还原度。
设计师的切图输出物是是体现一个设计师专业水准的重要标准，同时也是设计师表达自己对设计态度的最有力的语言。
合适、精准的切图可以最大限度的还原设计图，起到事半功倍的效果。如何输出具有全局把控和细节专注的高段位切图，应该是所有设计师一直需要追求的能力。
设计切图的原则
设计切图输出的目的是跟下游的工程师团队协同工作，那么在团队协作过程中首先应该保证切图输出能够满足工程师设计效果图的高保真还原的需求。其次切图输出应该尽可能的降低工程师的开发工作量，避免因切图输出而导致的不必要的工作量。最后输出的切图应当尽可能的压缩大小，以降低APP的总大小，提升用户使用时的加载速度。所以切图输出应当做到切图精准、便与协同和压缩大小。
1.切图资源尺寸必须为双数
众所周知智能手机的屏幕大小都是双数值，比如iphone 7的屏幕分辨率是750*1334px。切图资源尺寸必须为双数是为了保证切图资源在工程师开发时是高清显示。
因为1px是智能手机能够识别的最小单位，换句话说就是1像素不能在智能手机被分为两份。所以如果是单数切图的话手机系统就会自动拉伸切图从而导致切图元素边缘模糊，进而造成开发出来的APP界面效果与原设计效果差距甚远。
2.图标切图输出应根据标准尺寸输出并且考虑到手机适配（主要是iPhone 6plus的适配）
在切图资源输出中图标切图输出是至关重要的部分。
因为在开发中由于各机型的屏幕分辨率不同，需要针对一些大屏机型进行适配。为了适配大分辨率手机（例如iphone 7plus）图标在切图的时候需要输出@2x和@3x的切图，其中@2x的切图可以满足双平台大部分机型的适配要求，@3x是用来适配iphone手机的各种plus版本的手机（后边会有文章专门讲解关于适配的问题）。@3x是@2x尺寸的1.5倍，例如一个图标切图@2x尺寸是44px，那么@3x尺寸是66px。
3.为了提升APP使用速度，尽量降低图片文件大小
在切图资源输出中图标切图输出是很重要的部分，比如新手引导页、启动页面、默认图、广告图等。图片切图一般情况下文件大小都是相对较大，不利于用户在使用app过程中加载页面。因此图片切图要尽量压缩图片文件的大小（文加压缩的方法在文章后面有详细讲解）。
4.可点击部件应当注意其点击区域不小于88px
44px的点击区域数值是在iphone 3 （320×480px）普通显示屏下制定出来的，在手机分辨率大幅提升的现在，这个数据自然要与时俱进。
在iphone7 （750*1334px）的Retina 显示屏下44px点击区域就变为了88px。
但无论是320*480px尺寸下的44px还是在750*1334px尺寸下的88px，换算成物理尺寸后大致是在7mm-9mm之间。早在人机工程学的研究中曾得出结论，认为人类舒适的触击范围需在7-9mm的大小。
所以在ios官方的空间尺寸也经常出现88px的数值，比如菜单栏的高度便是88px。
5.可点击部件要把相关状态都切图输出，比如正常状态、点击状态。
在切图过程中不仅要输出正常状态的切图，更要注意不要遗漏其他状态的切图。
这个也是设计师经常会出现的失误，比如在按钮切图的过程中可能会忽略点击切图的状态。
所以设计师在做设计图是最好尽量把页面中会出现的各种状态展示出来，避免后期切图的时候遗漏状态。
切图输出类型
1.桌面图标切图输出
app的桌面图标会被运用在很多不同的地方展示，比如手机桌面、APP store、手机的设置列表，所以app桌面图标需要很多个不同尺寸的切图输出。
两个平台对相应桌面图标设计输出尺寸也不尽相同，在输出的时候要把双平台的这些尺寸全部输出切图。桌面图标切图只需要提供直角的图标切图即可，手机系统会自动生成圆角效果。
2.系统图标切图输出
一套图适配双平台：
ios平台（iphone 6plus版本除外）和安卓平台公用44*44px切图素材，即可实现一套切图适配两个平台的开发。
适配大屏幕：
为了适配iphone 6plus、iphone 7plus单独切一套比原有44*44px切图大1.5倍的切图，即66*66px大小的切图。(UI设计的适配问题会在后边单独的文章中详细讲解）
3.图片类切图输出
图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。
同一类型的图片切图一般要保持同样的大小尺寸以便于工程师开发使用。另外一般这些切图的文件较大在切图过程中需要控制切图文件的大小。（后边文章会详细讲解如何压缩切图大小的方法）
全屏切图类
局部切图类
空白页提示案例图
4.动效元素切图输出
动效元素切图一般是指在app中加载动效所需要的切图元素，比如qq的下拉加载动效就是由若干张切图连续播放形成的动画效果。
这些图片按照序号排序播放我们页把他们叫做序列切图。序列切图是在做UI设计的过程中必然会遇到的问题，这种切图要求要保证动效播放时的流畅自然，是需要设计师仔细斟酌的。
序列图切图
序列图实现效果
5.可拉伸元素切图输出
可拉伸元素一般是指按钮、输入框等切图过程中可以对切图进行瘦身压缩的元素。
这些元素通过瘦身压缩可以极大地见效图片的大小提升用户在使用app中的加载速度。在ios中这种切图方式叫做平铺切图，在安卓中这种切图方式叫做点九切图法。
横向拉伸切图
竖向拉伸切图
6.无需切图的部分
再设计切图输出中很多元素是不需要输出的，直接使用系统原生的设计元素修改参数即可。
作为设计师需要知道哪些元素是需要切图，哪些元素是使用系统自带的避免不必要的切图。
比如文字、卡片背景、线条和一些标准的集合图形是不需要提供切图的。例如搜索框只需要在标注中表明尺寸大小、圆角大小、描边粗细、色值即可，工程师会根据设计效果通过代码实现这种效果。
降低切图大小的方法
1.点九切图法
点九切图是安卓平台独有的图片处理方式，因为文件扩展名问.png所以被称为点九切图法。
点九切图的作用主要是为了适配安卓多种多样的手机机型适配，这种方法可以将图片进行横向和竖向的随意拉伸，并且不会损坏图片效果。
另一个重要的作用就是可以减少不必要的图片文件大小，极大提升页面加载速度。是安卓平台重要的切图方法。
制作点九的软件是“DRAW9PATCH"可以很方便的制作点九图并且可以预览切图后的开发效果十分方便。设计师的话也可以在Ps中用铅笔工具绘制点就图。
案例示意：
横向拉伸只需在可拉伸区域内做黑色标记即可，外围投影标记黑色线即可
横向竖向拉伸只需在可拉伸区域内做黑色标记即可，外围投影标记黑色线即可
2.在线压缩图片工具“Tinypng”
利用“Tinypng”智能png和jpg在线压缩工具，将较大的图片切图在不影响图片质量的情况下压缩。
Tinypng在线压缩工具可以在图片质量和文件大小上找到一个完美的平衡，基本不会降低图片视觉质量但却会极大的压缩图片切图大小。
Tinypng是非常值得推荐的图片压缩利器，也是现在被运用最广广泛的在线压缩工具。
Tinypng网址： https://tinypng.com/
压缩图片效果范例：
一张透明png图片原大小57kb在经过压缩后变为15kb，图片大小直接减少74%，但是图片效果用肉眼基本分辨不出区别。不得不说Tinypng的智能压缩效果是如此神奇。
使用方法简述：
1.在红色框内点击去本地选择你想要压缩的图片文件，每次最多上传20张图片，每张图片总大小不超过5mb
2.点击红框内的下载按钮下载单个已经压缩过的图片，如果你有上传多张图片你可以选择点击全部下载按钮一次性下载所有压缩的图片。在下方现实的是本次压缩的大小占比，你就可以很明确的知道它的作用了。
3.恭喜你你已经完成压缩了
切图神器Cutterman介绍
Cutterman是现在最主流的设计师切图利器，能够自动将你需要的切图进行输出。极大的减轻了设计师的工作量，提升了切图效率。
它支持各种图片格式，尺寸，形态输出， 兼容安卓，iOS,WEB各种系统的一键输出。以下是Cutterman的使用方法简介。
Cutterman下载网址： http://uicool123.com/home/nav?id=6
1.一键切图，真正解放双手
Cutterman能够让你只需要点击一个按钮，就自动输出你需要的各种各样的图片，快到没有朋友！
2.支持IOS平台
输出支持IOS平台的单倍图、双倍图，支持IPHONE6/6P尺寸比例。
3.支持Android平台
输出支持Android平台的各种分辨率大小图片，什么XXHPDI，XHDPI，HDPI啊之类的，通通自动化输出，为你节省出更多的时间陪小伙伴好好玩耍。
4.支持各种图片格式输出
什么png、jpg、gif通通不在话下，还可以自己缩放、压缩大小呢。从此，就告别那个所谓的“存储为web所用格式”的功能啦~~
5.多个图层合并、单独输出
图层太多？木关系！可以多选嘛！支持选中多个图层合并输出，也可以逐一输出的哦，简直方便到爆！
6.固定尺寸输出
想要输出固定尺寸的ICON，多种姿势让你选择，秒秒钟的事情~~
那么今天就分享到这里了，希望对以上内容对你学UI设计有一定的帮助！
如果有需要系统学习UI设计，
点击下方查看课程介绍，
↓↓↓↓
网友评论