So erstellen Sie mit Photoshop ein animiertes GIF für Ihre nächste E-Mail-Marketingkampagne

Photoshop animiertes GIF für E-Mail-Marketing

Wir haben eine tolle Zeit mit dem Schlüsselkunden Closet52, an Onlineshop für Kleider die wir für ein etabliertes und bekanntes Modeunternehmen in New York von Grund auf gebrandet und gebaut haben. Ihre Führung arbeitet immer mit uns an gemeinsamen Ideen für die nächste Kampagne oder Strategie, die wir durchführen. Im Rahmen ihrer Implementierung haben wir eingesetzt Klaviyo für Shopify Plus. Klaviyo ist eine bekannte Marketing-Automatisierungsplattform mit sehr enger Integration in Shopify sowie viele Shopify-Apps.

Ein Lieblingsmerkmal von mir ist ihr A / B-Tests in Klaviyo. Sie können verschiedene Versionen einer E-Mail entwickeln, und Klaviyo verschickt ein Muster, wartet auf eine Antwort und sendet dann den verbleibenden Abonnenten die Gewinnerversion – alles automatisch.

Unser Kunde abonniert Mode-E-Mails in der Branche und bemerkte immer wieder, wie sehr ihm einige E-Mails mit einer Diashow von Produktfotos gefallen. Sie fragten, ob wir das machen könnten, und ich stimmte zu und baute eine Kampagne mit einem A/B-Test auf, bei der wir eine Version mit einer Animation von 4 Produkten und eine andere mit einem einzigen, schönen, statischen Bild schickten. Die Kampagne ist für einen Blowout Verkauf ihrer Herbstkleider da sie neue Produktlinien auf den Markt bringen.

Version A: Animiertes GIF

Kleideranimation 3

Version B: Statisches Bild

RB66117 1990 LS7

Der Fotokredit geht an die talentierten Leute an Zeelum.

Das Kampagnen-Sampling läuft derzeit noch, aber es ist ziemlich klar, dass die E-Mail mit der animierten Grafik das statische Bild bei weitem übertrifft … um ungefähr eine Öffnungsrate von 7 %… aber erstaunlich 3-fache Klickrate (CTR)! Ich denke, die Tatsache, dass das animierte GIF dem Abonnenten mehrere verschiedene Stile präsentierte, führte zu weitaus mehr Besuchern.

So erstellen Sie ein animiertes GIF mit Photoshop

Ich bin kein Profi mit Photoshop. In der Tat, die einzige Zeit, die ich normalerweise benutze Photoshop von Adobe Creative Cloud sind das Entfernen von Hintergründen und das Überlagern von Bildern, wie das Platzieren eines Screenshots auf einem Laptop oder Mobilgerät. Ich habe jedoch online gegraben und herausgefunden, wie man eine Animation erstellt. Die Benutzeroberfläche dafür ist nicht die einfachste, aber innerhalb von 20 Minuten und nachdem ich einige Tutorials gelesen hatte, konnte ich es ausschalten.

Vorbereiten unserer Quellbilder:

  • Dimensionen – Animierte GIFs können ziemlich groß sein, daher habe ich darauf geachtet, die Abmessungen meiner Photoshop-Datei genau auf die Breite unserer 600 Pixel breiten E-Mail-Vorlage einzustellen.
  • Kompression – Unsere Originalbilder hatten eine hohe Auflösung und eine sehr hohe Dateigröße, also habe ich sie in der Größe geändert und komprimiert Kraken zu JPGs mit einer viel kleineren Dateigröße.
  • Übergänge – Während Sie vielleicht versucht sind, Animationen hinzuzufügen Tweens (z. B. verblassender Übergang) zwischen Frames, was Ihrer Datei viel Größe hinzufügt, also würde ich das vermeiden.

So erstellen Sie die Animation in Photoshop:

  1. Erstellen Sie eine neue Datei mit den Abmessungen, die genau mit den Abmessungen übereinstimmen, die Sie in Ihrer E-Mail-Vorlage platzieren.
  2. Klicken Sie (sodass dort ein Haken erscheint) auf das Rechteck Fenster > Zeitleiste um die Timeline-Ansicht an der Basis von Photoshop zu aktivieren.

Photoshop > Fenster > Zeitachse

  1. Fügen Sie jeweils hinzu Bild als neue Ebene innerhalb von Photoshop.

Photoshop > Bilder als Ebenen hinzufügen

  1. Klicken Sie Rahmen-Anima erstellenin der Timeline-Region.
  2. Wählen Sie auf der rechten Seite des Timeline-Bereichs das Hamburger-Menü und wählen Sie aus Erstellen Sie Rahmen aus Ebenen.

Photoshop > Zeitleiste > Frames aus Ebenen erstellen

  1. Innerhalb der Timeline-Region ist dies möglich Ziehen Sie die Rahmen in die Reihenfolge in denen die Bilder erscheinen sollen.
  2. Klicken Sie auf jedes Bild, wo 0 Sek. steht, und wählen Sie die Zeit aus, die dieses Bild anzeigen soll. Ich entschied mich 2.0 Sekunden pro Frame.
  3. Wählen Sie in der Dropdown-Liste unter den Frames aus Für immer um sicherzustellen, dass sich die Animation kontinuierlich wiederholt.
  4. Klicken Sie auf die Spieltaste um eine Vorschau Ihrer Animation anzuzeigen.
  5. Klicken Sie Datei > Exportieren > Für Web speichern (Legacy).

Photoshop > Datei > Exportieren > Für Web speichern (Legacy)

  1. Klicken Sie (sodass dort ein Haken erscheint) auf das Rechteck GIF aus den Optionen oben links auf dem Exportbildschirm.
  2. Wenn Ihre Bilder nicht transparent sind, deaktivieren Sie das Transparenz .
  3. Klicken Sie Speichern und exportieren Sie Ihre Datei.

Photoshop-Export animiertes gif

Das ist es! Sie haben jetzt das animierte GIF zum Hochladen auf Ihre E-Mail-Plattform.

Disclosure: Schrank52 ist Mandant meiner Kanzlei, Highbridge. Ich verwende in diesem Artikel Affiliate-Links für Lehmziegel, Klaviyo, Krakenund Shopify.