Een geanimeerde GIF maken voor uw volgende e-mailmarketingcampagne met Photoshop

Photoshop geanimeerde GIF voor e-mailmarketing

We hebben een geweldige tijd om samen te werken met de belangrijkste klant Closet52, en online kledingwinkel die we hebben gebrandmerkt en vanaf de grond hebben opgebouwd voor een gevestigd en bekend modebedrijf in New York. Hun leiderschap werkt altijd met ons samen aan gezamenlijke ideeën voor de volgende campagne of strategie die we uitvoeren. Als onderdeel van hun implementatie hebben we Klaviyo heeft gewacht Shopify Plus. Klaviyo is een bekend marketingautomatiseringsplatform met een zeer nauwe integratie met Shopify en vele Shopify-apps.

Een favoriete eigenschap van mij is hun A / B-testen in Klaviyo. Je kunt verschillende versies van een e-mail ontwikkelen, en Klaviyo stuurt een steekproef uit, wacht op een reactie en stuurt de overgebleven abonnees vervolgens de winnende versie - allemaal automatisch.

Onze klant is geabonneerd op mode-e-mails in de branche en bleef opmerken hoeveel ze sommige e-mails leuk vonden met een diavoorstelling met productfoto's. Ze vroegen of we dat konden doen en ik stemde toe en bouwde een campagne met een A/B-test waarbij we een versie met een animatie van 4 producten stuurden, en een andere met een enkele, mooie, statische afbeelding. De campagne is voor een klapband verkoop van hun herfstjurken omdat ze nieuwe productlijnen introduceren.

Versie A: geanimeerde GIF

jurk animatie 3

Versie B: Statisch beeld

RB66117 1990 LS7

Het fototegoed gaat naar de getalenteerde mensen van Zeelum.

De campagnesteekproeven lopen nog steeds, maar het is vrij duidelijk dat de e-mail met de geanimeerde afbeelding veel beter presteert dan de statische afbeelding... ongeveer een open tarief van 7%… maar een verbazingwekkende 3 keer de klikfrequentie (CTR)! Ik denk dat het feit dat de geanimeerde GIF verschillende stijlen voor de abonnee plaatste, tot veel meer bezoekers leidde.

Een geanimeerde GIF maken met Photoshop

Ik ben geen pro met Photoshop. In feite, de enige keren dat ik normaal gebruik Adobe Creative Cloud's Photoshop zijn om achtergronden te verwijderen en afbeeldingen in lagen te plaatsen, zoals het plaatsen van een screenshot op een laptop of mobiel apparaat. Ik heb echter wat online gegraven en bedacht hoe ik een animatie kon maken. De gebruikersinterface hiervoor is niet de gemakkelijkste, maar binnen 20 minuten en na het lezen van enkele tutorials, kon ik het uitschakelen.

Onze bronafbeeldingen voorbereiden:

  • Afmetingen - Geanimeerde GIF's kunnen behoorlijk groot zijn, dus ik heb ervoor gezorgd dat de afmetingen van mijn photoshop-bestand exact overeenkomen met onze 600px brede e-mailsjabloonbreedte.
  • samendrukking – Onze originele afbeeldingen hadden een hoge resolutie en een zeer hoge bestandsgrootte, dus ik heb ze verkleind en gecomprimeerd met Kraken naar JPG's met een veel kleinere bestandsgrootte.
  • Transitions – Hoewel je misschien in de verleiding komt om animatie toe te voegen tweens (bijv. vervagende overgang) tussen frames, dat voegt veel grootte toe aan je bestand, dus ik zou dat vermijden.

Om de animatie in Photoshop te bouwen:

  1. Maak een nieuw bestand met de afmetingen die overeenkomen met de exacte afmetingen die u in uw e-mailsjabloon plaatst.
  2. kies Venster > Tijdlijn om de tijdlijnweergave aan de basis van Photoshop in te schakelen.

Photoshop > Venster > Tijdlijn

  1. Voeg elk toe afbeelding als een nieuwe laag binnen Photoshop.

Photoshop > Afbeeldingen toevoegen als lagen

  1. Klik Frame-animatie makenin de tijdlijnregio.
  2. Selecteer aan de rechterkant van de tijdlijnregio het hamburgermenu en selecteer Frames maken van lagen.

Photoshop > Tijdlijn > Frames maken van lagen

  1. Binnen de tijdlijnregio kunt u: sleep de frames in de volgorde waarin u de afbeeldingen wilt laten verschijnen.
  2. Klik op elk frame waar 0 sec staat en selecteer de tijd waarop je dat frame wilt weergeven. ik kies 2.0 seconden per frame.
  3. Selecteer in de vervolgkeuzelijst onder de frames Voor altijd om ervoor te zorgen dat de animatie continu doorloopt.
  4. Klik op de Knop afspelen om een ​​voorbeeld van uw animatie te bekijken.
  5. Klik Bestand > Exporteren > Opslaan voor web (verouderd).

Photoshop > Bestand > Exporteren > Opslaan voor web (verouderd)

  1. kies GIF uit de opties linksboven in het scherm Exporteren.
  2. Als uw afbeeldingen niet transparant zijn, schakelt u het vinkje uit Transparantie optie.
  3. Klik Bespaar en exporteer uw bestand.

photoshop export geanimeerde gif

Dat is het! Je hebt nu de geanimeerde GIF om te uploaden naar je e-mailplatform.

Disclosure: Kast52 is een klant van mijn bedrijf, Highbridge. Ik gebruik gelieerde links in dit artikel voor: adobe, Klaviyo, Kraken en Shopify.