今天竹子要介紹的這6個圖標(biāo)繪制招數(shù)，簡單易懂，但功效卓著。久習(xí)可得奇效，達(dá)到任何矢量圖形都易如反掌，無論各種橫的，豎的，奇形怪狀的圖形都信手拈來。（以下界面演示以Photoshop CC為演示工具）

第一劍 少商劍 形狀圖層

特點(diǎn)：劍路雄勁，頗有石破天驚，風(fēng)雨大至之勢。

PS是一個像素處理軟件，可以做到和AI一樣繪制各種復(fù)雜的矢量圖形。有讀者會問為什么不用AI，而要學(xué)習(xí)PS繪制路徑，因?yàn)镻S才是適合UI設(shè)計(jì)的工具軟件，且各種圖形PS可以做到像素對齊，AI繪制的路徑導(dǎo)入PS還是要二次調(diào)節(jié)。所以下面教你如何通過形狀圖層來繪制矢量圖標(biāo)。

① 前景色選擇黑色，前景選擇的顏色就是繪制出形狀圖層的顏色

② 工具模式選擇路徑，一定要選擇路徑，而不是形狀，因?yàn)橹苯由傻男螤詈诤鹾跻淮笃?，非常不利于二次編輯路徑?/p>

③ 形狀屬性面板中可以設(shè)置圓角。

這是Photoshop CC版本中一個非常棒的功能。尤其是對UI設(shè)計(jì)師而言。形狀屬性位于屬性面板中，我們可以自由設(shè)置各種參數(shù)。

例如：圖形尺寸、填充顏色、描邊顏色、描邊寬度、描邊樣式（包括虛線、對齊方式、線段端點(diǎn)和合并類型）、圓角半徑選項(xiàng)（對橢圓形不可用）

一個矢量的圓角矩形就畫好了。

第二劍 中沖劍 自定義形狀工具

特點(diǎn)：大開大闔，氣勢雄邁

PS里內(nèi)置了非常多的形狀，很多基礎(chǔ)圖形不需要自己繪制，直接在使用相應(yīng)的圖形即可。

首先新建一個圖層，然后使用多邊形工具，選擇3邊

然后用形狀圖層工具繪制一個三角形

如圖：

第三劍 商陽劍 布爾運(yùn)算

特點(diǎn)：巧妙靈活，難以捉摸。

一些復(fù)雜的圖形，都是靠各種圖形相加相減得到的。所以我們需要靈活運(yùn)用布爾運(yùn)算工具，來達(dá)到組合最終圖形的目的。

按住Ctrl同時選中圖層形狀1、形狀2

直接按住Ctrl+E合并兩個路徑：

通過合并得到一個對話框圖形。

菜單頂部有路徑組合工具，可以嘗試不同的路徑組合，體會一下不同路徑組合布爾運(yùn)算的效果。

第四劍 關(guān)沖劍? 分層繪制

特點(diǎn)：以拙滯古樸取勝。

很多復(fù)雜的基本型不要在一個層上繪制，可以分層繪制，通過各個層的分別繪制，最終再整體合并。

新建圖層，畫三個圓形矢量圖形，必須要新建一個圖層哦。如果直接繪制路徑，新的路徑和原有的路徑混在一起，調(diào)整非常不方便，路徑約復(fù)雜，你會感受分層繪制的好處！

選中圓圈圖形的圖層，Ctrl+C

在圓角矩形層上Ctrl+V，圓圈路徑粘貼在圓角矩形層上：

然后：

第五劍 少沖劍? 路徑選擇工具

特點(diǎn)：輕靈迅速

當(dāng)編輯圖標(biāo)中一堆復(fù)雜路徑的時候，想要快速選中某個路徑可能不是一件非常輕松的事情，這時候可以使用路徑選擇工具。

這2個箭頭有什么區(qū)別了，黑色箭頭可以選中全部路徑，而白色箭頭可以選中局部路徑。

第六劍 少澤劍 鋼筆工具

特點(diǎn)：忽來忽去，變化精微

有一些圖形的形狀，造型奇異，比如下面這個茄子，不可以直接通過基本圖形得到，這時候只能使用大招，鋼筆工具！掌握鋼筆工具，可以自由的畫出各種圖形。

選擇鋼筆工具

繪制一下弧形路徑，按住Alt鍵點(diǎn)選這個路徑的端點(diǎn)，為什么需要點(diǎn)選一下？大家可以試驗(yàn)一下，假如不切換這個端點(diǎn)，繪制的下一個路徑就會有一個弧度。不能按照自己想法繪制相應(yīng)方向的路徑。

點(diǎn)選后的路徑如下

然后我們再繪制下一段路徑

再次點(diǎn)選路徑的端點(diǎn)

依次繪制出如下的路徑

再繪制一個切割圖形的路徑，并用布爾運(yùn)算工具切除：

最后用鋼筆工具用如上的步驟繪制茄子的把子。

最終得到這個茄子的矢量圖形：

今天的課程就講到這里，不知道通過這個六脈神劍的招數(shù)大家可以自由繪制各種矢量圖形了嗎？

看的多不如去練習(xí)一下，大家可以以這個茄子去練習(xí)一下作業(yè)。

歡迎關(guān)注作者的微信公眾號：liaosheji2010

【字體設(shè)計(jì)經(jīng)驗(yàn)三部曲】

Step 1：先從基礎(chǔ)的字體結(jié)構(gòu)學(xué)起！
《字體科普文！手把手帶你認(rèn)識最基礎(chǔ)的字體結(jié)構(gòu)》

Step 2：再了解字體設(shè)計(jì)的方法大全！
《推薦：17種設(shè)計(jì)字體的創(chuàng)意方法》

Step 3：實(shí)戰(zhàn)經(jīng)驗(yàn)幫你全面掌握！
《經(jīng)驗(yàn)分享：超詳細(xì)的字體設(shè)計(jì)方法+案例分析》

作者：鳳尾竹

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量112萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com