Créer une animation gif fluide

Est-ce que cela vous arrive parfois d’avoir une frustration parce que vous aimeriez avoir ces belles images d’introduction de site sur votre accueil, mais vous êtes perplexe parce que vous trouvez que tous ces apparats maintenant omniprésents alourdissent la vitesse de téléchargement des sites? Vous avez raison!

Vous avez aussi essayé la bonne vieille animation gif par bonne conscience ou par nécessité, mais malgré tout vous n’arrivez pas à produire un joli gif animé fluide d’un poids décent.

Voici donc une technique pour faire des animations gif fluides de poids acceptable.

1. LA BASE DE TOUT

Le secret est de débuter par un autre logiciel et de s’y créer une animation. Soit par une vidéo dans After effects ou dans mon cas, puisque je n’ai pas ce logiciel, dans Keynote ou Power Point par le biais des animations d’éléments.

Vous devez cliquer sur Animer, et ensuite Ajouter un effet sur un élément déjà inséré dans votre document qui lui a préalablement été créé au format final souhaité de votre animation gif.

Animation dans Keynote

Animation dans Keynote

2. EXPORTER EN VIDÉO

Par la suite, vous devez exporter votre animation en vidéo, que ce soit à partir d’After Effects ou de Keynote. Pour Keynote, c’est l’option Quick Time qu’il faut choisir. Il n’est pas nécessaire de changer la configuration par défaut.

Exportation en Quick Time

Exportation en Quick Time

3. IMPORTER DANS  PHOTOSHOP

Après avoir exporté votre animation en vidéo, vous devez l’importer dans Photoshop via Fichier/ Importation/Images vidéos dans des calques. Le processus peut être long. Je vous conseille aussi de faire du ménage dans les images du début et de la fin de l’animation. Ce sont une sorte d’images tampons qui ne font que rajouter du poids.

Importation d'images vidéos

Importation d’images vidéos

4. TRUCS ET ASTUCES

Les couleurs

Limitez-vous dans vos couleurs. Cela jouera sur le poids de votre fichier et vous permettra de réaliser des animations plus longues et évoluées.

Utilisez le Motion Blur

Ceci s’applique lorsque vous travaillez avec After Effect (cette fonction n’est pas dans Keynote) et donnera un rendu plus fluide et une apparence plus professionnelle à votre animation.

Soyez paresseux!

Il est facile de se laisser emporter et d’ajouter beaucoup de flafla. Allez-y au plus simple mais élégamment.

5. EXPORTER LE GIF

Avant d’essayer d’améliorer quoi que ce soit, pourquoi ne pas l’exporter immédiatement et voir la taille de fichier qui en résultera. Si le fichier est au-dessus de 1mo, c’est beaucoup trop. Je dirais même que l’idéal se situe sous les 500k.

Voici des trucs pour vous aider à réduire le poids.

Éliminer des images

Si vous regardez de près, comme j’ai mentionné précédemment, chaque pause dans votre vidéo, au début, à la fin ou si vous en avez insérée au milieu, sera traduite par plusieurs images de 0,3 sec par exemple. Il est facile d’effacer la répétition de ces images et de n’en garder qu’une seule et de lui mettre 1 sec. comme délai.

Changer la configuration de l’exportation

Si les trucs ci-dessus ne fonctionnent pas, essayez de ré-importer votre vidéo dans des calques, mais cette fois, en cochant « Limiter à toutes les 2 images ».

Limiter à toutes les 2 images

Limiter à toutes les 2 images

Essayer d’ajuster les couleurs et la perte

Sous le menu « Couleurs », réduisez le plus possible tout en gardant un esthétisme dans votre image. Je vous avoue, je ne connais pas le vrai rôle du paramètre « Perte » , mais le baisser permet aussi de jouer sur le poids sans affecter la qualité.

Couleurs enregistrer pour le web

Couleurs enregistrer pour le web

Se résigner !

Ce n’est pas sorcier, si votre animation a plus de 150 images, il sera très difficile de réduire son poids pour un poids convenable. Retournez à la table à dessin et recommencez votre animation de départ en essayant d’appliquer les astuces que je vous ai mentionnées plus haut.

Finalement, je termine en beauté en vous présentant un site web  dont les jolies animations fluides sont, vous l’aurez deviné, des gifs animés!

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s