UI图标设计制作教程（Figma UI3）课件 第四单元-面性图标-布尔运算

UI图标图形设计FIGMAUI3版单元4面性图标——布尔运算xx学校xx学院xxx专业李炳琰教师概览Overview4.1基础面形图标4.2填充区域的布尔运算—合并4.3填充区域的布尔运算—减去4.4填充区域的布尔运算—交集4.5单元练习单元4面性图标——布尔运算单元4面性图标——布尔运算4.1.1图标模版三种图标模版单元4面性图标——布尔运算4.1.1图标模版“活动区域”大小为20像素×20像素。所有图形都应该在24像素×24像素的模版内，不能超出。活动区域周围有2像素的“内边距”当图形视觉面积较小时，图形可延伸至2像素的内边距区域。单元4面性图标——布尔运算4.1.1图标模版单元4面性图标——布尔运算4.1.1图标模版图形参考线中的四个形状，尺寸各不相同，其宽高和面积如图所示，这几个图形面积在320左右，所以视觉大小较为接近、整体看起来比较协调。图形参考线不仅协调了图形的视觉大小，还规范了图形的比例。正方形和圆形的宽高比为1:1，横矩形的宽高比为4:5，竖矩形的宽高比为5:4。根据图形参考线的规定，可以创建图形视觉大小协调、比例一致图标系统。单元4面性图标——布尔运算4.1.1图标模版第一行的1~4号图标的基础图形，符合模板中的图形参考线的规定；第二行的5~8号图标，在图形参考线的规定上有所修改单元4面性图标——布尔运算4.1.2案例练习——绘制沙漏图标观察：观察并分析沙漏图标，发现沙漏图标由上下两个对称的六边形组成。六边形可以通过增改矩形锚点得到，然后翻转六边形，组合两者可绘制出沙漏图标。目标：练习增加并移动图形的锚点、图形的翻转以及图标模版的使用方法。单元4面性图标——布尔运算4.1.2案例练习——绘制沙漏图标1.

快捷键：按下

Shift+H

水平翻转，按下

Shift+V

垂直翻转。2.

右键菜单：选中对象，单击鼠标右键，在弹出的菜单中选择。3.

位置选项栏：选中对象，在右上角的位置选项栏中，单击（水平翻转）或（垂直翻转）。翻转对象的方法：单元4面性图标——布尔运算4.1.3

案例练习——绘制手表图标观察：观察并分析图标图形，可以发现手表图形是由一个圆环和两个梯形组成。通过绘制一个圆环和两个梯形并调整其位置，即可完成图标制作。目标：练习增加并移动锚点修改图形；图形的翻转；图标模版的使用。单元4面性图标——布尔运算4.1.3

案例练习——绘制手表图标使用快捷键Shift+X，可以快速切换图形的描边和填充属性。对于原本仅有填充而无描边的图形中，按下Shift+X，将会去除填充属性，增加描边属性，并且描边的颜色与填充颜色相同。单元4面性图标——布尔运算4.1.3

案例练习——绘制手表图标通常情况下图标模版尺寸为偶数，例如MaterialDesign图标模版的尺寸为24×24，因此图标中各个图形的宽度或者高度（根据需要的是垂直还是水平居中对齐）多采用偶数。然而，也偶尔存在上图中，使用奇数的图标。单元4面性图标——布尔运算4.1.4拓展练习——图标模版辅助绘制练习目标：尝试使用图标模版辅助图标绘制，并继续练习锚点和曲线的绘制。观察图标，分析其图形和锚点的构成。运用前面章节所学的锚点操作的知识，绘制下列图标，注意图形放置在图标模版中的位置。概览Overview4.1基础面形图标4.2填充区域的布尔运算—合并4.3填充区域的布尔运算—减去4.4填充区域的布尔运算—交集4.5单元练习单元4面性图标——布尔运算单元4面性图标——布尔运算4.2.1合并运算选中多个图形后，属性栏上方出现布尔运算的选项。默认的布尔运算是“

合并”，点击菜单可以展开所有的布尔运算选项，点击选择需要的布尔运算。单元4面性图标——布尔运算4.2.1合并运算“合并”运算会将多个选中的图形合并为一个形状，同时会创建一个布尔运算组，原图形仍旧保留在新建的布尔运算组中。解散该组后，组中各个图形还原为独立的图层。“取消编组”的快捷键为

Shift+Ctrl

+G，点击右键也可找到“取消编组”（Ungroup）功能。保留原图层单元4面性图标——布尔运算4.2.1合并运算布尔运算组内各个图形的样式，不影响布尔运算后的图形整体。所以如果需要修改布尔运算后图形的颜色、描边等属性，要选中整个布尔运算组进行修改。如右图，即使组内正方形为红色、紫色描边，布尔运算组的图形样式并不会被影响，仍旧为蓝色填充、黑色描边。布尔运算组样式单元4面性图标——布尔运算4.2.1合并运算布尔运算后图形的路径，仍是组内原图形的各自的路径。如果要将图形完全合并，得到整体图形的路径，则需要在布尔运算后，接着使用“拼合”（flatten）功能，对应的快捷键是

Alt+Shift+F

