导出资产与切图

设计师通过将图层和切图导出为多种类型的图片，将设计素材流转到产品经理或开发工程师手中。

MasterGo 支持多种格式的图片导出，包括PNG、JPG、PDF、WEBP以及SVG，您可以方便的将各类图层快速地导出为图片。

操作流程

1. 选中需要导出的图层
2. 在右侧栏下方，点击导出模块的“+”，新建导出项
3. 设置导出参数
4. 点击下方导出按钮，开启图片下载

导出设置项

为方便产品经理、尤其是开发工程师查看导出的图片，导出图层前可以进行导出选项的设置。

1. 设置导出倍率 （x表示倍率）

   导出图片的尺寸为图层实际尺寸的多少倍，比如选择2x时，导出图片的尺寸为图层的2倍。

2. 设置导出图片的名称的前缀/后缀

   通过点击...来切换设置导出文件名的前缀和后缀，可以方便地命名导出的尺寸等信息，提高开发工程师查看的效率。

3. 导出的格式

   • PNG，一种无损压缩的位图图片格式，一般用于 JAVA 、网页等，压缩比高、生成文件体积小；

   • JPG，常见的位图图片格式，由于用了有损压缩的方式，图片质量会进行一定的压缩；

   • SVG，基于可扩展标记语言（XML）的、用于描述二维矢量图形的图形格式，支持无限缩放且不失真；

   • WEBP，常用于网页，同时提供有损压缩与无损压缩的图片格式，可让网页图档有效压缩又不影响图片格式的兼容和清晰度，可让网页的整体加载速度变快；

   • PDF，常见的电子文件格式，以PostScript语言图象模型为基础。

4. 导出设置项的顺序调整

   将鼠标放到导出项的最左侧，会出现拖动 bar，按住拖拽 bar 可在多个导出项之间调整顺序。

5. 预览

   点击“预览”，即可看到导出为图片后的样子，方便确认选中的导出图层是否正确

导出预设

用于交付开发工程师的图片，遵守一些特定的格式会提高图片对于研发工程师的可读性，方便进入开发流程。因此 MasterGo 提前预置好三个常用的导出设置。

1. IOS，苹果生态平台
2. Android，安卓生态平台
3. Flutter，越来越多的开发者正通过 Flutter 平台来打造各类应用

选中导出图层后，点击“+”左侧的开关图标，选择需要的预置项，之后点击导出即可。

切图工具的使用

切图工具可以圈出画布中的任何区域，将切中的区域变成一个“特殊的图层”，这样就可以通过设置倍率、前缀和后缀的方式生成和导出png、jpg、webp和PDF等不同类型的资产。

相比于直接导出，切图除了尺寸上十分自由外，还更利于实际开发环境的使用。所以实际工作中，很多时候导出的图层都是切图图层。

当切图创建完成后，可按照上述的流程和方法将切图进行导出。

1. 切图工具唤起

   快捷键S、或在工具栏中点击“容器”，选择下方的切图，即可唤起切图工具

2. 创建切图

   同创建矩形的操作相同，可通过画框来控制需要切取的范围大小。

   画框可以随时修改宽高及层级位置。

3. 显示/隐藏画布中的切图

   快捷键Shift + S 、或点击菜单栏，依次选择“视图” — “显示切图”

批量导出技巧

• 如果想快速导出文件内的“所有切图”，可点击左上角菜单栏，依次选择“文件” — “导出所有切图” （标注模式下直接点击右侧栏按钮即可）。

注意：只有设置了导出项的切图会导出，没有设置导出项的切图不会被导出。

• 也可打开切图列表，在列表中勾选需要导出的切图并点击导出即可。选中并双击可定位切图的位置。

Mac: Shift + Command + E

Win: Shift + Ctrl + E

• 如果想导出整个页面的所有图层为一个文件，可以点击左上角的菜单栏，依次选择“文件” — “导出为PDF” — “导出所有容器”

其他说明

1. 选中导出图层后，可以通过点击“+”增加多个导出设置，每一个设置对应一张图片，所以在有多个导出设置项时，导出会一次性下载多张图片。如果需要删除某个设置项，可点击 “-”；
2. 选中多个图层时，点击导出会一次性导出所有的图层；
3. 除了常规的图层外，您还可以导出整个容器，左侧栏中选中画布，即可通过上述方法将整个容器导出为图片；
4. 在标注模式下，任何图层如果设置了导出项(倍数、图片格式以及前后缀)，都会有虚线来帮助查看者找到切图。如果不想显示切图虚线，可以在菜单栏-视图-显示切图中取消勾选。

评价此篇文章：👍🏻 有帮助 👎🏻 无帮助

👉本篇文章对你是否有帮助？👍🏻 有帮助 👎🏻 无帮助，我们期待着你的反馈。