Hoe kinne jo in animearre GIF meitsje foar jo folgjende e-postmarketingkampanje mei Photoshop

Photoshop Animated GIF foar e-postmarketing

Wy hawwe in geweldige tiid om te wurkjen mei kaai client Closet52, an online jurk winkel dat wy branded en boud fan de grûn ôf foar in fêstige en bekend moade bedriuw yn New York. Harren liederskip wurket altyd mei ús oan gearwurkjende ideeën foar de folgjende kampanje of strategy dy't wy útfiere. As ûnderdiel fan harren útfiering, wy ynset Klaviyo foar ShopifyPlus. Klaviyo is in bekend platfoarm foar marketingautomatisaasje mei heul strakke yntegraasje mei Shopify lykas in protte Shopify-apps.

In favorite eigenskip fan my is harren A / B testen yn Klaviyo. Jo kinne ûntwikkelje ferskate ferzjes fan in e-mail, en Klaviyo sil stjoere in sampling út, wachtsje op in antwurd, en dan stjoere de oerbleaune abonnees de winnende ferzje - alles automatysk.

Us klant abonnearret op moade-e-postberjochten yn 'e sektor en bleau opmerke hoefolle se guon e-postberjochten leuk hienen mei in diashow fan produktfoto's. Se fregen oft wy dat koenen dwaan en ik stimde yn en boude in kampanje mei in A/B-test wêrby't wy ien ferzje stjoerden mei in animaasje fan 4 produkten, en in oare mei in inkele, prachtige, statyske ôfbylding. De kampanje is foar in blowout ferkeap fan harren hjerst jurken om't se nije produktlinen bringe.

Ferzje A: Animated GIF

jurk animaasje 3

Ferzje B: Statyske ôfbylding

RB66117 1990 LS7

De foto credit giet nei de talintfolle minsken by Zeelum.

De sampling fan 'e kampanje rint no noch, mar it is frij dúdlik dat de e-post mei de animearre grafiken folle better presteart as de statyske ôfbylding ... in iepen taryf fan 7%.... mar in ferrassende 3 kear de klik-through rate (CTR)! Ik tink dat it feit dat de animearre GIF ferskate ferskillende stilen foar de abonnee sette late ta folle mear besikers.

Hoe kinne jo in animearre GIF meitsje mei Photoshop

Ik bin gjin soarte fan in pro mei Photoshop. Yn feite, de ienige kearen ik typysk brûke Adobe Creative Cloud's Photoshop binne om eftergrûnen te ferwiderjen en ôfbyldings te lizzen, lykas it pleatsen fan in skermôfbylding boppe op in laptop of mobyl apparaat. Ik haw lykwols wat online graven en útfûn hoe't ik in animaasje koe meitsje. De brûkersynterface hjirfoar is net de maklikste, mar binnen 20 minuten en nei it lêzen fan wat tutorials, koe ik it útslaan.

It tarieden fan ús boarneôfbyldings:

  • Ofmjittings - Animearre GIF's kinne frij grut wêze, dus ik soarge derfoar dat myn Photoshop-bestânôfmjittings krekt oerienkomme mei ús 600px brede e-postsjabloanbreedte.
  • Compression - Us orizjinele ôfbyldings wiene hege resolúsje en heul hege bestângrutte, dus ik feroare se en komprimearre se mei Kraken nei JPG's mei in folle lytsere triemgrutte.
  • Oergongen - Wylst jo miskien wurde oanstriid om animaasje ta te foegjen tweens (bgl. fading oergong) tusken frames, dat foeget in soad grutte ta oan jo triem dus ik soe mije dwaan dat.

Om de animaasje yn Photoshop te bouwen:

  1. In nije triem oanmeitsje mei de ôfmjittings dy't oerienkomme mei de krekte ôfmjittings dy't jo pleatse yn jo e-mail sjabloan.
  2. Útkieze Finster > Tiidline om de tiidlinewerjefte oan 'e basis fan Photoshop yn te skeakeljen.

Photoshop> Finster> Tiidline

  1. Foegje elk ta ôfbylding as in nije laach binnen Photoshop.

Photoshop> Ofbyldings tafoegje as lagen

  1. Klik Meitsje Frame Animation in de Timeline Region.
  2. Selektearje oan 'e rjochterkant fan' e Timeline-regio it hamburgermenu en selektearje Meitsje frames út lagen.

Photoshop> Tiidline> Frames meitsje fan lagen

  1. Binnen de Timeline-regio kinne jo sleep de frames yn 'e folchoarder dat jo wolle dat de ôfbyldings yn ferskine.
  2. Klikje op elk frame wêr't it seit 0 sek, en selektearje de tiid dat jo dat frame werjaan wolle. ik keas 2.0 sekonden per frame.
  3. Selektearje yn it útklapmenu ûnder de frames Ivich om te soargjen dat de animaasje kontinu loopt.
  4. Klik op 'e Spielje knop om jo animaasje te besjen.
  5. Klik Triem> Eksportearje> Bewarje foar web (legacy).

Photoshop > Triem > Eksportearje > Bewarje foar web (legacy)

  1. Útkieze GIF út de opsjes op de boppe lofts fan de Eksportearje skerm.
  2. As jo ​​ôfbyldings binne net trochsichtich, uncheck de Transparency opsje.
  3. Klik Rêde en eksportearje jo bestân.

Photoshop eksportearje animearre gif

Dat is it! Jo hawwe no de animearre GIF om te uploaden nei jo e-postplatfoarm.

Disclosure: Kast52 is in klant fan myn firma, Highbridge. Ik brûk affiliate links yn dit artikel foar Adobe, Klaviyo, Kraken, en Shopify.