Au fil des années, nous avons reçu beaucoup de questions sur la façon dont nous créons les GIFs. Nous aimons les GIFs parce qu’ils sont faciles à partager, qu’ils fonctionnent dans tous les navigateurs et que vous pouvez les faire tourner en boucle ! À la demande générale, voici un aperçu de nos deux outils de création de GIF préférés et de notre flux de travail pour chacun.
Enregistrer votre écran
Il existe quelques excellents outils d’enregistrement d’écran. Si vous êtes sur Mac, vous pouvez utiliser Quicktime, qui est entièrement gratuit. Dans cet article, nous utiliserons ScreenFlow, qui est une application payante de Telestream.
ScreenFlow est une excellente option pour l’enregistrement car il inclut un éditeur puissant qui vous donne un contrôle détaillé sur votre GIF. Lorsque vous ouvrez ScreenFlow ou que vous appuyez sur configurer l’enregistrement, vous verrez cet écran.
Configuration de l’enregistrement de ScreenFlow.
D’abord, assurez-vous que vous avez votre prototype à l’écran. Ensuite, sélectionnez l’écran que vous allez enregistrer et appuyez sur le bouton rouge pour commencer à enregistrer l’ensemble de votre écran. Dans ce tutoriel, je vais enregistrer une interaction réalisée dans Framer, donc ma fenêtre d’aperçu est réglée en plein écran. Il est possible de recadrer l’enregistrement à la taille parfaite plus tard.
Créer une boucle parfaite
Une chose que nous nous efforçons toujours d’obtenir est un GIF en boucle parfaite, et une bonne façon de l’exécuter est de s’assurer que la dernière image de votre GIF est exactement la même que la première. Cela évite les sauts, ce qui fait ensuite que le GIF s’écoule correctement lorsqu’il est lu de manière répétée.
Si votre animation contient un curseur de souris et que vous avez une main sûre, vous pouvez facilement créer une boucle parfaite en positionnant le curseur de la souris à la main. Utilisez des repères visuels pour vous rappeler où vous avez commencé et où vous devez finir.
Dans mon exemple, j’ai fait usage d’un curseur tactile animé pour obtenir le meilleur résultat directement dans le prototype réel que je vais enregistrer. Téléchargez cet exemple pour voir comment vous pouvez ajouter un curseur tactile animé à vos propres prototypes en utilisant Framer.
États actif et inactif pour le curseur tactile.
Ajouter des effets pour pimenter le tout
Maintenant que vous avez fait votre enregistrement dans ScreenFlow, vous pouvez vouloir l’ajuster pour vous concentrer sur ce que vous voulez mettre en valeur dans le GIF. Pour ce faire, allez dans Fichier > Paramètres du document. Dans ce tutoriel, nous allons partager sur Dribbble on Web, donc 800×600 est la taille optimale. Vous remarquerez que les dimensions de l’enregistrement réalisé précédemment sont trop grandes. Pour jouer avec l’échelle de l’enregistrement, sélectionnez le clip et cliquez en haut à droite de ScreenFlow.
Mettez votre clip à l’échelle du document en utilisant le curseur d’échelle.
Une fois que votre enregistrement est en place, assurez-vous de couper le début et la fin en faisant glisser le clip (rappelez-vous, nous voulons créer la boucle parfaite !).
À ce stade, votre vidéo est prête à être exportée telle quelle, bien que nous vous recommandions d’ajouter quelques touches de finition. ScreenFlow vous permet d’ajouter un effet de zoom fluide pour mettre en évidence des détails spécifiques dans votre vidéo. Pour ce faire, positionnez le scrubber vidéo sur le point où vous souhaitez ajouter un effet de zoom. Ensuite, cliquez sur le bouton d’action vidéo dans le coin supérieur droit de Screenflow et cliquez sur + Action. Sélectionnez un bel état de début et de fin pour l’action en utilisant les contrôles d’échelle que nous avons utilisés précédemment. Assurez-vous de répéter ces étapes pour l’effet de zoom arrière.
Définissez des animations comme le zoom en ajoutant des actions vidéo.
Pro-tip : Lorsque vous partagez un GIF sur des sites comme Dribbble, gardez à l’esprit que la première image de votre GIF sera affichée comme vignette du post, alors assurez-vous d’utiliser l’image la plus intéressante visuellement.
Exportation depuis ScreenFlow
Maintenant que notre clip est poli et perfectionné, il est temps d’exporter. Screenflow offre un préréglage pour exporter le clip directement en tant que GIF, bien que nous suggérons d’éviter cette voie parce que votre GIF finira comme un gros fichier fortement compressé.
A la place, nous allons exporter un fichier .mov sans perte. Naviguez vers Fichier > Exportation > Préréglage > Sans perte – ProRes avec Alpha.
L’activation du flou de mouvement peut souvent rendre votre GIF encore plus lisse, surtout avec l’effet de zoom que nous avons appliqué.
Flou vs. Pas de flou
Optimisation avec Claquette
Claquette tout comme Screenflow offre la possibilité d’enregistrer tout ou partie de votre bureau et de découper, couper et exporter ces enregistrements au format GIF ou vidéo. Vous pouvez acheter Claquette dans le Mac App Store pour 9,99 $
Le plus grand avantage de Claquette par rapport à Screenflow est qu’il vous donne un contrôle granulaire sur la qualité de votre GIF et donc une meilleure taille de fichier avec une compression étonnante. Cela vous permettra de créer des GIF de haute qualité qui sont une taille de fichier optimale.
Comme nous l’avons fait dans Screenflow, sélectionnez l’affichage que vous allez enregistrer et appuyez sur enregistrer dans Claquette. Lisez la vidéo que vous venez d’exporter dans QuickTime et appuyez sur CMD + 1 pour lire la vidéo à sa taille réelle.
Configuration de l’enregistrement dans Claquette.
Lorsque la lecture du clip est terminée, arrêtez l’enregistrement pour commencer à le recadrer et à le découper. Déplacez le curseur à gauche et à droite du clip vers le début et la fin du clip. En ce qui concerne la taille de recadrage, utilisez la taille que vous avez également choisie pour votre clip dans Screenflow : 800 x 600. Déplacez la zone de recadrage au centre x:0 y:0 et appuyez sur recadrer.
Recadrer et recadrer les clips dans Claquette.
Trouver le bon équilibre
Voici trois qualités de GIF qui ont une grande influence sur la taille du fichier :
- Montant de couleurs
- Montant de mouvement
- Durée
Dans la plupart des cas, si votre GIF ne contient qu’une seule de ces qualités, vous pouvez augmenter la qualité. Assurez-vous de définir la largeur et la hauteur à 100% et de boucler indéfiniment. Lorsque votre GIF contient beaucoup de couleurs, je recommande fortement de garder les couleurs à 256 et de réduire d’autres aspects comme le FPS ou la qualité de quantification.
Paramètres d’exportation de Claquette.
Il n’y a pas vraiment de Saint Graal pour ces paramètres, donc lors du partage sur Dribbble (max 8mb), nous essayons toujours de les monter au maximum, puis d’exporter et de voir avec quoi nous devons travailler. Répétez ce processus d’exportation jusqu’à ce que vous trouviez un équilibre taille/qualité qui corresponde à vos besoins.
Pro-tip : Même si Dribbble indique que la limite de taille est de 8mb, elle est en fait de 8,3mb. Lorsque vous travaillez avec de gros gifs colorés, vous comprendrez rapidement pourquoi 0,3mb compte.
Maintenant que vous avez lu ce guide, nous espérons qu’il vous aidera à transformer vos animations Framer en les meilleurs GIF possibles pour présenter votre travail sur votre portfolio, Dribbble et ailleurs. Nous sommes impatients de voir ce que vous créez, alors n’oubliez pas de taguer votre post avec #MadeWithFramer pour avoir une chance de figurer dans notre newsletter hebdomadaire. Bonne création !
Voyez le résultat final sur Dribbble
.