前言

《设计行录：Sketch 快速入门》，主要是介绍 Sketch 的使用技巧。 从入门级小白到成为设计师的经历，我领悟到学习软件操作最有效的方式是上手做东西，最快速的方式是学习有用的东西。以文章的形式教软件，更新频率势必不如其他的视频课程，因此我会尽可能浓缩体量，提取最关键、有用的技巧。文中还结合了视频演示，希望能帮助到真正需要的读者。

下载安装

Sketch 目前只能用于 MacOS 系统，下载和安装方式很简单，下载链接如下：

• 官方链接：Sketch 官网下载；
• 破解版链接：下载链接，附有安装及汉化说明。

界面介绍

我的学习理念里，不需要记住所有的工具名称和快捷键，在使用过程中，把经常用到的记住就够了。现在，先大概了解一下 Sketch 界面： 重点说一下如何自定义工具栏，操作中需要使用其中一些工具（视频加载时间可能较长，请尽量在 Wi-Fi 环境下放大观看）。

接下来，我们直接进入主题，说说如何用 Sketch 绘制图标。 ##Icon 制作第一步：图形解构 任何一个规范的 logo 或者 icon 都是由规则的几何图形构成，如：圆形、矩形、圆角矩形等等，所以在制作一个图标之前要学会解构图形。比如苹果的 logo 是由一堆大大小小的圆组合而成： 还有这些简单的图标也是很多基本形构成： ##Icon 制作第二步：使用布尔运算 基本形是如何拼合成不同形状的呢？这就要说到绘制图标的最佳方式----布尔运算。它布尔创造的、用于图形处理操作的逻辑运算方法。通过布尔运算绘制出的图标是矢量图形，这样的 icon 可以被尽情缩放而不丢失细节。其次，布尔运算的图标由基本形组合而成，也有利于进行后期修改。在 Sketch 中，布尔运算包括联集、减去顶层、交集、差集四种。 ####1. 联集 「联集」也叫"合并形状"，效果是两个图形相加。 「联集」是最简单的一种运算方式。下图示例对话图标是一个椭圆和一个三角形的联集。 Sketch 的工具栏中，联集用表示。使用「联集」的操作演示（请尽量在 Wi-Fi 环境下放大观看）：

------------ ####2.减去顶层 「减去顶层」是用一个形状裁切另一个形状，被裁切的形状需在下方。 下图示例设置图标是一个六边形减去一个圆，但制作的时候，我们需要看成是一个圆裁切了一个六边形。 「减去顶层」的图标是，操作演示（请尽量在 Wi-Fi 环境下放大观看）：

3. 交集

两个形状做交集，即保留相交区域。 下图示例眼睛图标，先由两个圆部分相交，再用一个小圆裁去中间部分。 「交集」用表示，操作演示（请尽量在 Wi-Fi 环境下放大观看）：

4. 差集

与「交集」相反，「差集」保留两个形状除了相交区域外的其他部分。如果一个形状完全在另一个形状内部，效果等同于「减去顶层」。 下图示例六芒星图标由两个等边三角形做差集得到，中间的六边形为相交部分，被舍去。 「差集」的图标是，操作演示（请尽量在 Wi-Fi 环境下放大观看）：

Icon 制作第三步：了解锚点

要学会制作图标，还需要了解一个重要概念----锚点。设计中的「锚点」应该是借用来的，可以理解为是一个形状为了保持其形态而固定住的点。矩形的4个角就是它的锚点，在 Sketch 里双击矩形，或者选中矩形后回车，即可看到它的锚点。

· 添加锚点

可见锚点时，把光标移动到边缘线上即可添加锚点。添加的锚点和已有锚点属性完全相同，拖拽锚点能改变形状。

· 锚点类型

锚点的形态受到「曲柄」影响，通过拖拽「曲柄控制点」可以创造出不同的形态。 锚点类型包括四种：笔直点、镜像点、断开连接点和不对称点，它们的「曲柄」各有特点。由于拖拽「曲柄」容易导致曲线无法对齐像素点，导出的图标会发虚，所以在 UI 设计中，锚点类型的使用比较少，稍作了解即可。

· 锚点半径

创建一个矩形，其属性栏中的半径（圆角），默认值是0，代表矩形的四个角是尖角，锚点类型是「笔直点」（下图左）。拖动滑条，加大数值，尖角会慢慢变成圆角（下图中），这个行为实质上就是改变锚点半径。也就是说，选中所有锚点，把「锚点半径」的值调成一样，效果也是相同的（下图右）。 但是，改变「半径（圆角）」会同时改变所有锚点，想要局部调整，只能选中对应的锚点，调整「锚点半径」。 此外，多边形、不规则形状没有「半径（圆角）」，为使其锚点圆滑，也只能修改「锚点半径」。 需要注意：只有锚点是「笔直点」的时候才可以改变锚点半径。

Icon 制作演示

临摹可以帮助你快速掌握设计软件操作，练习解构图形则能让你学会制作图标。下面我就带着大家分析、学会临摹以下三个图标：

1.设置图标

拆解「设置」图标，由正六边形和圆「减去顶层」构成。该正六边形的角是圆滑的，这就和「锚点半径」有关。 具体操作步骤（请尽量在 Wi-Fi 环境下放大观看）：

2.收件箱图标

「收件箱」图标分为上下两部分。上半部分是一个圆角矩形和一个半圆的「联集」。下半部分是矩形的一部分边线，这里需要用到「添加锚点」和「剪刀」工具。 具体操作步骤（请尽量在 Wi-Fi 环境下放大观看）：

3.打开图标

「打开」图标分为左右两部分。左半部分是矩形边缘的一部分，同样要用到「添加锚点」和「剪刀」工具。右半部分是由一个变形的矩形和一个小圆点组成。 具体操作步骤（请尽量在 Wi-Fi 环境下放大观看）：

总结

本文以操作为主，带大家梳理了制作 icon 最重要的知识点，即布尔运算、图形解构以及锚点，也进行了实例讲解，实际上，icon 设计还有一些需要留心的地方，以后再和大家详述。