當前位置:首頁>ps實例教程>ps網(wǎng)頁設計>UI設計教程>教程內(nèi)容

皮包圖標,設計一個皮包主題的UI圖標教程(8)

來源:pdadians 作者:P大點S 學習:18816人次

教程十分詳細,從皮包紋理到各個細節(jié)都詳細講解了一次,還有PSD文件可參考,有興趣的一起練習一下。

圖標PSD:http://www.theoat.com.cn/photoshop/sucai/2016/f338363.html

皮革紋理:http://www.theoat.com.cn/photoshop/sucai/2016/w655596.html

我們的最終效果:

www.theoat.com.cn_0224021539-0.jpg

下面,教程開始!

在正式做圖標之前,需要先自定義一個圖案。

首先新建一個1000×1000px 的畫布,填充顏色#c5ab90,然后【濾鏡】-【雜色】-【添加雜色】,給圖層添加7%的雜色。完成之后,【編輯】-【自定義圖案】添加一個圖案,命名為【磨砂紋理】

www.theoat.com.cn_0224021438-1.jpg

準備工作做好了,開始畫皮包。

新建一個1000×1000的畫布,填充一個從#d9d5cf到#9c8c7e的徑向漸變。

www.theoat.com.cn_02240230S-2.jpg

建一個512×512,半徑為90的圓角矩形,并添加圖層樣式,其中【圖案疊加】疊加的是剛才新建的【磨砂紋理】

www.theoat.com.cn_0224021163-3.jpg

www.theoat.com.cn_0224025560-4.jpg

www.theoat.com.cn_0224022302-5.jpg

CTRL+J復制一層剛才的圓角矩形,CTRL+T并按住ALT+SHIFT等比縮小,然后再給這個圖層添加一個投影。

www.theoat.com.cn_0224021H7-6.jpg

畫一個豎著的矩形,居中擺放,并添加圖層樣式。

www.theoat.com.cn_0224021020-7.jpg

www.theoat.com.cn_0224026442-8.jpg

www.theoat.com.cn_0224025631-9.jpg

www.theoat.com.cn_02240235K-10.jpg

畫一條細線,緊貼豎矩形的右邊緣,添加圖層樣式。

www.theoat.com.cn_0224021160-11.jpg

www.theoat.com.cn_02240240a-12.jpg

www.theoat.com.cn_022402N30-13.jpg

將這個線條復制一層,移動到豎矩形的左側,將【投影】角度改為0°

www.theoat.com.cn_0224025529-14.jpg

復制一層較小的圓角矩形(圖層【中】),清除圖層樣式,用布爾運算裁掉上半部分,并填充顏色#372715

www.theoat.com.cn_0224023532-15.jpg

給這個形狀添加圖層樣式,其中【圖案疊加】疊加的是【皮革紋理】(素材包中有提供)

www.theoat.com.cn_0224024I3-16.jpg

www.theoat.com.cn_0224025519-17.jpg

www.theoat.com.cn_0224021496-18.jpg

www.theoat.com.cn_0224026143-19.jpg

CTLR+J復制一層之前畫的豎線(圖層【左】),CTRL+T旋轉(zhuǎn)為橫線,放到皮革的上邊緣。

調(diào)節(jié)顏色和投影,做成這個樣子~

www.theoat.com.cn_022402L15-20.jpg

把這條橫線復制一層,在形狀工具下將線條改為虛線。

www.theoat.com.cn_0224023356-21.jpg

調(diào)整圖層顏色和投影,做成以下效果:

www.theoat.com.cn_02240231N-22.jpg

將剛才做的實線和虛線一起建組(CTRL+G),添加一個圖層蒙版,然后在蒙版上拉一個漸變。

www.theoat.com.cn_02240251K-23.jpg

然后新建一個圖層,添加一個黑白漸變。

www.theoat.com.cn_02240245a-24.jpg

按住CTRL較小的圓角矩形(圖層【中】)的選區(qū),加一個蒙版,把多余的地方隱藏掉。然后將混合模式改為【柔光】不透明度改為60%。

中間部分的效果已經(jīng)完成了,建議把除了【底面】和【背景】以外的圖層一起建一個組。

www.theoat.com.cn_022402L15-20.jpg

將【底面】圖層復制一層,調(diào)整形狀,更改圖層樣式。

www.theoat.com.cn_0224022I5-26.jpg

將剛才的圖層【蓋】再復制一層,調(diào)整大小,修改圖層樣式。

www.theoat.com.cn_0224021911-27.jpg

www.theoat.com.cn_0224021B8-28.jpg

www.theoat.com.cn_0224024264-29.jpg

再復制一層,將形狀改為虛線,然后拷貝之前做的【虛線】圖層的圖層樣式,粘貼到這個虛線圖層上,修改圖層樣式。

