從零開始畫圖標系列：進階線性圖標設計實戰

在之前的文章《從零開始畫圖標系列：線性圖標設計實戰演示！》中，我們已經講解了線性圖標的繪制方法，在本篇文章，我們就可以從它的基礎中延伸出其它線性風格的設計過程。

往期回顧：

• 《從零開始畫圖標系列：超全面的基礎知識》
• 《從零開始畫圖標系列：工具類圖標設計規范》
• 《從零開始畫圖標系列：線性圖標設計實戰演示！》
• 《從零開始畫圖標系列：面性圖標設計方法詳解》
• 《從零開始畫圖標系列：裝飾圖標設計指南》
• 《從零開始畫圖標系列：啟動圖標設計指南》
• 《從零開始畫圖標系列：圖標應用詳解》

多種粗細風格

通常多種粗細風格的線性圖標，會在圖形內部選擇某條線段，修改它們的描邊值。例如在之前的演示中，我們使用了 2pt 粗細的描邊，那么通過將圖形內部的線段修改成 1pt 的描邊，就能制造這種效果。

在這種風格中，如果圖形只通過外輪廓展現，就無法融入這個風格的特征，比如點贊的心形圖標、搜索圖標等。所以設計圖形的過程，就得保證它們有內部線條的運用。常見的做法就是在原圖標的基礎上，進行一些「復雜化」的處理，為它們增加內部的線條樣式，比如下面的案例：

有時候為了強化線條間的對比，會降低內部線條的透明度或飽和度，來增加視覺觀賞性，比如我們將案例中的圖標進行對應調整，最后的效果如下：

描邊缺口風格

這種風格看起來簡單，實際在細節處理上有很多麻煩。有哪些問題呢？我們來看看實際的操作和解決方案。

首先我們要做的是搜索圖標的缺口，通常開口是在原型的鏡片邊框上。那么，就可以先畫一個矩形，并將它進行旋轉，用來確定我們要裁切的區域。多數新手會以為只要用這個矩形，和底部的圓進行減去頂部圖形操作就可以得到目標圖形，其實這個想法是錯的。

布爾運算不會改變圖形本身的閉合狀態，即使裁切了，缺口的部分也會被連接起來。所以，要實現真的缺口，就得換種做法。

方法1

第一種，是使用路徑錨點刪除的方法。即使用添加錨點工具在兩個圖形交匯點上打點，然后在中間隨意添加一個錨點，再刪除它，就可以獲得缺口的效果。

這時候，只要在描邊設置中，將邊緣設置成圓角，就可以獲得圓潤的切口邊緣。

這個操作有個問題，就是會導致圓形本身作為一個閉合路徑，變成了非閉合路徑。那么本身圖形的部分屬性設置就會出問題，最直接的就是描邊設置，無論原本使用外描邊或者內描邊，都會轉化為居中描邊。

在工具圖標設計演示中，我們應該知道，使用內描邊是最容易控制圖形實際大小，以及符合像素對齊規范的，但在這類風格的使用上我們要盡可能在一開始設計時就使用居中描邊。而居中描邊的使用需要在畫布中開啟「對齊到像素」的選項，并關閉另外兩項，才能保證操作的規范性。

通過文章的形式這個問題很難描述清楚，大家可以自己動手嘗試一遍。

方法2

方法1 理論上可以解決大多數問題了，但還有一些說不清道不明的原因，會導致演示 1 中的方法失效。所以，在第 2 個演示中，我們來應用另一種方案。

這種方案重點使用的功能是「輪廓化描邊」，也就是一個將所有路徑格式轉化成完整的比例路徑圖形的操作。它具體的操作方式是，選中任何矢量圖形，然后點擊工具欄的對象 - 路徑 - 輪廓化描邊。

通過這個方法，就可以將描邊的圖形轉化成一個完整的矢量圖形，而原本路徑的描邊就失效了，變成了路徑填充色。

當這個圖形變成了一個完整的閉合路徑以后，就可以用布爾運算進行裁切了。

到這一步，操作看起來都很簡單，但有不和諧的地方，就在切口邊緣的調整上。如果設計的風格使用尖角，那么不用做什么處理；如果使用圓角，那么這個半圓就非常棘手了。

通常，要制造這個圓角，需要我們畫一個直徑和之前描邊相等的圓，然后關閉所有對齊的選項，再將圓移動到這個邊緣中，使它可以和邊緣的兩側對齊。

這一步操作是依靠目測完成的，不夠嚴謹，雖然可以通過一些特殊的幾何輔助線手段來得到這個圓具體的坐標位置，但往往操作起來太復雜沒有可行性。

并且，路徑查找器會破壞原本路徑的特征，將描邊的狀態變成了填充狀態，會增加我們對整個圖形細節調整的成本。所以，盡可能不使用這種方案。

多色描邊風格

多色描邊的風格，設計起來非常簡單，就是更改圖標其中一個線段的色彩。和粗細不同的風格一樣，如果圖標圖形沒有比較合適的線段來添加一個新的顏色，那么也可以對其進行「復雜化」的處理，多增加一些線段出來。

如果想有一些更有趣的表現，也可以將圖標強行拆分成若干線段，然后再替換其中一條的顏色。比如在優惠券圖標中，我們可以將虛線左側的描邊修改成其它顏色，而不是調整虛線的色值。

漸變描邊風格

漸變描邊其實就是為描邊填充漸變色，這也就需要我們提前將圖標的圖形進行輪廓化描邊，然后將所有線段進行「聯集」，才能統一進行漸變色的處理。

在漸變描邊中，要遵守一個規則就是我們要保證漸變的方向和強弱關系是一致的。比如我們使用 45° 傾斜的漸變角度，并且左上顏色較深，那么所有的圖標都應該遵守這個規律。

只要在做出第一個圖標的漸變以后，通過吸管工具吸取漸變，就可以輕松完成漸變的復制。在這個規則下，既可以使用相同的漸變色，也可以使用不同的漸變色。

描邊疊加風格

最后，我們來講講描邊疊加的設計風格。在圖例中應該發現了，我們將圓角改成了直角，之所以有這樣的調整，是因為直角在相交的過程能比較好的進行拼合，更適合疊加風格的設計。

在設計這類風格的過程中，主要的難點在于拼接的方式，因為有的圖形看起來是一體成型的，需要我們額外為它創造出拼合結構。比如心形圖標，在制作過程中就可以通過路徑查找器的相關功能將它拆分成兩個部分。

在完成了圖形的編輯以后，下一步才是填充色彩，在這種風格中可以使用漸變也可以使用純色，但是我們要為不同的圖層添加透明度，才能制造出疊加的效果。如果是在 PS 或是 Sketch 中，除了使用普通透明度的方式，還可以通過調整「圖層混合模式」來呈現出更好的疊加效果。

最后，要注意的是，如果使用了圖層混合模式，那么要把這個圖形導出 PNG 格式以后，再在實際的項目中使用最佳，否則圖標應用背景不是白色的情況下可能效果與預期不符。

結語

從這些案例演示中，可以看到只要設計出了基本的線性圖形，那么在進一步切換風格的時候是非常容易的。有了這些風格的設計經驗，在真實的設計中就不會被禁錮在最基本的基礎線性圖標設計，可以嘗試給它們增加新的視覺樣式，豐富界面的視覺體驗。

歡迎關注作者的微信公眾號：「超人的電話亭」