教學目標與成果預覽

掌握水晶質感按鈕的核心圖層樣式架構，完成從文件建立、背景渲染、按鈕基底構建、多重樣式疊加到文字與裝飾點綴的完整 UI 設計流程。

圖 0：最終效果圖

步驟 1：文件初始化與背景漸層

新建 828×547 像素、72 DPI、RGB 模式文件。新增圖層命名「背景」，選取「漸層工具」（G），設定「徑向漸層」，編輯漸層：左色標 RGB(75,117,176)、右色標 RGB(255,255,255)。按住 Shift 從上至下拖曳，建立從深藍到白的徑向漸層背景。

圖 1：新建文件設定

圖 2：漸層編輯器參數

圖 3：背景漸層效果

步驟 2：按鈕基底形狀構建

新增圖層，選取「圓角矩形工具」與「多邊形工具」組合繪製按鈕基底形狀（圖 4）。按 Ctrl+Enter 轉為選區，設定前景色為藍色，Ctrl+D 取消選區。複製多個按鈕基底填滿畫布，合併所有按鈕形狀圖層為單一「圖層 2」。

圖 4：按鈕基底形狀佈局

步驟 3：核心圖層樣式深度拆解（水晶質感引擎）

右鍵「圖層 2」→「混合選項」，依序啟用並配置以下樣式（參數精準複製可得一致效果）：

3.1 投影

• 混合模式：正片疊底
• 顏色：黑色
• 不透明度：75%
• 角度：90°，勾選「使用全域光」
• 距離：3px，擴展：0%，大小：5px

圖 5：投影參數

3.2 內發光

• 混合模式：正片疊底
• 不透明度：54%，雜色：0%
• 技法：較柔和，來源：邊緣
• 擴展：3%，大小：13px

圖 6：內發光參數

3.3 斜面與浮雕（核心立體）

• 樣式：內斜面，技法：刻畫清晰，深度：1000%
• 方向：上，大小：16px，柔化：0px
• 陰影角度：90°，高度：39°
• 光澤輪廓：環形，勾選「消除鋸齒」
• 高光模式：線性減淡（不透明度 75%），陰影模式：線性加深（不透明度 50%）

圖 7：斜面與浮雕詳細參數

3.4 光澤

• 混合模式：疊加，顏色：白色
• 不透明度：100%，角度：0°
• 距離：6px，大小：24px
• 輪廓：高斯，勾選「消除鋸齒」

圖 8：光澤參數

3.5 顏色疊加

• 混合模式：柔光，顏色：藍色
• 不透明度：52%

圖 9：顏色疊加參數

3.6 漸層疊加（水晶通透感關鍵）

• 混合模式：正常，不透明度：100%
• 樣式：線性，勾選「與圖層對齊」，角度：90°，縮放：100%
• 漸層編輯器色標（左→右）：
  A: RGB(5,42,61) 位置 0%
  B: RGB(5,42,61) 位置 25%
  C: RGB(16,98,110) 位置 50%
  D: RGB(168,200,205) 位置 100%

圖 10：漸層疊加混合選項

圖 11：漸層編輯器色標分佈

圖 12：完整樣式效果

步驟 4：文字與裝飾點綴

4.1 導航文字

選取「橫向文字工具」，輸入「home page」，字體 Arial、大小 41.69pt、銳利銳化、白色。置於按鈕中心對齊。

圖 13：文字設定

4.2 高光裝飾圓點

1. 新增圖層命名「圓形」，「橢圓工具」繪製橢圓選區，填充藍色 RGB(64,170,196)
2. Ctrl+D 取消選區 →「濾鏡」→「模糊」→「高斯模糊」（半徑 20.5px）
3. 複製多個圓形圖層，調整大小位置，形成高光裝飾群

圖 14：高光圓形基礎

圖 15：高斯模糊參數

圖 16：模糊後效果

圖 17：多裝飾點綴佈局

樣式架構可視化總結

圖層 2 (填充 0%)
├── 投影 (分離感)
├── 內發光 (內陷邊緣)
├── 斜面與浮雕 (核心 3D)
├── 光澤 (頂部鏡面)
├── 顏色疊加 (基底色調)
├── 漸層疊加 (通透材質) ← 關鍵！
└── 描邊 (像素銳化)

快速變體生成技巧

• 顏色變體：僅修改「顏色疊加」顏色與「漸層疊加」色標即可產出紅/綠/金等色系
• 扁平化風格：停用「斜面與浮雕」「光澤」「投影」，保留「漸層疊加」「顏色疊加」「描邊」
• 霓虹發光風：停用「斜面與浮雕」，增強「外發光」「內發光」，「漸層疊加」改為高對比霓虹色