Come creare una GIF animata per la tua prossima campagna di email marketing utilizzando Photoshop

GIF animate con Photoshop per l'email marketing

Ci stiamo divertendo moltissimo a lavorare con il cliente chiave Closet52, an negozio di abbigliamento online che abbiamo marchiato e costruito da zero per una nota azienda di moda a New York. La loro leadership lavora sempre con noi su idee collaborative per la prossima campagna o strategia che stiamo eseguendo. Come parte della loro implementazione, abbiamo implementato Klaviyo per Shopify Plus. Klaviyo è una nota piattaforma di automazione del marketing con un'integrazione molto stretta con Shopify e molte app Shopify.

Una delle mie caratteristiche preferite è la loro A / B testing a Klaviyo. Puoi sviluppare diverse versioni di un'e-mail e Klaviyo invierà un campionamento, attenderà una risposta e quindi invierà agli abbonati rimanenti la versione vincente, il tutto automaticamente.

Il nostro cliente si iscrive alle e-mail di moda nel settore e ha continuato a sottolineare quanto gli piacessero alcune e-mail con una presentazione di foto dei prodotti. Mi hanno chiesto se potevamo farlo e ho acconsentito e ho costruito una campagna con un test A/B in cui abbiamo inviato una versione con un'animazione di 4 prodotti e un'altra con un'unica, bellissima immagine statica. La campagna è per uno scoppio vendita dei loro abiti autunnali mentre stanno introducendo nuove linee di prodotti.

Versione A: GIF animata

animazione del vestito 3

Versione B: immagine statica

RB66117 1990 LS7

Il credito fotografico va alle persone di talento di Zeelum.

Il campionamento della campagna è ancora in corso in questo momento, ma è abbastanza chiaro che l'e-mail con la grafica animata sta superando di gran lunga l'immagine statica... di circa un tasso di apertura del 7%.... ma uno sbalorditivo 3 volte la percentuale di clic (CTR)! Penso che il fatto che la GIF animata abbia messo diversi stili davanti all'abbonato abbia portato a molti più visitatori.

Come creare una GIF animata usando Photoshop

Non sono un professionista con Photoshop. In effetti, le uniche volte che di solito uso Photoshop di Adobe Creative Cloud servono per rimuovere gli sfondi e per sovrapporre le immagini, come posizionare uno screenshot sopra un laptop o un dispositivo mobile. Tuttavia, ho fatto un po' di ricerche online e ho capito come creare un'animazione. L'interfaccia utente per questo non è la più semplice, ma in 20 minuti e dopo aver letto alcuni tutorial, sono stato in grado di eliminarlo.

Preparazione delle nostre immagini sorgente:

  • Dimensioni – Le GIF animate possono essere piuttosto grandi, quindi mi sono assicurato di impostare le dimensioni del mio file di Photoshop in modo che corrispondano esattamente alla larghezza del nostro modello di email di 600 px di larghezza.
  • Compressione – Le nostre immagini originali erano ad alta risoluzione e file di dimensioni molto elevate, quindi le ho ridimensionate e compresse Kraken a JPG con una dimensione del file molto più piccola.
  • transizioni – Anche se potresti essere tentato di aggiungere l'animazione tween (es. transizione in dissolvenza) tra i fotogrammi, che aggiunge molte dimensioni al tuo file, quindi eviterei di farlo.

Per creare l'animazione in Photoshop:

  1. Crea un nuovo file con le dimensioni che corrispondono alle dimensioni esatte che stai inserendo nel tuo modello di email.
  2. Seleziona Finestra > Sequenza temporale per abilitare la visualizzazione della timeline alla base di Photoshop.

Photoshop > Finestra > Timeline

  1. Aggiungi ciascuno immagine come un nuovo livello all'interno di Photoshop.

Photoshop > Aggiungi immagini come livelli

  1. Clicchi Crea frame Animazione nella regione Timeline.
  2. Sul lato destro dell'area Timeline, seleziona il menu dell'hamburger e seleziona Crea cornici da livelli.

Photoshop> Timeline> Crea fotogrammi dai livelli

  1. All'interno dell'area Timeline, puoi trascina i fotogrammi nell'ordine in cui desideri che appaiano le immagini.
  2. Fai clic su ogni fotogramma in cui si dice 0 secondi e seleziona l'ora in cui desideri visualizzare il fotogramma. Ho scelto 2.0 secondi per fotogramma.
  3. Nel menu a discesa sotto i frame, seleziona Per sempre per garantire che l'animazione si ripeta continuamente.
  4. Clicca su Pulsante Riproduci per visualizzare in anteprima la tua animazione.
  5. Clicchi File > Esporta > Salva per Web (legacy).

Photoshop > File > Esporta > Salva per Web (legacy)

  1. Seleziona GIF dalle opzioni in alto a sinistra della schermata Esporta.
  2. Se le tue immagini non sono trasparenti, deseleziona la Trasparenza opzione.
  3. Clicchi Risparmi ed esporta il tuo file.

GIF animate di esportazione di Photoshop

Questo è tutto! Ora hai la GIF animata da caricare sulla tua piattaforma di posta elettronica.

Disclosure: Armadio52 è un cliente della mia azienda, Highbridge. Sto usando i link di affiliazione in questo articolo per Adobe, Klaviyo, Krakene Shopify:.