Google Material Design 風格以大膽色彩、幾何圖案、有意義的動態與光影著稱。本教程將引導你在 Illustrator 中從零構建一款簡約風格的手機壁紙，掌握圖案色板製作、漸變網格光效、混合模式疊加、符號複用等核心技法，成品可直接作為手機壁紙或 UI 背景素材。

最終效果

第一步：構建基礎幾何圖案單元

1.1 新建文件設置

• 檔案 > 新建：RGB、600×800px、72ppi（手機直向比例）
• 開啟智能參考線 (Ctrl+U) 與對齊像素網格

1.2 繪製菱形分割單元

1. 矩形工具 (M) 按 Shift 繪製 25×25px 正方形
2. 直線工具 (\) 點擊中心點，按 Alt+Shift 向角拖拽，畫出 45° 對角線分割正方形
3. 另一對角線同法繪製，形成 4 個三角形
4. 全選 → 路徑查找器 (Shift+Ctrl+F9) > 「分割」

1.3 灰階層次賦予立體感

• 頂部三角形：20% 黑（高光面）
• 左右三角形：50% 黑（側面）
• 底部三角形：70% 黑（陰影面）
• 全選 → X 切換填色/描邊 → / 移除描邊

1.4 建立圖案色板

1. 矩形工具 (M) 按 Alt+Shift 從中心向外繪製稍大正方形（無填無描）
2. Ctrl+Shift+[ 置底
3. 填充 30% 灰作為圖案底色
4. 複製此無填無描正方形 (Ctrl+B 置後)
5. 全選所有圖形 → 拖入色板面板 → 新增圖案色板

第二步：背景鋪滿與氛圍漸變

2.1 套用圖案填充

• 刪除/移開原始圖形
• 矩形工具繪製覆蓋整個畫板的矩形
• 填充剛建立的圖案色板

2.2 疊加徑向漸變營造景深

1. 複製背景矩形 (Ctrl+F 置前)
2. 填充徑向漸變：內部 R33 G188 B252 (亮藍) → 外部 R0 G82 B138 (深藍)
3. 透明度面板：混合模式「正片疊底」
4. 漸變工具 (G) 拖動使亮區靠近頂部

技巧：此法極易換色——只需修改漸變色標顏色，即可快速產出橙色、綠色、紫色等系列壁紙，適合批量產出同風格圖標集。

第三步：光線與燈光效果構建

3.1 斜向光束 (光線)

1. 放大視圖 (Ctrl+Space 點擊)，繪製寬約 12px 矩形覆蓋菱形排列方向
2. 線性漸變：橙 (R251 G164 B25) → 黑 (R0 G0 B0)
3. 透明度：混合模式「濾色」
4. 漸變工具 (G) 從頂向底拖動，形成向上移動的光跡漸隱效果

3.2 點光源 (燈光)

1. 橢圓工具 (L) 按 Shift 繪製 75px 正圓，置於菱形中心
2. 同樣橙→黑徑向漸變，混合模式「濾色」
3. 效果 > 模糊 > 高斯模糊 10px
4. 複製置前 (Ctrl+F)，按 Alt+Shift 縮小 → 重複 3 次，形成核心最亮、向外衰減的光暈

第四步：變化與擴展

4.1 複製、移動、換色

複製光線組與燈光組，移動位置，修改漸變色標（如改為青/紫/紅），即可獲得多組風格統一但色調不同的設計變體。

4.2 進階擴展方向

• 動態圖案：將圖案色板套用至矩形，用「外觀面板」添加「效果 > 扭曲與變換 > 變換」實現動畫循環
• 響應式適配：建立多個畫板 (iPhone/Android/平板尺寸)，符號化光效元素，一鍵同步更新
• 導出規格：檔案 > 匯出 > 供螢幕使用，勾選 1x/2x/3x、PNG 格式、前綴命名

核心技法總結表

技法	工具/面板	關鍵參數	應用場景
幾何圖案構建	矩形/直線/路徑查找器/分割	25px 基準單元、45° 分割	Material Design 幾何基因
圖案色板製作	色板面板、無填無描邊界框	邊界框 = 單元 2 倍	無縫平鋪、批量套用
氛圍漸變	徑向漸變、正片疊底模式	內亮外暗、亮區偏頂	景深感、極易換色
光線/燈光	濾色模式、高斯模糊、多層疊加	光線 12px/45°、燈光 3 層疊加	動態光影、視覺焦點
符號複用	符號面板、9 切片縮放	按鈕/卡片組件	設計系統組件庫

完成此教程，你不僅獲得一款可商用的手機壁紙，更掌握了 Material Design 視覺語言的核心構建邏輯——幾何秩序為骨，光影色彩為魂，符號系統為效率基石。