Étape par étape : créer des GIF incroyables pour annoncer les nouvelles fonctionnalités

Les GIF ne sont plus réservés aux chats ! Chez Baremetrics, nous utilisons les GIF pour annoncer et expliquer les nouvelles fonctionnalités sur Twitter et dans Intercom. Suivez-moi et je vous montrerai, du début à la fin, comment les créer pour votre propre produit.

Ce n'est pas un nouveau domaine – d'autres entreprises comme Slack et des Invision créent d'excellents GIF depuis un certain temps et m'ont servi d'inspiration pour me lancer dans le jeu.

Pourquoi les GIF ?

Alors, pourquoi utiliser des GIF pour annoncer les nouvelles fonctionnalités ? Simple – ils ont une barrière à l'entrée faible. Sur Twitter, regarder un GIF ne demande qu'un clic ou un appui.

Dans Intercom, ils se lisent automatiquement, ce qui est une excellente façon d'inciter un utilisateur à améliorer votre message dans l'application.

Nous constatons que l'inclusion d'un GIF nous donne un engagement plus élevé sur Twitter et Intercom, ce qui en fait un excellent moyen d'attirer l'attention sur les nouvelles fonctionnalités et de mieux engager vos utilisateurs. Hourra !

D'accord, je suis convaincu. Et maintenant ?!

Pour commencer, vous avez besoin de trois choses : Screenflow, Photoshop et une fonctionnalité nouvelle ou existante à mettre en avant.

Pour vous montrer mon processus, je vais vous guider dans la création d'une annonce de fonctionnalité de compte GIF ! Nous sommes sur le point de lancer une fonctionnalité très demandée dans Baremetrics : Cohortes de clients (que vous pouvez voir en action dans notre démo). Allons-y et je vous montrerai le processus que j'utilise et certains des effets que j'emploie pour créer un super GIF !

Se préparer à créer votre GIF

Il y a deux choses fondamentales que vous devez faire pour vous préparer à créer un super GIF.

Supprimer les éléments inutiles

Utilisez les outils de développement Chrome pour supprimer tous les éléments d'interface utilisateur inutiles afin de mieux diriger l'attention du spectateur vers où elle doit être. C'est comme ça que j'ai créé le GIF du sélecteur de date où le calendrier semble flotter dans l'espace sans les éléments d'interface utilisateur environnants.

Capturer la vidéo

Ensuite : capturer la vidéo ! C'est à cela que vous avez besoin de Screenflow.

Respectez les exigences des GIF !

Je sais, je sais… vous voulez vous lancer dans la partie édition amusante. Mais avant cela, vous devez être conscient de plusieurs limitations du format GIF.

J'ai appris beaucoup de leçons de la manière difficile, en passant des heures à éditer des vidéos géniales, seulement pour découvrir qu'elles ne sont pas si géniales quand j'ai essayé de les compresser dans un fichier GIF de 5 Mo. Oui, Twitter a une limite de 5 Mo pour les GIF. Donc ces étapes sont importantes.

• Utilisez aussi peu de couleurs que possible. Pour les considérations de taille de fichier, votre GIF n'aura que 256 couleurs avec lesquelles travailler. L'isolement de l'élément d'interface utilisateur que vous souhaitez mettre en avant à l'étape précédente s'avère utile ici, car vous êtes susceptible de limiter le nombre de couleurs dans le GIF.
• Évitez les transitions qui altèrent les couleurs. Les transitions qui font s'estomper les éléments le font en changeant la couleur. Lorsque vous faites apparaître progressivement quelque chose qui est « bleu », ce seront en réalité plusieurs nuances de bleu différentes.
• Restez sous 10 secondes. Il n'y a pas de règle établie ici, mais il devient difficile de rester sous la limite de 5 Mo pour Twitter une fois que vous dépassez 10 secondes.

Temps d'édition !

D'accord ! Il est temps de prendre l'enregistrement brut de l'écran et de le rendre joli. Je vais vous montrer certains de mes effets préférés que je fais dans Screenflow.

Ceux-ci sont créés en utilisant les actions vidéo. Pensez que vous êtes un cinéaste avec une caméra vidéo. Vous définissez où vous voulez que la caméra commence le mouvement et où vous la voulez quand elle se termine. Cela vous permet de parcourir l'écran ou de zoomer rapidement sur quelque chose sur lequel vous aimeriez diriger l'attention du spectateur.

