如何使用 Photoshop 為您的下一個電子郵件營銷活動製作動畫 GIF

用於電子郵件營銷的 Photoshop 動畫 GIF

我們與關鍵客戶 Closet52 合作非常愉快, 在線服裝店 我們為紐約一家知名的時尚公司打造品牌並從頭開始打造。 他們的領導層始終與我們合作,為我們正在執行的下一個活動或戰略制定協作想法。 作為實施的一部分,我們部署了 Klaviyo Shopify 加. Klaviyo 是一個著名的營銷自動化平台,與 Shopify 以及許多 Shopify 應用程序緊密集成。

我最喜歡的一個特點是他們的 A / B測試 在克拉維約。 您可以開發不同版本的電子郵件,Klaviyo 將發送一個樣本,等待回复,然後將獲勝版本發送給剩餘的訂閱者——所有這些都是自動進行的。

我們的客戶訂閱了該行業的時尚電子郵件,並繼續評論他們對一些帶有產品照片幻燈片的電子郵件的喜愛程度。 他們問我們是否可以這樣做,我同意並建立了一個帶有 A/B 測試的活動,我們發送了一個版本,其中包含 4 種產品的動畫,另一個版本帶有單個、漂亮、靜態的圖像。 這場運動是為了井噴 出售他們的秋季連衣裙 因為他們正在推出新的產品線。

版本 A:動畫 GIF

服裝動畫3

版本 B:靜態圖像

RB66117 1990 LS7

照片歸功於有才華的人 玉米.

廣告系列採樣目前仍在運行,但很明顯,帶有動畫圖形的電子郵件遠遠優於靜態圖像……大約 7%的開放率……但令人震驚 3倍點擊率 (點擊率)! 我認為動畫 GIF 在訂閱者面前展示了幾種不同的風格這一事實導致了更多的訪問者。

如何使用 Photoshop 製作動畫 GIF

我不是 Photoshop 的任何專業人士。 事實上,我通常只使用 Adobe Creative Cloud 的 Photoshop 是刪除背景和分層圖像,例如將屏幕截圖放在筆記本電腦或移動設備的頂部。 但是,我在網上做了一些挖掘,並想出瞭如何製作動畫。 用戶界面不是最簡單的,但在 20 分鐘內,在閱讀了一些教程後,我能夠將其淘汰。

準備我們的源圖像:

  • 尺寸 - 動畫 GIF 可能非常大,所以我確保將我的 Photoshop 文件尺寸設置為與我們 600 像素寬的電子郵件模板寬度完全匹配。
  • 壓縮 - 我們的原始圖像是高分辨率和非常大的文件大小,所以我調整了它們的大小並用 到文件大小要小得多的 JPG。
  • 轉變 – 雖然您可能想添加動畫 充斥著 (例如,淡入淡出的過渡),這會增加你的文件的大小,所以我會避免這樣做。

在 Photoshop 中構建動畫:

  1. 創建一個新文件 尺寸與您在電子郵件模板中放置的確切尺寸相匹配。
  2. 選擇 窗口 > 時間線 在 Photoshop 的基礎上啟用時間線視圖。

Photoshop > 窗口 > 時間線

  1. 分別添加 圖像作為新圖層 在 Photoshop 中。

Photoshop > 將圖像添加為圖層

  1. 點擊 創建幀動畫時間線區域中的化。
  2. 在時間軸區域的右側,選擇漢堡菜單並選擇 從圖層製作框架.

Photoshop > 時間軸 > 從圖層製作幀

  1. 在時間軸區域內,您可以 將幀拖入順序 您希望圖像出現在其中。
  2. 單擊顯示為 0 秒的每個幀,然後選擇您希望該幀顯示的時間。 我選擇了 每幀 2.0 秒.
  3. 在框架下方的下拉列表中,選擇 永遠 以確保動畫連續循環。
  4. 點擊 播放按鈕 預覽您的動畫。
  5. 點擊 文件 > 導出 > 保存為 Web(舊版).

Photoshop > 文件 > 導出 > 保存為 Web(舊版)

  1. 選擇 的GIF 從“導出”屏幕左上角的選項中。
  2. 如果您的圖像不透明,請取消選中 透明度 選項。
  3. 點擊 節省 並導出您的文件。

Photoshop 導出動畫 gif

而已! 您現在可以將動畫 GIF 上傳到您的電子郵件平台。

披露: 壁櫥52 是我公司的客戶, Highbridge. 我在本文中使用附屬鏈接 土磚, Klaviyo, Shopify.