Как сделать анимированный GIF для вашей следующей маркетинговой кампании по электронной почте с помощью Photoshop

Анимированный GIF в Photoshop для электронного маркетинга

Мы прекрасно проводим время, работая с ключевым клиентом Closet52, интернет-магазин одежды которую мы разработали и построили с нуля для авторитетной и известной модной компании в Нью-Йорке. Их руководство всегда работает с нами над совместными идеями для следующей кампании или стратегии, которую мы реализуем. В рамках их реализации мы развернули Klaviyo для Shopify Plus. Klaviyo — известная платформа автоматизации маркетинга с очень тесной интеграцией с Shopify, а также со многими приложениями Shopify.

Моя любимая черта - это их A / B тестирования в Клавио. Вы можете разработать разные версии электронного письма, и Klaviyo отправит образец, дождется ответа, а затем отправит оставшимся подписчикам выигрышную версию — все автоматически.

Наш клиент подписывается на рассылку о моде в отрасли и продолжает отмечать, насколько ему понравились некоторые электронные письма со слайд-шоу из фотографий продуктов. Они спросили, можем ли мы это сделать, и я согласился и построил кампанию с A/B-тестом, где мы отправили одну версию с анимацией 4 продуктов, а другую с одним красивым статическим изображением. Кампания для выброса распродажа своих осенних платьев поскольку они приносят на новые линии продуктов.

Версия A: Анимированный GIF

платье анимация 3

Версия B: статическое изображение

РБ66117 1990 ЛС7

Кредит на фото принадлежит талантливым людям из Зелум.

Выборка кампании все еще выполняется прямо сейчас, но совершенно ясно, что электронное письмо с анимированной графикой намного превосходит статическое изображение… примерно на открытая ставка 7%… но поразительный в 3 раза больше кликабельности (CTR)! Я думаю, что тот факт, что анимированный GIF показывал подписчику несколько разных стилей, привел к гораздо большему количеству посетителей.

Как сделать анимированный GIF с помощью Photoshop

Я не профессионал в фотошопе. На самом деле, единственный раз, когда я обычно использую Photoshop от Adobe Creative Cloud предназначены для удаления фона и наложения изображений, например, размещения снимка экрана поверх ноутбука или мобильного устройства. Тем не менее, я немного покопался в Интернете и понял, как сделать анимацию. Пользовательский интерфейс для этого не самый простой, но в течение 20 минут и после прочтения некоторых руководств я смог его освоить.

Подготовка исходных изображений:

  • Размеры – Анимированные GIF-файлы могут быть довольно большими, поэтому я позаботился о том, чтобы размеры моего файла Photoshop точно соответствовали ширине нашего шаблона электронной почты шириной 600 пикселей.
  • компрессия – Наши исходные изображения имели высокое разрешение и очень большой размер файла, поэтому я изменил их размер и сжал их с помощью Kraken в JPG с гораздо меньшим размером файла.
  • Переходы - Хотя у вас может возникнуть соблазн добавить анимацию подростков (например, затухающий переход) между кадрами, что увеличивает размер вашего файла, поэтому я бы не стал этого делать.

Чтобы создать анимацию в Photoshop:

  1. Создать новый файл с размерами, которые точно соответствуют размерам, которые вы размещаете в своем шаблоне электронной почты.
  2. Выберите Окно > Временная шкала чтобы включить представление временной шкалы в базе Photoshop.

Фотошоп > Окно > Временная шкала

  1. Добавить каждый изображение как новый слой внутри фотошопа.

Photoshop > Добавить изображения как слои

  1. Нажмите Создать Кадр Анимациив области временной шкалы.
  2. В правой части области временной шкалы выберите меню гамбургера и выберите Создавайте рамки из слоев.

Photoshop> Временная шкала> Создание кадров из слоев

  1. В области временной шкалы вы можете перетащите кадры в порядке в котором вы хотите, чтобы изображения отображались.
  2. Нажмите на каждый кадр, где указано 0 секунд, и выберите время, которое вы хотите отобразить в этом кадре. Я выбрал 2.0 секунды на кадр.
  3. В раскрывающемся списке под кадрами выберите Навсегда чтобы анимация повторялась непрерывно.
  4. Нажмите Кнопка воспроизведения для предварительного просмотра анимации.
  5. Нажмите «Файл» > «Экспорт» > «Сохранить для Интернета» (предыдущая версия).

Photoshop > Файл > Экспорт > Сохранить для Интернета (предыдущая версия)

  1. Выберите GIF из параметров в верхнем левом углу экрана экспорта.
  2. Если ваши изображения непрозрачны, снимите флажок Прозрачность опцию.
  3. Нажмите Сохраните и экспортируйте свой файл.

фотошоп экспортировать анимированный gif

Вот и все! Теперь у вас есть анимированный GIF-файл, который вы можете загрузить на свою платформу электронной почты.

Раскрытие информации: Шкаф52 является клиентом моей фирмы, Highbridge. В этой статье я использую партнерские ссылки для саман, Klaviyo, Krakenи Shopify.