讨论一下Cutterman的“出柜模式”

在苹果老板库克喊出“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

Comments

可乐橙

January 18, 2015 - 3:06 pm

虽然A同学的理论是对的，但你的出柜模式和他的理论似乎不一致。

如果填固定尺寸，那用不用出柜模式，结果都是正确的，问题出在不填固定尺寸的情况。

我是按750来设计的，不用出柜模式切，一切正常。原图尺寸直接就是@2x资源，放大1.5倍变成@3x资源。

我试着打开出柜模式切，发现不对了。比如我切一张120*120的图，得到的就是103*103和154*154，这两个尺寸都不对。

我又试着切了一张banner图，图片尺寸是750*300。理想情况，应该@2x是750*300，@3x是1125*450（虽然实际情况下要单独把这张@3x图做成1242*497）。但用出柜模式切，图片就变成了640*256和960*385。前一个尺寸是有意义的，那是iPhone5上用的尺寸，后一个尺寸就没意义了，5放大1.5倍并不是6plus。

所以我还是没明白，出柜模式到底是什么情况下用的，是不是在特定的设计稿尺寸下才有用？

其实我想说，你现在的普通模式才是A同学的理论。而在图片尺寸这点上，不会同时有两种正确的计算方法。



xiaoqiang

March 12, 2015 - 5:42 am

你的设计稿宽是750的是么？ 出柜模式仅仅是针对设计稿1242的尺寸，对于750的设计稿而言，只有一种规则，就是@2x是当前尺寸，@3x是当前的1.5倍。你再确认一下？



janelee

June 11, 2015 - 2:13 am

支持IP6+的@3x图策略如下 !

1. 检测当前设计稿的尺寸

2. 如果是640或者750，则认为当前是@2X尺寸，当前默认输出@2X，再放大1.5被输出@3X。（这种情况@3X图可能会变虚）

3. 如果当前设计稿是1242，则认为当前是@3X，会通过比例（即界面的1.5，1.9倍）换算计算出@2X尺寸。(@2X = 元素尺寸 x 640/当前设计稿尺寸)
针对第三条，我选择1.9倍切出来的图，2x和3x是这个1.9的倍数关系，但到1x和2x就不是2倍关系了



季静

June 25, 2015 - 2:38 pm

要是设计稿是 1080*1920 的。该如何切图 以适应 ios 和安卓。



Wal

June 28, 2015 - 1:59 pm

看了这个问题，需要先理下逻辑。6P+有两种屏幕显示方式，一种是标准的1242×2208;另一种是放大模式1125X2001,它的标准逻辑分辨率是414×736,就是x3的关系。6P的也有两种屏幕显示方式标准分辨率是750X1334，放大模式分辨率是640X1136,它的逻辑分辨率是375X667，是X2的关系。5S的分辨率是640X1136,它的逻辑分辨率是320X568。6P+的放大模式的分辨率（1125X2001）是6P（750X1334）的1.5倍等比适配，也就是说6P+的放大模式，从逻辑分辨率看是6P的三倍关系。

所谓放大模式，就是在标准模式下的元素像素呈现在稍低分辨率的显示上，自然元素占有的显示像素空间就大了。

根据以上的原则来看上面的切图问题，如果是以640X1136做的稿子，2倍没有问题，2倍适配6P标准模式会略小，3倍适配6P+两种模式都是略小。

如果是以750X1134做的稿子，2倍没有问题，放大模式程序上自动适配，3倍适配6P+放大模式也没有问题，但对于标准模式会略小，适配5s的2倍会略大。

如果是以1242X2208做的设计稿子，群主原来方案是，3倍标准没有问题，放大模式程序自动适配，2倍方案是完美适配5S，对于6P来讲，两种模式又明显偏小，后来经过A童鞋讨论后，方案是，2倍方案是完美适配5S，3倍对于原来的6P+，又偏小，像A说的“能够给内容流出更多的展示空间”，但对于两倍的6P还是略小，这让很多人已经做了最高适配，但是图片导出缺失略小的，不愿意。然后修改后的方案是，3倍标准没有问题，放大模式程序自动适配，2倍方案是适配6P，但是略大，对于2倍的5S适配也是略大。

最后结论是，如果以6P作为设计稿，上下兼容，如果以6P+作为设计稿，需要除以1.9适配5s，除以1.5适配6P，两者都是略大关系



xiaoqiang

July 2, 2015 - 10:51 am

不错，理解的很清晰！



keyson

June 30, 2015 - 11:17 am

1242的设计稿导出banner图，用出柜模式切，图片就变成了640*488（@2x）和960*732（@3x），明显不对啊



steve yang

July 13, 2015 - 9:55 am

我发现个比较好玩的事，

6plus的物理尺寸是1080 设计图是1242 那么如此，1242/1080= x /750 x=862.5

设，一个 120px x 120px 的图标 @2x=（120x（862.5/1242）） @2x=83.333333

正常的图标按不偷懒的切法，@3x=1.5@2x 120px的图标是 @2x =80

值已经相当接近了。



dyl

August 10, 2015 - 8:14 am

我切1242的图标的时候，还是给我自动放大了？。。



xiaoqiang

August 12, 2015 - 1:58 am

你的psd尺寸是1242的么？



可乐橙

August 11, 2015 - 7:41 am

原来出柜模式仅仅是针对设计稿1242的尺寸，明白啦。我确实是按750来设计的，难怪这点想不通。

整个系列的各产品都非常棒喔，继续支持！！~



小谯

September 1, 2015 - 2:51 am

您好，现在出现一个问题，我做的640版的，1.5倍、1.9倍、出柜，大小全部一样，都是1.5倍的。。。 这是怎么回事。。。



Chason

September 1, 2015 - 10:19 am

其实发现很多算法上不准确的问题

我的设计稿是1242的，现在只有出柜模式才能切出1x是320像素，但是这种模式下2x不管怎么切都不对。

其实理论上不管哪种模式下只要保证切出来的1x是320的，一般问题就不会特别大，像现在设计稿是1242的，但1.9模式下面的1x又是414明显就是不正确的

最后其实我想要的效果很简单，问下作者该怎么实现？：

1、设计稿是1242

2、切出的3x是1242

3、切出的2x是640或750

4、不管什么模式切出的1x都是320



zhu

September 6, 2015 - 5:46 am

想问一下，我使用5的尺寸做的，怎么做6p？只能放大1.5倍了么？有什么好办法么？我是新手，想入群，但是群已经满了



xiaoqiang

September 15, 2015 - 9:46 am

新开了一个群：231825176