2018-04-18 11:03:48 1637瀏覽
1、形狀圖層
PS是一個(gè)像素處理軟件,可以做到和AI一樣繪制各種復(fù)雜的矢量圖形。
有讀者會(huì)問為什么不用AI,而要學(xué)習(xí)PS繪制路徑,因?yàn)镻S才是適合UI設(shè)計(jì)的工具軟件,且各種圖形PS可以做到像素對(duì)齊。
AI繪制的路徑導(dǎo)入PS還是要二次調(diào)節(jié),所以下面教你如何通過形狀圖層來繪制矢量圖標(biāo)。
①前景色選擇黑色,前景選擇的顏色就是繪制出形狀圖層的顏色
②工具模式選擇路徑,一定要選擇路徑,而不是形狀,因?yàn)橹苯由傻男螤詈诤鹾跻淮笃?,非常不利于二次編輯路徑?/span>
③形狀屬性面板中可以設(shè)置圓角,這是Photoshop CC版本中一個(gè)非常棒的功能。
尤其是對(duì)UI設(shè)計(jì)師而言,形狀屬性位于屬性面板中,我們可以自由設(shè)置各種參數(shù)
例如:圖形尺寸、填充顏色、描邊顏色、描邊寬度、描邊樣式(包括虛線、對(duì)齊方式、線段端點(diǎn)和合并類型),圓角半徑選項(xiàng)(對(duì)橢圓形不可用)一個(gè)矢量的圓角矩形就畫好了。
2、自定義形狀工具
PS里內(nèi)置了非常多的形狀,很多基礎(chǔ)圖形不需要自己繪制,直接使用相應(yīng)的圖形即可。
首先新建一個(gè)圖層,然后使用多邊形工具,選擇3邊,然后用形狀圖層工具繪制一個(gè)三角形。
3、布爾運(yùn)算
一些復(fù)雜的圖形,都是靠各種圖形相加相減得到的。所以我們需要靈活運(yùn)用布爾運(yùn)算工具,來達(dá)到組合最終圖形的目的。
然后按住Ctrl同時(shí)選中圖層形狀1、形狀2,直接按住Ctrl+E合并兩個(gè)路徑,通過合并各種得到一個(gè)對(duì)話框圖形。
菜單頂部有路徑組合工具,可以嘗試不同的路徑組合,體會(huì)一下不同路徑組合布爾運(yùn)算的效果。
4、分層繪制
很多復(fù)雜的基本型不要在一個(gè)層上繪制,可以分層繪制,通過各個(gè)層的分別繪制,最終再整體合并。
新建圖層,畫三個(gè)圓形矢量圖形,必須要新建一個(gè)圖層,如果直接繪制路徑,新的路徑和原有的路徑混在一起,調(diào)整非常不方便,路徑約復(fù)雜,你會(huì)感受分層繪制的好處。
選中圓圈圖形的圖層,Ctrl+C,在圓角矩形層上,Ctrl+V,圓圈路徑粘貼在圓角矩形層上。
5、路徑選擇工具
當(dāng)編輯圖標(biāo)中一堆復(fù)雜路徑的時(shí)候,想要快速選中某個(gè)路徑可能不是一件非常輕松的事情,這時(shí)候可以使用路徑選擇工具。
這2個(gè)箭頭有什么區(qū)別了,黑色箭頭可以選中全部路徑,而白色箭頭可以選中局部路徑。
6、鋼筆工具
有一些圖形的形狀,造型奇異,比如下面這個(gè)茄子,不可以直接通過基本圖形得到,這時(shí)候只能使用大招,鋼筆工具!
掌握鋼筆工具,可以自由的畫出各種圖形,選擇鋼筆工具,繪制一下弧形路徑,按住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è)茄子的矢量圖形。
最后想要工作不累就要不斷的提升自己的技能,請(qǐng)關(guān)注扣丁學(xué)堂UI培訓(xùn)官網(wǎng)、微信等平臺(tái),扣丁學(xué)堂IT職業(yè)在線學(xué)習(xí)教育平臺(tái)為您提供權(quán)威的UI設(shè)計(jì)視頻教程系統(tǒng),通過千鋒扣丁學(xué)堂金牌講師在線錄制UI視頻教程內(nèi)容,讓你快速掌握UI從入門到精通UI設(shè)計(jì)實(shí)戰(zhàn)技能。需要PS軟件伙伴們,免費(fèi)發(fā)給你,扣丁學(xué)堂UI交互設(shè)計(jì)交流群:568096113。
【關(guān)注微信公眾號(hào)獲取更多學(xué)習(xí)資料】
查看更多關(guān)于“ui設(shè)計(jì)資訊”的相關(guān)文章>>