Sketch Android 切图神器 -- Android Res Export 的安装与使用。

插件下载

注意：插件没有在低于 39.1 版本上测试。插件的安装就不再解释。

Android Res Export 是一个用于导出 Android 各种资源的 Sketch 插件，包括 PNG 、App 图标、点九和 vector drawable 。

为什么要做这样的软件？Sketch 插件中用于导出资源的非常多，甚至不用插件也能凑合着用。

其实这个插件主要是解决一个困扰已久的问题。Nine-patch 俗称点九的缩放。某些支持点九的 Ps 插件只是给内容四周加上黑线而已。这种幼稚的行为，也是可以理解的，毕竟即使工作在国内手机大厂的设计老司机们也不能清楚向新手解释他们口中的点九是怎么回事。这个插件里面点九功能才是主角，其他功能都是赠送的。

因为依赖于第三方的软件，导致了这个插件其实是不太容易配置的，安装了插件之后，后面的两个功能对于大部分设计师的电脑是不能用的。其实赠送的功能也蛮好用的。不想折腾的死美工可以直接往下滚到 “如何使用” 部分。

安装完整支持

点九功能依赖 ImageMagick，Vector drawable 功能依赖 SVGO 来优化最终代码。很多设计师可能从未听说过这两个 “命令行界面工具”。可能工作多年的 GUI 设计师都不知图形界面外，还有文本界面，命令行界面。

为了不让很多人觉得我强迫他们安装一些没啥用的东西，我觉得有必要介绍下这两个工具。

ImageMagick 是个命令行图像编辑软件，支持近百种格式。你可以认为这是个没有界面的 Ps，够 B 格了吧，例如处理一些图片裁切合并转换，你的同事 Ps 都还没打开，你动几下键盘图就出好了。即使处理成千上万张图那速度也是杠杠的。

SVGO，用于压缩 SVG 代码的，现在能干这事就这一家，没其他选择。压缩前后代码有一种胖子瘦成男神的励志感，这早已不是拼一个 PSD 几个G的时代。SVGO 需要 Node.js, 有了 Node.js 你将拥有整个 Node.js 生态圈。

这些都是撂妹神器，我只能帮你到这了，剩下的自己百度谷歌吧。插件只是依赖这两个工具，其实不懂用也没事，能安装上就行了。

安装 ImageMagick，推荐用 Homebrew 来安装。也可以用 MacPorts 安装，但 MacPorts 较复杂些，以下只介绍使用 Homebrew 的安装方法。打开 Homebrew 网站中文版 （http://brew.sh/index_zh-cn.html）。 首先打开终端，粘贴 Homebrew 主页上的代码后，按下回车。安装完毕之后，在终端输入以下命令安装 ImageMagick。需要等待几分钟。

brew install imagemagick

等到终端不再动，并且可以输入的时候，表示安装完成。这时可以输入以下命令确定是否安装成功。

convert --version

如果等到几行类似下面的信息，恭喜，你把这个非常强大的神器安装成功了。

Version: ImageMagick 6.9.5-0 Q16 x86_64 2016-07-19http://www.imagemagick.org
Copyright: Copyright (C) 1999-2016 ImageMagick Studio LLC
License: http://www.imagemagick.org/script/license.php
Features: Cipher DPC Modules 
Delegates (built-in): bzlib djvu fftw fontconfig freetype gslib jbig jng jp2 jpeg lcms ltdl lzma openexr png ps tiff webp x xml zlib

接着安装 SVGO 东西又需要先安装 Node.js。打开 Node.js 主页 https://nodejs.org/en/ 主页上那 2 个绿色大按钮就是下载，下 v4.5.0 LTS 或 v6.4.0 Current 都可以。这个安装包设计成 windows 安装包的感觉，只需要一路点下一步。安装完成后，打开终端输入以下命令安装 SVGO。

sudo npm install svgo -g

用以下命令验证是否安装成功。

svgo -v

至此这个插件的功能就完整了。

如何使用

先从 Github 下载一个示例文档 demo.sketch。

这个插件对设计稿的要求是必须是 MDPI (1x) 尺寸, 目前不支持以后也不会支持其他尺寸的设计稿。就是这么任性，你不接受可以自己改代码啊。

先介绍赠送的功能。普通的 PNG 资源使用 "Make Exportable" 或者添加切片的方式来表示此图层将会被导出。或者选择图层从菜单执行 "Plugin" - "Android Res Export" - "New" - "PNG Asset"。如果资源留出需要多余的空白，就使用切片， 否则用可导出功能，也可以统一都使用切片。

普通资源，命名在 "Exportable" 图层或切片图层上。点九和 Vector drawable 资源命名在最外层的分组上。App 图标则命名在画板上。部分不合法的字符会被替换为下滑线。被修改和重复的资源命名，在导出时会保存到资源目录下的 "report.txt" 文件内。

执行 "Plugin" - "Android Res Export" - "Export" - "PNG Asset" 导出普通资源前，如果执行前文档中有选中的可以导出的图层，则只会导出选中的内容，否则将导出当前页面中的所有资源。这个特性也适合点九的导出。导出 Vector drawable 则必须要求选中需要导出的内容。

App 图标必须在 192x192px 的画板内，选中图标画板，然后执行 "Plugin" - "Android Res Export" - "Export" - "App Icon"。

导出到特殊前缀的文件夹。将文件夹的前缀写在分页的命名上，以 "@" 开头，多个文件夹使用 "," 分隔。例如以下的命名表示当前页的内容只会导出到 drawable-land-xxhdpi, drawable-land-xhdpi, drawable-land-xxxhdpi 这三个文件夹。

@land-xxhdpi, land-xhdpi, land-xxxhdpi

以下内容必须成功安装上文说的那两个工具。

选择图层，然后从菜单执行 "Plugin" - "Android Res Export" - "New" - "9-Patch Asset"，来创建一个点九资源。这会添加一些基础的黑线，需要根据实际情况调整线长度。

点九图层组的结构是这样的：

分组  资源命名在此处 
  patch 此分组必须名为 patch
    ... 用矩形将黑线画在此次，命名无要求
  content 此分组必须名为 content
    ...  内容放此处，分组与否都行
    #9patch 切片，边缘贴紧黑线，必须名为#9patch，复制组的时候注意此图层会被添加 copy 字样

选择图层从菜单执行 "Plugin" - "Android Res Export" - "New" - "Vector drawable Asset"，来创建一个 Vector drawable 资源。选择 Vector drawable 资源组内所有的形状图层，在属性面板的填充中点击设置图标，选择 "Non-Zero"，然后从菜单 "Layer" - "Paths" - "Reverse Order" 执行反转路径顺序。

在组内的 "#" 图层表示切图的边界，必须保留。生成 XML 文件的过程会删除多余的代码。

Android 的 Vector Drawable 不支持 SVG 的某些特性，所以矢量图层的填充设置要改为 Non-Zero。

P.S.

能看完这么长的文章，并且成功安装上的，都不是简单的设计师，不妨留个评论。