效果圖如下：

   

具體步驟如下：

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

 

   

完成后的矩形效果

   

[Page: ]

2.導(dǎo)入LOGO文件

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

   

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

   

5.為L(zhǎng)OGO標(biāo)志添加背景邊框，并設(shè)置填充為8%

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

   

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

 

  

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

 

   

[Page: ]

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

   

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

   

11.制作一個(gè)圓角矩形，使用如下樣式，當(dāng)鼠標(biāo)移動(dòng)到按鈕上時(shí)作為按鈕的背景

   

12.如下圖就是鼠標(biāo)移動(dòng)到NEWS按鈕時(shí)的效果了

13.制作白色矩形

14.添加樣式

  

   

   

   

[Page: ]

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

   

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

17.添加文字與箭頭

   

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

   

19.放入文字與圖片

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

   

[Page: ]