Jak vytvořit animovaný GIF pro vaši příští e-mailovou marketingovou kampaň pomocí Photoshopu

Photoshop animovaný GIF pro e-mailový marketing

Máme úžasný čas pracovat s klíčovým klientem Closet52, an internetový obchod s šaty kterou jsme od základů označili a vybudovali pro zavedenou a známou módní společnost v New Yorku. Jejich vedení s námi vždy pracuje na společných nápadech pro další kampaň nebo strategii, kterou provádíme. V rámci jejich implementace jsme nasadili Klaviyo pro ShopifyPlus. Klaviyo je známá platforma pro automatizaci marketingu s velmi úzkou integrací do Shopify a mnoha aplikací Shopify.

Moje oblíbená vlastnost je jejich A / B testování v Klaviyo. Můžete vyvinout různé verze e-mailu a Klaviyo odešle vzorek, počká na odpověď a poté pošle zbývajícím odběratelům vítěznou verzi – vše automaticky.

Náš klient se přihlásil k odběru módních e-mailů v tomto odvětví a pokračoval v poznámkách, jak moc se mu líbily některé e-maily s prezentací produktových fotografií. Zeptali se, jestli to můžeme udělat, a já jsem souhlasil a vytvořil kampaň s A/B testem, kde jsme poslali jednu verzi s animací 4 produktů a druhou s jediným krásným statickým obrázkem. Kampaň je na výsluní prodej jejich podzimních šatů protože přinášejí nové produktové řady.

Verze A: Animovaný GIF

animace šatů 3

Verze B: Statický obrázek

RB66117 1990 LS7

Fotografický kredit patří talentovaným lidem v Zeelum.

Vzorkování kampaně stále běží, ale je jasné, že e-mail s animovanou grafikou daleko předčí statický obrázek... 7% otevřená sazba…ale ohromující 3násobek míry prokliku (MP)! Myslím, že skutečnost, že animovaný GIF umístil před předplatitele několik různých stylů, vedl k mnohem většímu počtu návštěvníků.

Jak vytvořit animovaný GIF pomocí Photoshopu

Nejsem žádný profík s Photoshopem. Vlastně jediné časy, které obvykle používám Photoshop od Adobe Creative Cloud slouží k odstranění pozadí a vrstvení obrázků, jako je umístění snímku obrazovky na notebook nebo mobilní zařízení. Nicméně jsem něco prohledal online a přišel jsem na to, jak udělat animaci. Uživatelské rozhraní pro to není nejjednodušší, ale během 20 minut a po přečtení několika tutoriálů jsem to dokázal vyklepat.

Příprava našich zdrojových obrázků:

  • Rozměry – Animované GIFy mohou být poměrně velké, takže jsem se ujistil, že jsem nastavil rozměry svého souboru photoshop tak, aby přesně odpovídal šířce naší e-mailové šablony o šířce 600 pixelů.
  • Komprese – Naše původní obrázky měly vysoké rozlišení a velmi velkou velikost souboru, takže jsem je změnil a zkomprimoval Kraken do JPG s mnohem menší velikostí souboru.
  • Přechody – I když byste mohli být v pokušení přidat animaci doplnění (např. mizející přechod) mezi snímky, což vašemu souboru přidává velkou velikost, takže bych se tomu vyhnul.

Vytvoření animace ve Photoshopu:

  1. Vytvořte nový soubor s rozměry, které přesně odpovídají rozměrům, které vkládáte do šablony e-mailu.
  2. vybrat Okno > Časová osa pro povolení zobrazení časové osy v základně Photoshopu.

Photoshop > Okno > Časová osa

  1. Přidejte každý obrázek jako novou vrstvu ve Photoshopu.

Photoshop > Přidat obrazy jako vrstvy

  1. klikněte Vytvořit Frame Animav oblasti časové osy.
  2. Na pravé straně oblasti časové osy vyberte nabídku hamburgerů a vyberte Vytvořte rámečky z vrstev.

Photoshop > Časová osa > Vytvořit snímky z vrstev

  1. V oblasti časové osy můžete přetáhněte rámečky do objednávky ve kterých chcete, aby se obrázky zobrazovaly.
  2. Klikněte na každý snímek, kde je uvedeno 0 sekund, a vyberte čas, který chcete, aby se snímek zobrazil. Vybírám si 2.0 sekundy na snímek.
  3. V rozevíracím seznamu pod rámečky vyberte Navždy aby se zajistilo, že animační smyčky budou nepřetržitě.
  4. Klepněte na tlačítko Tlačítko Play pro náhled animace.
  5. klikněte Soubor > Exportovat > Uložit pro web (starší verze).

Photoshop > Soubor > Export > Uložit pro web (starší verze)

  1. vybrat Gif z možností v levé horní části obrazovky Export.
  2. Pokud vaše obrázky nejsou průhledné, zrušte zaškrtnutí Průhlednost volba.
  3. klikněte Uložit a exportujte svůj soubor.

animovaný gif export do photoshopu

A je to! Nyní máte animovaný GIF, který můžete nahrát na svou e-mailovou platformu.

Zveřejnění: Skříň52 je klientem mé firmy, Highbridge. V tomto článku používám affiliate odkazy Adobe, Klaviyo, Kraken, a Shopify.