當前位置: 首頁 > 設計教程 > 網頁設計教程 > Photoshop設計導航鼠標懸停狀態效果

Photoshop設計導航鼠標懸停狀態效果

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

Photoshop教程:設計導航鼠標懸停狀態小效果
Photoshop教程:設計導航鼠標懸停狀態小效果

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

Photoshop教程:設計導航鼠標懸停狀態小效果

2、 新建圖層,用橢圓工具在圖形上面建一個選區,然后填充白色,如圖。

Photoshop教程:設計導航鼠標懸停狀態小效果

3、取消選區,選擇“濾鏡”“高斯模糊”把白色進行模糊。具體數值視效果而定,效果如圖。

Photoshop教程:設計導航鼠標懸停狀態小效果

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

Photoshop教程:設計導航鼠標懸停狀態小效果
Photoshop教程:設計導航鼠標懸停狀態小效果

5、新建圖層,按住ctrl單擊圖形圖層得到圖形選區,然后選擇“編輯”-“描邊”對它進行描邊設置,如圖。

Photoshop教程:設計導航鼠標懸停狀態小效果
Photoshop教程:設計導航鼠標懸停狀態小效果

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

Photoshop教程:設計導航鼠標懸停狀態小效果
Photoshop教程:設計導航鼠標懸停狀態小效果

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

Photoshop教程:設計導航鼠標懸停狀態小效果
Photoshop教程:設計導航鼠標懸停狀態小效果
Photoshop教程:設計導航鼠標懸停狀態小效果

分享到: 
Photoshop設計簡潔大方的網頁UI
photoshop制作綠色下載按鈕

熱門推薦

上海时时乐开奖結果