近期,我有一个项目,我需要制作高保真屏幕平板电脑。 我目前这类屏幕在设施上也产生一个可点击的原型。 他们需要像素级。 时间轴是紧(像平常一样),所以我和我的网络工具,Photoshop。 我用它已经超越十年,而且它给我最快的优质的输出。
你是在“视网膜”决议在Photoshop设计吗? 假如答案是一定的,那样这篇文章是给你的。 我将指导你完成创建视网膜的原型是我面临的问题在平板设施上显示。 我将讲解办法的工作更容易,叫你更好的性能。 这是关于我的经验和Photoshop,但可以应用到插画家和其他软件。
这里有一些设计的平板电脑应用程序。
在本文中,我将用@2x @3x符号。 这类代表了视网膜桶iOS。 一个非常不错的例子是应用程序的图标。 刚开始的iPhone,这将是60×60像素(@1x)。 对于iPhone 4,它将翻倍,120×120像素(@2x)。 目前,最新的设施动用三领土。 为iPhone 6另外,图标将180×180(@3x)。 在谈到@2x或@3x,我指的是用像素尺寸的两倍或三倍。 都要成为了解你读。
目前,让大家进入这个平板电脑应用程序的设计。 像很多其他设计师,我被告知,需要设计一个在视网膜分辨率。 常见的共识是@2x或@3x。 所以,我开始了我的快乐方法,设计@2x。 Nexus one的设计将9 4: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的像素数。 @2x PSD有四倍的像素。 @3x 9倍。 这直接影响内存的用法,它本身是由四倍和9倍! 对于大家的空白PSD,这从2.25米到9米@2x,然后@3x 20米。
最后但并不是最无关紧要的,它还需要存储所有这类额外的像素。 所以,你的文件大小增加。 磁盘上的大小@2x上升了280%,和@3x上升了590%。 目前,在大家的空白PSD这只不过增加从60到358 KB。 但一旦你有一些紧急的智能对象和层次,小心! 让大家的例子的PSD 100 MB。@3x可能590 MB。然后,这乘以20到30个文件在你的项目!
从性能的角度来看,非常明显,在视网膜将花费你一些紧急的内存,CPU和磁盘用状况。
这个问题非常快变得明显当你@2x或@3x工作。 假设你已经着手做一个文本框的字体设置为16个像素。 但@2x这是32像素,@3x 48像素! 不理想,它是,需要不断地乘上两个或三个吗? 我不了解你,但我可能没数学常数。 当我设计,我想了解16像素是16像素!
字体大小成为乘法的游戏时,在视网膜的规模。
这是一个陷阱。 当你用的时候会发生什么1 px在视网膜@2x吗? 你猜对了,它变成了0.5像素! 和@3x状况将会更糟,0.33像素! 所以,你也需要常常注意你的大小需要被2或3整除时在视网膜。 另一个需要考虑的原因发挥用途,假如你过去用@2x一个奇怪的像素值。 比如你有一个盒子是33个像素宽,当转换回@1x构建,这变成了16.5像素! 又一个人才流失与视网膜。
说明怎么样1 px会从@1x @3x。
这是我另一个问题出目前工作场合:设计师一直在@2x或@3x然后开始规范设计开发职员。 这一般涉及记录填充,宽度,高度,字体大小等等,以确保设计建造。 但他们忘记了他们在决议的两倍或三倍。 所以,可怜的老开发职员得到一个完整的规范,他们需要所有除以2或3 ! 不怎么样,是吗? 为何让他们的生活愈加困难?
另一个选择是,设计师可以挽救一个新的PSD在50%或33%,然后规范。 但Retina-land看起来就像一条单行道。 通过这类眼镜非常难看到。
别担忧。 所有些坏消息后,有好消息。 在工作上从插画家出口Android图标,我发现密度独立像素(DP)的世界。 你可以阅读一个大长讲解Android开发者关于“支持多个屏幕”,或者我可以非常快会叫你崩溃。
基本上DP是@1x像素尺寸,或者在Android上,基线密度介质(MDPI)。 密度独立像素1相同的物理像素160 DPI屏幕上。 转换是DP =像素÷(160 DPI÷)。
让大家用大家的平板电脑的例子显示的2048×1536像素和320 DPI。 运行通过上面的方程,大家得到1024 DP的宽度,高度,768 DP。 这成为大家的基线的决议。 大家还需要了解图像资产的比率因子。 方程:比率因子= DP×(160 DPI÷)。
用1024 DP的宽度和设施的320 DPI,假如大家运行这个方程,大家得到一个比率因子为2。 这意味着大家需要输出@2x资产显示在这个设施。 它也比较容易看到2048÷1024 = 2。 所以,不要他们程重压了!
作为另一个例子,让大家来联系5。 与它的分辨率为1920×1080像素和480 DPI,DP单位工作是640×360。 然后,比率因子作为@3x出来。 所以,目前你了解你的DP维度和资产的规模原因。
的例子@1x @3x DP单位在不一样的设施。
一旦你有了DP维度,这类成为你PSD画布大小为72 DPI。 所以,这个谜的答案设计@1x或在迪拜。
其他设施不合适在这类桶那样好,但你懂的。 这里的重点是,你是降低基线DP单位,你了解出口规模图像。
正确的。 和一个@1x PNG看着可怕的视网膜设施上。 我需要的是一种与DP @1x和工作单位,但出口@2x或@3x预览设施上。 我的顾客会同意。 所以,用我的常识出口各种dpi Android图标,我不在,我同样的技术应用于Photoshop。
我的问题的解决方法是一个Photoshop脚本,出口任何帆布@2x或@3x PNG预览的设施。 因此,一个人可以继续工作@1x DP和获得所有些性能优势,仍然得到优质的屏幕。 你的蛋糕和吃它,假如你想。
这里只简单介绍一下这个脚本是怎么样工作的:
你的画布大小的200%或300%。
它会创建一个新文件夹命名视网膜,你PSD保存。
然后,它可以节省一个PNG _2x.png或 _3x.png。
它还清理和清洗历史(“撤销”)。
然后,它保存文档时怎么样在脚本运行。
脚本比较容易修改。 假如你想重命名的文件夹或文件名字,你只能改变变量如下图所示:
var scale = "200%";var folderName = "retina";var extensionName = "_2x.png";
下载的脚本(邮政、4 KB)或查询项目GitHub。
一旦下载并解压,脚本并粘贴到Photoshop的副本脚本文件夹:在Windows上,Adobe \ \程序文件\ Adobe Photoshop CC 2014 \ \预设\脚本在Mac,Adobe \ Photoshop CC \ \程序\ \预设\脚本。
请注意这将依据你的Photoshop和操作系统版本。
几乎就要完成了。 重启Photoshop,脚本将会筹备好。 目前,任何时候你想出口一个PNG @2x或@3x,点击“文件”→“脚本”→“Exportdocument2xPNG”或“文件”→“脚本”→“Exportdocument3xPNG”:
进入“脚本”,然后单击“Exportdocument2xPNG”或“Exportdocument3xPNG。”
你目前剩下视网膜图像@2x或@3x,筹备好让在设施上。
请记住几件事假如你选择这种办法。 尽量用形状和向量。 他们规模好,图层样式。 一直用智能对象的位图。 记住他们仍然需要@2x或@3x里面。
用这种办法,Photoshop的发电机还好了。 任何层或层组可以导出@2x @3x。 ,你就会了解他们是像素级。
在生产设计之后,我需要为推广客户端创建一个可点击的原型。 我发现导出的png伟大的工作奇迹。 奇迹允许你上传你的照片,Dropbox或通过我们的系统。 一旦上传,你可以创建热门和链接到其他屏幕。 然后,你可以查询设施上看到你的设计。 其他奖金是我用较少的带宽和Dropbox空间! 视网膜PSDs会超重!
假如你用Illustrator,你还可以在DP @1x和工作。 确保你的文档是在72 DPI设置为web。 然后,你可以手工出口@2x和@3x PNG图像通过点击“文件”→“出口…”并选择“PNG。 “点击”出口。 “然后,用“决议”下拉菜单,点击“其他”,并输入144 PPI@2x或216 PPI@3x。 与Photoshop脚本,这也可以配置为一个点击!
另一种选择是用愈加受青睐的应用程序素描。 谈到所有设置和筹备好@1x基于矢量的工作流。 内置支持出口@2x和@3x层和切割。 只不过注意操作系统的需要。 波西米亚编码,造物主是开发专门为Mac骄傲,没计划支持Windows或Linux(依据其容易见到问题解答)。 这是一个伟大的计划,假如你的工作流和业务支持。
好吧,我期望这是对你用。 我当然有改变工作步骤。 目前我得到superlight和迅速PSDs可以出口到视网膜规模设施上查询。 和最好的部分是,我不再痴狂缩放或乘法、除法像素!
网站名字手机网站的设计与Photoshop。
