导出资产与切图

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

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

操作流程

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

png-20221128164923412

导出设置项

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

  1. 设置导出倍率 (x表示倍率)

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

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

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

  3. 导出的格式

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

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

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

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

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

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

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

  5. 预览

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

img

导出预设

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

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

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

img

alfasjfkd2

切图工具的使用

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

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

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

切图图层作用的范围为父元素,并且切图图层在兄弟元素的位置不会影响切图的内容,切图图层仅仅会显示父元素的背景色。

  1. 切图工具唤起

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

  2. 创建切图

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

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

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

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

img

批量导出技巧

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

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

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

Mac: Shift + Command + E

Win: Shift + Ctrl + E

img

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

img

其他说明

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

img