Jak zrobić animowany GIF do następnej kampanii e-mail marketingowej za pomocą Photoshopa

Photoshop animowany GIF do marketingu e-mailowego

Świetnie się bawimy pracując z kluczowym klientem Closet52 i internetowy sklep z sukienkami którą wymyśliliśmy i zbudowaliśmy od podstaw dla uznanej i znanej firmy modowej w Nowym Jorku. Ich kierownictwo zawsze pracuje z nami nad wspólnymi pomysłami na następną kampanię lub strategię, którą realizujemy. W ramach ich realizacji wdrożyliśmy Klaviyo dla ShopifyPlus. Klaviyo to dobrze znana platforma do automatyzacji marketingu z bardzo ścisłą integracją z Shopify oraz wieloma aplikacjami Shopify.

Moją ulubioną cechą jest ich Testy A / B w Klaviyo. Możesz opracować różne wersje wiadomości e-mail, a Klaviyo wyśle ​​próbki, poczeka na odpowiedź, a następnie wyśle ​​pozostałym subskrybentom zwycięską wersję – wszystko automatycznie.

Nasz klient subskrybuje modowe e-maile w branży i nadal zauważa, jak bardzo podobały mu się niektóre e-maile z pokazem slajdów ze zdjęciami produktów. Zapytali, czy możemy to zrobić, a ja zgodziłem się i zbudowałem kampanię z testem A/B, gdzie wysłaliśmy jedną wersję z animacją 4 produktów, a drugą z jednym, pięknym, statycznym obrazem. Kampania jest do wybuchu wyprzedaż ich jesiennych sukienek ponieważ wprowadzają nowe linie produktów.

Wersja A: animowany GIF

sukienka animacja 3

Wersja B: obraz statyczny

RB66117 1990 LS7

Kredyt fotograficzny trafia do utalentowanych ludzi z Zeelum.

Próbkowanie kampanii wciąż trwa, ale jest całkiem jasne, że e-mail z animowaną grafiką znacznie przewyższa statyczny obraz… o około 7% otwarć… ale zdumiewające 3-krotność współczynnika klikalności (CTR)! Myślę, że fakt, że animowany GIF umieścił przed subskrybentem kilka różnych stylów, doprowadził do znacznie większej liczby odwiedzających.

Jak zrobić animowany GIF za pomocą Photoshopa

Nie jestem zawodowcem w Photoshopie. Właściwie jedyne razy, których zazwyczaj używam Photoshop firmy Adobe Creative Cloud są usuwanie tła i nakładanie obrazów, na przykład umieszczanie zrzutu ekranu na laptopie lub urządzeniu mobilnym. Jednak pogrzebałem trochę w Internecie i wymyśliłem, jak zrobić animację. Interfejs użytkownika do tego nie jest najłatwiejszy, ale w ciągu 20 minut i po przeczytaniu kilku samouczków udało mi się go znokautować.

Przygotowanie naszych obrazów źródłowych:

  • wymiary – Animowane pliki GIF mogą być dość duże, więc ustawiłem wymiary mojego pliku Photoshopa tak, aby dokładnie odpowiadały szerokości naszego szablonu wiadomości e-mail o szerokości 600 pikseli.
  • Kompresja – Nasze oryginalne obrazy miały wysoką rozdzielczość i bardzo duży rozmiar pliku, więc zmieniłem ich rozmiar i skompresowałem za pomocą Kraken do JPG o znacznie mniejszym rozmiarze pliku.
  • Przejścia – Chociaż możesz pokusić się o dodanie animacji nastolatków (np. zanikające przejście) między klatkami, co znacznie zwiększa rozmiar pliku, więc unikałbym tego.

Aby zbudować animację w Photoshopie:

  1. Utwórz nowy plik z wymiarami, które dokładnie odpowiadają wymiarom, które umieszczasz w szablonie wiadomości e-mail.
  2. Wybierz Okno > Oś czasu aby włączyć widok osi czasu u podstawy programu Photoshop.

Photoshop > Okno > Oś czasu

  1. Dodaj każdy obraz jako nowa warstwa w Photoshopie.

Photoshop > Dodaj obrazy jako warstwy

  1. Kliknij Utwórz ramkę animęw Regionie Osi Czasu.
  2. Po prawej stronie regionu osi czasu wybierz menu hamburgerów i wybierz Twórz ramki z warstw.

Photoshop > Oś czasu > Utwórz klatki z warstw

  1. W regionie osi czasu możesz przeciągnij ramki do kolejności w których mają się pojawiać obrazy.
  2. Kliknij każdą klatkę, w której jest napisane 0 sekund, i wybierz czas wyświetlania tej klatki. wybieram 2.0 sekundy na klatkę.
  3. Z listy rozwijanej poniżej ramek wybierz Na zawsze aby zapewnić ciągłe pętle animacji.
  4. Kliknij Przycisk odtwarzania aby wyświetlić podgląd animacji.
  5. Kliknij Plik > Eksportuj > Zapisz do Internetu (starsze).

Photoshop > Plik > Eksportuj > Zapisz do Internetu (starsza wersja)

  1. Wybierz GIF z opcji w lewym górnym rogu ekranu eksportu.
  2. Jeśli Twoje obrazy nie są przezroczyste, odznacz Przezroczystość opcja.
  3. Kliknij Zapisz i wyeksportuj swój plik.

animowany gif eksportu do Photoshopa

Otóż ​​to! Masz teraz animowany GIF do przesłania na swoją platformę e-mail.

Ujawnienie: Szafa52 jest klientem mojej firmy, Highbridge. Używam linków afiliacyjnych w tym artykule dla Adobe, Klaviyo, Kraken, Shopify.