www.theoat.com.cn_0224021132-30.jpg

www.theoat.com.cn_022402J64-31.jpg

www.theoat.com.cn_0224021916-32.jpg

調(diào)整圖層順序,把【上虛線】圖層移動到【上】圖層的下面。

然后通過布爾運算做出以下白色形狀。

www.theoat.com.cn_0224025940-33.jpg

柵格化圖層,【濾鏡】-【高斯模糊】給予適當?shù)哪:,并調(diào)節(jié)圖層透明度,用圖層蒙版隱藏掉多余的部分,做出如下效果。

www.theoat.com.cn_0224021S6-34.jpg

皮包的整體形狀已經(jīng)有了,接下來做皮帶和金屬扣。

用圓角矩形工具畫一個下圖的形狀,并填充顏色#c5ab90,記得將這個圖層移動到剛才做的【上高光】圖層的下面。

www.theoat.com.cn_022402FK-35.jpg

將前面【皮革層】的圖層樣式拷貝過來,適當調(diào)節(jié)圖層樣式,用蒙版隱藏掉多余的形狀,得到如下效果:

www.theoat.com.cn_0224022B7-36.jpg

用之前做虛線的辦法,再做一條虛線。

www.theoat.com.cn_0224024V9-37.jpg

在皮帶上畫一個黑色的小圓,然后復制一個小圓,用布爾運算畫一個圓環(huán),填充顏色# c5ab90。

這里最好不要用圖層描邊的方式做圓環(huán)。如果一定要這么做,就必須要把圓環(huán)柵格化,才能繼續(xù)后面的步驟。

將【虛線】圖層的圖層樣式拷貝過來,粘貼給【環(huán)】圖層,適當調(diào)節(jié),做出以下效果

www.theoat.com.cn_0224024Y7-38.jpg

將【環(huán)】和【孔】一起建組,復制組,排列成以下效果:

www.theoat.com.cn_0224021103-39.jpg

畫一個矩形,利用變形做出以下形狀,并填充顏色#c5ab90。

www.theoat.com.cn_0224021056-40.jpg

將【皮革層】的圖層樣式拷貝過來,適當調(diào)節(jié),并添加一個【漸變疊加】

www.theoat.com.cn_0224021005-41.jpg

www.theoat.com.cn_0224021417-42.jpg

在【橫扣】右邊畫一個圓,添加圖層樣式

www.theoat.com.cn_02240232A-43.jpg

www.theoat.com.cn_0224025304-44.jpg

www.theoat.com.cn_0224022Y1-45.jpg

www.theoat.com.cn_022402HO-46.jpg

復制一個【圓扣】到左邊。再復制一個【橫扣】圖層到下面,調(diào)節(jié)形狀,做成以下效果。

www.theoat.com.cn_0224022924-47.jpg

用布爾運算畫出金屬扣的形狀,再將【圓扣】的圖層樣式拷貝過來,適當調(diào)節(jié)

www.theoat.com.cn_022402H46-48.jpg

關于這個金屬扣,我自己是畫了一個圓,然后將下面的錨點拖上去,并調(diào)節(jié)錨點的手柄,得到了這個形狀。

做出金屬扣之后,用圖層蒙版隱藏掉下面的那條邊,然后用之前做高光的辦法,給金屬扣被皮帶蓋住的部分加點陰影

www.theoat.com.cn_022402BQ-49.jpg

畫一個瘦長的矩形,將【金屬扣】的圖層樣式拷貝過來。

www.theoat.com.cn_0224025L7-50.jpg

給這個圖層添加一個蒙版,在蒙版上拉一個黑白漸變。

www.theoat.com.cn_0224024Q3-51.jpg

然后皮包就大功告成了~

www.theoat.com.cn_0224023I8-52.jpg

 

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
我是辣媽我做主2017-08-22 11:52
我的作業(yè):
荊州才子2017-03-29 05:32
荊州才子2017-03-29 05:03
Czq2016-10-22 03:01
那個虛線怎么作出來的
Czq2016-10-22 03:10
那個虛線怎么作出來的
qqq6262016-04-29 02:46
qqq6262016-04-29 02:04
x小葉2016-04-27 03:59
x小葉2016-04-27 03:04
1233333902016-04-19 11:54
20160419,學習,怎么樣都不晚
1233333902016-04-19 11:04
20160419,學習,怎么樣都不晚
tidy2016-04-01 09:38
雨淋濕的傷痛z2016-04-01 10:15
學習學習
微紅的頭發(fā)2016-04-01 10:15
學習學習
愛何拽拽2016-04-01 10:15
學習學習

關注大神微博加入>>

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