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

Photoshop設(shè)計動漫游戲網(wǎng)站模板(8)

來源:未知 作者:admin 學(xué)習(xí):6636人次

新建950 x 1160 大小文件,填充背景顏色#161616,使用矩形工具制作寬900、高190的矩形,并添加如下圖層樣式

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板2

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板3

完成后的矩形效果

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板4

導(dǎo)入LOGO文件

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板

導(dǎo)入一張光暈圖片

 


將圖片裁剪到適當(dāng)尺寸,放入游戲網(wǎng)站的頭部,調(diào)整圖片的不透明度和顏色,使其與整個藍(lán)色背景融合在一起

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板

為LOGO標(biāo)志添加背景邊框,并設(shè)置填充為8%

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板8

制作兩條矩形條作為導(dǎo)航按鈕的背景區(qū)域

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板_bbs.16xx8.com9

設(shè)置頂部的矩形條圖層樣式如下

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板_bbs.16xx8.com10

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板_bbs.16xx8.com11


設(shè)置底部的矩形條樣式如下

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板_bbs.16xx8.com12

 

為了突出立體質(zhì)感,制作一個白色矩形條,高度為其一半,設(shè)置不透明度為4%

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板_bbs.16xx8.com14

為兩條導(dǎo)航條添加文字,并且我們用兩條1px高度的線條(一黑一白)來分割他們之前的區(qū)域

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板_bbs.16xx8.com15


制作一個圓角矩形,使用如下樣式,當(dāng)鼠標(biāo)移動到按鈕上時作為按鈕的背景

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板_bbs.16xx8.com16

 

如下圖就是鼠標(biāo)移動到NEWS按鈕時的效果了

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板_bbs.16xx8.com18

制作白色矩形

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板_bbs.16xx8.com19


添加樣式

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板_bbs.16xx8.com20

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板_bbs.16xx8.com21

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板_bbs.16xx8.com22

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板_bbs.16xx8.com23


將完成后的矩形復(fù)制一次放到底部,將游戲圖片放入兩者之間

 

為頂部矩形上部添加白色矩形(高度為矩形的一半),設(shè)置不透明度為 3%,產(chǎn)生質(zhì)感

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板_bbs.16xx8.com25

添加文字與箭頭 

Photoshop設(shè)計制作華麗立體游戲網(wǎng)站模板_bbs.16xx8.com26


依照上面完成的區(qū)塊樣式制作網(wǎng)站的其他區(qū)塊

 

放入文字與圖片

 

完成后的游戲網(wǎng)站的整體效果如下圖

 



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

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

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

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