成果展示

12 生肖圖標統一風格、尺寸規範、可直接用於 UI 介面

核心思路：形狀圖層 + 圖層樣式 + 智能物件 = 可無限縮放、批量修改的標準化資產

標準化制作流程（以「鼠」為例，其餘 11 個同理）

步驟 1：建立基礎畫框與參考網格

• 新建 512×512px、72dpi、RGB 文檔
• 視圖 → 新建參考線版面 → 邊距 32px、欄數 4、間距 16px → 形成 4×3 十二宮格
• 建立圖層群「生肖圖標」，內含 12 個子群（鼠、牛、虎……豬）

步驟 2：繪製統一外框——形狀圖層保證矢量無損

• 圓角矩形工具（U）→ 半徑 24px → 畫出 140×140px 基礎按鈕形狀
• 填充：無；描邊：2px、#E0E0E0、居中
• 圖層樣式：
  • 斜面與浮雕：內部平滑、深度 100%、大小 8px、角度 90°、高光線性減淡 40%、陰影線性加深 30%
  • 內陰影：距離 2px、大小 4px、不透明度 25%
  • 漸變疊加：線性、90°、#FFFFFF(0%)→#F5F5F5(100%)、不透明度 15%
• 將此圖層另存為「按鈕基礎樣式」，其餘 11 個直接複製套用

步驟 3：生肖圖騰矢量化繪製

原則：極簡線條、單色填充、特徵神韻準確、視覺重心置中。

• 鋼筆工具勾勒簡化輪廓（鼠：圓耳、尖嘴、鬍鬚；龍：S 型身、鹿角、鷹爪……）
• 路徑面板 → 右鍵「建立向量蒙版」→ 形狀圖層化
• 填充色：統一品牌色 #C82829（中國紅）或根據主題色系調整
• 圖層樣式：內發光（螢幕、#FFE0E0、大小 3px）增加飽滿感

步驟 4：批量生成與命名規範

• 動作面板記錄「複製按鈕基礎 → 替換圖騰 → 重命名」動作
• 批次處理 12 個生肖，命名規範：icon_zodiac_rat@2x.png、icon_zodiac_ox@2x.png……
• 導出：檔案 → 匯出 → 另存為 Web (舊版) → PNG-24、透明度開啟、@2x/@3x 多倍圖同時輸出

進階擴展：狀態變體與主題換膚

變體	實現方式
按下/懸停/禁用態	圖層合成/狀態面板記錄三套圖層樣式組合，一鍵切換
節日換膚（春節金、中秋銀）	將填充色綁定「色相/飽和度」調整圖層，修改主色相即時全套換色
動態微交互	導出至 After Effects / Lottie，利用向量屬性製作彈跳、旋轉動效

避坑檢查清單

• ☐ 所有圖標視覺重心是否光學置中（非幾何中心）
• ☐ 線條粗細是否統一（建議 4px 基準，細節 2px）
• ☐ 32px、24px、16px 縮小後特徵是否仍可辨識
• ☐ 深色/淺色背景下雙向測試對比度
• ☐ 檔名規範、圖層命名、圖層群結構是否符合團隊規範

結語

十二生肖圖標看似簡單，實則考驗「標準化思維」與「向量繪製基本功」。建立一套 SOP（標準作業程序），未來無論是 24 節氣、星座、功能圖標，都能舉一反三、高效交付。把「重複勞動」變成「資產沉澱」，這才是設計師的進階之路。