UI界面设计 ·

小白自学APP切图:APP切图工具Cutterman的参数设置

其实25学堂分享切图的干货很多了,今天学堂君就给刚刚入门学习APP设计的小伙伴一些干粮。

优秀的切图工具推荐:Cutterman  

想要了解更多APP切图工具Cutterman的干货,大家可以在25学堂上搜索:Cutterman就可。

cutterman

Cutterman是一款运行在photoshop中的插件,能够自动将你需要的图层进行输出, 以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。

它支持各种各样的图片尺寸、格式、形态输出,方便你在pc、ios、Android等端上使用。

它不需要你记住一堆的语法、规则,纯点击操作,方便、快捷,易于上手。

 

如果你还不懂如果来设置这些切图的参数,今天看完这篇文章 ,你就会了!

 

第一部分:苹果iOS系统上的切图参数设置规范

无论你是以750*1334px的设计稿切图,还是以1242*2208px的设计稿切图,都可以按照下面的参数设置切图即可。

iOS切图参数设置:选择输出支持IOS平台的单倍图、双倍图,支持IPHONE6/6P尺寸比例。如下图所示的参数设置规范如下:

支持IOS平台的iphone6-和6+的切图设置

各位小白请记住:切图最终的目的是输出2套不同的切图文件。

一套是@2x的(对应iphone6  iphone7 以及iphone 5 5s)和一套@3x的(对应iphone 6 plus和iphone 7 plus  )。

另外几个点跟大家说明一下:

设置当前基准:意思是选择你当前的设计稿是750px的还是1242px的。

上图当中设置当前基准是 @3x

那么APP设计稿有可能是以1242px*2208px的设计稿。或者是1920*1080的设计稿(安卓转iOS)

 

APP切图工具Cutterman的迭代过程当中:又一个出柜模式。不知道大家有印象没?

新版已经没有出柜模式啦。

下面让我们了解下 Cutterman 出柜模式的用途。如下图:

Cutterman的“出柜模式”

 

Cutterman的“出柜模式”使用的场景是当前设计稿尺寸是1242px的时候。

假设当前设计稿尺寸是1242*2208px

那么问题来了!

1242与640的比例是1.94,大于1.5

如果我把当前的尺寸认为是@3X,那除以1.5之后的@2X尺寸就会偏大

所以cutterman的@2X图的尺寸是当前尺寸除以1.94,以保证在640的屏幕下是合理的。像这样:

124222

 

cutterman最初就是这样实现的……

直到有一天,一个小伙伴找上门来(就称呼A同学吧),告诉我这样不对
他的理由是这样的:

@3x的尺寸不应该是@2X的屏幕等比例放大,而应该是严格的1.5倍关系,这样的话,对于6plus而言,图就会偏小,但这是合理的,这样能够给内容流出更多的展示空间,符合6p的设计原则,而不是简单的把5的界面等比例放大到6的界面。

然后我被说服了……觉得这样是有道理的。  于是,cutterman的实现变成这样:

1242px

 

改成这种方案之后,cut不断地被问:怎么我切不出@3x的图了,@3x的图不对等等

 

因为你再也无法切出120px的图了……每到这个时候,我就需要给大家解释以上那么多内容,而且经常都是没有人能够理解。

然后我发现,大部分同学的理解,还是以@3X为当前设计稿尺寸,来进行缩小展示的,所以……cutterman现在的策略是这样:

124222

 

这样的策略基本就满足广大切图小伙伴的需要了~
不过,为了满足之前A同学的那种需求,cut君加入了一个开关,即是大家看到的“出柜模式”。

默认,该开关是关闭的,如果你认同A同学的理论,并且觉得它是正确的,你就打开出柜模式,进入出柜状态~~

这是一点点小插曲。 这回你应该明白   出柜模式的用途吧!其实两种都是可取的。如果你认同A同学的看法,就选择出柜模式。如果你认为是正常的缩写1。5倍,就不需要理会出柜模式。

 

第二部分:Android平台的切图参数设计规范

输出支持Android平台的各种分辨率大小图片,什么XXHPDI,XHDPI,HDPI啊之类的,通通自动化输出,为你节省出更多的时间陪小伙伴好好玩耍。

安卓设计稿的详细的切图参数设置如下:

安卓设计稿的详细的切图参数设置

 

目前最常见的安卓设计稿为720*1280的或者是1920*1080px的。

最后,25学堂的小编在跟小白们叮嘱一下:

设计 Android 应用的最佳实践

1. 画布大小定位 720 x 1280,72 dpi

2. 只使用偶数单位的尺寸,比如 96 px 的列表项高度,16 px 的边距,64 px 的图标边长

3. 只使用 24 pt,28 pt,36 pt 和 44 pt 的字体

4. 设计完成以后,所有尺寸的 px 值除以 2 作为 dp 数值交给工程师

5. 所有字体的 pt 值除以 2 作为 sp 数值交给工程师

6. 所有切图变成三份,分别是原始大小、缩小 1.5 倍,放大1.5 倍,分别作为 xhdpi,hdpi,xxhdpi的资源交给安卓工程师。

 

以上就是25学堂针对小白使用APP切图工具Cutterman当中的一些疑问做一些回答和解读。希望对各位小白有所帮助。