如果有一个与Illustrator合作的方面，我真的不喜欢它将线条艺术转换为移动或网络的svg图像。 使用“导出”>“导出为”菜单，并且为了保持诚实，“存储为Web”功能 - “导出”>“另存为网页”并不完全易于使用。
将图形转换为.svg格式打开了一个相当吓人的对话框，对于新来这个工作流程的人来说，提供了一系列令人困惑的选项，更不用说事实上有很多.svg格式，只有其中一个是适当的格式。 一旦你习惯了这个工作流程，这没什么大不了的，但是学习曲线很陡峭。
这一切都随新的导出屏幕功能 - 导出>导出屏幕 - 以及于2016年6月引入到Illustrator CC 2015的资产导出面板而改变。在本“说明”中，我将向您展示如何使用特征。 让我们开始吧。
01之04
如何在Adobe Illustrator CC 2015中访问屏幕导出
从Illustrator 88开始就成为Illustrator用户我认为您可以理解我不愿意将Illustrator视为Web和移动界面和项目的严谨设计工具。
当在CS4版本2008中引入画板时，我认为这是对应用程序的一个有趣补充。 当我第一次在Illustrator中看到现在已弃用的Save For Web功能时，我发现它很有趣，但是我发现Adobe Fireworks中的相同功能与Web图形比Illustrator更加一致。
随着移动优先设计方法的出现和对移动项目日益依赖SVG图像的速度，Illustrator成为了SVG的“走向”工具，并成为UI Design工作流程中的重要一站。
不过，如果我需要为移动设备导出资产，Sketch 3和Photoshop CC 2015是我的首选工具。 插图画家在2016年6月进入了名单，其中包括真正漂亮的导出屏幕菜单。
在上面的例子中，我有两个屏幕用于iPhone，它们位于名为“Home”和“Places”的单独的画板上。 要输出它们，我选择了文件>导出>导出为屏幕。 导出屏幕对话框打开。
04年02月
如何使用导出屏幕对话框
出现对话框时，点击要选择的每个画板。 然后它会打出一个复选标记。 您也可以双击画板的名称来选择它并进行更改。 如果您的画板被命名为“画板1”和“画板2”，这是一件好事，坦率地说，它不会告诉你。
您在选择区域有三个选择：
- 全部：此选项将文档中的每个画板导出为单独的文件。
- 范围：输入要导出的画板范围。 这对于具有几十个画板的项目特别有用。
- 完整文档：选择此项，所有画板将被拼合成单个文档。
“导出到”区域可让您选择输出的目标文件夹。 默认文件夹将是Illustrator文档的当前位置。
格式就是“魔法发生的地方”。 你会注意到有三个图标 - iOS。 Android和Gear。 前两个是不言自明的。 齿轮图标打开格式设置，它允许您控制如何优化列表中的每个文件格式。 这些设置是“格式特定的”，一旦您进行了更改，请单击“保存设置”按钮，这些更改将应用于要输出的格式。
一旦您选择iOS或Android，列表将更改为包含该平台上的所有可用分辨率。 iOS列表将显示Retina显示屏的缩放因子 ，Android选择的尺寸范围从.75x到4x，几乎适用于所有Android设备。
如果显示要删除的格式，请点击“x”。 如果您想添加一个，请点击+添加比例按钮。
完成后，单击“导出画板”按钮，当进程结束时，进度条会显示出来。
03之04
使用Adobe Illustrator CC 2015中的屏幕导出文件。
当您查看导出屏幕的结果时，您会发现Illustrator输出每个屏幕的展平版本。 从表面上看，这可能看起来有点弱，特别是如果你期望Illustrator将所有的零碎件都导出为图像。
如果您退一步思考一下，这实际上正是您需要的，因为您可以在原型应用程序（如Adobe Experience Design ，Principleformac， Atomic.io ， UXPin或其他原型应用程序）中使用此输出
在这个例子中，我使用Adobe Experience Design（XD）创建一个简单的点击。 该过程的第一步是选择与Illustrator界面的尺寸相匹配的iPhone 6尺寸
当界面打开时，我选择了Artboard工具并在粘贴板上单击一次以添加另一个画板。 然后我将它们命名为“Home”和“Places”，选择每个画板并将Illustrator中的png图像导入到画板中。
为了创建click-thru的“热点”，我在主屏幕上的Explore按钮上绘制了一个矩形，并通过在“属性”面板中取消选择这些属性，将其填充和边框值设置为none。 我使用“地点”页面上的“后退”按钮做了同样的事情。
要添加交互性，我选择了原型模式，然后单击“热点”。 然后，我将箭头 - 称为电线 - 拖到地点页面，并将过渡目标设置在地点，向左推动的动作，缓和放松的过程以及过渡到.6秒的持续时间。
我在Places页面上重复了这一步。 唯一的区别是Transition设置为右移。 当我点击播放按钮时，我测试了我的原型。
04年4月
如何在Adobe Illustrator CC 2015中使用导出资产面板
除了屏幕保存菜单之外，Adobe还添加了一个新面板 - 资产导出 - 消除了UI设计工作流程中的一个巨大难题。
痛点是图标。 Illustrator是一个伟大的矢量绘图应用程序，但输出，让我们说10个图标，在一个页面上有40或50个需要每个被保存为SVG图像。 由于连续访问SVG面板，这无疑需要比平时更多的时间。 这个痛点现在已成为过去。
这个新面板可以在窗口>资产导出中找到。 面板打开后，选择要转换为SVG或其他格式的资产并拖入面板。 释放鼠标时，资产的缩略图将添加到面板中。 命名资产。 继续拖动对象到面板中，直到完成。
选择每个项目在导出设置区域中，或者通过按住Shift键并单击每个项目来全部选择它们。 选择你的格式 - 在这个例子中，我选择了SVG-并点击导出按钮。 所选项目将作为SVG文件输出到与Illustrator文件相同的位置。
在整个过程变得更加整洁的情况下，您不必使用“资产导出”面板。 如果单击面板底部的保存屏幕按钮，将打开对话框。
相反，您可以单击Save for Screens面板中的Assets选项卡访问Asset Export面板。 例如，如果在美工板上有一个自定义图标，则可以在保存屏幕对话框中打开“资产导出”面板，然后将该项目拖到“资产导出”面板中。