Kako napraviti animirani GIF za svoju sljedeću e-mail marketinšku kampanju pomoću Photoshopa

Photoshop animirani GIF za marketing putem e-pošte

Nevjerojatno se provodimo radeći s ključnim klijentom Closet52, an online trgovina haljinama koju smo brendirali i izgradili od temelja za etabliranu i poznatu modnu tvrtku u New Yorku. Njihovo vodstvo uvijek radi s nama na zajedničkim idejama za sljedeću kampanju ili strategiju koju provodimo. U sklopu njihove provedbe rasporedili smo Klaviyo za ShopifyPlus. Klaviyo je dobro poznata platforma za automatizaciju marketinga s vrlo tijesnom integracijom s Shopifyjem kao i mnogim Shopify aplikacijama.

Moja omiljena karakteristika je njihova A / B testiranje u Klaviyo. Možete razviti različite verzije e-pošte, a Klaviyo će poslati uzorak, pričekati odgovor, a zatim će preostalim pretplatnicima poslati pobjedničku verziju – sve automatski.

Naš klijent se pretplatio na modne e-poruke u industriji i nastavio je primjećivati ​​koliko im se sviđaju neki e-mailovi uz slideshow fotografija proizvoda. Pitali su možemo li to i ja sam pristao i napravio kampanju s A/B testom gdje smo poslali jednu verziju s animacijom od 4 proizvoda, a drugu s jednom, lijepom, statičkom slikom. Kampanja je za ispuhivanje rasprodaja njihovih jesenskih haljina jer uvode nove linije proizvoda.

Verzija A: Animirani GIF

animacija haljina 3

Verzija B: statična slika

RB66117 1990 LS7

Zasluge za fotografije pripadaju talentiranim ljudima na Zeelum.

Uzorkovanje kampanje još uvijek traje, ali prilično je jasno da e-poruka s animiranom grafikom daleko nadmašuje statičnu sliku... za otprilike otvorenu stopu od 7%.… ali zapanjujuće 3 puta veći klikovni postotak (CTR)! Mislim da je činjenica da je animirani GIF stavio nekoliko različitih stilova ispred pretplatnika dovela do daleko većeg broja posjetitelja.

Kako napraviti animirani GIF pomoću Photoshopa

Nisam nikakav profesionalac u Photoshopu. Zapravo, jedini put koji obično koristim Adobe Creative Cloud's Photoshop su uklanjanje pozadina i slojevitost slika, poput postavljanja snimke zaslona na prijenosno računalo ili mobilni uređaj. Međutim, malo sam kopao na internetu i smislio kako napraviti animaciju. Korisničko sučelje za ovo nije najjednostavnije, ali u roku od 20 minuta i nakon čitanja nekoliko tutorijala, uspio sam ga izbaciti.

Priprema naših izvornih slika:

  • Dimenzije – Animirani GIF-ovi mogu biti prilično veliki, pa sam se pobrinuo da dimenzije moje Photoshop datoteke budu tako da točno odgovaraju našoj širini predloška e-pošte od 600 px.
  • kompresija – Naše originalne slike bile su visoke rezolucije i vrlo velike veličine datoteke, pa sam im promijenio veličinu i komprimirao ih Kraken u JPG datoteke s puno manjom veličinom datoteke.
  • prijelazi – Iako biste mogli biti u iskušenju dodati animaciju između njih (npr. blijedi prijelaz) između okvira, što dodaje puno veličine vašoj datoteci pa bih to izbjegao.

Da biste napravili animaciju u Photoshopu:

  1. Stvorite novu datoteku s dimenzijama koje odgovaraju točnim dimenzijama koje postavljate u svoj predložak e-pošte.
  2. odabrati Prozor > Vremenska traka kako biste omogućili prikaz vremenske trake u podnožju Photoshopa.

Photoshop > Prozor > Vremenska traka

  1. Dodajte svaki sliku kao novi sloj unutar Photoshopa.

Photoshop > Dodaj slike kao slojeve

  1. Kliknite Napravite okvir Animacija u regiji vremenske trake.
  2. Na desnoj strani regije Timeline odaberite izbornik hamburgera i odaberite Napravite okvire od slojeva.

Photoshop > Vremenska traka > Napravite okvire iz slojeva

  1. Unutar regije Timeline možete povucite okvire u redoslijed u kojoj želite da se slike pojavljuju.
  2. Kliknite na svaki okvir gdje piše 0 sekundi i odaberite vrijeme koje želite da se taj okvir prikaže. odabrao sam 2.0 sekunde po kadru.
  3. U padajućem izborniku ispod okvira odaberite Zauvijek kako bi se osiguralo da se animacija neprekidno vrti.
  4. kliknite Gumb za reprodukciju za pregled vaše animacije.
  5. Kliknite Datoteka > Izvoz > Spremi za web (naslijeđeno).

Photoshop > Datoteka > Izvoz > Spremi za web (naslijeđeno)

  1. odabrati GIF iz opcija u gornjem lijevom dijelu zaslona za izvoz.
  2. Ako vaše slike nisu prozirne, poništite oznaku Prozirnost opcija.
  3. Kliknite UŠTEDI i izvezite svoju datoteku.

photoshop izvoz animiranih gifova

To je to! Sada imate animirani GIF za prijenos na svoju platformu e-pošte.

Objava: Ormar52 je klijent moje firme, Highbridge. U ovom članku koristim pridružene veze za nepečena opeka, Klaviyo, Krakeni Shopify.