教程簡介

水晶按鈕因其通透的質感與豐富的光影層次，常見於網頁介面、APP 圖示與遊戲 UI 設計。本教程將詳細拆解水晶按鈕的製作流程，涵蓋基礎形狀構建、多層次高光疊加、倒影效果與動態光影動畫（GIF）的輸出技巧。

成果展示

核心製作步驟

1. 基礎形狀與漸變

使用圓角矩形工具繪製按鈕主體，套用線性漸變疊加建立基礎色調。

2. 多層高光構建

• 頂部高光：橢圓選區羽化後填白，調整不透明度與混合模式。
• 邊緣反光：收縮選區描邊，模擬玻璃厚度感。
• 底部投影與倒影：複製圖層垂直翻轉，加入漸變蒙版淡出。

3. 圖層樣式精調

重點調整「內發光」、「斜面與浮雕」的光澤輪廓，並啟用「抗鋸齒」確保邊緒平滑。

4. 動態效果輸出

利用時間軸面板製作呼吸燈、點擊按下等狀態動畫，導出 GIF 供前端參考。

進階應用建議

• 將按鈕儲存為智能物件，方便批量更換顏色與圖示。
• 結合 CSS3 動畫，在網頁端實現 hover/tap 狀態切換。
• 嘗試不同漸變角度與色相，快速衍生多套主題風格。

掌握水晶按鈕的製作邏輯，能讓你在 UI 設計中靈活應對各種材質表現需求。立即動手練習，打造屬於你的專屬水晶風格！