13811522140 在线客服 人才招聘 PPT下载 返回顶部
公司动态141 技术分享30 行业动态27
首页 > 动态

Photoshop如何来设计制作高保真APP界面设计

2017/5/262925分享

最近,我有一个项目,我需要制作高保真屏幕界面设计稿。 我现在这些屏幕在设备上也产生一个可点击的原型。 他们需要像素级。 时间轴是紧(像往常一样),所以我用了我的互联网设计工具Photoshop。 使用它已经超过十年,而且它给我最快的高质量的输出。

01-iassessor-opt

在本文中,我将使用@2x @3x符号。 这些代表了视网膜桶iOS。 一个很好的例子是应用程序的图标。

最初的iPhone,这将是60×60像素(@1x)。

对于iPhone 4,它将翻倍,120×120像素(@2x)。 现在,最新的设备动用三领土。

为iPhone 6另外,图标将180×180(@3x)。 在谈到@2x或@3x,我指的是使用像素尺寸的两倍或三倍。 都应该成为清楚你读。

 

如今已经进去了一个在Retina 视网膜分辨率的设计时代。 普遍的共识是@2x或@3x。 所以,我开始了我的快乐方式,设计@2x。 Nexus one的设计将9 4:3比例,所以我的画布设置为2048×1536像素。 在实践中创建几个屏幕后,我意识到这并不管用。 让我们一起通过我发现的问题。

 

 

缩放因子

起初,这没什么大不了的。 缩小至50%或33%,看你的设计在1:1左右。 但与此同时,这有点可笑,对吗?

Shown is the corner of a design at @1x to @3x

 

你可以很快看到决议失控。 显示设计的一角@1x @3x。

为什么你要放大或缩小不断看到发生什么事了? 这也完全废墟 pixel-snapping ,这是最好的为100%。 这是几乎不可能知道一个像素是否一致,当你放大在33%或50% ! 我只想说,我非常厌倦缩放,就像一个疯子一样把事情对齐像素级。

性能

这是一个大的。 让我们使用一个平板电脑4:3比例作为一个例子。 我设置了一个空白的PSD @1x(1024×768像素),另一个@2x(2048×1536)和第三个@3x(3072×2304)。 然后我做了一些比较。

Table showing number of pixels, size on disk and memory for @1x – @3x blank PSD

 

表显示的像素数量,大小@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像素!

Font sizes become a game of multiplication when working at Retina

 

字体大小成为乘法的游戏时,在视网膜的规模。

整个像素

这是一个陷阱。 当你使用的时候会发生什么 1 px 在视网膜@2x吗? 你猜对了,它变成了0.5像素! 和@3x情况将会更糟,0.33像素! 所以,你也必须经常注意你的大小必须被2或3整除时在视网膜。 另一个需要考虑的因素发挥作用,如果你曾经使用@2x一个奇怪的像素值。 比方说你有一个盒子是33个像素宽,当转换回@1x构建,这变成了16.5像素! 又一个人才流失与视网膜。

Illustration of how 1px would fall back from @1x to @3x

 

说明如何 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维度和资产的规模因素。

Example of @1x to @3x DP units on various devices

 

的例子@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”:

Click File 

 

点击“文件”。
Go into Scripts and click ExportDocument2xPNG or 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可以出口到视网膜规模设备上查看。 和最好的部分是,我不再痴狂缩放或乘法、除法像素!

 

在线咨询留言咨询
  • 园区物业服务的新标...

    鸿睿思博与经开集团联手打造移动端的物业服务平台 &n ……

  • 鸿睿思博团队打造直...

    2016年12月16日,“红聚映”正式上线,从模式上超越了传 ……

  • 热烈祝贺鸿睿思博与...

    北京鸿睿思博科技有限公司与新洲康之源(北京)商贸有限公司达成项 ……

  • 浅谈APP设计师应...

    从字面意义来分析什么是创造力? 第一,创造力是人类进行信息处理的基本活动; 第二 ……

  • 移动APP创业公司...

    中国有句古话,千里之行始于足下。不光在工作中,在我们的日常生活中,也会经常遇到这样的 ……

  • Photoshop...

    最近,我有一个项目,我需要制作高保真屏幕界面设计稿。 我现在这些屏幕在设备上也产生一 ……

  • 优秀的APP界面设...

    今天鸿睿思博跟大家分享几个非常漂亮的运动类APP设计作品。这些移动APP界面设计都是来源 ……

  • 鸿睿思博与新浪网达...

    新浪网牵手鸿睿思博开发app移动应用 国内著名的互联网公司-新浪 ……

  • 鸿睿思博与中国网球...

    鸿睿思博与网球天下(北京)信息科技有限公司达成项目开发合作,开 ……

  • 五个国外优秀的HT...

    作为下一代网页开发语言,HTML5加入中众多的语义化标签,例如 video、audio、sectio ……

© 北京鸿睿思博科技有限公司 all right reserved 版权所有 京公网安备11010502030025号 京ICP备11017857号