Hoe om 'n geanimeerde GIF te maak vir jou volgende e-posbemarkingsveldtog met behulp van Photoshop

Ons het 'n aanlyn rokwinkel gebou vir 'n rokvervaardiger wat ons gebrandmerk en van die grond af gebou het om 'n direk na verbruiker (D2C) bied aan die mark. Hul leierskap werk altyd saam met ons aan samewerkende idees vir die volgende veldtog of strategie wat ons uitvoer. As deel van die implementering daarvan het ons ontplooi Klaviyo vir ShopifyPlus. Klaviyo is 'n bekende bemarkingsoutomatiseringsplatform met baie noue integrasie met Shopify sowel as baie Shopify-toepassings.

'n Gunsteling kenmerk van my is hulle A / B-toets in Klaviyo. Jy kan verskillende weergawes van 'n e-pos ontwikkel, en Klaviyo sal 'n steekproef uitstuur, wag op 'n antwoord, en dan die oorblywende intekenare die wenweergawe stuur - alles outomaties.

Ons kliënt teken in op mode-e-posse in die bedryf en het voortgegaan om op te merk hoe baie hulle van sommige e-posse gehou het met 'n skyfievertoning van produkfoto's. Hulle het gevra of ons dit kan doen en ek het ingestem en 'n veldtog met 'n A/B-toets gebou waar ons een weergawe met 'n animasie van 4 produkte gestuur het, en 'n ander met 'n enkele, pragtige, statiese beeld. Die veldtog is vir 'n uitverkoping van hul herfsrokke terwyl hulle nuwe produklyne aanbring.

Weergawe A: Geanimeerde GIF

Weergawe B: Statiese beeld

Die fotokrediet gaan aan die talentvolle mense by Zeelum.

Die veldtogsteekproefneming is tans nog aan die gang, maar dit is redelik duidelik dat die e-pos met die geanimeerde grafika baie beter as die statiese beeld presteer ... met ongeveer 'n oop koers van 7%.… maar 'n verstommende 3 keer die deurklikkoers (Deurkliektempo)! Ek dink die feit dat die geanimeerde GIF verskeie style voor die intekenaar geplaas het, het tot baie meer besoekers gelei.

Hoe om 'n geanimeerde GIF te maak met behulp van Photoshop

Ek is nie enige soort pro met Photoshop nie. Trouens, die enigste kere wat ek gewoonlik gebruik Adobe Creative Cloud se Photoshop is om agtergronde te verwyder en beelde te laag, soos om 'n skermskoot bo-op 'n skootrekenaar of mobiele toestel te plaas. Ek het egter aanlyn gegrawe en uitgevind hoe om 'n animasie te maak. Die gebruikerskoppelvlak hiervoor is nie die maklikste nie, maar binne 20 minute en nadat ek 'n paar tutoriale gelees het, kon ek dit uitslaan.

Berei ons bronbeelde voor:

• dimensies – Geanimeerde GIF's kan redelik groot wees, so ek het seker gemaak dat ek my Photoshop-lêerafmetings opgestel het om presies te pas by ons 600px wye e-possjabloonwydte.
• Kompressie - Ons oorspronklike beelde was hoë resolusie en baie hoë lêergrootte, so ek het hulle verander en saamgepers Kraken na JPG's met 'n baie kleiner lêergrootte.
• oorgange - Terwyl jy dalk in die versoeking kom om animasie by te voeg tweens (bv. vervaagde oorgang) tussen rame, wat baie grootte by jou lêer voeg, so ek sal dit vermy om dit te doen.

Om die animasie in Photoshop te bou:

1. Skep 'n nuwe lêer met die afmetings wat ooreenstem met die presiese afmetings wat jy in jou e-possjabloon plaas.
2. Kies Venster > Tydlyn om die tydlynaansig aan die basis van Photoshop te aktiveer.

3. Voeg elkeen by beeld as 'n nuwe laag binne Photoshop.

4. Klik Skep Frame Animasie in die Tydlynstreek.
5. Aan die regterkant van die Tydlyn-streek, kies die hamburger-kieslys en kies Maak rame van lae.

6. Binne die Tydlyn-streek kan jy sleep die rame in die volgorde waarin jy wil hê die beelde moet verskyn.
7. Klik op elke raam waar dit 0 sekondes sê, en kies die tyd wat jy wil hê daardie raam moet vertoon. Ek het gekies 2.0 sekondes per raam.
8. Kies in die aftreklys onder die rame Forever om te verseker dat die animasie voortdurend loop.
9. Klik op die Speelknoppie om jou animasie voor te bekyk.
10. Klik Lêer > Uitvoer > Stoor vir web (legacy).

11. Kies GIF van die opsies links bo op die Uitvoer-skerm.
12. As jou beelde nie deursigtig is nie, ontmerk die Deursigtigheid opsie.
13. Klik Stoor en voer jou lêer uit.

Dis dit! Jy het nou die geanimeerde GIF om na jou e-posplatform op te laai.

Openbaarmaking: Martech Zone gebruik geaffilieerde skakels regdeur hierdie artikel vir Adobe, Klaviyo, Kraken, en Shopify.