如何使用 Photoshop 为您的下一个电子邮件营销活动制作动画 GIF

用于电子邮件营销的 Photoshop 动画 GIF

我们与关键客户 Closet52 合作非常愉快, 在线服装店 我们为纽约一家知名的时尚公司打造品牌并从头开始打造。 他们的领导层始终与我们合作,为我们正在执行的下一个活动或战略制定协作想法。 作为实施的一部分,我们部署了 Klaviyo 提供 Shopify Plus. 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 像素宽的电子邮件模板宽度完全匹配。
  • 压缩 - 我们的原始图像是高分辨率和非常大的文件大小,所以我调整了它们的大小并用 Kraken 到文件大小要小得多的 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, KrakenShopify.