游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)(3)

來源:學(xué)UI網(wǎng) 作者:西湖魚 學(xué)習(xí):18309人次

本篇的圖標(biāo)教程是通過PS來制作一款時(shí)下最流行的游戲《紀(jì)念碑谷2》的游戲圖標(biāo),華麗又清新,通過它來練習(xí)鋼筆工具和學(xué)習(xí)繪制扁平插畫游戲圖標(biāo)的思路,喜歡的同學(xué)們一起來學(xué)習(xí)下吧。

效果圖

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn
theoat.com.cn

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

1、新建畫布,尺寸512*512,分辨率72ppi。用圓角矩形工具繪制一個(gè)圓角為90px的512*512的圓角矩形。給圓角矩形添加圖層樣式如圖。

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

2、用橢圓工具繪制顏色為#ffffff的8px正圓,并復(fù)制十余個(gè),改變部分圓的透明度,達(dá)到圖a的效果。

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

1、分析出柱體的俯視圖,這樣更容易明白圖標(biāo)中柱體應(yīng)如何繪制。八芒星柱體的俯視圖如下,由兩個(gè)正方形組合而成。

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

2、根據(jù)俯視圖開始繪制柱體。仔細(xì)觀察圖a和圖b,發(fā)揮空間想象力,根據(jù)數(shù)字提示看看怎么由圖b得到圖c的。

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

新建70*150的矩形,得到圖c的矩形3。

新建50*150的矩形,自由變換斜切30°,得到圖c的矩形2。

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

矩形5與矩形8受光程度不同,因此顏色不一。只要繪制出圖c的矩形2和矩形3,通過水平變換和移動(dòng)位置就可以得到圖c。

3、用鋼筆工具沿著柱體頂點(diǎn)畫出部分八芒星,隨后添加圖層樣式漸變疊加,參考數(shù)值如下:

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

添加圖層蒙版擦除部分區(qū)域,實(shí)現(xiàn)近實(shí)遠(yuǎn)虛的效果。

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

記得關(guān)閉第二步中的矩形1與矩形7的圖層顯示,八芒星中擦除過的部分不透明度降低,不關(guān)閉顯示則會(huì)影響八芒星的顏色效果。擦除效果接近圖d即可。

4、繪制八芒星描邊。按住鍵盤上的 Ctrl 鍵,鼠標(biāo)單擊八芒星圖層的縮略圖得到選區(qū)。

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

得到八芒星的選區(qū)后,選中選框工具(快捷鍵M),在選區(qū)內(nèi)單擊鼠標(biāo)右鍵選擇“變換選區(qū)”。

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

選區(qū)變換大小如圖作參考

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

接著新建圖層,即可激活描邊選項(xiàng)。隨后添加圖層蒙版擦除部分區(qū)域。

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

以同樣的步驟繪制顏色為#82b3ff的2px描邊,以及16px的漸變描邊,漸變疊加參數(shù)如下圖。完成效果參考如圖e。

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

1、小艾達(dá)可拆分如圖:

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

① 用AI的形狀生成工具繪制而成

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

② 用布爾運(yùn)算繪制而成

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

③ 由三角形和圓形組成的圓錐,添加錨點(diǎn)改變弧度而來

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

④ 復(fù)制一個(gè)部件③,添加漸變疊加(90°線性),用布爾運(yùn)算繪制而成

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

⑤和⑥用鋼筆工具繪制而成,再加上影子,小艾達(dá)的繪制就完成了

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

2、蘿爾可拆分如圖

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

① 是添加了漸變疊加的82*82圓

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

②是添加了漸變疊加(90度線性)的60*60圓

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

③運(yùn)用布爾運(yùn)算

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

部件⑤領(lǐng)口部分要與部件④等寬。部件⑤用鋼筆工具繪制,添加了漸變疊加(圖f效果),并用畫筆工具畫了一層暗面增加立體感

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

⑥是鋼筆工具畫輪廓,保持與艾達(dá)的手弧度一致,畫筆工具畫陰影

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

⑦運(yùn)用布爾運(yùn)算繪制出襠部,運(yùn)用鋼筆工具繪制腿與腳

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn

完成以上步驟最終成果

游戲圖標(biāo),用PS打造火爆游戲紀(jì)念碑谷的游戲圖標(biāo)_theoat.com.cn
theoat.com.cn

同學(xué)們按照步驟做完了嗎,是不是很喜歡,希望你在學(xué)習(xí)中也找到樂趣。

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

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
禿頭小寶貝兒2020-12-14 03:33
我的作業(yè):是這個(gè)

1537965792020-12-14 11:20
多謝您的分享。
禿頭小寶貝兒2020-12-11 05:21
ICOIN

草木皆兵12018-11-15 01:09
太棒了
豹貓oO2018-11-15 09:28
喜歡
林子2018-11-15 09:00
贊一個(gè)
丨繁花灬落葉2018-03-06 11:32
紀(jì)念碑谷的游戲圖標(biāo)我的作業(yè):
隨意2018-01-13 03:26
我的作業(yè):
椰子2017-11-07 10:17
一個(gè)女的和一個(gè)男的相親,女的問:"我性格特別不好,不會(huì)做家務(wù),愛發(fā)脾氣,亂花錢還很任性,你能接受我嗎?"男的憋了半天問了一句話:"你...你扛不扛揍呢?
八號(hào)風(fēng)暴2017-11-07 10:04
感謝分享
昵稱為魚2017-11-07 06:56
太厲害了學(xué)不來
zhangduo2017-11-07 04:07
很是喜歡
天朝城管帝2017-11-07 05:07
好東西,必學(xué)。

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

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