Як створити анімований GIF для вашої наступної електронної маркетингової кампанії за допомогою Photoshop

Анімований GIF Photoshop для маркетингу електронною поштою

Ми чудово проводимо час, працюючи з ключовим клієнтом Closet52, an інтернет-магазин суконь яку ми брендували та створили з нуля для визнаної та відомої модної компанії в Нью-Йорку. Їхнє керівництво завжди працює з нами над спільними ідеями для наступної кампанії чи стратегії, яку ми виконуємо. У рамках їх реалізації ми розгорнули Клавіо та цінності ShopifyPlus. Klaviyo – це добре відома платформа автоматизації маркетингу з дуже тісною інтеграцією з Shopify, а також з багатьма програмами Shopify.

Моя улюблена особливість – це їхня A / B тестування в Клавійо. Ви можете розробити різні версії електронного листа, і Klaviyo надішле вибірку, почекає відповіді, а потім надішле іншим підписникам переможну версію – все автоматично.

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

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

сукня анімація 3

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

RB66117 LS1990 7 року випуску

Авторство фотографій належить талановитим людям в Zeelum.

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

Як зробити анімований GIF за допомогою Photoshop

Я не фахівець з Photoshop. Насправді, єдиний раз, коли я зазвичай використовую Adobe Creative Cloud Photoshop призначені для видалення фону та накладання шарів зображень, як-от розміщення скріншота поверх ноутбука чи мобільного пристрою. Однак я трохи покопався в Інтернеті і придумав, як зробити анімацію. Користувальницький інтерфейс для цього не найпростіший, але протягом 20 хвилин і після прочитання деяких підручників я зміг вибити його.

Готуємо вихідні зображення:

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

Щоб створити анімацію в Photoshop:

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

Photoshop > Вікно > Часова шкала

  1. Додайте кожну зображення як новий шар у Photoshop.

Photoshop > Додати зображення як шари

  1. Натисніть Створіть кадр анімув області часової шкали.
  2. У правій частині області Часової шкали виберіть меню гамбургерів і виберіть Зробіть рамки з шарів.

Photoshop > Часова шкала > Зробити рамки з шарів

  1. У регіоні Timeline ви можете перетягніть рамки в порядок в якому ви хочете, щоб зображення відображалися.
  2. Клацніть на кожному кадрі, де написано 0 секунд, і виберіть час, коли ви хочете, щоб цей кадр відображався. я обираю 2.0 секунди на кадр.
  3. У спадному меню під рамками виберіть Назавжди щоб забезпечити безперервний цикл анімації.
  4. Натисніть Грати Кнопка для попереднього перегляду анімації.
  5. Натисніть Файл > Експорт > Зберегти для Інтернету (застарілі).

Photoshop > Файл > Експорт > Зберегти для Інтернету (застаріла)

  1. вибрати GIF з параметрів у верхньому лівому куті екрана Експорт.
  2. Якщо ваші зображення непрозорі, зніміть прапорець прозорість варіант.
  3. Натисніть зберегти і експортуйте свій файл.

Експорт анімованих gif для фотошопа

Це воно! Тепер у вас є анімований GIF для завантаження на вашу електронну платформу.

Розкриття інформації: Шафа52 є клієнтом моєї фірми, Highbridge. У цій статті я використовую партнерські посилання для саман, Клавіо, Кракена, і Shopify.