1.4　UI在Illustrator中的常用工具

雖然Illustrator的工具有很多，但用在UI設(shè)計(jì)中的只有一小部分，如“選擇工具”“矩形工具”和“鋼筆工具”等。

1.4.1　課堂案例：用常用工具制作手機(jī)圖標(biāo)

素材位置　無

實(shí)例位置　實(shí)例文件>CH01>課堂案例：用常用工具制作手機(jī)圖標(biāo).ai

視頻名稱　課堂案例：用常用工具制作手機(jī)圖標(biāo).mp4

學(xué)習(xí)目標(biāo)　掌握Illustrator繪制圖標(biāo)的常用工具的用法

本案例是在Illustrator中用UI設(shè)計(jì)的常用工具制作手機(jī)中常見的圖標(biāo)，效果如圖1-65所示。讀者可以通過這個(gè)案例，簡(jiǎn)單了解UI圖標(biāo)設(shè)計(jì)的過程。

01　啟動(dòng)Illustrator，使用“矩形工具”在視口中繪制一個(gè)48px×48px的淺灰色矩形并關(guān)閉“描邊”，如圖1-66所示。

02　繪制信號(hào)圖標(biāo)。信號(hào)圖標(biāo)由5條長(zhǎng)度不同的豎線組成。使用“矩形工具”繪制一個(gè)6px×6px的矩形，設(shè)置“填充”為黑色，關(guān)閉“描邊”，如圖1-68所示。

03　將上一步繪制的矩形復(fù)制4份，并均勻排列，如圖1-69所示。

04　選中復(fù)制的4個(gè)矩形，然后依次增加其高度，如圖1-70所示。

05　使用“鋼筆工具”繪制圖1-71所示的輔助線，其描邊寬度不要太粗。

06　使用“直接選擇工具”逐一調(diào)整矩形的角點(diǎn)，使其貼合輔助線，如圖1-72所示。

07　選中輔助線并刪除，然后全選所有的矩形，執(zhí)行“窗口>路徑查找器”菜單命令，打開“路徑查找器”面板，單擊“聯(lián)集”按鈕將其合并為一個(gè)圖形，如圖1-73所示。

08　按住Shift鍵拖曳選框的角點(diǎn)，將其均勻放大到合適的大小，如圖1-74所示。

09　繪制Wi-Fi圖標(biāo)。Wi-Fi圖標(biāo)由4個(gè)大小不同的同心圓環(huán)組成。復(fù)制一份灰色背景，使用“橢圓工具”在背景內(nèi)繪制一個(gè)48px×48px的圓形，然后設(shè)置“描邊粗細(xì)”為2pt，如圖1-75所示。

10　將上一步繪制的圓形復(fù)制兩份，設(shè)置其“寬度”和“高度”分別為36px×36px和24px×24px，效果如圖1-76所示。

11　使用“直接選擇工具”選中圖1-77所示的最外側(cè)圓形的兩個(gè)錨點(diǎn)，然后按Delete鍵將其刪除，如圖1-78所示。

12　按照同樣的方法處理另外兩個(gè)圓環(huán)，效果如圖1-79所示。

13　全選3個(gè)圓環(huán)，將其旋轉(zhuǎn)90°，然后均勻放大到合適的大小，如圖1-80所示。

14　使用“橢圓工具”繪制一個(gè)6px×6px的圓形，設(shè)置“填充”為黑色，關(guān)閉“描邊”，如圖1-81所示。

15　選中3個(gè)圓環(huán)，執(zhí)行“對(duì)象>路徑>輪廓化描邊”菜單命令，如圖1-82所示。

16　選中所有的圖形，在“路徑查找器”中單擊“聯(lián)集”按鈕，將其合并為一個(gè)圖形，如圖1-83所示。

17　繪制電量圖標(biāo)。電量圖標(biāo)由不同大小的圓角矩形組成。使用“圓角矩形工具”繪制一個(gè)46px×20px，“圓角”為10px，“描邊粗細(xì)”為2pt的圓角矩形，如圖1-84所示。

18　將上一步繪制的圓角矩形復(fù)制一份，設(shè)置“寬度”為42px，“高度”為16px，“圓角”為8px，然后設(shè)置“填充”為黑色，關(guān)閉“描邊”，如圖1-85所示。

19　使用“直接選擇工具”選中左側(cè)的錨點(diǎn)并刪除，如圖1-86所示。

20　繼續(xù)選中上一步修改后的圓角矩形左側(cè)的兩個(gè)錨點(diǎn)，并向右移動(dòng)一段距離，如圖1-87所示。

21　使用“矩形工具”繪制一個(gè)8px×16px的矩形，設(shè)置“填充”為黑色，并關(guān)閉“描邊”選項(xiàng)，如圖1-88所示。

22　將上一步繪制的矩形向左復(fù)制一份，如圖1-89所示。

23　選中圓角矩形的外框，執(zhí)行“對(duì)象>路徑>輪廓化描邊”菜單命令，如圖1-90所示。

