前段時間在網上看到一套比較漂亮的主題圖標，很喜歡這種簡潔(比較好臨摹)的設計風格，心血來潮就臨摹了一套，在做的過程中，有些圖標還是比開始預想的要複雜一些，過程也產生了不少問題，爲了讓小夥伴們在練習的過程中避免遇到類似問題，所以我把個別圖標的臨摹思路分享出來，希望對小夥伴們在圖標的創作或練習上有所幫助。

附上主題圖標的鏈接地址：

https://www.zcool.com.cn/work/ZMjczNDAwOTI=.html

拆解

爲什麼要拆解圖標，實際上覆雜的圖標都是由小的圖形元素組成，只要一步步對結構進行解析，瞭解和學習具體的製作思路，就可以更好的掌握圖標的設計技法。 

從下圖所示的線框圖中，可以分析出圖標整體結構是由兩種不同尺寸(尺寸可自定義)的圓組合，我們將這兩種圓分別命名爲“大圓”和“小圓”：

分析出結構後，我們再對圖標進行拆解。根據上圖所示的線框和紋路，可以把圖標大致拆分成3個圖形來完成，將這三個圖形分別命名爲：“圖形一”“圖形二”“圖形三”：

01 圖形一

“圖形一”的步驟較多，是製作圖標思路的關鍵，完成好“圖形一”，其它兩個也就很對簡單些。

已知我們通過拆解得到了三個圖形後，繼而我們可以對拆解後的三個圖形再進行拆分，直到我們通過簡單的形狀運算就能畫出來爲止。經過拆分後，我們就得到了下圖的三個部分：

再將這三個部分分如下步驟去完成：

1.1第一部分

第一部分，畫一個大圓200x200和一個小圓84x84(尺寸可自定義)，爲了方便查看，我給圖形做了顏色區分。

選中兩個圓形進行居中對齊，執行“減去頂層”操作，再給圖形添加一個從左至右的漸變，顏色爲#FAEF5A-#FF7200：

再畫一個“矩形”，將之前畫好的“圓環”對半“減去頂層”，然後就得到了需要的第一個部分：

1.2第二部分

第二部分我們畫兩個小圓、一個大圓(畫大圓的目的是爲了方便理解小圓需要擺放的位置)，將“小圓1”與“大圓”居中對齊，“小圓2”頂部對齊“大圓”。再選中兩個小圓，進行“減去頂層”，給圖形添加一個從左至右的漸變，顏色爲#FAEF5A-#FF7200：

再畫一個“矩形”，將之前畫好的圖形對半“減去頂層”，然後就得到了“第二部分”：

1.3第三部分

第三部分畫兩個大圓、一個小圓(畫小圓的目的是爲了方便理解大圓需要擺放的位置)，將“小圓”與“大圓1”居中對齊，“大圓2”底部對齊“小圓”，再選中兩個大圓，進行“減去頂層”，給圖形添加一個從左至右的漸變，顏色爲#FAEF5A-#FF7200：

再畫一個“矩形”，將之前畫好的圖形對半“減去頂層”，然後就得到了“第三部分”：

1.4組合

得到了這三個部分後，將它們組合拼接，鼠標選中三個圖形進行“聯集”後，“圖形一”就製作完成了：

02 圖形二

“圖形二”的步驟特別簡單，相信小夥伴們已經看出來了，把“圖形一”旋轉“180度”後，“圖形二”就製作完成了：

03 圖形三

畫兩個大圓、一個小圓(畫小圓的目的是爲了方便理解大圓需要擺放的位置)，選中“小圓1”和“小圓2”，進行“交集”操作，再添加一個至上而下的漸變，顏色爲#FF7200-#FAEF5A，“圖形三”就製作完成了：

04 組合

接下來，我們將“圖形一”“圖形二”“圖形三”進行組合拼接，就得到了圖標的形狀，但到這並沒有結束，還需要添加效果來修飾圖標。

(注：進行組合拼接的時候，儘量用鍵盤上下左右鍵去移動，鼠標手動拼接可能會造成形狀與形狀間存在縫隙)

0 5 效果

最後，我們給這個圖形加上效果，選中上面的月環圖形，添加一個顏色爲#FFEA60，y座標爲-2的陰影(也有小夥伴會問爲什麼用陰影，陰影實現的效果並不好，怎奈lan～)，再畫一個10x10尺寸的小圓，顏色填充爲#F5EC61，將小圓放在合適的位置上(可參考圖上位置擺放)，最終的圖標就畫好了！

以上就是這次的臨摹圖標的思路分享，第一次寫教程，有不滿意的地方就～～湊合看吧。

以後會不定期的分享一些圖標小教程，感興趣的小夥伴可以關注下，謝謝觀看。

Powered by Froala Editor