UI圖標(biāo)圖形設(shè)計(jì)FIGMAUI3版單元5面性圖標(biāo)——常用技巧xx學(xué)校xx學(xué)院xxx專業(yè)李炳琰教師概覽Overview單元5面性圖標(biāo)——常用技巧5.1

旋轉(zhuǎn)對(duì)稱圖形5.2

輪廓化描邊5.3

組合圖形5.4

單元練習(xí)單元5面性圖標(biāo)——常用技巧5.1

旋轉(zhuǎn)對(duì)稱圖形圖標(biāo)中經(jīng)常有旋轉(zhuǎn)對(duì)稱的圖形，是由圍繞圓心旋轉(zhuǎn)并復(fù)制得到的圖形。但是選中對(duì)象后，其旋轉(zhuǎn)中心在選中框的正中心且無法修改。所以如果想要繪制圍繞圓心旋轉(zhuǎn)的圖形，就需要擴(kuò)大選中對(duì)象，讓選中對(duì)象的旋轉(zhuǎn)中心和圓心重合。接下來我們將通過案例介紹這種繪制思路。單元5面性圖標(biāo)——常用技巧5.1.1案例練習(xí)——繪制設(shè)置圖標(biāo)觀察：這是一個(gè)典型的旋轉(zhuǎn)對(duì)稱圖形。觀察并分析圖標(biāo)圖形后，發(fā)現(xiàn)圖標(biāo)由六個(gè)梯形和一個(gè)空心圓組成。所以需要將梯形進(jìn)行旋轉(zhuǎn)和復(fù)制。目標(biāo)：練習(xí)旋轉(zhuǎn)對(duì)稱圖形的繪制。練習(xí)布爾運(yùn)算的合并功能。單元5面性圖標(biāo)——常用技巧5.1.1案例練習(xí)——繪制設(shè)置圖標(biāo)編組的兩種方法：1.

選中對(duì)象，按下

Ctrl

+G，將其編組。2.

選中對(duì)象，單擊鼠標(biāo)右鍵，選擇彈出菜單中的“編組”（Groupselection）。取消編組的三種方法：1.

選中對(duì)象，按下

Ctrl+Backspace

。2.

選中對(duì)象，按下

Ctrl+Shift+G

。1.

選中對(duì)象，單擊鼠標(biāo)右鍵，選擇彈出菜單中的“取消編組”（Ungroup）。單元5面性圖標(biāo)——常用技巧5.1.2

案例練習(xí)——繪制花朵圖標(biāo)觀察：圖標(biāo)由上下兩部分組成，其中上半部分是旋轉(zhuǎn)對(duì)稱圖形，下半部分的樹葉類似之前娃娃頭圖標(biāo)的“劉?！毙螤睢Ｄ繕?biāo)：練習(xí)旋轉(zhuǎn)對(duì)稱圖形的繪制；練習(xí)布爾運(yùn)算的交集和合并功能。單元5面性圖標(biāo)——常用技巧5.1.3拓展練習(xí)——旋轉(zhuǎn)對(duì)稱圖形練習(xí)目標(biāo)：在圖標(biāo)模版的輔助下，繪制旋轉(zhuǎn)對(duì)稱圖標(biāo)。觀察下列圖標(biāo)，分析其圖形的構(gòu)成。運(yùn)用本章所學(xué)的旋轉(zhuǎn)對(duì)稱圖標(biāo)的繪制技巧以及上一章節(jié)學(xué)習(xí)的布爾運(yùn)算，制作下列圖標(biāo)，注意圖形在圖標(biāo)模版中的位置。概覽Overview單元5面性圖標(biāo)——常用技巧5.1

旋轉(zhuǎn)對(duì)稱圖形5.2

輪廓化描邊5.3

組合圖形5.4

