之前在看一个视频教程的时候简单介绍了这个app，当时也跟着一起做了几个图标，后来有一段时间就没碰了，后来就连这种最简单的组合制作图标的方式我都忘记了，还是不能偷懒，好记性不如烂“键盘”，这篇文章是我个人使用Sketch的一个笔记（本人是个连Photoshop都不怎么会用的程序猿，对UI设计领域几乎是一无所知），Sketch大神们可以无视。如有错误，欢迎斧正。

一. 准备工作

1. 首先你得安装Sketch，比如可以去这里下载
2. （建议下载，此项可选）可以去GitHub下载Sketch素材文件，可以制作一些常用图标
   下载好并解压后，可以双击 .sketch 后缀名的文件来打开他
   image.png

二. 制作ICON

1. 打开Sketch图标素材资源文件

2. 新建页面（pages）

   
   add page.png

3. 新建Artboard

   
   Artboard.png
   

   在右侧可以选择Artboard大小，也可以按住鼠标左键手动画

   
   image.png

4. 画圆或者圆角矩形

   
   image.png
   

   如果你画的是圆，那么应该使其x,y大小一致，并点击中间的小锁图标来锁定图标比例。

   
   image.png

5. 插入图形（Symbol）

   
   image.png
   

   同上，这个图标也应该是等比例缩放，所以把中间的锁锁上。大小根据需要调。然后拖动至圆正中央。

   
   image.png
6. 做些颜色微调

• 设置圆的背景，并取消boader

  
  image.png

• 设置symbol的颜色
  双击中间那个symbol，进入下面的页面，并设置颜色

  
  symbol color.png
  

  设置完后点击“Return to instance”去返回

• 现在看看效果

  
  image.png

1. 制作更多类似图标

• 创建分组：选中上一次做的图标的两个组件并点击菜单“Group”

  
  image.png
  image.png

• 根据需要对这个分组进行设置，比如我这里把这个分组图标大小改变一下

  
  image.png

• 复制这个分组（一种是Cmd+C/V 另一种是按住Option键来拖动图标，和在Finder操作文件类似）

  
  image.png
  

  复制好后根据自己的需要进行重命名

• 对复制的分组里的图标元素进行调整（更换图标，更换背景颜色等）

  
  image.png

三. 导出ICON

1. 选中要导出的icon

   
   image.png
2. 在右下角点击 “+” 导出
   记得先选svg格式再点ExportLayers
   image.png

ps:其实这里也可以生成Android 各个分辨率下的png图标的，方法类似

image.png
image.png

是不是很方便。

四. 转换并导入到AndroidStudio的drawable中

1. 打开Vector Assert窗口

   
   Vector Assert.png

2. 选择上一步导入的svg
   在path中选择上一步导出的一个svg图片，如果有需要的话可以勾选override，然后填写你想要的大小。

   
   import svg.png

3. 下一步，保存

   
   image.png

4. 打开生成的xml文件就能看到预览了。现在你在项目里可以使用这个drawable了。（他比普通jpg、png小很多，一般只有1~2kb）

   
   image.png