Как мы делаем красивую GIF-анимацию в письмах

Человеческий глаз сначала цепляется за движение, поэтому анимация, в отличие от статичных картинок, способна лучше удерживать внимание пользователей. Благодаря способности оживлять контент и делать его более привлекательным GIF-анимация пользуется популярностью в email-рассылках. А ещё таким способом можно уместить больше информации в письме, не превращая его в простыню текста.

Расскажем, как делали GIF-анимацию для NYX Professional Makeup, с какими столкнулись трудностями и как их решали.

Мы выбрали гифки не только из-за красоты — GIF-анимация добавляет информативности в письма нашего клиента. В одной картинке мы показываем все оттенки продукта, а также демонстрируем его в упаковке, без упаковки и в деле.

Для проморассылок мы, как правило, готовим гифки вручную, а в триггерах используем автоматически сформированные.

Читайте также

Дизайн email-рассылок: полная инструкция

Автоматическое формирование GIF-анимации

В триггерных письмах используется динамический контент: в них подставляются не конкретные продукты, а те, которые соответствуют определённым характеристикам на момент формирования письма. Например, новинки, популярные товары, персональные рекомендации. Вся информация о товаре при этом берётся из продуктового фида.

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

 
фрагмент фида для gif-анимации
Фрагмент фида
Фрагмент кода письма с gif-анимацией
Фрагмент кода письма

Получилась гифка:

Gif-анимация из письма

Ручная сборка гиф-анимации

В отличие от автоматической ручная сборка позволяет самостоятельно формировать визуал и контролировать контент. Поэтому для проморассылок мы собираем гифки сами. Как правило, мы используем для сборки Photoshop, если гифки простые и состоят из череды кадров.

письмо с GIF ручной сборки

Анимацию посложнее делаем в After Effects. Иногда прибегаем к помощи Screen to GIF, когда нужно сделать запись с экрана (например, записать, как зарегистрироваться в личном кабинете или оформить заказ).

Используем запись экрана для создания GIF-анимации

Читайте также

HTML вёрстка писем — полная инструкция

Проблемы, с которыми мы столкнулись, и их решения

В процессе сборки GIF-анимаций мы сталкивались с проблемами, которые заставили нас понервничать. Расскажем, какие трудности нас ждали и как мы выходили из положения.

При автоматической оптимизации кадров Photoshop искажал белый фон

Искажение фона в Photoshop при создании GIF-анимации

Чтобы решить эту проблему, мы убрали белый фон, для GIF использовали кадры с прозрачным фоном в формате png.

Исправили фон в GIF-анимации

В момент, когда анимация начинала проигрываться, одновременно показывались несколько кадров

Одновременный показ нескольких кадров при проигрывании GIF-анимации

Учитывая предыдущую проблему, мы решили использовать под кадрами фоновую плашку с вырезанными картинками продуктов. С помощью такой плашки можно не только решить проблему одновременно показывающихся кадров, но и подгонять фон GIF к фону письма.

Исправили одновременный показ разных кадров в GIF-анимации

Дёргающиеся кадры из-за большого количества элементов

Для NYX Professional Makeup мы собираем много GIF. Часто это их продукты, в которых нужно показать разнообразие оттенков. Из-за большого количества элементов для кадров, точно выстроить элементы на кадрах было большой сложностью, на выходе получалась дёргающаяся анимация.

Дёргающиеся кадры в GIF-анимации

Тогда мы стали заранее готовить элементы для кадров так, чтобы у них был одинаковый размер и расположение на плашке.

Как это сделать:

  1. Выгруженные в рабочую область элементы с помощью направляющих подгоняем под один размер и накладываем друг на друга.Подгоняем кадры GIF-анимации под один размерПодгоняем кадры GIF-анимации под один размер шаг 2
  2. Группируем элементы.Группируем элементы GIF-анимации
  3. Перемещаем группу из элементов на плашку.Перемещаем группу из элементов GIF-анимации на плашку
  4. Подгоняем размер и положение сгруппированных элементов на плашке.Подгоняем размер и положение элементов GIF-анимации на плашке
  5. Делаем копии группы элементов и плашки. Количество копий будет зависеть от количества планируемых кадров.Копии группы элементов GIF-анимации и плашки
  6. В каждой группе удаляем лишнее, оставляя по одному элементу на каждой плашке.Удаляем лишнее для создания GIF-анимации

