UI切图那点事儿

我的个人主页：http://www.zcool.com.cn/u/14498773

一直在想，APP有IOS和Android的区别，而这两者有根据手机屏幕的大小需要不同的尺寸规范，那么多的尺寸，一个个的去切图，可能我会累死吧，想想我在UI的路上还没走多远，可不能放弃，于是找了很多资料，也去问了一些大神，经过整理后知道了他们是如何进行轻松切图的。下面就将我整理的东西分享出来：

一、哪些元素需要切出来

完美的设计图终于出来了，但是设计图上面丰富的元素，究竟有哪些需要我们切图出来呢？

设计图中需要切出来的元素：

logo、图标、框、按钮、切换的小圆圈、标签等

注意：所有切图必须为偶数，一般情况下切片格式为png24,可平铺部件切图时，需要根据程序员哥哥的需要进行切图。

二、用什么工具切图

很期待知道到底是一个什么样的工具，居然这么神奇。

这个工具的名字叫做cutterman,它安装好之后长成这个样子的：

直接搜索cutterman就可以下载，或者直接去这里：http://www.cutterman.cn/

看了这个的教学操作教程，总结以下几点：

1.选中需要输出的图层就可以直接导出选中的图层；

2.多个元素需要一起输出可以勾选合并导出选中图层；

3.图标按钮输出时考虑到用户手指点击范围，可以设置固定尺寸进行输出；

4.可以画选区控制图标的位置；

5.遮罩切图保留选择的区域，方便关闭PSD后下次查看；

6.右上角的设置按钮点开后，可以修改DPI的数值。

三、关于切图的命名规范

非视网膜屏幕：xxx.png Retina屏幕：xxx @2X.png

欢迎页、背景等需要对不同的屏幕另外切图的文件名：

iphone5、5S：XXX-5 @2X.png

iphone6：XXX-6 @2X.png

iphone6Plus：XXX @3X.png

建议采用如下方法命名：

模块类别功能_状态.png

eg：searchbg.png home_btn_search_selected.png

切图文件最好也分类放好，如下：