您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> ps教程 >> 瀏覽設(shè)計(jì)教程

輕松畫(huà)圖標(biāo)!一分鐘玩轉(zhuǎn)PS路徑描邊

Photoshop的路徑工具和鋼筆工具,很容易被人忽視,功能很強(qiáng)大,一直很低調(diào)。今天咱一塊嘮嘮怎么用路徑和鋼筆,快速繪制簡(jiǎn)易線(xiàn)狀圖標(biāo),這個(gè)看了都能做奧?。。?!哪怕是第一天學(xué)PS,也能做到。

有人說(shuō)UI難學(xué),摸不到門(mén)路,那就從這一課開(kāi)始吧。

(心急的同學(xué),直接翻頁(yè)到中下位置,教程部分即可,先練練手)

大背景:扁平化下的極簡(jiǎn)主義

自從蘋(píng)果家扁平化后,整個(gè)世界都扁了。似乎被人們?nèi)恿撕芫玫臉O簡(jiǎn)主義,一夜之間又流行起來(lái)了??戳讼旅娴?,是不是很清新,很直接呀。這樣的圖標(biāo)適用于底部的標(biāo)簽欄中,及其頂部的左右按鈕上。也許有人會(huì)說(shuō):這也叫圖標(biāo),不就是些線(xiàn)條嘛嘛。呵呵,可別說(shuō),現(xiàn)在很多人就是好這口。在這樣一個(gè)信息爆炸,App滿(mǎn)天飛的年代,高效簡(jiǎn)潔自然有市場(chǎng)。扁平化代表了高效,我就是我,不需要多余的思考。

 

 

一、任務(wù)

這些線(xiàn)性圖標(biāo)難做嗎?讓我們分析一下它們的結(jié)構(gòu)。

 

尺寸規(guī)格:一般線(xiàn)條為2px,也有的加強(qiáng)為3px的。

風(fēng)格:線(xiàn)條簡(jiǎn)單,圖形指示意義明確。

 

2px的圖標(biāo)

 

 

3px的圖標(biāo)

 

 

 

 

二、任務(wù)分析(思考和困難)

 

繪制不難,怎么快速繪制才是關(guān)鍵。

大家思考一下,這個(gè)線(xiàn)形圖標(biāo)是怎么做出來(lái)的呢?

 

很多同學(xué)會(huì)想用Illustrator進(jìn)行繪制圖形,但這樣并不方便。在AI可能會(huì)出現(xiàn)繪制完后拖到PS中進(jìn)行調(diào)整,會(huì)導(dǎo)致邊緣線(xiàn)的大小變化,容易導(dǎo)致像素對(duì)不齊等情況。在迭代過(guò)程中不好保證圖標(biāo)描邊大小的統(tǒng)一性,只能一個(gè)一個(gè)的到AI中進(jìn)行更改非常的麻煩。折騰了半天畫(huà)個(gè)線(xiàn)性圖標(biāo),實(shí)在有些浪費(fèi)。

 

如果用PS可行嗎?先不要馬上否定,好好想想路徑工具和鋼筆工具。

是用圖層樣式?選擇工具?有人想到了樣式描邊的方法。貌似不行,因?yàn)槲捶忾]的圖標(biāo),用樣式描邊做出來(lái)卻是封閉的...

那么問(wèn)題來(lái)了,用封閉路徑制作出來(lái)的圖標(biāo)在進(jìn)行縮放時(shí)形狀也會(huì)相應(yīng)的等比縮放,這樣會(huì)導(dǎo)致在需要不同大小的圖形時(shí),因縮放還需反復(fù)調(diào)整圖標(biāo)的路徑邊緣才能保證圖標(biāo)線(xiàn)條的一致性。因?yàn)檎讏D標(biāo)要求線(xiàn)條都相對(duì)統(tǒng)一,調(diào)來(lái)調(diào)去太浪費(fèi)青春!

 

 

好了,不拐彎抹角了,下面就給大家介紹一個(gè)構(gòu)圖快、一學(xué)就會(huì)、包教包會(huì)的方法。

 

記住三點(diǎn):一是形狀工具及填充,二是描邊效果,三是用鋼筆錨點(diǎn)工具刪除無(wú)用路徑。

采用的構(gòu)圖方法:減法。

 

 

其實(shí)在PS CS6出來(lái)后就已經(jīng)新增加了一項(xiàng)描邊功能。使用這個(gè)工具能使圖標(biāo)畫(huà)出來(lái)非常的便捷,在繪制圖標(biāo)中主要有下面幾大優(yōu)勢(shì)!

 

 

1.提高了圖形的描邊質(zhì)量,描邊更為圓滑。

 

