設計目標

打造具備「透明玻璃/磨砂質感」的電子商務定價表，通過紋理、混合模式、圖層樣式疊加，傳達高端、清晰、可信的品牌形象，提升轉化率。

最終效果

素材來源

• 織物紋理：brushsoulz.com
• 粗糙紋理：brushsoulz.com
• 背景圖：deviantart

步驟 1~2：背景鋪設與模糊

1. 新建 700×800 px 文件。
2. 置入背景圖 → 濾鏡 → 模糊 → 高斯模糊（半徑 20~30 px），或用亮度/對比度壓暗背景，使前景卡片更突出。

步驟 3~5：主卡片玻璃基礎樣式

1. 矩形工具（U）畫主卡片矩形，色 #FFFFFF。
2. 混合模式「柔光」、填充 90%、不透明度 90%。
3. 圖層樣式：

• 描邊：1 px、不透明度 40%、色 #FFFFFF。
• 內陰影：模式「線性減淡(添加)」、白、不透明度 22%、距離 5 px、大小 51 px（內發光感）。
• 外發光：模式「疊加」、不透明度 75%、白色、大小 10 px、範圍 50%。
• 內發光、斜面與浮雕、光澤、色彩疊加、漸層疊加等參考截圖微調，疊加出玻璃厚度、邊緣折射、表面高光。

步驟 6~8：內容區玻璃條與紋理

1. 矩形工具畫小矩形（標題欄/分隔條），不透明度 30%。
2. 圖層樣式 → 圖案疊加：選織物/粗糙紋理、縮放 50%~100%、不透明度 10%~20%、混合模式「疊加/柔光」，賦予磨砂觸感。
3. 描邊：1 px、漸層/顏色、不透明度 30%，強化邊框。

步驟 9~11：標題欄與底部欄

1. 矩形選框工具選取卡片頂部/底部區域，填 #83B8CC（標題藍）與同色底部欄。
2. 加圖案疊加（織物紋理、疊加模式）+ 漸層疊加（線性、透明度漸變），豐富質感。

步驟 12~14：標籤/標簽設計

1. 鋼筆工具繪製不規則標籤形狀（如丝帶狀），路徑轉選區填 #C72424 紅。
2. 新建剪貼圖層，小圓筆刷深紅繪製邊緣陰影/摺痕。
3. 圖層樣式：投影、內陰影、斜面與浮雕（外斜面、平滑、大小 5 px），立體標籤完成。

步驟 15~18：文字排版與陰影

1. 文字工具輸入方案名、價格、功能列表，色 #464646、#003A58 等。
2. 文字圖層加投影：距離 1 px、大小 1 px、不透明度 30%、角度 90°，提升可讀性。

步驟 19~22：分隔線與裝飾

1. 線條工具（U）畫 1 px 橫線 #030303，加投影（白、濾色、距離 1 px）+ 外發光（白、疊加、大小 3 px），形成凹陷分隔線。
2. 複製多條分隔功能列表。

步驟 23~25：CTA 按鈕與箭頭

1. 「立即註冊」按鈕文字 + 硬邊筆刷畫小三角箭頭 #464646。
2. 箭頭圖層加內陰影（黑、正片疊底、距離 1 px）+ 投影（白、濾色、距離 1 px），微立體感。
3. 複製修改文字內容完成多方案對比欄。

---

玻璃質感核心公式：低填充高不透明度（90%/90%）+ 白色高光內陰影(線性減淡) + 白色外發光(疊加) + 細微描邊 + 紋理圖案疊加(疊加/柔光低透明度) + 斜面浮雕邊緣厚度。此公式可複用於按鈕、卡片、模態框、導覽欄等所有 UI 組件。