網(wǎng)頁設(shè)計(jì)中導(dǎo)航hover狀態(tài)高光效果示例

圖趣網(wǎng)絡(luò)之前給大家介紹過網(wǎng)頁設(shè)計(jì)中導(dǎo)航的質(zhì)感運(yùn)用技巧，今天接著為大家介紹下網(wǎng)頁設(shè)計(jì)導(dǎo)航中hover狀態(tài)高光的實(shí)現(xiàn)辦法。

源引永艾視覺“前段時(shí)間有朋友問這個(gè)效果怎樣實(shí)現(xiàn)的，今天我簡單寫一下教程，希望對大家有用，還有如果大家對頁面中的什么效果感到疑惑，就請留言給我，我會盡力發(fā)上教程來和大家分享的。”

首先看一下最終效果和分層：

1、 背景色設(shè)置為#280021，新建圖層，利用鋼筆工具畫如下圖形，填充顏色，然后圖層樣式中的漸變疊加設(shè)置如下：

2、 新建圖層，用橢圓工具在圖形上面建一個(gè)選區(qū)，然后填充白色，如圖。

3、取消選區(qū)，選擇“濾鏡”“高斯模糊”把白色進(jìn)行模糊。具體數(shù)值視效果而定，效果如圖。

4、把這個(gè)圖層的混合模式設(shè)置為“疊加”，現(xiàn)在看起來過于亮，可以降低一下透明度。然后把超出下面圖形的白色去掉。如圖。

5、新建圖層，按住ctrl單擊圖形圖層得到圖形選區(qū)，然后選擇“編輯”-“描邊”對它進(jìn)行描邊設(shè)置，如圖。

6、將此描邊圖層的混合模式設(shè)置為疊加，透明度設(shè)置為40%，視效果而定。如圖。

7、接下來先添加上部高光。用鋼筆工具新建選區(qū)，然后ctrl+enter轉(zhuǎn)換成選區(qū)，然后按住ctrl+alt+shift再點(diǎn)擊下面圖形的圖層，使他們兩個(gè)的選區(qū)進(jìn)行重合，用漸變工具（白色到透明）進(jìn)行由左上到右下的拖動（這里在拖動的時(shí)候要注意，不要拖動的太大，從左上邊緣開始拖動到左下邊緣為止即可），適當(dāng)調(diào)節(jié)透明度為80%。如圖所示。

8、希望再把上面高光再真實(shí)一些，可以先把這個(gè)圖層混合樣式設(shè)置為“疊加”，然后再復(fù)制一層，把復(fù)制的這一層混合樣式設(shè)置為“正常”，再稍微調(diào)低復(fù)制層的透明度為70%.如圖。

9、下面進(jìn)行底部高光的處理，新建圖層，選擇鉛筆工具，白色，在圖層的下邊緣畫出一條直線，如圖。

10、然后，將此圖層的混合樣式設(shè)置為“疊加”，然后單擊圖層面板的蒙版圖標(biāo)，如圖，圖層此時(shí)顯示下面這個(gè)樣子。然后選擇漸變工具，設(shè)置為黑白黑，然后從左到右進(jìn)行拖拉，如圖

11、新建圖層，選擇柔性筆刷，顏色白色，設(shè)置大小為14左右，在圖形的下邊緣處點(diǎn)擊一下，如圖。然后ctrl+T將它變長，如圖。然后將此圖層混合模式設(shè)置為“疊加”，把超出圖形邊緣的光刪掉，如圖。

12、同樣如同上面第9，10步操作，所不同的就是圖層混合樣式為“正常”而不是“疊加”，然后適當(dāng)降低透明度，讓其有一條亮線。如圖

13、同樣如上面11步一樣操作，不同的是，筆刷大小設(shè)置為10，比上面的14小一點(diǎn)，然后圖層混合模式設(shè)置為“正常”，并且適當(dāng)降低一點(diǎn)點(diǎn)透明度。如圖所示。

到此為止，這個(gè)小效果就完成了，在做類似光效時(shí)，最主要的應(yīng)用就是高斯模糊和“疊加”，合理運(yùn)用這兩個(gè)功能會給作品增色不少。