網(wǎng)頁設計教程之游戲質(zhì)感導航制作

關于網(wǎng)頁設計中的導航設計，之前阿圖跟大家講解過兩課，分別是網(wǎng)頁設計中導航的質(zhì)感運用技巧、網(wǎng)頁設計中導航hover狀態(tài)高光效果示例

1.啟動Photoshop軟件，創(chuàng)建新的psd文檔，寬度1440px，高度129px，填充背景色為 #001019。

2.選用矩形工具，新建圖層，在畫布中間畫出寬1360px,高63px，填充為#001724。 

在給此層添加蒙版，用橡皮擦檫去兩邊出現(xiàn)漸變的效果，最終效果如下：

3.  選取 矩形選框 工具，新建圖層，畫出寬度1003px，高度63px，選擇 漸變工具 ，設置 前景色到透明漸變 前景色顏色值：#0398cc，背景色透明。

  接著給這層添加蒙版，用橡皮檫工具，檫出下面的效果。

4.  選擇畫筆工具，大小9px,新建圖層，畫出一條模糊的直線，圖層模式疊加。然后增加蒙版，用橡皮擦檫去兩邊，最終效果如下：

5．新建2像素文檔，制作網(wǎng)格,畫出2個1像素格子，然后選菜單 編輯 - 定義圖案 確定?；蛘哂弥敖o大家介紹的抽絲濾鏡實現(xiàn)。

6．新建圖層，編輯 – 填充 – 選擇圖案，確定。然后添加蒙版—橡皮擦，檫去左右兩邊，最終效果如下。

7. 新建圖層，選擇橢圓工具 — 固定大小設置 W 102px H 102px,在畫布中間畫出黑色背景圓。最終效果如下：

8. 在復制黑色圓，選擇底層圓 ，填充顏色#0092bc，然后高斯模糊，半徑設置6-7像素。在復制此層一層，圖層不透明度55%，兩層都增加蒙版，把圓 上部分用橡皮擦，擦去。最終效果如下：

9. 在復制一個黑色圓，設置圖層樣式,最終效果如下：

10. 選擇畫筆工具，新建圖層，畫出一個小圓 ，把小圓放在黑色圓的下層，選擇圖層 疊加 模式。

最終效果：

11. 選擇鋼筆工具，新建圖層，畫出如下圖形。復制一層備用。

接著高斯模糊圖形，設置半徑2像素。復制此圖層隱藏

把復制的圖層用鋼筆工具勾畫出下圖效果，

把剛隱藏的圖層顯示出現(xiàn)，如下圖效果：

12. 新建圖層，畫出下圖紅方框內(nèi)的一個 線條弧形狀，

如下效果：

新建圖層，接著畫一條白色弧形線：

新建圖層，在畫一個圓形中間空心的圓，填充#49464e。

增加蒙版，用橡皮擦檫出下圖效果：

新建圖層，在繼續(xù)增加些細節(jié)效果,

新建圖層，增加一條白色邊線，增加蒙版，把上部分檫掉。

新建圖層，畫一個線條圓，填充#00a1d6。然后按住Ctrl，鼠標左鍵點擊這條 線條圓。

新建圖層，選畫筆工具 ，顏色白色，在左邊上面 跟右下邊擦拭，在選擇圖層疊加模式。

最終效果：

在把游戲LOGO圖標增加上去

13. 最后增加導航文字，最終效果圖：