UI图标设计制作教程（Figma UI3）课件 第五单元面性图标-常用技巧

UI图标图形设计FIGMAUI3版单元5面性图标——常用技巧xx学校xx学院xxx专业李炳琰教师概览Overview单元5面性图标——常用技巧5.1

旋转对称图形5.2

轮廓化描边5.3

组合图形5.4

单元练习单元5面性图标——常用技巧5.1

旋转对称图形图标中经常有旋转对称的图形，是由围绕圆心旋转并复制得到的图形。但是选中对象后，其旋转中心在选中框的正中心且无法修改。所以如果想要绘制围绕圆心旋转的图形，就需要扩大选中对象，让选中对象的旋转中心和圆心重合。接下来我们将通过案例介绍这种绘制思路。单元5面性图标——常用技巧5.1.1案例练习——绘制设置图标观察：这是一个典型的旋转对称图形。观察并分析图标图形后，发现图标由六个梯形和一个空心圆组成。所以需要将梯形进行旋转和复制。目标：练习旋转对称图形的绘制。练习布尔运算的合并功能。单元5面性图标——常用技巧5.1.1案例练习——绘制设置图标编组的两种方法：1.

选中对象，按下

Ctrl

+G，将其编组。2.

选中对象，单击鼠标右键，选择弹出菜单中的“编组”（Groupselection）。取消编组的三种方法：1.

选中对象，按下

Ctrl+Backspace

。2.

选中对象，按下

Ctrl+Shift+G

。1.

选中对象，单击鼠标右键，选择弹出菜单中的“取消编组”（Ungroup）。单元5面性图标——常用技巧5.1.2

案例练习——绘制花朵图标观察：图标由上下两部分组成，其中上半部分是旋转对称图形，下半部分的树叶类似之前娃娃头图标的“刘海”形状。目标：练习旋转对称图形的绘制；练习布尔运算的交集和合并功能。单元5面性图标——常用技巧5.1.3拓展练习——旋转对称图形练习目标：在图标模版的辅助下，绘制旋转对称图标。观察下列图标，分析其图形的构成。运用本章所学的旋转对称图标的绘制技巧以及上一章节学习的布尔运算，制作下列图标，注意图形在图标模版中的位置。概览Overview单元5面性图标——常用技巧5.1

旋转对称图形5.2

轮廓化描边5.3

组合图形5.4

单元练习单元5面性图标——常用技巧5.2.1轮廓化描边“轮廓化描边（OutlineStroke）“是将图形的描边转换为填充区域，同时图形的路径会随之改变。如图所示，路径从原本的图形形状线变成了围绕填充区域的轮廓线。单元5面性图标——常用技巧5.2.1轮廓化描边填充图形和描边图形的缩放对比单元5面性图标——常用技巧5.2.1轮廓化描边轮廓化描边后拆分图形单元5面性图标——常用技巧5.2.2案例练习——绘制爱心图标目标：学习爱心图标的绘制方法。单元5面性图标——常用技巧5.2.2案例练习——绘制爱心图标调整心形形状单元5面性图标——常用技巧5.2.2案例练习——绘制爱心图标未轮廓化描边心形缩放失真单元5面性图标——常用技巧5.2.3拓展练习——爱心图形的变形练习目标：绘制多种风格的心形图标。观察下列心形图标，分析图形特点。运用本章所学知识，绘制爱心形状并进行变形。注意图形在图标模版中的位置。概览Overview单元5面性图标——常用技巧5.1

旋转对称图形5.2

轮廓化描边5.3

组合图形5.4

单元练习单元5面性图标——常用技巧5.3

组合图形当图标由多个填充图形组成时，图形之间需要留出缝隙，从而保证图形的清晰。缝隙的粗细是固定的，形状由图形相接处的形状决定。如果是图中规则图形，缝隙制作较为简单。但如果是不规则的图形，则无法直接制作缝隙，需要通过用图形描边来制作。本小节将学习如何制作图形组合中的缝隙，让图形之间能够完美拼合。单元5面性图标——常用技巧5.3.1案例练习——绘制云朵月亮图标观察：本图标是由“月亮”和“云朵”两个图形组合而成，在两个图形接触的位置留有缝隙。其中，月亮是由两个圆形相减而成，而云朵则主要由两个圆形组成。目标：练习图标缝隙的制作；练习布尔运算的合并和减去。单元5面性图标——常用技巧5.3.2

案例练习——绘制饮料汉堡图标观察：观察并分析图标图形后，发现图形由汉堡和饮料图形组成。其中汉堡图形由圆角矩形和矩形组成，饮料由梯形和矩形组成，而且左右两个图形间有缝隙。目标：练习图标缝隙的制作；练习布尔运算的合并和减去。单元5面性图标——常用技巧5.3.3拓展练习——组合填充图形练习目标：绘制带有缝隙的图标。观察下列面性图标，分析图形由那几个图形组成。运用所学知识，绘制下列图标中的各个图形并将其组合、制作图形之间的缝隙。注意图形在图标模版中的位置。概览Overview单元5面性图标——常用技巧5.1

旋转对称图形5.2

轮廓化描边5.3

组合图形5.4

单元练习单元5面性图标——常用技巧5.4

单元练习请分析并绘制图中图标。前三个图标，需要使用旋转对称图形的绘制技巧。其中，第一个图标，绘制好一圈发光的线段后，删除多余的发光线段。最后一个图标，需要使用组合图形的缝隙绘制技巧，同时需要使用圆角制作曲线和布尔运算。单元5面性图