讓動效設計稿在手機模型中真實運行

許多設計師能製作 GIF 動效，卻不知如何將其嵌入手機模型進行演示。本教程利用 Photoshop 智能物件與視頻時間軸，僅 6 步即可完成動效嵌入，適合 UI/UX 設計師快速輸出交互演示圖。

效果預覽

準備工作

先用 Hype、Pixate 或 After Effects 輸出動效 GIF（圖示：）。

6 步嵌入流程

1. 幀轉圖層：PS 開啟 GIF → 窗口→時間軸 → 點擊「將幀轉換為圖層」（圖示 ）。
2. 轉視頻時間軸：時間軸面板點擊「轉換為視頻時間軸」（圖示 ），只有視頻時間軸支持單圖層動畫。
3. 轉智能物件：圖層面板全選圖層 → 右鍵「轉換為智能物件」（圖示 ）。
4. 嵌入模型：將智能物件拖入手機模型 PSD，用自由變換 (Ctrl+T) 調整透視，或雙擊智能物件進入編輯（圖示 ）。
5. 創建視頻時間軸預覽：在主文檔創建視頻時間軸，播放檢查動效是否正常。
6. 導出 Web 格式：文件→導出→存儲為 Web 所用格式（GIF），右下角百分比調整文件大小（圖示 ）。

關鍵優勢

• 智能物件非破壞：隨時雙擊替換動效內容，模型透視自動保持。
• 視頻時間軸支援單圖層動畫：避免幀動畫導出時的幀數限制與體積膨脹。
• 透視變換自由：Cmd+T 任意調整嵌入角度，適應各種模型透視。

掌握此技巧，您的設計交付物將從靜態圖升級為可交互的動態演示，大幅提升方案溝通效率。