讨论一下Cutterman的“出柜模式”
小编:UI设计中,切图可是设计师重要的工作之一。大家还记得之前分享的切图神器Cutterman吗?今天就一起来看一下由Cutterman的博客分享的讨论一下Cutterman的“出柜模式”。主要是告诉大家cutterman是如何切@3X图的。不过,如果还没下载此神器的请前往下方“传送门”。(顺便给大家推荐一款做IOS APP时必备的PS插件。)
在苹果老板库克喊出“bigger than bigger”之后,后面的事情大家都知道了
iphone出了两款大屏机器之后,切图工作应该怎么办?
我到底是应该用640的图来做设计呢,还是750呢,还是1242呢?真TMD烦淫……
关于设计稿最佳尺寸相关的知识这里就不写了,网上相关文章很多
今天主要讨论的是,cutterman是如何切@3X图的
1. 假设当前设计稿是640的尺寸
那么cutterman会认为当前的图是@2X的尺寸,于是会将当前的图原封不动输出为name@2x.png,然后将当前图放大1.5倍输出name@3x.png。这个放大的过程中有可能导致图片变虚。
如下图:
2. 假设当前设计稿是750的尺寸
750作为iphone6的屏幕分辨率,其折算的结果是仍然归位@2X的比例,所以如果以该尺寸作图,切图的结果和上面是一样一样滴,不过图会稍大一些而已。
3. 假设当前设计稿尺寸是1242
那么问题来了!
1242与640的比例是1.94,大于1.5
如果我把当前的尺寸认为是@3X,那除以1.5之后的@2X尺寸就会偏大
所以cutterman的@2X图的尺寸是当前尺寸除以1.94,以保证在640的屏幕下是合理的。像这样:
cutterman最初就是这样实现的……
直到有一天,一个小伙伴找上门来(就称呼A同学吧),告诉我这样不对
他的理由是这样的:
@3x的尺寸不应该是@2X的屏幕等比例放大,而应该是严格的1.5倍关系,这样的话,对于6plus而言,图就会偏小,但这是合理的,这样能够给内容流出更多的展示空间,符合6p的设计原则,而不是简单的把5的界面等比例放大到6的界面
然后我被说服了……觉得这样是有道理的
于是,cutterman的实现变成这样:
改成这种方案之后,cut不断地被问:
怎么我切不出@3x的图了,@3x的图不对等等
因为你再也无法切出120px的图了……每到这个时候,我就需要给大家解释以上那么多内容,而且经常都是没有人能够理解。
然后我发现,大部分同学的理解,还是以@3X为当前设计稿尺寸,来进行缩小展示的,所以……cutterman现在的策略是这样:
这样的策略基本就满足广大切图小伙伴的需要了~
不过,为了满足之前A同学的那种需求,cut君加入了一个开关,即是大家看到的“出柜模式”
默认,该开关是关闭的,如果你认同A同学的理论,并且觉得它是正确的,你就打开出柜模式,进入出柜状态~~
————————— 邪恶的分割线 ——————————-
最后,我希望大家都看明白了……sigh
传送门:
一个好用的PHOTOSHOP切图插件(CutterMan插件下载)
做IOS APP 方便导出123倍图片素材(PS插件下载)
Cutterman的博客