24　選中所有圖形，使用“聯(lián)集”工具將其合并為一個(gè)圖形，如圖1-91所示。

1.4.2　選擇工具

“選擇工具”（快捷鍵為V）可以選中場(chǎng)景中的任意對(duì)象，也可以拖曳鼠標(biāo)，用框選的方式一次選中多個(gè)對(duì)象，如圖1-92和圖1-93所示。

按住Shift鍵可以加選或減選多個(gè)對(duì)象。按住Alt鍵并使用“移動(dòng)工具”移動(dòng)選中的對(duì)象，可以將該對(duì)象移動(dòng)并復(fù)制一份，如圖1-94所示。

1.4.3　直接選擇工具

Illustrator中的“直接選擇工具”（快捷鍵為A）與Photoshop中的功能和用法一樣，都是選擇路徑錨點(diǎn)的工具。選中的錨點(diǎn)可以移動(dòng)位置，也可以被刪除，如圖1-95所示。

1.4.4　鋼筆工具

Illustrator中的“鋼筆工具”（快捷鍵為P）與Photoshop中的功能和用法一樣，都是繪制路徑的工具，其控制欄如圖1-96所示。

轉(zhuǎn)換：選中的錨點(diǎn)可以被轉(zhuǎn)換為尖角或轉(zhuǎn)換為平滑，如圖1-97所示。

刪除所選錨點(diǎn)：選中錨點(diǎn)后，單擊此按鈕，選中的錨點(diǎn)會(huì)被刪除，如圖1-98所示。

在所選錨點(diǎn)處剪切路徑：選中錨點(diǎn)后單擊此按鈕，會(huì)將完整的路徑斷開，形成兩個(gè)獨(dú)立的路徑，如圖1-99所示。

1.4.5　矩形工具

“矩形工具”（快捷鍵為M）的操作方法與Photoshop中的“矩形工具”相同，其控制欄如圖1-100所示。

填充：設(shè)置矩形填充的顏色，如圖1-101所示。

描邊：設(shè)置矩形描邊的顏色，如圖1-102所示。

描邊粗細(xì)：設(shè)置描邊線條的像素。

不透明度：設(shè)置矩形顯示的不透明度，默認(rèn)為100%，即完全顯示。

形狀：單擊可彈出下拉面板，設(shè)置矩形的長(zhǎng)度、寬度、旋轉(zhuǎn)和圓角等參數(shù)，如圖1-104所示。

1.4.6　圓角矩形工具

“圓角矩形工具”只是在“矩形工具”的基礎(chǔ)上增加了“圓角半徑”參數(shù)，用戶在矩形的基礎(chǔ)上修改“圓角半徑”的參數(shù)就可以創(chuàng)建圓角矩形，如圖1-106所示。

除了在“變換”面板中設(shè)置“圓角半徑”參數(shù)外，也可以直接在矩形對(duì)象上設(shè)置圓角效果。選中矩形，會(huì)發(fā)現(xiàn)在4個(gè)角點(diǎn)的內(nèi)側(cè)有小圓點(diǎn)，如圖1-107所示。

選中需要轉(zhuǎn)換為圓角的小圓點(diǎn)按住鼠標(biāo)并拖曳，就可以直觀地看到直角變成圓角，如圖1-108所示。需要注意的是，該功能只存在于Photoshop CC 2017及其以上版本中。

1.4.7　橢圓工具

“橢圓工具”（快捷鍵為L(zhǎng)）的操作方法與Photoshop相同，其選項(xiàng)欄如圖1-109所示。

1.4.8　多邊形工具

“多邊形工具”可以創(chuàng)建邊數(shù)≥3的多邊形。選中“多邊形工具”后在畫板上單擊鼠標(biāo)，會(huì)彈出“多邊形”對(duì)話框，如圖1-110所示。在對(duì)話框內(nèi)，可以設(shè)置多邊形的“半徑”和“邊數(shù)”兩個(gè)參數(shù)，設(shè)置完成后單擊“確定”按鈕，就會(huì)在畫板上生成相應(yīng)的多邊形，如圖1-111所示。

在“變換”面板中，可以繼續(xù)設(shè)置創(chuàng)建的多邊形的參數(shù)，如圖1-112所示。

1.4.9　文字工具

“文字工具”（快捷鍵為T）是在畫板上輸入文字的工具，其控制欄如圖1-113所示。

字符：單擊該按鈕會(huì)彈出“字符”面板，按Ctrl+T組合鍵也可彈出該面板，如圖1-114所示，在面板中可設(shè)置文字的字體、大小和字間距等參數(shù)。

段落：設(shè)置多行文字對(duì)齊的方式，在“段落”面板中有更為詳細(xì)的對(duì)齊方式，如圖1-115所示。

制作封套：?jiǎn)螕粼摪粹o可以讓平直排列的文字變成弧形排列，如圖1-116所示。單擊該按鈕后，會(huì)彈出“變形選項(xiàng)”面板，在面板中可以設(shè)置文字變形的“樣式”和“彎曲”等各項(xiàng)參數(shù)，如圖1-117所示。