Hur man gör en animerad GIF för din nästa e-postmarknadsföringskampanj med Photoshop

Photoshop animerad GIF för e-postmarknadsföring

Vi har en fantastisk tid att arbeta med nyckelkunden Closet52, en klänningsbutik online som vi varumärket och byggt från grunden för ett etablerat och välkänt modeföretag i New York. Deras ledarskap arbetar alltid med oss ​​på samarbetsidéer för nästa kampanj eller strategi som vi genomför. Som en del av implementeringen av dem distribuerade vi Klaviyo för ShopifyPlus. Klaviyo är en välkänd plattform för marknadsföringsautomatisering med mycket snäv integration till Shopify såväl som många Shopify-appar.

En favoritfunktion hos mig är deras A / B-testning i Klaviyo. Du kan utveckla olika versioner av ett e-postmeddelande, och Klaviyo skickar ett urval, väntar på ett svar och skickar sedan den vinnande versionen till de återstående prenumeranterna – allt automatiskt.

Vår kund prenumererar på modemejl i branschen och fortsatte att anmärka hur mycket de gillade vissa e-postmeddelanden med ett bildspel med produktfoton. De frågade om vi kunde göra det och jag tackade ja och byggde en kampanj med ett A/B-test där vi skickade en version med en animation på 4 produkter, och en annan med en enda vacker, statisk bild. Kampanjen är för en utblåsning försäljning av sina höstklänningar när de tar fram nya produktlinjer.

Version A: Animerad GIF

klänning animation 3

Version B: Statisk bild

RB66117 1990 LS7

Fotokrediten går till de duktiga människorna på Zeelum.

Kampanjsamplingen pågår fortfarande just nu, men det är ganska tydligt att e-postmeddelandet med den animerade grafiken överträffar den statiska bilden med ca. en öppningsränta på 7 %… men en häpnadsväckande 3 gånger klickfrekvensen (CTR)! Jag tror att det faktum att den animerade GIF:en satte flera olika stilar framför prenumeranten ledde till mycket fler besökare.

Hur man gör en animerad GIF med Photoshop

Jag är inget proffs med Photoshop. Faktiskt de enda gångerna jag vanligtvis använder Adobe Creative Clouds Photoshop är att ta bort bakgrunder och lagra bilder, som att placera en skärmdump ovanpå en bärbar dator eller mobil enhet. Men jag grävde lite på nätet och kom på hur man gör en animation. Användargränssnittet för detta är inte det lättaste, men inom 20 minuter och efter att ha läst några tutorials kunde jag slå ut det.

Förbereder våra källbilder:

  • Mått – Animerade GIF-bilder kan vara ganska stora, så jag såg till att ställa in mina photoshop-fildimensioner så att de matchar vår 600px breda e-postmallsbredd.
  • kompression – Våra originalbilder var högupplösta och mycket hög filstorlek, så jag ändrade storleken på dem och komprimerade dem med kraken till JPG-filer med mycket mindre filstorlek.
  • övergångar – Även om du kan bli frestad att lägga till animation interpoleringar (t.ex. blekningsövergång) mellan bildrutor, som lägger till mycket storlek på din fil så jag skulle undvika att göra det.

Så här bygger du animationen i Photoshop:

  1. Skapa en ny fil med måtten som matchar de exakta måtten du placerar i din e-postmall.
  2. Välja Fönster > Tidslinje för att aktivera tidslinjevyn i basen av Photoshop.

Photoshop > Fönster > Tidslinje

  1. Lägg till varje bild som ett nytt lager i Photoshop.

Photoshop > Lägg till bilder som lager

  1. Klicka Skapa Frame Animai tidslinjeregionen.
  2. På höger sida av tidslinjeregionen, välj hamburgermenyn och välj Gör ramar av lager.

Photoshop > Tidslinje > Skapa ramar från lager

  1. Inom tidslinjeområdet kan du dra ramarna i ordningen som du vill att bilderna ska visas i.
  2. Klicka på varje bildruta där det står 0 sek, och välj den tid som du vill att ramen ska visas. jag valde 2.0 sekunder per bildruta.
  3. Välj i rullgardinsmenyn under ramarna Evigt för att säkerställa att animeringen löper kontinuerligt.
  4. Klicka på Spela-knappen för att förhandsgranska din animation.
  5. Klicka Arkiv > Exportera > Spara för webben (legacy).

Photoshop > Arkiv > Exportera > Spara för webben (legacy)

  1. Välja GIF från alternativen uppe till vänster på exportskärmen.
  2. Om dina bilder inte är genomskinliga, avmarkera Öppenhet alternativ.
  3. Klicka Save och exportera din fil.

Photoshop exportera animerad gif

Det är allt! Du har nu den animerade GIF-filen att ladda upp till din e-postplattform.

Upplysningar: Garderob52 är kund till mitt företag, Highbridge. Jag använder affiliate-länkar i hela den här artikeln för Adobe, Klaviyo, krakenoch Shopify.