讨论一下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的博客

(0)

相关推荐

  • 5.01平刷与降级不报错教程,不用T出恢复模式

    我发现用红雪之类的要T出恢复模式,刷好后难免有时问题,不是Face time用不了就是推送有问题。 网上找了半天教程终于找到没报错之类的刷机方法。就是用iFaith-v1.4.2自制固件来刷,同用iF ...

  • iPhone踢出iTunes恢复模式的几种方法

    操作方法 01 iOS用户在降级过程中有时候会陷入恢复模式而不能绕出. 首先要区分恢复模式与DFU模式的区别.两者的不同在于是否启动了iBoot.iBoot是iOS设备的启动加载器,DFU模式不会启动 ...

  • tplink TL-WR700N设置指南(一) AP模式

    TL-WR700N支持AP(无线接入点)、Client(无线客户端)、Repeater(无线中继)、Bridge(无线桥接)、Router(无线路由)五种工作模式。这篇文章我们介绍AP模式的设置方法。 ...

  • TP-LINK TL-WR700N设置指南-Client模式图文设置方法

    在这种工作模式下我们的TL-WR700N相当于无线网卡。对于主无线路由器来说只是一个客户端,其基本使用结构如下图所示: 在此结构中两台无线设备起着不同的作用,担当不同角色。无线设备A是向上连接宽带线路 ...

  • TL-WR703N设置指南(三) 无线AP模式 接入点模式(Access Point)

    首先将TL-WR703N与前端有线局域网连接,设备发出无线信号实现无线覆盖,可以满足家庭及中小企业无线扩展接入。 下面我们介绍TL-WR703N的无线AP模式的配置方法。 TL-WR703N的配置 步 ...

  • 必应Bing输入法V模式中译英的图文步骤

    在之前的必应输入法教程中,我们大家讲解了一些必应输入法V模式的使用方法,很多网友都觉得非常实用.而一些心细的网友在使用必应输入法V模式的时候发现,V模式还可以实现中文翻译为英文的功能.那么,必应输入法 ...

  • Win10飞行模式是什么?

    什么是 Windows 10 飞行模式?用户如何打开或关闭 Windows 10 中的飞行模式呢?如果飞行模式开关被卡住.变灰或不工作时该怎么办呢?下面我们就来讨论下. 飞行模式简单来说就是可以控制用 ...

  • 七彩虹主板通过设置bios里的硬盘模式避免经常出现蓝屏的图文教程

    七彩虹主板如何设置硬盘模式?我们平时使用u盘装系统时,都会涉及到bios设置硬盘模式,下面我们的小编就给大家带来有关七彩虹设置硬盘模式的bios教程,有兴趣的朋友一起来学习吧. 1.打开电脑,当屏幕上 ...

  • 网易云音乐选什么视频解码模式?

    网易云音乐中可以设置解码模式,该怎么设置呢?下面我们就来看看详细的教程. 1.打开手机找到并点击网易云音乐APP 2.来到下一个界面,我们点击右上角的三杠标志 3.接着弹出下一个界面,我们点击下方[设 ...