從零開始學!B 端產品圖標繪制指南(軟件篇) - 優設網 - UISDC

從零開始學!B 端產品圖標繪制指南(軟件篇)

2019/10/07 7288評論區

今天給大家介紹幾個 Illustrator 殺手級功能,分享一下如何讓圖檔盡量小,可反復修改且不會破壞對象的作圖小技巧,再配合一通行云流水的快捷鍵操作,你就是高手中的高手啦。

往期回顧:

知識點

今天重點介紹外觀屬性和幾個相關的知識點。為什么外觀屬性很重要?有以下三點原因:

  • 利用外觀屬性能夠「無損」作圖,即不破壞對象本身;
  • 可快速選擇具有相同外觀屬性的對象;
  • 可批量修改、增加、刪除具有相同外觀屬性對象的屬性參數。

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. 文字轉曲、擴展、擴展外觀之前先備份

如果不備份,后面可能會哭吧。

歡迎關注作者的微信公眾號:「能呆書房一整天」

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.tawbbt.live/business-product-icon-design-3

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計圈干貨 界面設計 排版布局 版式設計 職場 優設專訪 優設大課堂 設計師干貨 設計達人 配色 web前端開發 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 海報設計 設計規范 設計趨勢 用戶體驗設計 動效設計 logo設計 平面設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

二八杠千术