設計概念

將計算器皮膚主題化：水晶按鈕＋酸橙配色。核心技法為「圖層樣式堆疊模擬水晶通透感」，掌握後可快速產出系列 UI 皮膚。

關鍵參數速查

畫布：300×400px、100dpi、12×12cm、淺色背景。
圓角矩形工具為主，形狀像素化後轉圖層操作。

分步實作

1. 螢幕面板

• 圓角矩形 18×2cm → 右鍵「像素化圖層」 → 魔棒選中 → 影像＞去色。
• 圖層樣式：
  投影：正片疊底、#99CCFF、參數見圖。
  內陰影：#99CCCC、70%、角度 20°、阻塞 1-2%、等高線半圓。
  斜面浮雕：枕頭浮雕、雕刻柔和、深度 50%、方向「下」、光澤等高線自定（輸入 65% 輸出 55%）。
  色彩疊加：正片疊底、#66CCFF、60%。
  漸變疊加：正常、30%、線性、90°、縮放 90%、勾選「反向」。

2. 標準按鈕（4×3cm）

圓角矩形 → 右鍵「混合選項」設置：
斜面浮雕（外斜面、平滑、深度 100%、大小 10px、軟化 3px、角度 120°、高度 30°、光澤等高線「環」）、描邊（1px、漸變、角度 90°）、內陰影、內發光、色彩疊加、漸變疊加、外發光（見圖參數）。
複製 22 個同樣圖層排列成鍵盤矩陣。

3. 大功能鍵（4×6cm，橙色主題色）

複製標準按鈕 → 調整尺寸 → 色彩疊加改橙色（#FF9900 系），其餘參數微調至視覺一致。

4. 文字排版

文字工具輸入數字/符號，置於按鈕中心，字體選粗體無襯線，顏色白/深灰對比，必要時添加微弱投影增強可讀性。

最終效果

水晶通透感強、酸橙配色清新、按鈕狀態區分明確，可直接切圖用於 App 皮膚開發。

舉一反三

• 同一套圖層樣式存為「水晶按鈕.asl」，新專案一鍵載入。
• 色相/飽和度調整圖層剪貼至按鈕組，秒切主題色系。
• 按下/懸停狀態：複製組，調整斜面浮雕方向「上」+ 降低亮度，導出兩套狀態圖。