对于图形专业人士来说，不仅要让他们的作品出现在印刷品中，而且还要放在网络和设备上，如iPhone，iPad，Android设备和Android平板电脑，这一点正变得越来越普遍。从表面上看，这可以被看作是一件“好事”，因为我们的工作出现在媒体上，扩展到数字屏幕。缺点是屏幕数量庞大，屏幕分辨率令人困惑。听到经验丰富的专业人士想知道在CMYK格式的300 dpi分辨率TIFF图像是常态时发生的事情并不少见。哦，过去的美好时光！
那些日子结束了。我们现在不得不面对这样一个事实，即200×200的图像在一个设备上可能看起来很好，但在另一个设备上显示四分之一大小而另一个设备上显示四分之三大小。这一切都归结为设备制造商正在进行的“Resolution Arms Race”，因为他们试图将更多的像素插入屏幕而不是竞争对手。
这将我们带到了我们所谓的“后缀的崛起”。后缀是那些东西 - @ 2x，@ 3x - 添加到图像的名称。例如，它们基本上将正确的图像放在正确的设备上。然后它变得更好。
我们的许多工作都涉及使用图标，随着平面设计运动的兴起，这些东西都是在Illustrator和Sketch等矢量绘图应用程序中创建的。问题是设备根本无法呈现.ai或.eps文件。它们需要转换为可缩放矢量图形，并且根据用于创建图标的应用程序，甚至可能没有SVG选项。
然后它变得更好。
有一种新的软件类型 - 原型应用程序 - 在您的图像和图标被推出到设备之前，它们正在成为集合点，它们也具有特殊性。
本教程在Photoshop和Sketch之间移动图形，并使用Adobe Experience Design演示您的想法和最终部署之间的一些难点。让我们开始吧。
05年1月1日如何在Adobe Photoshop中为移动设备准备图像
此过程的第一步是了解您的目标设备。在这种情况下，您将瞄准iPhone 6，其屏幕区域宽375像素，高667像素。该设计要求图像为屏幕的宽度。
要使用的图像是在瑞士伯尔尼的伯尔尼大教堂内拍摄的。一旦图像在Photoshop中打开， 选择图像>图像大小 检查图像的尺寸及其分辨率。显然，图像为3156 x 2592，分辨率为300 ppi，文件大小为23.4 Mb，根本不起作用。
在“图像大小”对话框内， 将分辨率降低到100 ppi。首先这样做是因为图像尺寸也会改变。设置分辨率后，将宽度更改为375像素。如果您检查图像尺寸数据，您会注意到图像从23.4 Mb缩小到更适合移动设备的338k。 单击确定 接受更改并关闭“图像大小”对话框。
继续阅读下面
05年02月02日如何在Adobe Photoshop中使用“导出为…”对话框
图像准备好导出后， 选择“导出>导出为…” 打开“导出为”对话框。
这个对话框是Photoshop的最新成员，取代了他们多年来使用的“Save For Web”对话框。如果您仍然需要它，可以在导出弹出窗口中找到它。出于显而易见的原因，现在称为“Export for Web（Legacy）”。如果这是您第一次访问此对话框，请参阅以下内容：
- 尺寸： 此列设置图像的输出大小。该区域的有趣之处在于它将放大图像，但由于设备屏幕上的像素数量庞大，图像在设备上不会显得“模糊”。
- 1X： 点击此按钮，您将看到许多尺寸。 1x，2x和3x类别传统上与Apple的Hi Dpi设备相关联，他们和其他一些设备将为Android设备准备图像。
- 后缀： 此选项将显示您的尺寸，但它将显示为@ 2x或选择尺寸。此后缀将添加到图像名称中。
- +号： 单击此按钮可为输出添加各种尺寸。在这种情况下，单击它两次，然后从弹出窗口中选择2x和3x。这几乎涵盖了任何iOS设备。
- 垃圾桶： 单击此按钮，将从阵容中删除该选项。
- 文件设置： 选择格式 - jpg，png，gif或svg - 最适合图像。如果文件大小是一个问题，您也可以减少质量设置。
- 图片尺寸： 您可以更改图像的物理尺寸。
- 画布的尺寸： 您可以更改图像画布的物理尺寸。
- 元数据： 您可以将版权和联系信息添加到图像的元数据中。
完成后，单击“全部导出”按钮。系统将询问您要放置图像的位置。开发的一个好习惯是单击“新建文件夹”按钮并创建一个文件夹来保存导出的图像。单击“导出”时，将显示文件夹中的图像。
继续阅读下面
05年3月如何从波希米亚编码中为Sketch 3中的移动设备准备图像
Sketch 3是Bohemian Coding的纯Macintosh应用程序，由于其对Web和应用程序设计的高度关注，它在UX和UI设计人员中迅速占据了主导地位。事实上，Photoshop在很多方面都处于奇怪的位置，不得不用Sketch来“追赶”。
要在Sketch中为移动设备准备图像，请选择美工板上的图像 单击“属性”面板底部的“导出可导出”按钮。这将打开“导出”对话框。单击+号以添加2x和3x版本，并添加后缀。可用格式为PNG，JPG，TIF，PDF，EPS和SVG。在这种情况下，请选择JPG。 单击“导出”按钮 并定位或创建一个文件夹来保存导出的各种图像。
05年4月为什么需要创建三个（或更多）版本的图像
在许多方面，移动市场是决定性的“狂野西部”，一种尺寸绝对不适合所有。在Adobe Experience Design的上述示例中，图像放置在2个iPhone 6画板和Android设备画板上。注意左边的1x版本看起来是一半大小。这正是图像在带有视网膜屏幕的iPhone 6上的显示效果。 2x版本完美适合，Android版本在屏幕上运行。您可以选择缩放图像或以不同的大小从Photoshop中导出图像。
继续阅读下面
05年05月05日早期测试，经常测试，不信任，不相信任何人，特别是你自己
您需要了解的是，这只是流程的开始。在尽可能多的设备上查看您的工作必须被视为工作流程的重要部分。您还需要注意，这只是为应用程序或移动Web项目创建图形资源的第一步。
使用原型应用程序是发现痛点的好方法，但是需要输出这些相同的资产供开发人员使用。在许多情况下，资产的物理尺寸（包括图标）将是物理上的巨大而不是svg而是png格式。乍一看，这可能看起来有点过头，但要记住缩放图像的黄金法则：缩小比缩放更好。
最重要的是与开发人员密切合作，并使用原型设计软件来展示您的设计意图。但最终，这些相同的资产需要为最终产品做好准备，而您的开发人员可以更好地处理他或她需要的东西。
