教程概覽

現代網頁設計愈發重視介面質感，導航列更是視覺焦點。本教程將手把手教你使用 Photoshop 繪製一組擁有水晶質感、發光效果與立體倒影的藍色系導航按鈕，適合應用於網站介面設計專案。

成品預覽

步驟 1：建立背景底圖

新建 500×200px 文件，選取漸層工具 (G) 設為徑向漸層，從 #363636 拉至 #252525，由左上向右下拖曳建立深色背景。

步驟 2：繪製按鈕基礎形狀

新建圖層，使用選區工具 (M) 設定固定大小 100×40px，建立矩形選區。

步驟 3：填充線性漸層基底色

在選區內填充線性漸層，顏色從 #68ad40 至 #4c8c2c，形成按鈕基礎色調。

步驟 4：套用圖層樣式打造水晶質感

對按鈕圖層套用圖層樣式：內發光、漸層疊加、描邊 (#427a25)，營造晶瑩剔透的水晶質感與邊緣高光。

目前按鈕效果：

步驟 5：加深工具製作陰影立體感

新建圖層並與按鈕圖層合併 (Ctrl+E)，使用加深工具 (O)，筆刷 45px、不透明度 10%，環繞按鈕四周加深，增強立體厚度。

步驟 6：減淡工具提亮高光細節

切換減淡工具 (O)，14px 軟邊筆刷、不透明度 10%、範圍設為「高光」，於按鈕邊緣輕輕描繪高光，提升質感真實度。

步驟 7-10：複製按鈕、製作倒影、添加文字

複製按鈕排列成導航列，新建圖層填充灰白漸層並套用透視變換製作倒影，降低不透明度至 10%，最後添加導航文字，完成整組水晶導航。