網(wǎng)頁(yè)設(shè)計(jì)教程之游戲質(zhì)感導(dǎo)航制作

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

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

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

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

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

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

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

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

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

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

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

9. 在復(fù)制一個(gè)黑色圓，設(shè)置圖層樣式,最終效果如下：

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

最終效果：

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

接著高斯模糊圖形，設(shè)置半徑2像素。復(fù)制此圖層隱藏

把復(fù)制的圖層用鋼筆工具勾畫(huà)出下圖效果，

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

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

如下效果：

新建圖層，接著畫(huà)一條白色弧形線(xiàn)：

新建圖層，在畫(huà)一個(gè)圓形中間空心的圓，填充#49464e。

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

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

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

新建圖層，畫(huà)一個(gè)線(xiàn)條圓，填充#00a1d6。然后按住Ctrl，鼠標(biāo)左鍵點(diǎn)擊這條 線(xiàn)條圓。

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

最終效果：

在把游戲LOGO圖標(biāo)增加上去

13. 最后增加導(dǎo)航文字，最終效果圖：