我們?cè)诶L制圖形采用圖層樣式做描邊效果時(shí),如果用到較大的數(shù)值,描邊會(huì)產(chǎn)生分塊曲線(xiàn),邊緣有鋸齒感。那么我們通過(guò)矢量描邊處理可得到完美的結(jié)果。我猜測(cè)這是因?yàn)?,矢量描邊是由原始的矢量形狀圖層數(shù)據(jù)而來(lái),而圖層樣式的描邊是由該形狀的位圖蒙版而來(lái)。二者采用的是完全不同的技術(shù),這樣就可以想明白了。

2.多種角度功能,在圖標(biāo)繪制中更為自由

 

使用常用的描邊圖層樣式只可以是圓角的效果。但采用路徑描邊樣式可以畫(huà)出圓角,斜面,或者斜角。這會(huì)大大減少繪制圖形的工作量。

 

 

 

 

 

 

3.通過(guò)描邊路徑可以繪制開(kāi)放式的路徑圖標(biāo)

 

  我們?cè)谑褂脠D層樣式描邊的時(shí)候會(huì)出現(xiàn)以下情況,描邊都是封閉的。而繪制圖標(biāo)時(shí)會(huì)用到間斷的路徑。這時(shí)候可以采用路徑描邊樣式,是支持開(kāi)放路徑描邊的。

 

 

 

三、PS繪制線(xiàn)式圖標(biāo)詳細(xì)過(guò)程

 

繪制路徑時(shí)用到的工具:

 

 鋼筆工具——繪制路徑。
 路徑選擇工具——調(diào)整路徑大小使用。
 直接矛點(diǎn)選擇工具——調(diào)整矛點(diǎn)位置。
 轉(zhuǎn)角工具——調(diào)整路徑圓角和角度使用

 

 

捎帶腳了解幾個(gè)快捷鍵,方便在作圖中的使用。在選用鋼筆工具繪制后你可以用Shift/Ctrl/Atl來(lái)回切換出需要使用的直接選擇工具、錨點(diǎn)選擇工具、倒角工具。

 

 

 

 

下面就一步一步教大家畫(huà)線(xiàn)式圖標(biāo)。為了讓初學(xué)者看明白,我盡量寫(xiě)的詳細(xì)些。

 

 

 

  1. 在ps中新建一塊畫(huà)布。(快捷鍵:ctrl+n)

     

2.用矩形路徑畫(huà)出兩個(gè)矩形(快捷方式:畫(huà)一個(gè)圓角矩形,然后按住Alt鍵拖動(dòng)圖層即可進(jìn)行復(fù)制)。

 

 

3.使用 框選所有的路徑,找到PS右上角的填充和描邊,把填充隱藏,描邊設(shè)置2個(gè)點(diǎn)像素。

 

4.使用直接選擇工具刪除多余的路徑錨點(diǎn),從而去除多余的路徑線(xiàn)。

 

 

 

插播提醒:在需要?jiǎng)h除中間一段路徑的時(shí)候,需要先用鋼筆工具進(jìn)行添加錨點(diǎn),然后用直接選擇工具選中進(jìn)行刪除。

 

如下,我想刪除紅色區(qū)域的一段路徑怎么辦?

我們繼續(xù)??!

 

 

 

5.使用橢圓工具繪制太陽(yáng)(繪制過(guò)程中按住shift鍵即可畫(huà)出正圓),鋼筆工具進(jìn)行繪制山脈部分。

 

 

 

6.完畢后調(diào)整路徑描邊的起終點(diǎn)的樣式為圓角或直角。

 

 

 

7.選中需要調(diào)整的角,再使用描邊選項(xiàng)里的角點(diǎn)為圓角,使圖形更為圓潤(rùn)。

 

 

 

這樣一個(gè)圖標(biāo)就完成了。

 

 

 

用路徑描邊還能區(qū)分圖標(biāo)的立體感。不同粗細(xì)描邊的形狀結(jié)合使圖標(biāo)更為豐富化。

 

 

 

四、后期修飾:讓線(xiàn)條更圓滑

路徑邊緣的修正會(huì)給整個(gè)圖標(biāo)精致的感覺(jué),尤其是出現(xiàn)單獨(dú)線(xiàn)條和折角的時(shí)候,顯得尤為重要。

路徑描邊還可以根據(jù)你的需要進(jìn)行對(duì)其模式的選擇,在路徑外進(jìn)行描邊,還是中間,還是內(nèi)部描邊。這在路徑描邊圖形的繪制中會(huì)經(jīng)常使用到。

 

 

小結(jié):

有時(shí)候真的是我們想多了,總想學(xué)一些復(fù)雜高級(jí)的東西,而基礎(chǔ)的往往被忽視。

 

課后小作業(yè):

找一套線(xiàn)性u(píng)i圖標(biāo),一個(gè)一個(gè)模仿。

 

[教程作者:micu設(shè)計(jì)]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/ps2555.html
Photoshop制作簡(jiǎn)潔的電商促銷(xiāo)橫幅
騰訊TGideas:四招讓你快速成長(zhǎng)為牛逼的設(shè)計(jì)師!
圖趣網(wǎng)微信
建議反饋
×