UI设计师高效切图6大步骤

做为UI设计师，需要标注设计稿和切图，本文和大家分享的就是高效切图的一些步骤，一起来看看吧，希望对大家ui设计有所帮助。

　　不用在意那么多设备

　　不管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、命名规则

　　建议采用以下方法命名：

　　1.公式：模块_类别_功能_状态.png 2.例子：new_icon_share_nor.png 3.说明：最新_图标_分享_正常.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设计师高效切图6大步骤相关推荐

android切图规范命名,ui设计师的切图与命名规范
一. 切图命名英文缩写的三个要求 1.较短的单词可通过去掉"元音"形成缩写 2. 较长的单词可取单词的头部几个字母形成缩写 3.还有一些特定的英文单词缩写二. 命名规则切图命名 ...
UI这样标注切图，再也不用加班了！
UI和前端之间的相(xiang)爱(hu)相(zhe)杀(mo),想必作为老互联网人都是有所耳闻的. 例1:UI设计了一个效果,想让前端完成,结果前端残忍地告诉你:做不了! 例2:来自前端的灵魂拷问: ...
android ps切图工具下载,移动APP设计之PS切图插件大汇总，值得收藏
移动APP界面设计切图和标注是一项必不可少的步骤.所以,设计界也涌现出了很多切图神器和标注神器. 包括25学堂之前介绍过的很多切图工具和切图教程. 今天25学堂的小编为大家精选了几个不错的移动APP设 ...
又双叒叕找不到图了?UI设计师独家分享年度十大高清图片网站
撸主: 小思敏儿岂安科技ui设计师自我介绍不知道说啥,就是妹子一枚,刚刚入职,在设计届属于晋级级别,热爱设计,我就是这样一个耿直的girl,哈哈哈-- 作为设计师寻找到高质量的图片素材是不可或 ...
APP UI设计及切图规范--2016
1.概述 1.1 编写目的该文档主要针对移动端开发的视觉设计和开发过程中的工作环节做统一的规划规范,是系统进入UI设计的前置文档. 1.2 读者对象项目实施工作组UI/UE设计人员. 2.色值规范 ...
蓝湖ui设计图直接转换html,蓝湖使用规范（用于管理UI及前端切图）
蓝湖使用规范一.蓝湖插件下载及安装二.团队项目建立流程 1.新建团队(横琴人寿) 2.新建项目在对应的团队下新建项目例如官微项目,官网项目,i保项目,哆来咪项目 3.新建分组在相应的项目下按 ...
UI设计规范技巧——切图格式
1.切图是什么? 在app切图中,与web中切图大致是一样的.开发同学在实现过程中,需要计算好每一个元素(包括文字,图片等)的位置,然后再调用我们切好的图进行填充. 2.切图的格式要求 3.iOS与A ...
前端UI：给切图仔升级新技能，学会 PS 动图制作
前言真让我有点意外,我今天也只是随手发了一张,自己喜欢的日常生活户型的PS合成图,引来了一波JYM的围观.没想到,这个效果图有这么多掘友们的喜爱,当时我也只是出于打卡的心态,发一发日常牢骚哈哈哈.有 ...
游戏ui切图,颜色通道_什么是ui通道设计，为什么如此重要
游戏ui切图,颜色通道 Our approach to interface design has changed dramatically since the rise of mobile devic ...

UI设计师高效切图6大步骤

UI设计师高效切图6大步骤相关推荐

最新文章

热门文章