本教程主要使用Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計(jì)，網(wǎng)頁的設(shè)計(jì)主要在于網(wǎng)頁布局，喜歡的朋友讓我們一起來學(xué)習(xí)吧

1. 首先給大家看下整體效果。

2. 啟動(dòng)本教程你將需要?jiǎng)?chuàng)建一個(gè)新文件。使用任何你想要的值，但是我建議你創(chuàng)建一個(gè)文件的最小寬度為1100*1163像素。背景填充# 252118。

3. 原教材玩神秘沒有寫怎么做，我用我的方法做了一下，你可以復(fù)制一個(gè)剛剛做的圖層，選擇畫筆工具，大小設(shè)成1100px，硬度0%。柔光，把這個(gè)圖層透明度調(diào)到60%就ok了.

4. 在中間用圓角矩形畫個(gè)995*295的圓角矩形。填充#52442b.

5. 復(fù)制一個(gè)上面圖形，把顏色改成#e9e9e9。

6. 在頁腳創(chuàng)建一個(gè)新的形狀。在這里，用來添加一些文本，填充#15120d. 寬度54.

7. 對第一個(gè)矩形做濾鏡--雜色--添加雜色，數(shù)量為3—10.

8. 這一步元教材說的很模糊，我是對這個(gè)矩形做的效果，新建了一個(gè)白色矩形，做的不透明度13%，用橡皮擦去掉不要的部分。

9. 在頁腳上邊的位置在創(chuàng)建一個(gè)新的矩形。在這里，用來添加一些文本，填充#15120d. 寬度252.

10. 現(xiàn)在我將創(chuàng)建筆記本螺旋。這相當(dāng)容易。你所要做的是創(chuàng)造兩個(gè)很色矩形和一個(gè)長方形矩形對你做漸變疊加。組合在一起復(fù)制多個(gè)就可以了。

11. 輸入文本，你可以給上面的大字加下效果，下面的小字加下投影效果就好了。如圖

12. 用圓角工具繪制兩個(gè)按鈕，添加文本。126*34.做以下效果。

13. 用圓角矩形工具畫一個(gè)209*223的矩形，做內(nèi)陰影和描邊效果。

14. 用鋼筆工具繪制下面圖形，添加文本。

15. 在頂部的布局我將創(chuàng)建一個(gè)簡單的矩形。415*281.

16.做以圖層樣式

17. 然后，我將創(chuàng)建一個(gè)較小的形狀381*258，圖層樣式如下圖：

18. 我的最后一個(gè)步驟是創(chuàng)建導(dǎo)航組合布局.

19.最后完成的效果