單元練習(xí)單元5面性圖標(biāo)——常用技巧5.2.1輪廓化描邊“輪廓化描邊（OutlineStroke）“是將圖形的描邊轉(zhuǎn)換為填充區(qū)域，同時(shí)圖形的路徑會(huì)隨之改變。如圖所示，路徑從原本的圖形形狀線變成了圍繞填充區(qū)域的輪廓線。單元5面性圖標(biāo)——常用技巧5.2.1輪廓化描邊填充圖形和描邊圖形的縮放對(duì)比單元5面性圖標(biāo)——常用技巧5.2.1輪廓化描邊輪廓化描邊后拆分圖形單元5面性圖標(biāo)——常用技巧5.2.2案例練習(xí)——繪制愛心圖標(biāo)目標(biāo)：學(xué)習(xí)愛心圖標(biāo)的繪制方法。單元5面性圖標(biāo)——常用技巧5.2.2案例練習(xí)——繪制愛心圖標(biāo)調(diào)整心形形狀單元5面性圖標(biāo)——常用技巧5.2.2案例練習(xí)——繪制愛心圖標(biāo)未輪廓化描邊心形縮放失真單元5面性圖標(biāo)——常用技巧5.2.3拓展練習(xí)——愛心圖形的變形練習(xí)目標(biāo)：繪制多種風(fēng)格的心形圖標(biāo)。觀察下列心形圖標(biāo)，分析圖形特點(diǎn)。運(yùn)用本章所學(xué)知識(shí)，繪制愛心形狀并進(jìn)行變形。注意圖形在圖標(biāo)模版中的位置。概覽Overview單元5面性圖標(biāo)——常用技巧5.1

旋轉(zhuǎn)對(duì)稱圖形5.2

輪廓化描邊5.3

組合圖形5.4

單元練習(xí)單元5面性圖標(biāo)——常用技巧5.3

組合圖形當(dāng)圖標(biāo)由多個(gè)填充圖形組成時(shí)，圖形之間需要留出縫隙，從而保證圖形的清晰?？p隙的粗細(xì)是固定的，形狀由圖形相接處的形狀決定。如果是圖中規(guī)則圖形，縫隙制作較為簡(jiǎn)單。但如果是不規(guī)則的圖形，則無法直接制作縫隙，需要通過用圖形描邊來制作。本小節(jié)將學(xué)習(xí)如何制作圖形組合中的縫隙，讓圖形之間能夠完美拼合。單元5面性圖標(biāo)——常用技巧5.3.1案例練習(xí)——繪制云朵月亮圖標(biāo)觀察：本圖標(biāo)是由“月亮”和“云朵”兩個(gè)圖形組合而成，在兩個(gè)圖形接觸的位置留有縫隙。其中，月亮是由兩個(gè)圓形相減而成，而云朵則主要由兩個(gè)圓形組成。目標(biāo)：練習(xí)圖標(biāo)縫隙的制作；練習(xí)布爾運(yùn)算的合并和減去。單元5面性圖標(biāo)——常用技巧5.3.2

案例練習(xí)——繪制飲料漢堡圖標(biāo)觀察：觀察并分析圖標(biāo)圖形后，發(fā)現(xiàn)圖形由漢堡和飲料圖形組成。其中漢堡圖形由圓角矩形和矩形組成，飲料由梯形和矩形組成，而且左右兩個(gè)圖形間有縫隙。目標(biāo)：練習(xí)圖標(biāo)縫隙的制作；練習(xí)布爾運(yùn)算的合并和減去。單元5面性圖標(biāo)——常用技巧5.3.3拓展練習(xí)——組合填充圖形練習(xí)目標(biāo)：繪制帶有縫隙的圖標(biāo)。觀察下列面性圖標(biāo)，分析圖形由那幾個(gè)圖形組成。運(yùn)用所學(xué)知識(shí)，繪制下列圖標(biāo)中的各個(gè)圖形并將其組合、制作圖形之間的縫隙。注意圖形在圖標(biāo)模版中的位置。概覽Overview單元5面性圖標(biāo)——常用技巧5.1

旋轉(zhuǎn)對(duì)稱圖形5.2

輪廓化描邊5.3

組合圖形5.4

單元練習(xí)單元5面性圖標(biāo)——常用技巧5.4

單元練習(xí)請(qǐng)分析并繪制圖中圖標(biāo)。前三個(gè)圖標(biāo)，需要使用旋轉(zhuǎn)對(duì)稱圖形的繪制技巧。其中，第一個(gè)圖標(biāo)，繪制好一圈發(fā)光的線段后，刪除多余的發(fā)光線段。最后一個(gè)圖標(biāo)，需要使用組合圖形的縫隙繪制技巧，同時(shí)需要使用圓角制作曲線和布爾運(yùn)算。單元5面性圖