設計思維：複雜效果 = 簡單圖層疊加

任何精致 UI 元素，本質都是「底層形狀 + 光影層 + 質感層 + 高光層 + 文字層」的有序疊加。掌握圖層拆解分析法，先在腦中或草稿將目標按鈕拆解為 4~5 個獨立圖層組，再逐層用圖層樣式實現，即可避免「一層到頂」的混亂與不可控。

畫布與背景建立

• 新建 600×600 px、72 dpi、RGB 模式畫布。
• 漸變工具 (G) → 徑向漸變：中心淺灰 #E0E0E0 → 邊緣深灰 #808080。
• 上方新建圖層填充 50% 灰 → 濾鏡 > 雜色 > 添加雜色 (量值 3%、高斯分布、單色) → 混合模式「疊加」不透明度 15% → 增加背景微細紋理質感。

核心圖層逐層構建

1. 底層——主體形狀與立體倒角

• 圓角矩形工具 (U) 繪製主體形狀，圓角半徑 20~30 px（CC 版可即時調整）。
• 圖層命名「底層」，填充 0%，**全部靠圖層樣式成型**：

樣式項目	關鍵參數	視覺作用
倒角與浮雕	內部倒角、平滑、深度 1000%、方向向上、大小 16 px、軟化 0、角度 90°、高度 30°、高光模式「螢幕」不透明度 75%、陰影模式「正片疊底」不透明度 50%	主體立體厚度與邊緣倒角
描邊	大小 1 px、位置「內部」、填充類型「漸變」、漸變：深灰→淺灰→深灰、角度 90°	邊框金屬質感分層
內發光	混合模式「螢幕」、不透明度 35%、雜色 0%、顏色淺藍 #80C0FF、技術「精確」、來源「邊緣」、阻塞 0%、大小 10 px	內邊緣發光感
投影	混合模式「正片疊底」、不透明度 40%、角度 90°、距離 5 px、展開 0%、大小 15 px、雜色 0%	懸浮感與接地陰影

2. 反光層——底部高光帶

• 新建圖層「反光」，橢圓工具在按鈕下方 1/3 處拉橢圓選區。
• 羽化 15~20 px → 填充白色 → 混合模式「疊加」→ 不透明度 30%~40%。
• 模擬桌面/地面反射光照亮按鈕底緣。

3. 紋理層——表面微細紋路

• 底層上方新建圖層「紋理」，Ctrl+點擊底層縮略圖載入選區。
• 填充圖案（預設「灰紋理」或自製金屬拉絲紋理）。
• 混合模式「柔光」，不透明度 15%~25%。

4. 高光層——邊緣鋒利線與半圓頂光

• 四邊高光：鋼筆工具勾勒按鈕四邊白色路徑 → 描邊路徑 (筆刷 2 px 硬度 100%、模擬壓力) → 圖層不透明度 40%~60%。
• 半圓頂光：橢圓選區 → Ctrl+點擊底層縮略圖 → 選單「選取 > 修改 > 減去選區」移除按鈕外部 → 填充白色 → 高斯模糊 3~5 px → 不透明度 30%。

5. 文字特效——內嵌雕刻感

• 文字工具輸入「START」，字體粗黑、白色。
• 圖層樣式：內陰影 (距離 1 px、大小 0、不透明度 50%)、顏色疊加 (深藍 #003366)、投影 (距離 1 px、大小 0、不透明度 30%)。
• 模擬按鍵凹陷/凸起的觸覺反饋。

圖層結構總覽（自下而上）

1. 背景組（漸變底 + 雜色紋理）
2. 底層組（形狀層 + 完整圖層樣式堆疊）
3. 反光層
4. 紋理層
5. 高光組（四邊線 + 半圓頂光）
6. 文字組（文字 + 雕刻樣式）

關鍵技法心法

1. 填充 0% + 圖層樣式：形狀層本身無顏色，所有視覺屬性由樣式決定，隨時可改形狀不壞效果。
2. 疊加/柔光/螢幕/正片疊底 四大混合模式組合拳，解決 90% 光影質感需求。
3. 選區互運：Ctrl+點擊縮略圖載入、Ctrl+Shift+點擊加選、Ctrl+Alt+點擊交集、選單「修改」羽化/擴張/收縮/邊緣羽化，精準控制每層生效範圍。
4. 命名與分組：嚴格命名（底層、反光、紋理、高光、文字），複雜專案才不會崩潰。

結語

通透質感按鈕的秘密不在於濾鏡堆疊，而在於「形狀層填充 0% + 圖層樣式系統化堆疊 + 選區精準控制生效範圍」這套標準化工作流。掌握此法，從 App 圖標到遊戲 UI、網頁按鈕、儀表板控件，所有「有質感的可交互元素」都能按圖索驥、高效產出。立即新建畫布，親手拆解並重組一枚屬於你的 START 鍵吧！