三分鐘掌握高顏值漸變背景核心技法

漸變背景是 UI 設計、海報排版、演示文檔最通用的視覺基礎。本教程提煉最高效的漸變構建方法，從基礎線性/徑向到網格漸變、噪點質感，快速生成專業級背景素材。

核心漸變類型與參數速查

1. 線性漸變 —— 經典萬能型

• 工具：漸變工具 (G) → 選項欄選「線性漸變」
• 編輯器：雙色/三色站點，位置 0%/50%/100%
• 角度：0°(橫向) / 90°(縱向) / 45°/135°(對角)
• 推薦配色：#667eea→#764ba2（紫藍科技）/ #f093fb→#f5576c（粉紅活力）/ #4facfe→#00f2fe（青藍清新）

2. 徑向漸變 —— 聚焦視覺中心

• 選項欄選「徑向漸變」，從中心向四周擴散
• 應用：英雄區聚焦、產品展示聚光、模態框背景
• 技巧：配合圖層蒙版橢圓漸變羽化，邊緣自然過渡

3. 角度漸變 —— 動態旋轉感

• 選項欄選「角度漸變」，色彩隨角度循環
• 適合：加載動畫、科技環形儀表、音頻可視化背景

4. 鑽石/反射漸變 —— 幾何切面感

• 產生菱形/扇形色彩分佈，適合幾何風格設計

質感升級三大技巧

1. 疊加噪點：新建圖層填充 50% 灰 → 濾鏡「雜色→添加雜色」2-3% 單色 → 混合模式「疊加/柔光」→ 消除色帶條紋
2. 紋理疊加：紙張/織物/混凝土紋理，「正片疊底/柔光」低不透明度
3. 網格漸變：PS 2024+ 原生支持，編輯→漸變編輯器→網格模式，任意拖拽控制點實現有機色彩流動

高效工作流建議

• 保存常用漸變預設（.grd 文件），團隊共享統一視覺語言
• 建立「漸變背景生成器」動作：一鍵產出 5 種風格變體
• 導出 CSS 漸變代碼（右鍵圖層→複製 CSS），前端無縫對接
• 收集優秀配色參考：uiGradients、Grabient、WebGradients