Получаем кадры, где элементы имеют одинаковые координаты и размер. Анимация из таких кадров будет ровной и приятной для восприятия.

Ровная GIF-анимация

Красиво сверстаем ваши письма

Дизайн и вёрстка email-рассылок

GIF-анимация для баннеров

Чтобы письмо сразу же привлекло внимание при открытии, мы часто делаем GIF-анимацию для главного баннера. С помощью GIF на баннерах можно показать фотографии продукта в красивой обстановке, анимировать коллаж из нескольких продуктов или поставить фотографию модели с конкретным продуктом.

баннер с GIF

При подготовке кадров для анимации баннеров мы учитываем небольшой нюанс — лучше обрезать по границе элементов, не оставляя лишнего пространства. Верстальщик сможет задать точное расстояние между объектами.

Какие картинки подойдут для GIF-анимации

При сохранении GIF-анимации качество картинки может заметно ухудшиться. Поэтому лучше всего брать в работу картинки с высоким разрешением, хорошо подходят форматы PNG и TIFF. Также следует помнить про Retina-адаптацию и увеличивать GIF вдвое.

Все визуальные материалы мы берём с сайта клиента, из его социальных сетей или пользуемся фотостоками. У многих брендов есть свои стоки качественных фотографий. Например, у NYX Professional Makeup есть бокс, где собрано множество фотографий их продуктов и материалы фотосессий высокого качества.

Читайте также

Чек-лист для дизайнера: что проверить в макете перед сдачей

Подытожим: что следует помнить при работе с GIF-анимацией

Гифки оживляют email-рассылку, привлекают больше внимания, чем обычная статичная картинка. Если вы решили использовать в своём письме GIF-анимацию, то вам следует помнить о ряде ограничений:

  1. Формат GIF-анимации поддерживают не все почтовые клиенты (например, гифки не воспроизводятся в Outlook 2007, 2010 и 2013), поэтому самую важную информацию лучше помещать на первый кадр.
  2. GIF-анимация тяжелее обычной картинки. Чем больше весит GIF, тем медленнее она будет прогружаться у подписчиков. Мы стараемся делать анимацию весом до 3 мб, в редких случаях — до 5 мб.
  3. При резкой смене частоты кадров ухудшается восприятие, теряется информативность, могут возникнуть неприятные ощущения, поэтому стоит следить за скоростью и плавностью анимации.

Обсудить любой материал и задать вопросы можно в нашем Чате Солдат. И, конечно, подписывайтесь на наш Телеграм-канал Маркетинг за три минуты, где регулярно выходят полезные материалы в виде постов-трёхминуток.

Узнавайте об обновлениях блога Email Soldiers первым

Спасибо!

Осталось подтвердить подписку — кликнуть по кнопке в письме, которое мы вам отправили.

Похожие статьи

Тёмные темы
Гайд по тёмным темам для email-маркетолога

Что делать, чтобы дизайн email-рассылок не ломался в тёмных темах оформления почтовых клиентов.

Для чего нужен мастер-шаблон
Что включить в дизайн рассылок банков, недвижимости, ecommerce

Собрали полный список всего, что включить в дизайн рассылок банков, недвижимости, ecommerce, какую информацию нужно запросить у клиента и какие блоки использовать. Разбираем на своих примерах.

Дизайн, вёрстка, текст рассылки
Клиентам о email-маркетинге, часть 3. Дизайн, вёрстка, текст рассылки

Какими должны быть текст, дизайн и вёрстка в рассылках, чтобы они дошли до подписчиков и заинтересовали их.