PS通過(guò)形狀圖層繪制矢量圖標(biāo)
我要評(píng)論版權(quán)申明：本文原創(chuàng)作者風(fēng)尾竹，感謝風(fēng)尾竹的原創(chuàng)經(jīng)驗(yàn)分享！
UI江湖門派眾多，各路高手也是絕技非凡。做為一個(gè)江湖小白如何快速成長(zhǎng)為一代俠客呢？想在UI這個(gè)江湖混，圖標(biāo)是必不可少的基礎(chǔ)。各式各樣的寫實(shí)圖標(biāo)、線性圖標(biāo)、色塊圖標(biāo)更是眼花繚亂。
今天竹子要傳授六脈神劍給大家！所謂六脈神劍，就是招數(shù)簡(jiǎn)單，但功效卓著。久習(xí)可得奇效，達(dá)到任何矢量圖形都易如反掌，無(wú)論各種橫的，豎的，奇形怪狀的圖形都信手拈來(lái)。
（以下界面演示以Photoshop cc為演示工具）
第一劍 少商劍 形狀圖層
特點(diǎn)：劍路雄勁，頗有石破天驚，風(fēng)雨大至之勢(shì)。
PS是一個(gè)像素處理軟件，可以做到和AI一樣繪制各種復(fù)雜的矢量圖形。有讀者會(huì)問(wèn)為什么不用AI,而要學(xué)習(xí)PS繪制路徑，因?yàn)镻S才是適合UI設(shè)計(jì)的工具軟件，且各種圖形PS可以做到像素對(duì)齊，AI繪制的路徑導(dǎo)入PS還是要二次調(diào)節(jié)。所以下面教你如何通過(guò)形狀圖層來(lái)繪制矢量圖標(biāo)。
①前景色選擇黑色，前景選擇的顏色就是繪制出形狀圖層的顏色
②工具模式選擇路徑，一定要選擇路徑，而不是形狀，因?yàn)橹苯由傻男螤詈诤鹾跻淮笃浅２焕诙尉庉嬄窂健?/p>
③形狀屬性面板中可以設(shè)置圓角，
這是Photoshop CC版本中一個(gè)非常棒的功能。尤其是對(duì)UI設(shè)計(jì)師而言。形狀屬性位于屬性面板中，我們可以自由設(shè)置各種參數(shù)，
例如：圖形尺寸、填充顏色、描邊顏色、描邊寬度、
描邊樣式(包括虛線、對(duì)齊方式、線段端點(diǎn)和合并類型)，
圓角半徑選項(xiàng)(對(duì)橢圓形不可用)
一個(gè)矢量的圓角矩形就畫(huà)好了。
第二劍 中沖劍 自定義形狀工具
特點(diǎn)：大開(kāi)大闔，氣勢(shì)雄邁
PS里內(nèi)置了非常多的形狀，很多基礎(chǔ)圖形不需要自己繪制，直接在使用相應(yīng)的圖形即可。
首先新建一個(gè)圖層
然后使用多邊形工具，選擇3邊
然后用形狀圖層工具繪制一個(gè)三角形
第三劍 商陽(yáng)劍 布爾運(yùn)算
特點(diǎn)：巧妙靈活，難以捉摸。
一些復(fù)雜的圖形，都是靠各種圖形相加相減得到的。所以我們需要靈活運(yùn)用布爾運(yùn)算工具，來(lái)達(dá)到組合最終圖形的目的
然后按住Ctrl同時(shí)選中圖層形狀1、形狀2，
直接按住Ctrl+E合并兩個(gè)路徑
通過(guò)合并各種得到一個(gè)對(duì)話框圖形。
菜單頂部有路徑組合工具，
可以嘗試不同的路徑組合，體會(huì)一下不同路徑組合布爾運(yùn)算的效果。
第四劍 關(guān)沖劍 分層繪制
特點(diǎn)：以拙滯古樸取勝。
很多復(fù)雜的基本型不要在一個(gè)層上繪制，可以分層繪制，通過(guò)各個(gè)層的分別繪制，最終再整體合并。
新建圖層，畫(huà)三個(gè)圓形矢量圖形，必須要新建一個(gè)圖層哦,如果直接繪制路徑，新的路徑和原有的路徑混在一起，調(diào)整非常不方便，路徑約復(fù)雜，你會(huì)感受分層繪制的好處！
選中圓圈圖形的圖層，Ctrl+C
在圓角矩形層上,Ctrl+V,圓圈路徑粘貼在圓角矩形層上。
第五劍 少?zèng)_劍 路徑選擇工具
特點(diǎn)：輕靈迅速
當(dāng)編輯圖標(biāo)中一堆復(fù)雜路徑的時(shí)候，想要快速選中某個(gè)路徑可能不是一件非常輕松的事情，這時(shí)候可以使用路徑選擇工具。
這2個(gè)箭頭有什么區(qū)別了，黑色箭頭可以選中全部路徑，而白色箭頭可以選中局部路徑。
第六劍 少澤劍 鋼筆工具
特點(diǎn)：忽來(lái)忽去，變化精微
有一些圖形的形狀，造型奇異，比如下面這個(gè)茄子，不可以直接通過(guò)基本圖形得到，這時(shí)候只能使用大招，鋼筆工具！掌握鋼筆工具，可以自由的畫(huà)出各種圖形,
選擇鋼筆工具
繪制一下弧形路徑，按住Alt鍵點(diǎn)選這個(gè)路徑的端點(diǎn)，為什么需要點(diǎn)選一下？大家可以試驗(yàn)一下，假如不切換這個(gè)端點(diǎn)，繪制的下一個(gè)路徑就會(huì)有一個(gè)弧度。不能按照自己想法繪制相應(yīng)方向的路徑。
點(diǎn)選后的路徑如下
然后我們?cè)倮L制下一段路徑
再次點(diǎn)選路徑的端點(diǎn)
依次繪制出如下的路徑
再繪制一個(gè)切割圖形的路徑，并用布爾運(yùn)算工具切除
最后用鋼筆工具用如上的步驟繪制茄子的把子
最終得到這個(gè)茄子的矢量圖形
今天的課程就講到這里，不知道通過(guò)這個(gè)六脈神劍的招數(shù)大家可以自由繪制各種矢量圖形了嗎？
看的多不如去練習(xí)一下，大家可以以這個(gè)茄子去練習(xí)一下作業(yè)。
相關(guān)文章
- 這篇教程主要是介紹使用PS繪制精致游戲圖標(biāo)，教程制作出來(lái)的照片效果非常大氣，非常有逼格。感興趣的朋友快到下文了解一下吧2016-04-28
PS繪制APP背景超級(jí)橢圓矩形圖標(biāo)的三種方法
這篇教程是向腳本之家的朋友介紹PS繪制APP背景超級(jí)橢圓矩形圖標(biāo)的三種方法，教程很實(shí)用，對(duì)于初學(xué)者來(lái)說(shuō)，很值得學(xué)習(xí)，推薦到腳本之家，一起來(lái)看看吧2015-09-22- 這篇教程是向腳本之家的朋友介紹PS 十分鐘快速繪制星巴克咖啡杯圖標(biāo)方法，教程制作出來(lái)的咖啡杯圖標(biāo)非常不錯(cuò)，推薦到腳本之家，喜歡的朋友一起來(lái)學(xué)習(xí)吧2015-09-15
AI結(jié)合PS繪制超級(jí)橢圓圖標(biāo)的N種方法詳解
這篇教程是向腳本之家的朋友介紹AI結(jié)合PS繪制超級(jí)橢圓圖標(biāo)的N種方法，教程繪制出來(lái)的超級(jí)橢圓圖標(biāo)非常不錯(cuò)，方法也很簡(jiǎn)單，推薦到腳本之家，喜歡的朋友可以跟著教程一起來(lái)2015-08-19PS繪制一枚超質(zhì)感的QQ旋風(fēng)圖標(biāo)
這篇教程是向腳本之家的朋友介紹PS繪制一枚超質(zhì)感的QQ旋風(fēng)圖標(biāo)方法，教程繪制出來(lái)的圖標(biāo)非常有質(zhì)感，教程很實(shí)用，但難度有點(diǎn)高，需要學(xué)習(xí)者有一定的PS基礎(chǔ)，推薦過(guò)來(lái)，喜歡2015-08-19- 下面腳本之家小編為大家介紹PS快速繪制非常漂亮的ITUNES圖標(biāo)方法，教程繪制出來(lái)的圖標(biāo)非常地漂亮，難度不是很大，推薦到腳本之家，喜歡的朋友一起來(lái)學(xué)習(xí)吧2015-07-07
教你用PS+AI繪制一枚AppleWatch獎(jiǎng)?wù)聢D標(biāo)
數(shù)字和色彩的巧妙結(jié)合加上強(qiáng)烈的3D質(zhì)感，一見(jiàn)傾心，而且適合PS零基礎(chǔ)的原生菜鳥(niǎo)呦2015-06-29- 這篇教程主要是向腳本之家的朋友介紹PS繪制精致的抹茶綠購(gòu)物袋圖標(biāo)方法，教程制作出來(lái)的購(gòu)物袋圖標(biāo)很漂亮，難度不是很大，推薦到腳本之家，喜歡的朋友一起來(lái)學(xué)習(xí)吧2015-02-28
PS教你快速繪制精致的寫實(shí)領(lǐng)帶圖標(biāo)
這篇文章主要介紹了PS教你快速繪制精致的寫實(shí)領(lǐng)帶圖標(biāo)，教程很簡(jiǎn)單，喜歡的朋友可以一起來(lái)學(xué)習(xí)2015-02-27妙用PS繪制一枚精美的IPHONE SE圖標(biāo)圖文教程
這篇文章主要為大家介紹了妙用PS繪制一枚精美的IPHONE SE圖標(biāo)圖文教程的相關(guān)資料,制作的效果圖非常棒，需要的朋友可以參考下2016-06-12