Как да направите анимиран GIF за следващата си имейл маркетингова кампания с помощта на Photoshop

Photoshop анимиран GIF за имейл маркетинг

Прекарваме невероятно време, работейки с ключов клиент Closet52, an онлайн магазин за рокли които брандирахме и изградихме от самото начало за утвърдена и добре позната модна компания в Ню Йорк. Тяхното ръководство винаги работи с нас върху идеи за сътрудничество за следващата кампания или стратегия, която изпълняваме. Като част от тяхното изпълнение ние разгърнахме Klaviyo за ShopifyPlus. Klaviyo е добре позната платформа за автоматизация на маркетинга с много тясна интеграция с Shopify, както и с много приложения на Shopify.

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

Нашият клиент се абонира за модни имейли в бранша и продължи да отбелязва колко са харесали някои имейли със слайдшоу със снимки на продукти. Попитаха дали можем да направим това и аз се съгласих и изградих кампания с A/B тест, където изпратихме една версия с анимация от 4 продукта и друга с едно красиво, статично изображение. Кампанията е за избухване разпродажба на есенните им рокли тъй като те въвеждат нови продуктови линии.

Версия A: Анимиран GIF

рокля анимация 3

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

RB66117 1990 LS7

Снимката е на талантливите хора в Zeelum.

Извадката от кампанията все още се изпълнява в момента, но е доста ясно, че имейлът с анимирана графика далеч превъзхожда статичното изображение... с около отворена ставка от 7%.... но поразително 3 пъти по-висока честота на кликване (CTR)! Мисля, че фактът, че анимираният GIF постави няколко различни стила пред абоната, доведе до много повече посетители.

Как да направите анимиран GIF с помощта на Photoshop

Не съм професионалист с Photoshop. Всъщност единствените пъти, които обикновено използвам Photoshop на Adobe Creative Cloud са за премахване на фонове и наслояване на изображения, като например поставяне на екранна снимка върху лаптоп или мобилно устройство. Въпреки това, аз се поразрових онлайн и измислих как да направя анимация. Потребителският интерфейс за това не е най-лесният, но в рамките на 20 минути и след като прочетох някои уроци, успях да го нокаутирам.

Подготвяме нашите изходни изображения:

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

За да създадете анимацията във Photoshop:

  1. Създайте нов файл с размерите, които съвпадат с точните размери, които поставяте във вашия имейл шаблон.
  2. Изберете Прозорец > Времева линия за да активирате изгледа на времевата линия в основата на Photoshop.

Photoshop > Window > Timeline

  1. Добавете всеки изображение като нов слой в рамките на Photoshop.

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

  1. Кликнете Създаване на рамка анимацияв региона на времевата линия.
  2. От дясната страна на региона Timeline изберете менюто за хамбургер и изберете Направете рамки от слоеве.

Photoshop > Времева линия > Направете рамки от слоеве

  1. В рамките на региона на времевата линия можете плъзнете рамките в реда в които искате изображенията да се показват.
  2. Щракнете върху всеки кадър, където пише 0 секунди, и изберете времето, в което искате да се показва този кадър. аз избирам 2.0 секунди на кадър.
  3. В падащото меню под рамките изберете Завинаги за да се гарантира, че анимацията продължава непрекъснато.
  4. Щракнете върху Бутон за възпроизвеждане за да прегледате вашата анимация.
  5. Кликнете Файл > Експортиране > Запазване за уеб (наследено).

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

  1. Изберете GIF от опциите в горния ляв ъгъл на екрана за експортиране.
  2. Ако вашите изображения не са прозрачни, премахнете отметката от Прозрачност опция.
  3. Кликнете Save и експортирайте файла си.

Photoshop експортиране на анимиран gif

Това е! Вече имате анимирания GIF, който да качите на вашата платформа за електронна поща.

Разкриване на информация Килер52 е клиент на моята фирма, Highbridge. Използвам партньорски връзки в цялата тази статия за Кирпич, Klaviyo, Kraken, и Shopify.