1.4 UI在Illustrator中的常用工具

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

1.4.1 課堂案例：用常用工具制作手機圖標

本案例是在Illustrator中用UI設計的常用工具制作手機中常見的圖標，效果如圖1-65所示。讀者可以通過這個案例，簡單了解UI圖標設計的過程。

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

提示

在默認情況下，Illustrator的默認單位是“毫米”。執行“編輯>首選項”菜單命令，在彈出的“首選項”對話框中選擇“單位”選項卡，然后設置“常規”為“像素”，如圖1-67所示。

02繪制信號圖標。信號圖標由5條長度不同的豎線組成。使用“矩形工具”繪制一個6px×6px的矩形，設置“填充”為黑色，關閉“描邊”，如圖1-68所示。

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

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

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

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

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

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

09繪制Wi-Fi圖標。Wi-Fi圖標由4個大小不同的同心圓環組成。復制一份灰色背景，使用“橢圓工具”在背景內繪制一個48px×48px的圓形，然后設置“描邊粗細”為2pt，如圖1-75所示。

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

提示

圓環超出背景范圍沒有關系，在后面的步驟中會解決此問題。

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

12 按照同樣的方法處理另外兩個圓環，效果如圖1-79所示。

13 全選3個圓環，將其旋轉90°，然后均勻放大到合適的大小，如圖1-80所示。

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

15 選中3個圓環，執行“對象>路徑>輪廓化描邊”菜單命令，如圖1-82所示。

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

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

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

提示

執行“輪廓化描邊”命令后，再進行“聯集”操作就不會出現圖形變化的問題。

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

20繼續選中上一步修改后的圓角矩形左側的兩個錨點，并向右移動一段距離，如圖1-87所示。

21 使用“矩形工具”繪制一個8px×16px的矩形，設置“填充”為黑色，并關閉“描邊”選項，如圖1-88所示。

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

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

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

1.4.2 選擇工具

“選擇工具”（快捷鍵為V）可以選中場景中的任意對象，也可以拖曳鼠標，用框選的方式一次選中多個對象，如圖1-92和圖1-93所示。

按住Shift鍵可以加選或減選多個對象。按住Alt鍵并使用“移動工具”移動選中的對象，可以將該對象移動并復制一份，如圖1-94所示。

1.4.3 直接選擇工具

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

1.4.4 鋼筆工具

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

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

刪除所選錨點：選中錨點后，單擊此按鈕，選中的錨點會被刪除，如圖1-98所示。

在所選錨點處剪切路徑：選中錨點后單擊此按鈕，會將完整的路徑斷開，形成兩個獨立的路徑，如圖1-99所示。

1.4.5 矩形工具

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

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

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

描邊粗細：設置描邊線條的像素。

提示

在右側的“描邊”面板中，可以設置描邊線條的粗細、端點、邊角和對齊描邊等屬性，如圖1-103所示。

不透明度：設置矩形顯示的不透明度，默認為100％，即完全顯示。

形狀：單擊可彈出下拉面板，設置矩形的長度、寬度、旋轉和圓角等參數，如圖1-104所示。

提示

在右側的“變換”面板中也可以修改相應的參數，如圖1-105所示。

1.4.6 圓角矩形工具

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

除了在“變換”面板中設置“圓角半徑”參數外，也可以直接在矩形對象上設置圓角效果。選中矩形，會發現在4個角點的內側有小圓點，如圖1-107所示。

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

1.4.7 橢圓工具

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

1.4.8 多邊形工具

“多邊形工具”可以創建邊數≥3的多邊形。選中“多邊形工具”后在畫板上單擊鼠標，會彈出“多邊形”對話框，如圖1-110所示。在對話框內，可以設置多邊形的“半徑”和“邊數”兩個參數，設置完成后單擊“確定”按鈕，就會在畫板上生成相應的多邊形，如圖1-111所示。

在“變換”面板中，可以繼續設置創建的多邊形的參數，如圖1-112所示。

1.4.9 文字工具

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

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

提示

“字符”面板默認情況下不在軟件右側的控制面板中，用戶可以將其移動到控制面板，方便制作時使用。

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

制作封套：單擊該按鈕可以讓平直排列的文字變成弧形排列，如圖1-116所示。單擊該按鈕后，會彈出“變形選項”面板，在面板中可以設置文字變形的“樣式”和“彎曲”等各項參數，如圖1-117所示。