。使用“拼合”（flatten）后，布尔运算组消失，原图形拼合到一个图层内，图形路径线也变为合并图形的外轮廓。拼合图形单元4面性图标——布尔运算4.2.2案例练习——绘制云朵图标观察：观察图标发现，云朵图标可看做三个圆形和一个矩形拼合而成。目标：练习布尔运算的合并功能。单元4面性图标——布尔运算4.2.2案例练习——绘制云朵图标圆形与矩形完美衔接单元4面性图标——布尔运算4.2.3拓展练习——合并运算练习目标：在图标模版的辅助下，绘制并合并图标。观察下列图标，分析其图形的构成。运用前面章节所学的曲线绘制知识，制作下列图标，注意图形放置在图标模版中的位置。概览Overview4.1基础面形图标4.2填充区域的布尔运算—合并4.3填充区域的布尔运算—减去4.4填充区域的布尔运算—交集4.5单元练习单元4面性图标——布尔运算单元4面性图标——布尔运算4.3.1减去运算多个图形进行减去运算运算会用选中图形中上层图形的面积减去最下层图形的面积。单元4面性图标——布尔运算4.3.2案例练习——绘制月亮图标观察：观察并分析图标图形，可以发现用钢笔直接绘制月亮图形并不容易，但是通过两个圆形相减则简单的多。目标：练习布尔运算的减去功能。单元4面性图标——布尔运算4.3.2案例练习——绘制月亮图标展开“减去”得到的编组，移动组中上方圆形的位置，调整月牙的形状，直至得到满意的效果。单元4面性图标——布尔运算4.3.3

案例练习——绘制鼠标图标观察：观察并分析图标图形，发现鼠标的主体图形是“胶囊形状”，中间的镂空是矩形。所以本图标可以通过圆角矩形减去两个矩形得到。目标：练习布尔运算的减去功能。单元4面性图标——布尔运算4.3.4

案例练习——绘制优惠券图标观察：观察并分析图标图形，可以发现优惠券的主体图形是一个矩形。通过两个半圆、一个五角星与矩形的相减，即可形成优惠券图形。目标：练习布尔运算的减去功能。单元4面性图标——布尔运算4.3.4

案例练习——绘制优惠券图标星形的外框与图形大小不同（此处使用拼合功能，仅为了演示，实际制作图标时，无需拼合）单元4面性图标——布尔运算4.3.5

综合练习——绘制拼图图标观察：观察并分析图标图形后，发现拼图的主体图形是一个正方形，通过4个圆角矩形和正方形的增减，形成了拼图图形。目标：布尔运算合并和减去功能的综合使用。单元4面性图标——布尔运算4.3.6综合练习——绘制头盔图标观察：观察并分析图标图形后，发现头盔的主体图形是圆形和某个特殊形状的组合。圆形绘制简单，左下方的特殊形状像三角形，我们可以通过给矩形加圆角得到。目标：布尔运算合并和减去功能的综合使用。单元4面性图标——布尔运算4.3.7

拓展练习——减去运算练习目标：在图标模版的辅助下，绘制带有镂空的面形图标。观察下列图标，分析其图形的构成。运用前面章节所学的知识，绘制下列图标的基础图形，然后制作镂空。注意图形放置在图标模版中的位置，以及其中镂空部分的对称性。概览Overview4.1基础面形图标4.2填充区域的布尔运算—合并4.3填充区域的布尔运算—减去4.4填充区域的布尔运算—交集4.5单元练习单元4面性图标——布尔运算单元4面性图标——布尔运算4.4.1交集运算的特点交集”（Intersect）会计算选中图形面积的相交部分。经过“交集”运算后，原有的选中图形就不再显示了，只显示交集的区域，所以如果原有图形还需要继续使用，注意在交集运算前复制一份原有图形，在接下来的练习中将会用到这一点。与“交集”正好相反，“排除”（Exclude）会计算选中图形面积的不相交部分。排除在实际使用中较少，所以本书不做案例练习。单元4面性图标——布尔运算4.4.2案例练习——绘制娃娃头图标观察：观察并分析图标图形，可以发现图标中娃娃的脸和眼睛都是正圆形；两侧的刘海则是圆形的一部分，所以可以使用交集制作娃娃的刘海。目标：练习布尔运算的交集功能。单元4面性图标——布尔运算4.4.3

案例练习——绘制盾牌图标观察：观察并分析图标图形，可以发现盾牌的主体图形可以由六边形得到，盾牌内部的图案分别是两个矩形的一部分。盾牌内部的图案，可以由盾牌图形和两个矩形进行交集运算得到。目标：练习布尔运算的交集功能。单元4面性图标——布尔运算4.4.4拓展练习——交集运算练习目标：在图标模版的辅助下，使用交集绘制不规则图案。观察下列图标，分析其图形的构成。运用前面章节所学的知识，绘制下列图标的基础图形，然后制作图形内部的图案。注意图形放置在图标模版中的位置。概览Overview4.1基础面形图标4.2填充区域的布尔运算—合并4.3填充区域的布尔运算—减去4.4填充区域的布尔运算—交集4.5单元练习单元4面性图标——布尔运算单元4面性图标——布尔运算4.5.1知识回顾本单元主要讲解了图标模版和布尔运算。其中图标模版可以规范图标的绘制，让一整套图标拥有相近的视觉大小和一致的视觉重心。而布尔运算则通过多个图形面积间的加减乘除，绘制出各种复杂的形状。在之前的章节中，我们学习了曲线、锚点、圆角等方法来绘制复杂图形，本章介绍了三种布尔运算。使用这些方法，大家可以绘制出绝大多数图标。在以后的图标绘制