Windows 7 標誌性的 Aero 玻璃質感（半透明、模糊、高光邊緣）深受設計師喜愛。本教學將示範如何在 Photoshop 中純手工繪製一組具備該風格的網站導航列，涵蓋背景光效、導航背景玻璃質感、按鈕狀態與高光邊緣細節刻畫。

最終效果預覽

製作步驟

第一部分：背景氛圍營造

1. 新建 600×400 px 文件。
2. 前景色 #1592d7、背景色 #136da2，選徑向漸變工具，從畫布中心向外拖曳，形成深藍放射光暈背景。

第二部分：裝飾光條（散射光帶）

1. 新建圖層，選自定形狀工具，載入形狀庫中類似「光帶/彎曲長條」的形狀（或筆刷繪製）。
2. 前景色白色，路徑面板右鍵填充路徑。
3. 刪除路徑，執行 濾鏡 > 模糊 > 高斯模糊 5px。
4. 圖層混合模式柔光，不透明度 30%，形成若隱若現的背景裝飾光帶。

第三部分：導航列背景（玻璃質感核心）

1. 新建圖層「nav」，矩形選區填黑色，高度自定（如 50px）。
2. 圖層填充度設 0%（關鍵：填充度不影響圖層樣式，僅控制像素不透明度）。
3. 套用圖層樣式：
   • 內部陰影：距離 0、大小 3-5px、不透明度 30% 左右（模擬玻璃內側陰深）。
   • 內部發光：混合模式螢幕、白色、大小 10px 左右（模擬邊緣微光）。
   • 漸變疊加：白色→透明，角度 90°，不透明度 10-15%（頂部高光漸變）。
   • 描邊：1px，位置內部，顏色白色，不透明度 20%（頂部高光線）；再加一條 1px 黑色，不透明度 30%（底部陰影線）。

第四部分：導航按鈕（懸停/按下狀態）

1. 新建圖層，圓角矩形工具繪製按鈕選區（注意上下邊緣與導航列對齊）。
2. 填充黑色，填充度 0%，添加描邊：1px 白色，不透明度 20%（按鈕外框高光）。
3. 複製該圖層，清除樣式，新增：
   • 漸變疊加：白色→透明，角度 90°，不透明度 15-20%（按鈕頂部高光面）。
   • 描邊：1px，內部，白色，不透明度 30%（內側高光邊）。
4. 製作右下角高光：新建圖層，筆刷/選區繪製小三角高光，添加圖層蒙版黑白漸變淡化。

第五部分：文字與最終整合

• 文字工具輸入導航選項，顏色白色，字體微軟雅黑/思源黑體，大小 14-16px。
• 文字圖層可添加微細投影（距離 1px、大小 0、不透明度 30%）增強可讀性。
• 添加 Logo、搜尋框等輔助元素，完成整體版面。

Aero 風格核心公式總結

視覺特徵	Photoshop 實現關鍵
半透明磨砂感	圖層填充度 0% + 內部陰影/發光 + 漸變疊加
頂部高光邊	描邊 1px 白色低不透明度 / 漸變疊加白→透明
底部陰影邊	描邊 1px 黑色低不透明度 / 內部陰影
背景模糊感	背景圖層高斯模糊 / 或套用濾鏡庫「磨砂玻璃」效果（需 CS6+）
按鈕懸停態	疊加白→透明漸變疊加 + 內側描邊高光

掌握填充度 0% 配合圖層樣式是打造 Aero 玻璃質感的靈魂技巧，可廣泛應用於對話框、面板、工具提示等 UI 元件設計。