Sketch切图与导出

设计师做好效果图后，需要把图中的元素切割后交给程序同时，以便于他们更好的运用在代码中。

切图切什么

我们得清除页面中哪些需要切，哪些不需要切。

切图分类

注意：

如果是单独的按钮直接选中后，在右侧属性栏点击最下面的【制作导出项】，设置好后，点击【已选中导出项】保存到相关文件即可。

如果是轮廓不一的一组图标，则需要为图标创建相同大小的切片后，再进行导出。

如果开关用的是系统自带的，则不需要切图，跟开发同事沟通好即可。

如何命名导出文件

切了一堆图，如果没有按一定的规则命名就直接交给开发同事，估计他们会疯掉吧。

【命名】

按照【模块_类型_功能_状态.png】的形式命名就会让开发同事快速明白这个切图该用在哪里。比如：商品详情页_图标_收藏_未选中.png（命名不可用：中文/英文大写/空格/-）

1. 较短的单词可通过去掉“元音”形成缩写

2. 较长的单词可取单词的头部几个字母形成缩写，如normal可写成nor

3. 还有一些约定俗成的英文单词缩写，如background可写成bg

【导出】

为了便于区分且方便管理，文件夹的命名也要遵从一下原则：

项目-开发语言-日期

xxxAPP-iOS-2020.20.20

xxxAPP-Android-2020.20.20

另外，IOS和Android可以用一套切图，但在命名和管理上会有所不同。

IOS不同倍率（@2x/@3x）的切图在制作导出项时要增加若干个倍率后，一并导出到一个文件夹；

而Android则要按不同倍率（xhdpi/xxhdpi）设置好若干个文件夹后，再将一种倍率的切图导进去，在skech制作导出项时无需在设置倍率后缀。

Android中需要适配缩放的按钮，则需要切图后导入draw9patch标记伸缩边缘，然后再导出至Android切图文件夹中，打开文件夹会看到有.9的后缀，如xxx.9.png

切图与导出

【创建切片】

点击置入-切片或者按S键，点击要切的对象，即可创建一个切片。

创建切片

【管理切片】

创建好的切片，在列表中会有一个切片标识，在画板中也会有虚线框标识，有利于我们很好的区分。

已切片

另外，图层列表的切片，我们需要对它命名，最好是按“类型/名称”的形式，这样命名的好处是导出后同一个类型的切片能到以类型命名的文件夹中。

【导出切片】

选中所有导出项，然后在右侧的属性面板，调整参数。

1、根据需要勾选是否要背景色；

2、根据需要增加大小倍率；

3、点击“已选中导出项”；

导出设置

导出到桌面看效果：

由于绿色和黄色按钮，名称前加了按钮/ ，所以他们被规到按钮文件夹中，红色的单独存放。

导出效果