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

Nous passons un moment formidable à travailler avec le client clé Closet52, un magasin de vêtements en ligne que nous avons créé 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 Shopify Plus. Klaviyo est une plate-forme d'automatisation marketing bien connue avec une intégration très étroite à Shopify ainsi qu'à de nombreuses applications Shopify. 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'abonne aux e-mails de mode dans l'industrie et a continué à remarquez à quel point ils ont aimé 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 vente en rafale de leurs robes d'automne alors qu'ils proposent de nouvelles gammes de produits.

Version A : GIF animé

Version B : image statique

Le crédit photo revient au talentueux les gens 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 incroyable 3 fois le taux de clics (CTR) ! Je pense que le fait que le GIF animé place 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 pour supprimer des arrière-plans et 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 simple, mais en 20 minutes et après avoir lu quelques tutoriels, j'ai pu l'assommer. grand, donc je me suis 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. avec Kraken aux JPG avec une taille de fichier beaucoup plus petite.

Pour créer l'animation dans Photoshop :

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

3. Ajoutez chaque image en tant que nouveau calque dans Photoshop.

4. Cliquez sur Créer une animation d'imagetion dans la région de la chronologie.
5. Sur le côté droit de la région de la chronologie, sélectionnez le menu hamburger et sélectionnez Créer des images à partir de calques .

6. Dans la région Chronologie, vous pouvez faire glisser les cadres dans l'ordre dans lequel vous souhaitez que les images apparaissent.
7. Cliquez sur chaque cadre où il se trouve. dit 0 s ec, et sélectionnez l'heure à laquelle vous souhaitez que cette image s'affiche. J'ai choisi 2,0 secondes par image.
8. Dans le menu déroulant sous les images, sélectionnez Pour toujours pour garantir que l'animation tourne en continu.
9. Cliquez sur le bouton de lecture pour prévisualiser votre animation.
10. Cliquez sur Fichier > Exporter > Enregistrer pour le Web (Legacy).

11. Sélectionnez GIF dans les options en haut à gauche de l'écran d'exportation.[19659020]Si vos images ne sont pas transparentes, décochez la case Tr option ansparency.
12. Cliquez sur Enregistrer et exportez votre fichier.

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

Divulgation : Closet52 est un client de mon entreprise, Highbridge. J'utilise des liens d'affiliation tout au long de cet article pour AdobeKlaviyoKraken et Shopify.