Ako vytvoriť animovaný GIF pre vašu ďalšiu e-mailovú marketingovú kampaň pomocou Photoshopu

Photoshop animovaný GIF pre e-mailový marketing

Máme úžasné chvíle pri práci s kľúčovým klientom Closet52, an internetový obchod s oblečením ktorú sme od základov označili a vybudovali pre etablovanú a známu módnu spoločnosť v New Yorku. Ich vedenie s nami vždy pracuje na spoločných nápadoch pre ďalšiu kampaň alebo stratégiu, ktorú realizujeme. V rámci ich implementácie sme nasadili Klaviyo pre ShopifyPlus. Klaviyo je známa platforma na automatizáciu marketingu s veľmi úzkou integráciou so službou Shopify, ako aj s mnohými aplikáciami Shopify.

Mojou obľúbenou vlastnosťou sú ich A / B testovanie v Klaviyo. Môžete vytvoriť rôzne verzie e-mailu a Klaviyo odošle ukážku, počká na odpoveď a potom pošle zvyšným odberateľom víťaznú verziu – všetko automaticky.

Náš klient sa prihlásil na odber e-mailov o móde v tomto odvetví a pokračoval v poznámke, ako sa mu páčili niektoré e-maily s prezentáciou produktových fotografií. Spýtali sa, či by sme to mohli urobiť, a ja som súhlasil a vytvoril som kampaň s A/B testom, kde sme poslali jednu verziu s animáciou 4 produktov a druhú s jedným krásnym statickým obrázkom. Kampaň je za prestrelku predaj ich jesenných šiat pretože prinášajú nové produktové rady.

Verzia A: Animovaný GIF

animácia šiat 3

Verzia B: Statický obrázok

RB66117 1990 LS7

Fotografický kredit patrí talentovaným ľuďom v Zeelum.

Vzorkovanie kampane momentálne stále prebieha, ale je celkom jasné, že e-mail s animovanou grafikou ďaleko prevyšuje statický obrázok... 7 % otvorená sadzba...ale prekvapivé 3-násobok miery prekliknutia (CTR)! Myslím si, že skutočnosť, že animovaný GIF predložil predplatiteľovi niekoľko rôznych štýlov, viedla k oveľa väčšej návštevnosti.

Ako vytvoriť animovaný GIF pomocou Photoshopu

Nie som žiadny profík s Photoshopom. V skutočnosti iba časy, ktoré zvyčajne používam Photoshop od Adobe Creative Cloud slúžia na odstránenie pozadí a vrstvenie obrázkov, ako je umiestnenie snímky obrazovky na vrchnú časť prenosného počítača alebo mobilného zariadenia. Trochu som však kopal online a prišiel som na to, ako urobiť animáciu. Používateľské rozhranie na to nie je najjednoduchšie, ale za 20 minút a po prečítaní niekoľkých tutoriálov som to dokázal vyradiť.

Príprava našich zdrojových obrázkov:

  • Rozmery – Animované súbory GIF môžu byť dosť veľké, preto som sa uistil, že som nastavil rozmery súboru vo Photoshope tak, aby presne zodpovedali šírke našej šablóny e-mailu so šírkou 600 pixelov.
  • Kompresia – Naše pôvodné obrázky mali vysoké rozlíšenie a veľmi veľkú veľkosť súboru, tak som ich veľkosť zmenil a skomprimoval kraken do JPG s oveľa menšou veľkosťou súboru.
  • prechody - Aj keď by ste mohli byť v pokušení pridať animáciu doplnenie (napr. miznúci prechod) medzi snímkami, čo pridáva vášmu súboru veľkú veľkosť, takže by som sa tomu vyhýbal.

Ak chcete vytvoriť animáciu vo Photoshope:

  1. Vytvorte nový súbor s rozmermi, ktoré presne zodpovedajú rozmerom, ktoré umiestňujete do šablóny e-mailu.
  2. vybrať Okno > Časová os na aktiváciu zobrazenia časovej osi v základni Photoshopu.

Photoshop > Okno > Časová os

  1. Pridajte každý obrázok ako novú vrstvu v rámci Photoshopu.

Photoshop > Pridať obrázky ako vrstvy

  1. kliknite Vytvoriť Frame Animav regióne časovej osi.
  2. Na pravej strane oblasti časovej osi vyberte ponuku hamburgerov a vyberte Vytvárajte rámy z vrstiev.

Photoshop > Časová os > Vytvárať snímky z vrstiev

  1. V rámci oblasti časovej osi môžete pretiahnite rámy do objednávky v ktorých chcete, aby sa obrázky zobrazovali.
  2. Kliknite na každú snímku, kde je napísané 0 sekúnd, a vyberte čas, kedy sa má snímka zobraziť. vybral som si 2.0 sekundy na snímku.
  3. V rozbaľovacej ponuke pod rámami vyberte Navždy aby sa animačné slučky neprerušovali.
  4. Kliknite na tlačidlo Tlačidlo Prehrať na ukážku animácie.
  5. kliknite Súbor > Exportovať > Uložiť pre web (staršie).

Photoshop > Súbor > Exportovať > Uložiť pre web (staršie verzie)

  1. vybrať Gif z možností v ľavej hornej časti obrazovky Export.
  2. Ak vaše obrázky nie sú priehľadné, zrušte začiarknutie políčka Priehľadnosť možnosť.
  3. kliknite ušetríte a exportujte svoj súbor.

animovaný gif export do photoshopu

To je všetko! Teraz máte animovaný GIF, ktorý môžete nahrať na svoju e-mailovú platformu.

Zverejnenie: Skriňa52 je klientom mojej firmy, Highbridge. V tomto článku používam pridružené odkazy adobe, Klaviyo, krakena Shopify.