矢量圖標設計的六脈神劍

想在UI這個江湖混,圖標是必不可少的基礎。各式各樣的寫實圖標、線性圖標、色塊圖標更是眼花繚亂。設計干貨要傳授六脈神劍給大家!所謂六脈神劍,就是招數簡單,但功效卓著。久習可得奇效,達到任何圖形都易如反掌。

《術與道-移動應用設計必修課》

這不是一本教授Photoshop操作的書,而是一本教你App設計思路方法的書。全書系統的介紹移動應用設計的知識,內容來源于作者的日常工作總結。沒有過多晦澀的理論,通俗易懂的語言便于讀者理解。京東、當當、有售。

矢量圖標設計的六脈神劍

(本教程根據術與道公開課整理)

UI江湖門派眾多,各路高手也是絕技非凡。做為一個江湖小白如何快速成長為一代俠客呢?想在UI這個江湖混,圖標是必不可少的基礎。各式各樣的寫實圖標、線性圖標、色塊圖標更是眼花繚亂。

今天竹子要傳授六脈神劍給大家!所謂六脈神劍,就是招數簡單,但功效卓著。久習可得奇效,達到任何矢量圖形都易如反掌,無論各種橫的,豎的,奇形怪狀的圖形都信手拈來。

(以下界面演示以Photoshop cc為演示工具)

 

第一劍 少商劍 形狀圖層

特點:劍路雄勁,頗有石破天驚,風雨大至之勢。

PS是一個像素處理軟件,可以做到和AI一樣繪制各種復雜的矢量圖形。有讀者會問為什么不用AI,而要學習PS繪制路徑,因為PS才是適合UI設 計的工具軟件,且各種圖形PS可以做到像素對齊,AI繪制的路徑導入PS還是要二次調節。所以下面教你如何通過形狀圖層來繪制矢量圖標。

213a573031ba32f8758627f1cfd8.jpg

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

②工具模式選擇路徑,一定要選擇路徑,而不是形狀,因為直接生成的形狀黑乎乎一大片,非常不利于二次編輯路徑。

3dca573031ca32f87586275877c5.jpg

③形狀屬性面板中可以設置圓角,

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

例如:圖形尺寸、填充顏色、描邊顏色、描邊寬度、

描邊樣式(包括虛線、對齊方式、線段端點和合并類型),

圓角半徑選項(對橢圓形不可用)

9fdb573032ef32f8755a52ddf97a.jpg

bc24573032f632f8755a521a790f.jpg

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

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

特點:大開大闔,氣勢雄邁

PS里內置了非常多的形狀,很多基礎圖形不需要自己繪制,直接在使用相應的圖形即可。

957a5730360c32f8755a525a931f.jpg

首先新建一個圖層

c2b75730353a32f8755a525dbc52.jpg

然后使用多邊形工具,選擇3邊

e2c15730359732f8755a5276ecf3.jpg

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

29c95730369c32f8755a52934c4c.jpg

第三劍 商陽劍 布爾運算

特點:巧妙靈活,難以捉摸。

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

3d4c573039f532f8755a52f1645f.jpg

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

8104573039fe32f8755a5288ada8.jpg

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

5eee5730376332f8755a523a3135.jpg

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

a8e057314e500000002bf05ef6f0.jpg

菜單頂部有路徑組合工具,

可以嘗試不同的路徑組合,體會一下不同路徑組合布爾運算的效果。

第四劍 關沖劍? 分層繪制

特點:以拙滯古樸取勝。

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

8192573045bd32f8755a52241b59.jpg

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

776b57304dcd00000028ece41f6f.jpg

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

020a57304e8000000028ec3f783d.jpg

在圓角矩形層上,Ctrl+V,圓圈路徑粘貼在圓角矩形層上。

13ea57305b0c00000028ec49a533.jpg

832057305be800000028ecf7c8a4.jpg

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

特點:輕靈迅速

當編輯圖標中一堆復雜路徑的時候,想要快速選中某個路徑可能不是一件非常輕松的事情,這時候可以使用路徑選擇工具。

486d57306b2400000028ecc16857.jpg

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

7a2d573152a50000002bf0ed8c16.jpg

 

第六劍 少澤劍 鋼筆工具

特點:忽來忽去,變化精微

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

ad1757318528000000305ab4f7e8.jpg

選擇鋼筆工具

baf657315d620000002bf0657674.jpg

繪制一下弧形路徑,按住Alt鍵點選這個路徑的端點,為什么需要點選一下?大家可以試驗一下,假如不切換這個端點,繪制的下一個路徑就會有一個弧度。不能按照自己想法繪制相應方向的路徑。

點選后的路徑如下

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

再次點選路徑的端點

依次繪制出如下的路徑

再繪制一個切割圖形的路徑,并用布爾運算工具切除

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

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

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

看的多不如去練習一下,大家可以以這個茄子去練習一下作業。

a6c4573886086ac72580edd7b0b6.jpg

設計干貨是一個優秀的主題,極致后臺體驗,無插件,集成會員系統
設計干貨 » 矢量圖標設計的六脈神劍

發表評論

提供最優質的資源集合

立即查看 了解詳情
竞彩足球比分如何分析