在本文中,我将使用@2x@3x符号。这些代表了视网膜桶iOS。一个很好的例子是应用程序的图标。
最初的iPhone,这将是60×60像素(@1x)。
对于iPhone4,它将翻倍,120×120像素(@2x)。现在,最新的设备动用三领土。
为iPhone6另外,图标将180×180(@3x)。在谈到@2x或@3x,我指的是使用像素尺寸的两倍或三倍。都应该成为清楚你读。
如今已经进去了一个在Retina视网膜分辨率的设计时代。普遍的共识是@2x或@3x。所以,我开始了我的快乐方式,设计@2x。Nexusone的设计将94:3比例,所以我的画布设置为2048×1536像素。在实践中创建几个屏幕后,我意识到这并不管用。让我们一起通过我发现的问题。
缩放因子
起初,这没什么大不了的。缩小至50%或33%,看你的设计在1:1左右。但与此同时,这有点可笑,对吗
你可以很快看到决议失控。显示设计的一角@1x@3x。为什么你要放大或缩小不断看到发生什么事了这也完全废墟pixel-snapping,这是最好的为100%。这是几乎不可能知道一个像素是否一致,当你放大在33%或50%!我只想说,我非常厌倦缩放,就像一个疯子一样把事情对齐像素级。
性能
这是一个大的。让我们使用一个平板电脑4:3比例作为一个例子。我设置了一个空白的PSD@1x(1024×768像素),另一个@2x(2048×1536)和第三个@3x(3072×2304)。然后我做了一些比较。
表显示的像素数量,大小@1x@3x空白PSDs的磁盘和内存。首先,我看着PSDs的像素数。@2xPSD有四倍的像素。@3x9倍。这直接影响内存的使用,它本身是由四倍和9倍!对于我们的空白PSD,这从2.25米到9米@2x,然后@3x20米。
最后但并非最不重要的,它还需要存储所有这些额外的像素。所以,你的文件大小增加。磁盘上的大小@2x上升了280%,和@3x上升了590%。现在,在我们的空白PSD这只是增加从60到358KB。但一旦你有一些严重的智能对象和层次,小心!让我们的例子的PSD100MB。@3x可能590MB。然后,这乘以20到30个文件在您的项目!
从性能的角度来看,很明显,在视网膜将花费你一些严重的内存,CPU和磁盘使用情况。
字体大小
这个问题很快变得明显当你@2x或@3x工作。假设您已经着手做一个文本框的字体设置为16个像素。但@2x这是32像素,@3x48像素!不理想,它是,必须不断地乘上两个或三个吗我不知道你,但是我可能没有数学常数。当我设计,我想知道16像素是16像素!
字体大小成为乘法的游戏时,在视网膜的规模。
整个像素
这是一个陷阱。当你使用的时候会发生什么1px在视网膜@2x吗你猜对了,它变成了0.5像素!和@3x情况将会更糟,0.33像素!所以,你也必须经常注意你的大小必须被2或3整除时在视网膜。另一个需要考虑的因素发挥作用,如果你曾经使用@2x一个奇怪的像素值。比方说你有一个盒子是33个像素宽,当转换回@1x构建,这变成了16.5像素!又一个人才流失与视网膜。
说明如何1px会从@1x@3x。
规格
这是我另一个问题出现在工作场所:设计师一直在@2x或@3x然后开始规范设计开发人员。这通常涉及记录填充,宽度,高度,字体大小等等,以确保设计建造。但是他们忘记了他们在决议的两倍或三倍。所以,可怜的老开发人员得到一个完整的规范,他们需要所有除以2或3!不是很好,是吗为什么让他们的生活更加困难
另一个选择是,设计师可以挽救一个新的PSD在50%或33%,然后规范。但Retina-land看上去就像一条单行道。通过这些眼镜很难看到。
好消息
别担心。所有的坏消息后,有好消息。在工作上从插画家出口Android图标,我发现密度独立像素(DP)的世界。你可以阅读一个大长解释Android开发者关于“支持多个屏幕”,或者我可以很快会让你崩溃。
基本上DP是@1x像素尺寸,或者在Android上,基线密度介质(MDPI)。密度独立像素1相同的物理像素160DPI屏幕上。转换是DP=像素÷(160DPI÷)。
让我们使用我们的平板电脑的例子显示的2048×1536像素和320DPI。运行通过上面的方程,我们得到1024DP的宽度,高度,768DP。这成为我们的基线的决议。我们还需要知道图像资产的比例因子。方程:比例因子=DP×(160DPI÷)。
使用1024DP的宽度和设备的320DPI,如果我们运行这个方程,我们得到一个比例因子为2。这意味着我们需要输出@2x资产显示在这个设备。它也很容易看到2048÷1024=2。所以,不要对方程压力了!
作为另一个例子,让我们来联系5。与它的分辨率为1920×1080像素和480DPI,DP单位工作是640×360。然后,比例因子作为@3x出来。所以,现在你知道你的DP维度和资产的规模因素。
的例子@1x@3xDP单位在不同的设备。一旦你有了DP维度,这些成为你PSD画布大小为72DPI。所以,这个谜的答案设计@1x或在迪拜。
其他设备不适合在这些桶那么好,但是你懂的。这里的重点是,你是减少基线DP单位,你知道出口规模图像。
“但我坚持@1x图片!”
正确的。和一个@1xPNG看起来可怕的视网膜设备上。我需要的是一种与DP@1x和工作单位,但出口@2x或@3x预览设备上。我的客户会接受。所以,用我的知识出口各种dpiAndroid图标,我不在,我同样的技术应用于Photoshop。
我的问题的解决方案是一个Photoshop脚本,出口任何帆布@2x或@3xPNG预览的设备。因此,一个人可以继续工作@1xDP和获得所有的性能优势,仍然得到高质量的屏幕。您的蛋糕和吃它,如果你愿意。
导出脚本
这里只简单介绍一下这个脚本是如何工作的:
脚本很容易修改。如果你想重命名的文件夹或文件名称,你只会改变变量如下图所示:
varfolderName="retina";
varextensionName="_2x.png";
安装
下载的脚本(邮政、4KB)或查看项目GitHub。
一旦下载并解压,脚本并粘贴到Photoshop的副本脚本文件夹:在Windows上,Adobe程序文件AdobePhotoshopCC2014预设脚本在Mac,AdobePhotoshopCC程序预设脚本。
请注意这将根据你的Photoshop和操作系统版本。
几乎就要完成了。重启Photoshop,脚本将会准备好。现在,任何时候你想出口一个PNG@2x或@3x,点击“文件”→“脚本”→“ExportDocument2xPNG”或“文件”→“脚本”→“ExportDocument3xPNG”:
进入“脚本”,然后单击“ExportDocument2xPNG”或“ExportDocument3xPNG。”你现在剩下视网膜图像@2x或@3x,准备好让在设备上。
提示
请记住几件事如果你选择这种方法。尽可能使用形状和向量。他们规模完美,图层样式。总是使用智能对象的位图。记住他们仍然需要@2x或@3x里面。
使用这种方法,Photoshop的发电机还好了。任何层或层组可以导出@2x@3x。,你就会知道他们是像素级。
在生产设计之后,我需要为客户端创建一个可点击的原型。我发现导出的png伟大的工作奇迹。奇迹允许你上传你的照片,Dropbox或通过自己的系统。一旦上传,您可以创建热点和链接到其他屏幕。然后,您可以查看设备上看到你的设计。其他奖金是我使用较少的带宽和Dropbox空间!视网膜PSDs会超重!
插画家
如果你使用Illustrator,您还可以在DP@1x和工作。确保你的文档是在72DPI设置为web。然后,您可以手动出口@2x和@3xPNG图像通过点击“文件”→“出口…”并选择“PNG。“点击”出口。“然后,使用“决议”下拉菜单,点击“其他”,并输入144PPI@2x或216PPI@3x。与Photoshop脚本,这也可以配置为一个点击!
素描
另一种选择是使用越来越受欢迎的应用程序素描。谈到所有设置和准备好@1x基于矢量的工作流。内置支持出口@2x和@3x层和切割。只是注意操作系统的要求。波西米亚编码,造物主是开发专门为Mac骄傲,没有计划支持Windows或Linux(根据其常见问题解答)。这是一个伟大的计划,如果您的工作流和业务支持。
感谢你的阅读
好吧,我希望这是对你使用。我当然有改善工作流程。现在我得到superlight和快速PSDs可以出口到视网膜规模设备上查看。和最好的部分是,我不再痴狂缩放或乘法、除法像素!