矢量圖標設計的六脈神劍
(本教程根據(jù)術與道公開課整理)
UI江湖門派眾多，各路高手也是絕技非凡。做為一個江湖小白如何快速成長為一代俠客呢？想在UI這個江湖混，圖標是必不可少的基礎。各式各樣的寫實圖標、線性圖標、色塊圖標更是眼花繚亂。
今天竹子要傳授六脈神劍給大家！所謂六脈神劍，就是招數(shù)簡單，但功效卓著。久習可得奇效，達到任何矢量圖形都易如反掌，無論各種橫的，豎的，奇形怪狀的圖形都信手拈來。
（以下界面演示以Photoshop cc為演示工具）
第一劍 少商劍 形狀圖層
特點：劍路雄勁，頗有石破天驚，風雨大至之勢。
PS是一個像素處理軟件，可以做到和AI一樣繪制各種復雜的矢量圖形。有讀者會問為什么不用AI,而要學習PS繪制路徑，因為PS才是適合UI設計的工具軟件，且各種圖形PS可以做到像素對齊，AI繪制的路徑導入PS還是要二次調(diào)節(jié)。所以下面教你如何通過形狀圖層來繪制矢量圖標。
①前景色選擇黑色，前景選擇的顏色就是繪制出形狀圖層的顏色
②工具模式選擇路徑，一定要選擇路徑，而不是形狀，因為直接生成的形狀黑乎乎一大片，非常不利于二次編輯路徑。
③形狀屬性面板中可以設置圓角，
這是Photoshop CC版本中一個非常棒的功能。尤其是對UI設計師而言。形狀屬性位于屬性面板中，我們可以自由設置各種參數(shù)，
例如：圖形尺寸、填充顏色、描邊顏色、描邊寬度、
描邊樣式(包括虛線、對齊方式、線段端點和合并類型)，
圓角半徑選項(對橢圓形不可用)
一個矢量的圓角矩形就畫好了。
第二劍 中沖劍 自定義形狀工具
特點：大開大闔，氣勢雄邁
PS里內(nèi)置了非常多的形狀，很多基礎圖形不需要自己繪制，直接在使用相應的圖形即可。
首先新建一個圖層
然后使用多邊形工具，選擇3邊
然后用形狀圖層工具繪制一個三角形
第三劍 商陽劍 布爾運算
特點：巧妙靈活，難以捉摸。
一些復雜的圖形，都是靠各種圖形相加相減得到的。所以我們需要靈活運用布爾運算工具，來達到組合最終圖形的目的
然后按住Ctrl同時選中圖層形狀1、形狀2，
直接按住Ctrl+E合并兩個路徑
通過合并各種得到一個對話框圖形。
菜單頂部有路徑組合工具，
可以嘗試不同的路徑組合，體會一下不同路徑組合布爾運算的效果。
第四劍 關沖劍 分層繪制
特點：以拙滯古樸取勝。
很多復雜的基本型不要在一個層上繪制，可以分層繪制，通過各個層的分別繪制，最終再整體合并。
新建圖層，畫三個圓形矢量圖形，必須要新建一個圖層哦,如果直接繪制路徑，新的路徑和原有的路徑混在一起，調(diào)整非常不方便，路徑約復雜，你會感受分層繪制的好處！
選中圓圈圖形的圖層，Ctrl+C
在圓角矩形層上,Ctrl+V,圓圈路徑粘貼在圓角矩形層上。
第五劍 少沖劍 路徑選擇工具
特點：輕靈迅速
當編輯圖標中一堆復雜路徑的時候，想要快速選中某個路徑可能不是一件非常輕松的事情，這時候可以使用路徑選擇工具。
這2個箭頭有什么區(qū)別了，黑色箭頭可以選中全部路徑，而白色箭頭可以選中局部路徑。
第六劍 少澤劍 鋼筆工具
特點：忽來忽去，變化精微
有一些圖形的形狀，造型奇異，比如下面這個茄子，不可以直接通過基本圖形得到，這時候只能使用大招，鋼筆工具！掌握鋼筆工具，可以自由的畫出各種圖形,
選擇鋼筆工具
繪制一下弧形路徑，按住Alt鍵點選這個路徑的端點，為什么需要點選一下？大家可以試驗一下，假如不切換這個端點，繪制的下一個路徑就會有一個弧度。不能按照自己想法繪制相應方向的路徑。
點選后的路徑如下
然后我們再繪制下一段路徑
再次點選路徑的端點
依次繪制出如下的路徑
再繪制一個切割圖形的路徑，并用布爾運算工具切除
最后用鋼筆工具用如上的步驟繪制茄子的把子
最終得到這個茄子的矢量圖形
今天的課程就講到這里，不知道通過這個六脈神劍的招數(shù)大家可以自由繪制各種矢量圖形了嗎？
看的多不如去練習一下，大家可以以這個茄子去練習一下作業(yè)。
