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