進階線性圖標設計教程

今天給大家分享一篇進階線性圖標設計教程，在本篇文章中可以從它的基礎中延伸出其它線性風格的設計過程。一起來看下吧！

多種粗細風格

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

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

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

描邊缺口風格

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

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

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

方法1

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

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

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

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

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

方法2

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

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

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

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

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

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

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

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

多色描邊風格

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

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

漸變描邊風格

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

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

隻要在做出第一個圖標的漸變以後，通過吸管工具吸取漸變，就可以輕鬆完成漸變的複製。在這個規則下，既可以使用相同的漸變色，也可以使用不同的漸變色。

描邊疊加風格

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

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

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

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

結語

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

來源：「超人的電話亭」微信公眾號