概覽：掛件制作的完整鏈路

淘寶店鋪掛件是提升店鋪視覺吸引力、傳遞促銷信息的動態裝飾元素。本教程涵蓋：PS 靜態素材製作（扣圖、文字、裝飾繪製、分層管理）→ ImageReady 幀動畫製作（圖層可見度控制幀序列）→ GIF 優化導出 → 圖片空間上傳 → 代碼嵌入店鋪公告。全流程實操演示，適合電商視覺新手。

第一階段：Photoshop 靜態素材製作

1. 素材扣圖：魔術棒 vs 鋼筆工具

1. 打開素材圖（如小狗圖），雙擊背景圖層解鎖為圖層 0。
2. 背景單一純色時：魔術棒點選白背景 → Delete 刪除，快速透明化。
3. 複雜背景：必須用鋼筆工具勾勒路徑轉選區，再反選刪除或添加蒙板，邊緣更乾淨。

2. 文字公告添加

1. 按 T 選橫排文字工具，點擊畫布輸入促銷文案（折扣、活動詳情）。
2. 頂部選項欄調整字體（建議下載優質中文字體）、顏色、大小。
3. 文字圖層自動生成，便於後續動畫控制。

3. 畫筆裝飾：花朵與星星分層繪製

• 選擇畫筆工具（非歷史記錄畫筆），右上角筆刷預設選擇花朵/星星形狀，調整大小。
• 關鍵規則：不同動畫元素必須分別建立獨立圖層。 花朵分紅/黑兩組圖層，星星分圖層 3/4 兩組。這是後續動畫控制單獨顯示的前提。

4. 裝飾元素著色：Ctrl+點擊縮略圖載入選區 → 填充

1. 按住 Ctrl 點擊花朵圖層 1 縮略圖 → 載入花朵選區。
2. 前景色設為目標顏色 → Shift+F5 填充（或編輯 > 填充）。
3. 同法處理第二組花朵、兩組星星（星星必須填白色）。

第二階段：ImageReady 幀動畫製作

注意： PS CS3 及更高版本已整合動畫面板（窗口 > 時間軸），無需跳轉 ImageReady。但本教程邏輯通用：每一幀 = 一組圖層可見狀態。

1. 進入動畫模式

• 工具箱底部「在 ImageReady 中編輯」按鈕（或 PS 直接開啟時間軸面板）。
• 關閉星星圖層 3、4 小眼睛，僅保留基礎靜態圖層（背景、人物、文字、花朵）。

2. 製作閃爍動畫：複製幀 + 切換圖層可見度

1. 動畫面板點擊「複製當前幀」按鈕，產生幀 2。
2. 幀 1：開啟星星圖層 3，關閉圖層 4。
3. 幀 2：關閉圖層 3，開啟圖層 4。
4. 重複複製幀、切換圖層，形成「星星 3 → 星星 4 → 星星 3 → 星星 4...」循環序列。
5. 同理可讓花朵分組輪流顯示，製作閃爍效果。

3. 設置幀延遲時間

• 選中所有幀（Shift+點擊首尾），設置延遲 0.1-0.2 秒（或按需調整）。
• 播放預覽，確認節奏流暢。

第三階段：GIF 優化導出與安裝部署

1. 存儲為 Web 所用格式（舊版：存儲優化結果）

• 文件 > 存儲為 Web 所用格式 (Ctrl+Alt+Shift+S)。
• 預設格式選 GIF，顏色 256，勾選「循環選項：永遠」。
• 關鍵：必須保存為 .gif 格式，否則動畫失效。

2. 圖片上傳與代碼嵌入

1. 將 GIF 上傳至圖片空間（推薦付費空間，速度穩定），獲取外鏈地址。
2. 掛件代碼格式：<img src="你的圖片外鏈地址" />
3. 進入「賣家中心 > 店鋪管理 > 基本設置 > 店鋪公告」，粘貼代碼，預覽發布。

核心原理總結

動畫本質 = 時間維度上的圖層可見度排列組合。PS 負責「空間設計」（畫什麼、分哪層），ImageReady/時間軸負責「時間編排」（何時顯示哪層）。掌握「分層即分幀」思維，即可創作任意複雜度的 GIF 掛件。