Hvordan lage en animert GIF for din neste e-postmarkedsføringskampanje ved hjelp av Photoshop

Photoshop animert GIF for e-postmarkedsføring

Vi har en fantastisk tid med å jobbe med nøkkelkunden Closet52, en kjolebutikk på nett som vi merket og bygget fra grunnen av for et etablert og kjent moteselskap i New York. Deres lederskap jobber alltid med oss ​​om samarbeidsideer for neste kampanje eller strategi som vi gjennomfører. Som en del av implementeringen deres, distribuerte vi Klaviyo forum ShopifyPlus. Klaviyo er en velkjent markedsføringsautomatiseringsplattform med veldig tett integrasjon til Shopify så vel som mange Shopify-apper.

En favoritt egenskap hos meg er deres A / B-testing i Klaviyo. Du kan utvikle forskjellige versjoner av en e-post, og Klaviyo sender en prøveuttak, venter på svar og sender deretter vinnerversjonen til de gjenværende abonnentene – alt automatisk.

Kunden vår abonnerer på mote-e-poster i bransjen og fortsatte å bemerke hvor godt de likte noen e-poster med en lysbildefremvisning av produktbilder. De spurte om vi kunne gjøre det, og jeg takket ja og bygget en kampanje med en A/B-test hvor vi sendte en versjon med en animasjon på 4 produkter, og en annen med et enkelt, vakkert, statisk bilde. Kampanjen er for en utblåsning salg av høstkjolene deres når de kommer med nye produktlinjer.

Versjon A: Animert GIF

kjole animasjon 3

Versjon B: Statisk bilde

RB66117 1990 LS7

Bildekreditten går til de dyktige folkene på Zeelum.

Kampanjeprøven kjører fortsatt akkurat nå, men det er ganske tydelig at e-posten med den animerte grafikken er langt bedre enn det statiske bildet ... med ca. en åpen rente på 7 %... men en forbløffende 3 ganger klikkfrekvensen (CTR)! Jeg tror det faktum at den animerte GIF-en satte flere forskjellige stiler foran abonnenten førte til langt flere besøkende.

Hvordan lage en animert GIF ved hjelp av Photoshop

Jeg er ingen profesjonell med Photoshop. Faktisk de eneste gangene jeg vanligvis bruker Adobe Creative Clouds Photoshop er å fjerne bakgrunner og legge lag på bilder, som å plassere et skjermbilde på toppen av en bærbar datamaskin eller mobilenhet. Men jeg gravde litt på nettet og fant ut hvordan jeg skulle lage en animasjon. Brukergrensesnittet for dette er ikke det enkleste, men innen 20 minutter og etter å ha lest noen opplæringsprogrammer, klarte jeg å slå det ut.

Forbereder kildebildene våre:

  • dimensjoner – Animerte GIF-er kan være ganske store, så jeg passet på å stille inn Photoshop-fildimensjonene mine slik at de samsvarer nøyaktig med vår 600px brede e-postmalbredde.
  • Komprimering – Våre originale bilder hadde høy oppløsning og veldig høy filstørrelse, så jeg endret størrelsen på dem og komprimerte dem med Kraken til JPG-er med mye mindre filstørrelse.
  • overganger – Mens du kan bli fristet til å legge til animasjon tweens (f.eks. fading overgang) mellom rammer, som gir mye størrelse til filen din, så jeg ville unngå å gjøre det.

Slik bygger du animasjonen i Photoshop:

  1. Opprett en ny fil med dimensjonene som samsvarer med de nøyaktige dimensjonene du plasserer i e-postmalen.
  2. Plukke ut Vindu > Tidslinje for å aktivere tidslinjevisningen i bunnen av Photoshop.

Photoshop > Vindu > Tidslinje

  1. Legg til hver bilde som et nytt lag i Photoshop.

Photoshop > Legg til bilder som lag

  1. Klikk Lag Frame Animai tidslinjeregionen.
  2. På høyre side av tidslinjeregionen, velg hamburgermenyen og velg Lag rammer fra lag.

Photoshop > Tidslinje > Lag rammer fra lag

  1. Innenfor tidslinjeregionen kan du dra rammene inn i rekkefølgen som du vil at bildene skal vises i.
  2. Klikk på hver ramme der det står 0 sek, og velg tiden du vil at rammen skal vises. jeg velger 2.0 sekunder per bilde.
  3. Velg i rullegardinmenyen under rammene Alltid for å sikre at animasjonen går kontinuerlig.
  4. Klikk på Spill av-knappen for å forhåndsvise animasjonen.
  5. Klikk Fil > Eksporter > Lagre for web (eldre).

Photoshop > Fil > Eksporter > Lagre for web (eldre)

  1. Plukke ut GIF fra alternativene øverst til venstre på Eksporter-skjermen.
  2. Hvis bildene dine ikke er gjennomsiktige, fjerner du merket for Åpenhet alternativet.
  3. Klikk Spar og eksporter filen din.

Photoshop eksport animert gif

Det er det! Du har nå den animerte GIF-en du kan laste opp til e-postplattformen din.

Avsløring: Skap52 er en kunde av firmaet mitt, Highbridge. Jeg bruker tilknyttede lenker gjennom denne artikkelen for Adobe, Klaviyo, Krakenog Shopify.