手机网站的设计与Photoshop。

最近,我有一个项目,我需要制作高保真屏幕平板电脑。 我现在这些屏幕在设备上也产生一个可点击的原型。 他们需要像素级。 时间轴是紧(像往常一样),所以我和我的互联网工具,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图片!”

正确的。 和一个@1x PNG看起来可怕的视网膜设备上。 我需要的是一种与DP @1x和工作单位,但出口@2x或@3x预览设备上。 我的客户会接受。 所以,用我的知识出口各种dpi Android图标, 我不在 ,我同样的技术应用于Photoshop。

我的问题的解决方案是一个Photoshop脚本,出口任何帆布@2x或@3x PNG预览的设备。 因此,一个人可以继续工作@1x DP和获得所有的性能优势,仍然得到高质量的屏幕。 您的蛋糕和吃它,如果你愿意。

导出脚本

这里只简单介绍一下这个脚本是如何工作的:

1. 你的画布大小的200%或300%。

2. 它会创建一个新文件夹命名 视网膜,你PSD保存。

3. 然后,它可以节省一个PNG < documentname> _2x.png或 < documentname> _3x.png。

4. 它还清理和清洗历史(“撤销”)。

5. 然后,它保存文档时如何在脚本运行。

脚本很容易修改。 如果你想重命名的文件夹或文件名称,你只会改变变量如下图所示:

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。
浏览地址：/news42/80442.html

成都网站建设公司_创新互联，为您提供App开发、企业网站制作、网站导航、微信小程序、云服务器、ChatGPT

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联