1. 外觀屬性和外觀面板
首先了解下什麼是外觀屬性，以及如何在外觀面板中查看外觀屬性：
外觀屬性是一組在不改變對象基礎結構的前提下影響對象外觀的屬性。外觀屬性包括填色、描邊、透明度和效果。如果把一個外觀屬性應用於某對象而後又編輯或刪除這個屬性，該基本對象以及任何應用於該對象的其他屬性都不會改變。──Adobe Illustrator 用戶指南
△ 圖1.1-1 使用外觀面板查看外觀屬性內容。
您可以在圖層層次結構的任意層級設置外觀屬性。例如，如果您對一個圖層應用投影效果，則該圖層中的所有對象都將應用此投影效果。但是，如果您將其中的一個對象移出該圖層，則此對象將不再具有投影效果，因為投影效果屬於圖層，而不屬於圖層內的每個對象。──Adobe Illustrator 用戶指南
△ 圖1.1-2 點擊圖層右側圓點可查看圖層外觀面板，「圓角」效果應用於圖層一。
△ 圖1.1-3 路徑3（黃色）從圖層1挪至圖層2之後，不再具有「圓角」效果。
您可以使用「外觀」面板（「窗口」>「外觀」）來查看和調整對象、組或圖層的外觀屬性。填充和描邊將按堆棧順序列出；面板中從上到下的順序對應於圖稿中從前到後的順序。各種效果按其在圖稿中的應用順序從上到下排列。──Adobe Illustrator 用戶指南
△ 圖1.1-4 面板順序和效果呈現。
△ 圖1.1-5 一個對象可添加多重描邊、多重填色、多重效果。
2. 偏移路徑 VS 位移路徑
偏移路徑：選擇對象執行「對象」>「路徑」>「偏移路徑」，根據位移值的正負，會外擴或內縮出一條新的路徑，本質上是複製。
位移路徑：選擇對象執行「效果」>「路徑」>「位移路徑」，根據位移值的正負，原路徑外擴或內縮，只是外觀產生變化，沒有產生新的路徑，之後還可以在外觀面板裡修改屬性參數。
3. 擴展 VS 擴展外觀
兩者的區別在於是否應用了外觀屬性。
擴展對象可用來將單一對象分割為若干個對象，這些對象共同組成其外觀。例如，如果擴展一個簡單對象，例如一個具有實色填色和描邊的圓，那麼，填色和描邊就會變為離散的對象。如果擴展更加複雜的圖稿，例如具有圖案填充的對象，則圖案會被分割為各種截然不同的路徑，而所有這些路徑組合在一起，就是創建這一填充圖案的路徑。
如果對象應用了外觀屬性，則「對象」>「擴展」命令將變暗。在這種情況下，請選擇「對象」>「擴展外觀」，然後再選擇「對象」>「擴展」。
──Adobe Illustrator 用戶指南
無損畫圖技巧
1. 矢量效果（即Illustrator效果）
矢量效果可以往宏觀說可以用在對象、編組、圖層上，往微觀說可以用在矢量圖形的描邊或填色上，例如圖1.1-2中「圓角」效果用在圖層上、圖1.1-4中「圓角」效果用在描邊或填色上。通過「外觀」面板編輯、移動、複製、刪除該效果，還可將效果存儲為圖形樣式的一部分（更多內容請查看章節4.2 圖形樣式）。
△ 圖2.1-1 矢量效果菜單。
位移路徑（「效果」>「路徑」>「位移路徑」）
不規則的矢量圖形等比縮放後，路徑間距寬窄不均。使用位移路徑，可以確保邊距寬窄一致。如果對路徑形狀進行調整，位移路徑的形狀也會自動隨之變化，無需手動調整。
△ 圖2.1-2 使用位移路徑製作填色內縮效果。
△ 圖2.1-3 根據設計規範，圖標的前景和背景間距須保持一致，如圖紅點標記位置。
△ 圖2.1-4 統一將前景的填色使用位移路徑效果。然後對前景「對象」>「擴展外觀」，將白色填色獨立出來，作為背景對象裁剪路徑的基準（裁剪時，剪刀工具會自動捕捉到路徑）。
變換效果（「效果」>「扭曲和變換」>「變換」）
變換效果可以說是寶藏效果，大家嘗試隨便畫一個點，一條線，通過調試面板參數來感受下魔術般神奇的效果。
△ 圖2.1-5 使用變換的旋轉設置來繪製雪花圖標。
波紋效果（「效果」>「扭曲和變換」>「波紋效果」）
使用波紋效果製作波浪線，基本對象依舊是直線，擴展外觀之前都可以反覆調整波浪起伏大小和波浪數。
△ 圖2.1-6 製作紙張波浪線裁切效果。
2. 混合工具
混合工具的優勢是，對象混合後，混合選項可繼續編輯，被混合的對象也可單獨調整。
將混合後的對象「對象」>「擴展」，中間過渡的矢量圖形就被路徑化了，可被選中並編輯。
△ 圖2.2-1 使用混合工具製作同心圓。
△ 圖2.2-2 使用混合工具製作漸變波浪線，上面的線條包含「波紋」效果。
3. 剪切蒙版
「對象」>「剪切蒙版」>「建立」，快捷鍵ctrl+7/cmd+7。下面的案例利用剪切蒙版繪製WiFi圖標：
- 使用混合工具繪製同心圓，繪製蒙版。
- 創建剪切蒙版。
- 旋轉，完成。
△ 圖2.3-1 利用剪切蒙版繪製WiFi圖標。
注：此時WiFi圖標的各部分沒有被路徑化。若想將其徹底路徑化，需要先擴展同心圓，再使用路徑查找器，利用剪切蒙版對擴展後的同心圓進行分隔。
快速選擇目標
1. 按特徵選擇對象
若要選擇具有相同屬性的所有對象，請選擇一個具有您所需屬性的對象，然後選擇「選擇」>「相同」，之後再從列表（混合模式、填色和描邊、填充顏色、不透明度、描邊顏色、描邊粗細、樣式、符號實例和鏈接塊系列）中選擇一種屬性。──Adobe Illustrator 用戶指南
△ 圖3.1-1 可選特徵類型。
△ 圖3.1-2 選中一個黃色對象，「選擇」>「相同」>「填充顏色」，即可選中所有黃色對象。
△ 圖3.1-3 選中具有相同外觀屬性的對象（即位移路徑2px）。
注意：如果將工具欄的「比例縮放工具」面板中「比例縮放描邊和效果」勾選，單個對象在縮放過程中描邊粗細和效果參數（如圓角半徑、路徑位移距離、模糊大小等）也等比縮放，那麼按照特徵批量選擇時，「選擇相同描邊」或「選擇相同外觀」就無法將其選中。
△ 圖3.1-4 描邊粗細和效果參數等比縮放。
△ 圖3.1-5 建議取消勾選「比例縮放描邊和效果」，避免微調過程中對象特徵不統一，無法批量選擇。
2. 編組和隔離對象
隔離模式自動鎖定其他所有對象，因此您所做的編輯只會影響處於隔離模式的對象 — 您不需要關心對象在哪個圖層上，也不需要手動鎖定或隱藏不應受所做編輯影響的對象。當隔離模式處於現用狀態時，隔離的對象以全色顯示，而圖稿的其餘部分則會變暗。geli（有時稱為「麵包屑」）顯示在隔離模式邊框中，而「圖層」面板則僅僅顯示隔離子圖層或組中的圖稿。當退出隔離模式時，其他圖層和組將重新顯示在「圖層」面板中。──Adobe Illustrator 用戶指南
將需要批量操作的對象編組，進入隔離模式後（使用選擇工具雙擊路徑或組，按 Esc 鍵退出）編輯對象，隔離部分以外的內容不會被選中。
△ 圖3.2-1 隔離對象後，選擇相同描邊粗細或描邊顏色，隔離部分以外的內容不會被選中。
3. 巧用圖層
創作者要在作圖一開始就對圖層內容有所規劃，避免將所有內容都放在一個圖層內，否則到後面選擇目標時會一團亂麻。
△ 圖3.3-1把圖標的描邊和填色分置兩個圖層，便於單獨調整。
批量修改外觀
1. 複製外觀
在對象間複製外觀屬性有兩種方法：
拖動：將對象A的「外觀」面板縮略圖拖動到對象B，即可將對象A外觀複製到對象B。
△ 圖4.1-1 拖動外觀面板縮略圖，複製外觀。
使用吸管工具：選中對象B，用「吸管」工具點擊對象A，即可將對象A外觀複製到對象B。
△ 圖4.1-2 使用「吸管」工具複製外觀記得要勾選「外觀」選項。
2. 圖形樣式
可以將某對象的外觀屬性創建為圖形樣式，再把圖形樣式應用其他對象上，即可複製成功。
△ 圖4.2-1 創建圖形樣式，把對象拖進圖形樣式面板就可以了。
△ 圖4.2-2 應用圖形樣式，可以選中對象後點擊圖形樣式，或者直接將圖形樣式拖到對象上。
3. 符號實例
Illustrator中的「符號」和Sketch中的「組件」如出一轍，可以顯著降低圖檔大小，提高修改效率。假如有天領導想讓你把設計圖裡幾百個按鈕的顏色換一換，圓角調一調啥的，如果你把所有按鈕都應用了「符號實例」，那這個功能就派上大用場了。
符號是在文檔中可重複使用的圖稿對象。例如，如果您根據鮮花創建符號，可將該符號的實例多次添加到您的圖稿，而無須實際多次添加複雜圖稿。每個符號實例都鏈接到「符號」面板中的符號或符號庫。使用符號可節省您的時間並顯著減小文件大小。
也可以在 Illustrator 中指定 9 格切片縮放，以便符號在用於用戶界面組件時能夠適當地縮放。
──Adobe Illustrator 用戶指南
「符號實例」和「圖形樣式」有點類似，差異點在於，對符號的外觀屬性進行修改，那麼所有關聯的符號實例的外觀屬性一起改變，關聯不斷開；而對應用了圖形樣式的對象的外觀屬性進行修改，不影響此圖形樣式，對象和圖形樣式的關聯斷開。
Last But Not Least
1. 少用鋼筆，多使用路徑查找器
使用路徑查找器考驗的是設計師對圖形特徵進行提取和運算的能力，深思熟慮後往往能找到的最快作圖方案，如果一開始就盲目使用鋼筆，有可能應了那句話：
我趕時間，所以我走了遠路。──《認知與設計》
2. 檢查圖檔內有沒有以下內容
遊離點。
「選擇」>「對象」>「遊離點」，選中後刪除。
多餘錨點。
就是那種看起來是一個錨點，放大發現是兩個錨點離得很近，或者是重疊起來的兩個錨點，需要將多餘錨點刪除。這種多餘錨點的產生經常是在幾個對象未對齊的情況下使用路徑查找器導致的。所以不要憑感覺對齊，而是使用對齊工具或者開啟智能參考線（便於捕捉路徑）。
描邊和填色都為空的路徑。
在預覽模式下這種路徑是看不見的，我的辦法是，畫一個描邊和填色都為空的路徑，「選擇」>「相同」>「外觀」，選中所有這樣的路徑後刪除。這種路徑產生的原因往往是忘記清除已經釋放的剪切蒙版。
△ 圖5.2-1 利用「選擇相同外觀」選中不可見的路徑。
未閉合的路徑。
導出SVG格式圖標需要路徑完全封閉，否則可導致填色溢出。
注：以上操作需要解鎖和顯示所有對象。
3. 文字轉曲、擴展、擴展外觀之前先備份
如果不備份，後面可能會哭吧。
鏈接：https://www.uisdc.com/business-product-icon-design-3
今天就分享到這裡啦~~
如果有任何關於設計的問題
都可以私聊站長喲
站長微頭條 不定時更新好東西喲！
閱讀更多 UI設計靠譜站長 的文章
關鍵字: Wi-Fi 設計 Illustrator
