當(dāng)前位置:首頁>ps入門教程>ps基礎(chǔ)教程>工具教程>教程內(nèi)容

講解ps路徑描邊的使用技巧

來源:站酷 作者:micu設(shè)計 學(xué)習(xí):21777人次

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

有人說UI難學(xué),摸不到門路,那就從這一課開始吧。

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

大背景:扁平化下的極簡主義

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

講解ps路徑描邊的使用技巧

講解ps路徑描邊的使用技巧

一、任務(wù)

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

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

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

2px的圖標(biāo)

講解ps路徑描邊的使用技巧

講解ps路徑描邊的使用技巧

3px的圖標(biāo)

講解ps路徑描邊的使用技巧

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

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

大家思考一下,這個線形圖標(biāo)是怎么做出來的呢?

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

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

是用圖層樣式?選擇工具?有人想到了樣式描邊的方法。貌似不行,因為未封閉的圖標(biāo),用樣式描邊做出來卻是封閉的...

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

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

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

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

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

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

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

講解ps路徑描邊的使用技巧

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

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

講解ps路徑描邊的使用技巧

 

講解ps路徑描邊的使用技巧

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

  我們在使用圖層樣式描邊的時候會出現(xiàn)以下情況,描邊都是封閉的。而繪制圖標(biāo)時會用到間斷的路徑。這時候可以采用路徑描邊樣式,是支持開放路徑描邊的。

 

講解ps路徑描邊的使用技巧

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
淡笑嘗人生2018-12-17 05:16
給力
Thenworld2018-04-26 08:46
給力
霸道溫柔2018-03-29 01:16
給力
鳥失左翅2017-05-27 05:22
給力給力
鳥失左翅2017-05-27 05:22
給力給力
鳥失左翅2017-05-27 05:22
給力給力
憤怒的箭豬2017-05-27 07:00
給力
銀白色月牙i2017-05-27 07:00
給力
可愛的鉆石女孩2017-05-27 07:00
給力
深血坦2017-05-27 07:00
給力
熊貓?zhí)煨?/span>2017-05-27 07:00
給力
千子吖2017-05-27 07:00
給力
又沒占到座2017-05-27 07:00
給力
水兒慶2017-05-27 07:00
給力
大華林三很呆萌2017-05-27 07:00
給力

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!