Comment créer un GIF animé pour votre prochaine campagne de marketing par e-mail à l'aide de Photoshop

GIF animé Photoshop pour le marketing par e-mail

Nous passons un moment formidable à travailler avec le client clé Closet52, un magasin de vêtements en ligne que nous avons marqué et construit à partir de zéro pour une entreprise de mode établie et bien connue à New York. Leur leadership travaille toujours avec nous sur des idées collaboratives pour la prochaine campagne ou stratégie que nous exécutons. Dans le cadre de leur mise en œuvre, nous avons déployé Klaviyo pour la qualité Shopify Plus. Klaviyo est une plate-forme d'automatisation du marketing bien connue avec une intégration très étroite à Shopify ainsi qu'à de nombreuses applications Shopify.

Une de mes caractéristiques préférées est leur Le test A / B à Klaviyo. Vous pouvez développer différentes versions d'un e-mail, et Klaviyo enverra un échantillon, attendra une réponse, puis enverra aux abonnés restants la version gagnante - le tout automatiquement.

Notre client s'est abonné aux e-mails de mode dans l'industrie et a continué à dire à quel point il aimait certains e-mails avec un diaporama de photos de produits. Ils ont demandé si nous pouvions le faire et j'ai accepté et construit une campagne avec un test A/B où nous avons envoyé une version avec une animation de 4 produits, et une autre avec une seule belle image statique. La campagne est pour une explosion vente de leurs robes d'automne car ils apportent de nouvelles gammes de produits.

Version A : GIF animé

animation vestimentaire 3

Version B : Image statique

RB66117 1990 LS7

Le crédit photo revient aux personnes talentueuses de Zeelum.

L'échantillonnage de la campagne est toujours en cours, mais il est assez clair que l'e-mail avec le graphique animé surpasse de loin l'image statique… d'environ un taux d'ouverture de 7%… mais un étonnant 3 fois le taux de clics (CTR) ! Je pense que le fait que le GIF animé ait mis plusieurs styles différents devant l'abonné a conduit à beaucoup plus de visiteurs.

Comment créer un GIF animé avec Photoshop

Je ne suis pas du tout un pro de Photoshop. En fait, les seules fois où j'utilise généralement Photoshop d'Adobe Creative Cloud sont de supprimer les arrière-plans et de superposer des images, comme placer une capture d'écran sur un ordinateur portable ou un appareil mobile. Cependant, j'ai fait quelques recherches en ligne et j'ai compris comment créer une animation. L'interface utilisateur pour cela n'est pas la plus facile, mais en 20 minutes et après avoir lu quelques tutoriels, j'ai réussi à l'assommer.

Préparation de nos images sources :

  • Dimensions – Les GIF animés peuvent être assez volumineux, je me suis donc assuré de définir les dimensions de mon fichier Photoshop pour qu'elles correspondent exactement à la largeur de notre modèle d'e-mail de 600 pixels de large.
  • Compression – Nos images originales étaient de haute résolution et de taille de fichier très élevée, je les ai donc redimensionnées et compressées avec Kraken aux JPG avec une taille de fichier beaucoup plus petite.
  • Transitions – Alors que vous pourriez être tenté d'ajouter une animation préadolescents (par exemple, transition en fondu) entre les images, cela ajoute beaucoup de taille à votre fichier, donc j'éviterais de le faire.

Pour créer l'animation dans Photoshop :

  1. Créer un nouveau fichier avec les dimensions qui correspondent aux dimensions exactes que vous placez dans votre modèle d'e-mail.
  2. Choisir Fenêtre > Chronologie pour activer la vue chronologique à la base de Photoshop.

Photoshop > Fenêtre > Chronologie

  1. Ajouter chacun image en tant que nouveau calque dans Photoshop.

Photoshop > Ajouter des images en tant que calques

  1. CLIQUEZ Créer un cadre Animation dans la région de la chronologie.
  2. Sur le côté droit de la région de la chronologie, sélectionnez le menu hamburger et sélectionnez Créer des cadres à partir de calques.

Photoshop > Chronologie > Créer des images à partir de calques

  1. Dans la région Chronologie, vous pouvez faites glisser les cadres dans l'ordre dans lequel vous souhaitez que les images apparaissent.
  2. Cliquez sur chaque image où il est indiqué 0 sec et sélectionnez le temps que vous souhaitez que cette image affiche. J'ai choisi 2.0 secondes par image.
  3. Dans le menu déroulant sous les cadres, sélectionnez Forever pour assurer l'animation en boucle en continu.
  4. Cliquez Bouton jouer pour prévisualiser votre animation.
  5. CLIQUEZ Fichier > Exporter > Enregistrer pour le Web (hérité).

Photoshop > Fichier > Exporter > Enregistrer pour le Web (hérité)

  1. Choisir GIF parmi les options en haut à gauche de l'écran d'exportation.
  2. Si vos images ne sont pas transparentes, décochez la case Transparence option.
  3. CLIQUEZ Enregistrer et exportez votre fichier.

photoshop exporter gif animé

C'est ça! Vous avez maintenant le GIF animé à télécharger sur votre plateforme de messagerie.

Divulgation: Placard52 est un client de mon entreprise, Highbridge. J'utilise des liens d'affiliation tout au long de cet article pour Adobe, Klaviyo, Krakenet Shopify.