Zoom Zoom Zoom

Le pain et le beurre des screencasts : le zoom. Effectuez un zoom avant pour mettre en évidence quelque chose en particulier et le rendre plus visible à l'utilisateur. J'aime que mes zooms soient rapides et dynamiques et je les règle généralement sur une durée de 0,3 seconde.

La révélation

Imaginez Vanna White révélant le Wheel of Fortune tableau. Comme ceci : 💁. C'est essentiellement ce que vous faites ici. Balayez tout ce que vous mettez en évidence. N'hésitez pas à faire des bruits « ooooh » et « ahhh » pendant que vous le faites.

Perspective Déformée

Utilisez cette fonction avec parcimonie. C'est un outil parmi d'autres et j'ai remarqué que les gens ont tendance à en abuser un peu. Vous voulez attirer l'attention sur votre contenu, pas donner au spectateur l'impression que sa tête est de travers dans un Palais des Miroirs.

Zoom sur Texte

Maintenant, on commence à faire du style. C'est un moyen amusant d'ajouter de la brillance visuelle sans ajouter de couleurs supplémentaires (et donc sans augmenter la taille du fichier).

Zoom vers Transition Couleur

Plus de brillance visuelle amusante !

La grande révélation…

Et voici le produit final, qui utilise tous les effets que j'ai détaillés ci-dessus.

Conversion en GIF

L'étape suivante consiste à convertir votre fichier vidéo en GIF. J'utilise la méthode Photoshop décrite par Andy Orsow sur Invision qui a rédigé un excellent article sur le sujet, ainsi que d'autres conseils pour créer le GIF lui-même. Je vous recommande de le consulter également.

Importer dans les Calques Vidéo

Allez dans le Fichier Menu et choisissez Importer > Images vidéo dans les calques.

Sélectionnez Du début à la fin dans la zone Plage à importer et assurez-vous que «Créer une animation d'image» est coché. Cliquez sur OK.

Exportez ce truc !

L'étape suivante consiste à aller dans le Fichier Menu à nouveau et choisissez Exporter > Enregistrer pour le web. Dans les versions plus récentes de Photoshop, il y aura Héritage entre parenthèses.

Attention ! Photoshop va devenir terriblement lent. Je suppose que c'est pour cela que cette fonction est maintenant considérée comme « Héritage ».

Il y a certains paramètres avec lesquels vous pouvez jouer pour ajuster la taille du fichier : Taille de l'Image et des Couleurs étant mes principaux incontournables.

Pour Taille de l'Image Twitter redimensionne horizontalement et recadre verticalement tous les aperçus d'image à une résolution de 440×220, il n'y a donc aucun intérêt à créer un GIF beaucoup plus grand que cela. Dans ce cas, j'ai choisi une largeur de 500 pixels pour que le GIF soit un peu plus grand lorsqu'il est utilisé en dehors de Twitter.

Si vous avez pris soin de garder la durée de votre clip très courte, vous devriez pouvoir régler Couleur au maximum de 256. La réduire à 128 est une option si votre GIF est une option, mais cela entraînera un GIF de qualité beaucoup inférieure.

À mesure que vous apportez des modifications aux paramètres d'exportation, vous pouvez voir la taille de votre GIF final dans le coin inférieur gauche de la fenêtre. Seulement 2,2 Mo ? Sympa !

Quand vous êtes prêt, cliquez sur le grand bouton bleu Enregistrer .

Conseils et Ressources Supplémentaires

Les GIFs sont un outil fantastique, mais ce ne sont pas toujours le meilleur choix. Si vous incorporez, par exemple, de courts extraits vidéo sur votre site Web ou un article de blog, votre meilleure option est quelque chose comme une vidéo Wistia. Si j'avais utilisé des GIFs pour cet article, cela aurait fait environ 50 Mo, ce qui n'est pas du tout réalisable.

Voici quelques autres ressources et sources d'inspiration à consulter.

• Documentation et tutoriels Screenflow
• 7 conseils pour concevoir des GIFs animés impressionnants
• Tweet GIF du sélecteur de date
• Tweet GIF de répartition des revenus
• Tweet GIF des intervalles de données
• Tweet GIF des plans d'archivage
• Tweet GIF des annotations