Sådan laver du en animeret GIF til din næste e-mail-marketingkampagne ved hjælp af Photoshop

Photoshop animeret GIF til e-mail marketing

Vi har det fantastisk med at arbejde med nøglekunden Closet52, en online kjole butik som vi brandede og byggede fra bunden for et etableret og kendt modefirma i New York. Deres lederskab arbejder altid sammen med os om samarbejdsideer til den næste kampagne eller strategi, som vi udfører. Som en del af deres implementering implementerede vi Klaviyo forum Shopify Plus. Klaviyo er en velkendt marketing automation platform med meget tæt integration til Shopify såvel som mange Shopify Apps.

Et yndlingstræk hos mig er deres A / B-test i Klaviyo. Du kan udvikle forskellige versioner af en e-mail, og Klaviyo sender en prøveudgave, venter på et svar og sender derefter de resterende abonnenter vinderversionen – alt sammen automatisk.

Vores klient abonnerer på mode-e-mails i branchen og fortsatte med at bemærke, hvor meget de kunne lide nogle e-mails med et diasshow med produktfotos. De spurgte, om vi kunne gøre det, og jeg takkede ja og byggede en kampagne med en A/B-test, hvor vi sendte en version med en animation af 4 produkter, og en anden med et enkelt, smukt, statisk billede. Kampagnen er for en blowout salg af deres efterårskjoler da de bringer nye produktlinjer frem.

Version A: Animeret GIF

kjole animation 3

Version B: Statisk billede

RB66117 1990 LS7

Billedkreditten går til de dygtige folk kl Zeelum.

Kampagnesamplingen kører stadig lige nu, men det er ret tydeligt, at e-mailen med den animerede grafik langt overgår det statiske billede... med ca. en åben rente på 7 %… men en forbløffende 3 gange klikfrekvensen (CTR)! Jeg tror, ​​at det faktum, at den animerede GIF satte flere forskellige stilarter foran abonnenten, førte til langt flere besøgende.

Sådan laver du en animeret GIF ved hjælp af Photoshop

Jeg er ikke nogen form for professionel med Photoshop. Faktisk de eneste gange, jeg typisk bruger Adobe Creative Clouds Photoshop er at fjerne baggrunde og lagbilleder, som at placere et skærmbillede oven på en bærbar eller mobilenhed. Men jeg gravede lidt på nettet og fandt ud af, hvordan man laver en animation. Brugergrænsefladen til dette er ikke den nemmeste, men inden for 20 minutter og efter at have læst nogle tutorials, var jeg i stand til at slå den ud.

Forberedelse af vores kildebilleder:

  • Mål – Animerede GIF'er kan være ret store, så jeg sørgede for at indstille mine photoshop-fildimensioner til nøjagtigt at matche vores 600px brede e-mailskabelonbredde.
  • Compression – Vores originale billeder havde høj opløsning og meget høj filstørrelse, så jeg ændrede størrelsen på dem og komprimerede dem med Kraken til JPG'er med en meget mindre filstørrelse.
  • Overgange – Selvom du måske bliver fristet til at tilføje animation tweens (f.eks. fading overgang) mellem frames, som tilføjer en masse størrelse til din fil, så jeg ville undgå at gøre det.

Sådan bygger du animationen i Photoshop:

  1. Opret en ny fil med de mål, der matcher de nøjagtige mål, du placerer i din e-mailskabelon.
  2. Type Vindue > Tidslinje for at aktivere tidslinjevisningen i bunden af ​​Photoshop.

Photoshop > Vindue > Tidslinje

  1. Tilføj hver billede som et nyt lag i Photoshop.

Photoshop > Tilføj billeder som lag

  1. Klik på Opret Frame Animation i tidslinjeregionen.
  2. På højre side af tidslinjeregionen skal du vælge hamburgermenuen og vælge Lav rammer af lag.

Photoshop > Tidslinje > Lav rammer fra lag

  1. Inden for tidslinjeområdet kan du træk rammerne ind i rækkefølgen som du gerne vil have billederne i.
  2. Klik på hver ramme, hvor der står 0 sek., og vælg den tid, du ønsker, at rammen skal vise. jeg vælger 2.0 sekunder pr.
  3. Vælg i rullemenuen under rammerne Forever for at sikre, at animationen løber kontinuerligt.
  4. Klik på knappen Afspil-knap for at få vist din animation.
  5. Klik på Fil > Eksporter > Gem til web (forældet).

Photoshop > Filer > Eksporter > Gem til web (ældre)

  1. Type GIF fra indstillingerne øverst til venstre på eksportskærmen.
  2. Hvis dine billeder ikke er gennemsigtige, skal du fjerne markeringen i Gennemsigtighed valgmulighed.
  3. Klik på Gem og eksporter din fil.

Photoshop eksport animeret gif

Det er det! Du har nu den animerede GIF til at uploade til din e-mail-platform.

Afsløring: Skab52 er kunde hos mit firma, Highbridge. Jeg bruger affiliate links i hele denne artikel til Adobe, Klaviyo, Krakenog Shopify.