Sketch 图标设计全攻略：从入门到精通
图标是 UI/UX 设计中至关重要的一环，一个优秀的图标能让你的界面更清晰、更美观、更具品牌感，Sketch 作为专业的设计工具，是制作图标的绝佳选择。
（图片来源网络，侵删）
本教程将分为以下几个部分：
- 准备工作：心态与工具
- 核心技巧：布尔运算
- 进阶技巧：样式与组件
- 实战演练：制作一个设置图标
- 输出与交付
第一部分：准备工作
在开始之前,我们需要做好两件事：心态和工具。
心态准备
- 简洁至上： 图标不是插画，它的核心功能是识别，去除所有不必要的细节，只保留最核心的特征。
- 一致性： 整套图标需要遵循统一的设计语言，这包括：
- 线条粗细： 所有图标使用相同的描边粗细（2px）。
- 圆角大小： 如果使用圆角，所有圆角大小应保持一致。
- 视觉重量： 所有图标在视觉上应“感觉”一样重，不会有一个图标看起来比另一个更“重”。
- 风格统一： 全部使用线性图标，或全部使用面性图标，或全部是线面结合。
工具准备
- 软件： Sketch (推荐使用较新版本以获得最佳体验)。
- 画板： 图标通常在
1x(1x),2x(2x), 或3x(3x) 的画板上设计，为了清晰和可扩展性，强烈建议在2x画板上进行设计，这意味着你的图标尺寸是 64x64px，但实际在屏幕上显示时会作为 32x32px。 - 网格与参考线： 这是专业设计的基石。
- 开启网格：
视图>显示网格，设置网格大小为8px或16px，8px 网格能帮助你精确定位和对齐元素。 - 开启参考线：
视图>显示参考线，使用R快捷键快速绘制参考线，帮助对齐图标的中心和各个元素。
- 开启网格：
第二部分：核心技巧 - 布尔运算
布尔运算是图标设计的“魔法棒”，它能让你通过简单的形状组合，创造出复杂的图标。
- 并集: 将多个形状合并成一个，快捷键:
⌃ + U(Command + U) - 减去顶层: 用底层的形状减去顶层的形状，快捷键:
⌃ + ⌥ + U(Command + Option + U) - 交集: 只保留多个形状重叠的部分，快捷键:
⌃ + ⌘ + U(Command + Shift + U) - 差集: 保留所有形状，但减去它们重叠的部分，快捷键:
⌃ + ⌥ + ⌘ + U(Command + Option + Shift + U)
记住这个口诀： 并、减、交、差，熟练运用这四个命令，你就能制作出 90% 的图标。
（图片来源网络，侵删）
第三部分：进阶技巧 - 样式与组件
当你设计一套图标时,重复劳动会非常多，Sketch 的“样式”和“组件”功能可以极大提升你的效率和一致性。
共享样式
如果你想让所有图标的描边颜色和填充颜色都保持一致,使用共享样式。
- 创建描边样式： 选中一个形状，在右侧检查器中设置好描边颜色和粗细，然后点击“填充”旁边的颜色方块，选择“创建新的共享描边样式”。
- 创建填充样式： 同理，选中形状，设置好填充颜色，点击颜色方块选择“创建新的共享填充样式”。
- 应用样式： 当你设计新图标时，只需点击形状，然后在右侧的“样式”面板中选择你创建好的样式即可，修改共享样式后，所有应用了该样式的形状都会自动更新。
组件
组件是创建可复用、可交互设计元素的最佳方式。
- 创建组件： 将一个完整的图标（包括所有图层）选中，然后按
⌥ + ⌘ + K(Option + Command + K) 创建为组件。 - 使用组件： 从组件库中拖拽一个组件副本到画板上。
- 组件变体: 这是最强大的功能，你可以为组件创建不同的“变体”。
- 一个“关闭”图标组件，可以创建一个“默认”状态和一个“悬停”状态（比如颜色变红）。
- 在右侧检查器的“组件”面板中，点击“+”号添加新变体，然后在画板上编辑这个变体。
- 修改所有实例： 当你修改原始组件时，页面上所有的组件实例都会同步更新，这保证了整套图标的绝对一致性。
第四部分：实战演练：制作一个“设置”图标
让我们用学到的知识,亲手制作一个经典的设置图标。
（图片来源网络，侵删）
目标： 制作一个线性、2px 描边、64x64px (2x) 的设置图标。
步骤 1：创建画板
- 新建一个 Sketch 文件。
- 按
A键选择“画板”工具。 - 在顶部检查器中,设置画板尺寸为
64x64，命名为Settings Icon。
步骤 2：设置网格和参考线
视图>显示网格，设置网格大小为8px。- 按
R键，从画板中心(32, 32)向右拖动到(48, 32)，创建一条垂直参考线，这将是齿轮的中心。
步骤 3：绘制基础圆形
- 按
O键选择“圆形”工具。 - 按住 (Option) 键，以参考线
(48, 32)为中心，绘制一个半径为8px的小圆，这是齿轮的中心孔。 - 再次按
O键，以(48, 32)为中心，绘制一个半径为24px的大圆，这是齿轮的外轮廓。
步骤 4：绘制一个齿
- 我们需要用布尔运算来“切”出齿轮的齿。
- 按
R键选择“矩形”工具。 - 绘制一个
8x24px的矩形，将其放置在大圆的顶部，确保其底边与圆心对齐，这个矩形就是我们要用来“切”出齿的工具。 - 关键一步： 同时选中大圆和这个矩形（按住 键点击），然后使用
减去顶层(快捷键⌃ + ⌥ + U)，你会看到顶部被“切”掉了一块。
步骤 5：复制并旋转
- 现在我们有了第一个齿,按
⌘ + C复制这个齿的形状。 - 按
⌘ + V粘贴，然后按⌘ + F在原位粘贴。 - 选中这个新粘贴的形状,按
R键选择“旋转”工具。 - 按住 键，将旋转中心点拖拽到圆心
(48, 32)。 - 在顶部检查器中,设置旋转角度为
45度，然后按回车。 - 按
⌘ + D(Duplicate) 快捷键 6 次，每次复制并旋转 45 度，直到形成完整的 8 个齿。
步骤 6：组合并添加中心孔
- 选中所有 8 个齿的形状，按
⌃ + G(Group) 将它们编组。 - 同时选中这个“齿群”和最开始画的小圆（中心孔）。
- 使用
减去顶层(快捷键⌃ + ⌥ + U)，将中心孔从齿轮中“挖”出来。
步骤 7：添加描边和样式
- 选中最终的齿轮形状。
- 在右侧检查器中,设置描边为
2px，颜色为#333333。 - 填充设置为
无。 - 选中描边样式,点击颜色方块旁边的 号，创建一个新的共享描边样式，这样，你以后设计的所有图标都可以轻松使用这个统一的样式了。
步骤 8：创建组件
- 选中整个图标的所有图层。
- 按
⌥ + ⌘ + K创建组件。 - 在右侧的“组件”面板中，你可以重命名它，
Icon / Settings。
恭喜！你已经完成了你的第一个专业图标，并把它变成了一个可复用的组件。
第五部分：输出与交付
设计完成后,你需要将图标交付给开发人员。
导出切片
- 创建切片： 按
S键选择“切片”工具，在图标周围拖动一个矩形框，确保它完全覆盖图标。 - 导出： 选中切片，在右侧检查器的“导出”选项中：
- 格式： 通常选择
PNG，如果需要透明背景，确保勾选使用切片边框。 - 尺码： 勾选
@1x,@2x,@3x，Sketch 会自动为你导出不同分辨率的版本，非常方便。
- 格式： 通常选择
- 导出所有切片： 按
⌥ + ⌘ + E(Option + Command + E)，可以一次性导出页面上的所有切片。
使用 Sketch Measure 插件
这是一个非常强大的插件,能自动生成设计稿的标注和切图说明，直接交付给开发，极大减少沟通成本。
- 安装插件： 在 Sketch 的
插件>从插件库安装中搜索Sketch Measure并安装。 - 配置：
插件>Sketch Measure>Preferences，配置好颜色单位、字体单位等。 - 生成：
插件>Sketch Measure>Show Sketch Measure，它会生成一个网页，包含所有尺寸、间距和切图链接。
总结与建议
- 从模仿开始： 先临摹一些优秀的图标集（如 Feather Icons, Material Icons），理解它们的构造逻辑。
- 建立自己的图标库： 把你设计的所有图标都做成组件，保存到 Sketch 的“共享库”中，这样在新项目中可以一键复用，效率极高。
- 保持练习： 图标设计是一门手艺，熟能生巧，每天坚持画几个，你的技巧和审美都会飞速提升。
希望这份教程能帮助你开启 Sketch 图标设计之旅！祝你设计愉快！
