优艾设计网

切图教程,分享一种高效切图方法

优艾设计网 https://www.uibq.com 2020-09-14 00:00 出处:网络 作者:duck3805946
作为UI设计师,过完稿和开发对接时,需要标注设计稿和切图,把标注切图文件给到开发。这个时候就犯难了,那么多尺寸怎么切图,iPhone就有8个版本,更别提安卓那一堆尺寸。今天这篇好文分享一个意想不到的切图方法,

切图教程,分享一种高效切图方法

这样做的目的:一方面,方便自己以后查找;另一方面,方便咱们的开发工程师查找文件,因为有时候是分工合作,需要第一时间找到对应的文件。

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%的比例而不是其他的?

提示:键盘也能翻页,试试"← →"键
0

精彩评论

暂无评论...
验证码 换一张
取 消