本教程以端午主題粽子圖標為例,展示如何用極簡圖層結構(僅 6 個關鍵圖層)完成從扁平線稿到具備材質感、光影關係的立體圖標,適合節日運營圖標快速產出。
一、最終效果預覽
圖標呈現綠葉包裹的糯米粽,繩紋清晰,葉脈與米粒質感細膩,頂部高光與底部投影構建微立體空間,風格統一,適合小尺寸顯示。
二、六步核心流程
- 線稿構圖:鋼筆工具勾勒粽子外輪廓、葉片分層、繩紋路徑,路徑面板保存備用。
- 基礎色塊:按「葉綠
#3A7D2A、米白 #F5F0E8、繩褐 #8B6B42」三組建立填色圖層,圖層順序:葉底 → 米體 → 繩紋。
- 體積光影:為每組色塊添加「倒角與浮雕」(內部倒角、大小 3~5 px)+「漸變疊加」(線性、90°、同色相明度變化),快速建立厚度。
- 材質細節:
- 葉片:新建剪切蒙版層,柔邊畫筆以深綠
#1A4D10 繪製葉脈,不透明度 30%。
- 米體:雜色濾鏡(2%,高斯、單色)+ 動感模糊(角度 0°、距離 3 px)模擬米粒顆粒感。
- 繩紋:描邊路徑(2 px、硬邊畫筆、
#5D4037),再疊加內發光(#D7B89E、大小 2 px)表現繩鬆結構。
- 高光與環境光:新建圖層混合模式「疊加」,白色柔邊畫筆點繪頂部/棱角高光;新建圖層模式「正片疊底」,冷灰
#A0A0B0 掃出底部環境反光。
- 投影與導出:複製合併組 → 填黑 → 高斯模糊 4 px → 不透明度 40% → 位移 3 px → 導出 PNG-24(含透明背景)。
三、複用與擴展建議
- 將「葉/米/繩」三組圖層結構存為 PSD 模板,更換色相即可生成鹹蛋黃、紅棗、八寶等多口味變體。
- 圖標尺寸基準建議 64×64 px @2x,矢量形狀層可無損縮放至 512×512 px 用於 App Store 宣傳圖。
- 配合「圖層合成」功能,一鍵切換「白天/夜間/高對比度」三套配色方案。