Note utilisateur: 4 / 5

Etoiles activesEtoiles activesEtoiles activesEtoiles activesEtoiles inactives
 

alt

 

Vous en avez déjà forcément croisé sur le Net. Les sites en usent (et parfois, en abusent) car ils attirent l’œil, donnent un dynamisme à la page sur laquelle ils se trouvent (voire un sévère mal de tête s'ils sont en trop grand nombre) : je veux parler des GIFS animés.

Nous allons voir ce qu'est exactement un GIF animé puis nous verrons comment créer nos propres GIFS. Vous n'aurez ensuite plus que votre imagination et votre créativité comme limites...

 

 

Qu'est-ce qu'un GIF animé ?

Le GIF animé tient son nom du format dans lequel il est est enregistré : le format .gif, inventé par la firme Compuserve.

GIF signifie Graphic Interchangeable Format

Il reprend en fait une technique connue de tous : celle du dessin animé, qui repose sur la persistance de la vision dont est pourvu l’œil humain. Un GIF animé n'est donc ni plus ni moins qu'un petit dessin animé.

À noter toutefois qu'une image au format .gif n'est pas forcément animée. Il existe en effet des images au format .gif, qui sont fixes et dépourvues d'animations, mais qui utilisent le format .gif comme une simple technique de compression (au même titre que le format .jpeg ou .png).

Cette image, par exemple, est au format .gif, mais elle n'est pas animée :

alt

 

 

La composition des GIFS animés

Comme pour un dessin animé, les GIFS animés sont composés de plusieurs images, qui, compilées, forment une animation.

Chaque image différente qui composte un GIF animé s'appelle une frame.

Un GIF animé comporte donc au minimum 2 frames différentes (sinon, il s'agit évidemment d'un GIF fixe)

Plus l'animation est complexe et détaillée, et plus il y a de frames différentes qui entrent dans sa composition.

 

Mais voyez plutôt :

Un simple GIF animé comme celui-ci altn'est composé que de 4 frames différentes, qui suffisent à lui donner son mouvement :

alt

 

Un GIF animé plus complexe, comme celui-ci altest composé de 36 frames différentes :

alt

 

Plus les frames détaillent le mouvement de manière progressive, plus il faudra de frames différentes pour créer une animation.
Utiliser de nombreuses frames rend un GIF animé fluide et de qualité.

Mais il faut également savoir que plus un GIF animé utilise de frames différentes, plus il est volumineux :

alt pèse 3 kilos octets

alt pèse 48 kilos octets

 

 

Quels logiciels faut-il pour pouvoir créer des GIFS animés ?

Un logiciel de dessin ou de retouche photo

Vous en aurez besoin pour dessiner vos images qui composeront l'animation. Vous pouvez également utiliser des photos provenant d'un appareil numérique, d'une webcam, ou même des photos numérisées, mais il y fort à parier qu'il vous faudra néanmoins un logiciel de retouche afin de les ajuster, les recadrer, etc..

Il existe de très nombreux logiciels de ce type (PhotoShop, PaintShop, Corel), mais vous pouvez tout à fait commencer avec le logiciel basique Paint, fournit dans toutes les versions de Windows.

Citons également le puissant et gratuit Paint.net, téléchargeable ici.

 

Un programme de création de gif (également appellé un compilateur GIF)

Ensuite il vous faut un logiciel capable de compiler les images afin de créer un GIF composé de frames.
Il en existe là aussi énormément, des basiques et des très complets, des gratuits et des hors de prix, etc...

Dans le tutoriel, je vais utiliser Animation Shop que je trouve excellent. Vous pouvez le télécharger en cliquant sur le bouton ci-dessous :

alt

altPour ceux qui avaient acheté le logiciel et qui ont perdu leur licence, la société Jasc Sofware n'existant plus, vous trouverez à l'intérieur de l'archive un Crack permettant de déverrouiller le logiciel.

Voici également d'autres compilateurs GIF :

 

Une pointe de talent et de créativité

Comme tout dessinateur de dessins animés, il vous faudra un peu de talent en dessin (si vous souhaiter dessiner les frames), quelques bonnes idées et un peu d'originalité si vous souhaitez créer de superbes GIFS inédits. Mais je vous fait confiance sur ce point ! :o)

 

 

Apprenons maintenant à créer un GIF animé

Maintenant que vous connaissez les bases de fonctionnement, nous allons créer 2 GIFS animés : un à base de dessins, et l'autre à base de photos.

Commençons par un petit GIF très simple, qui représente une imprimante en train d'imprimer une page :

alt

 

Je commence par dessiner les frames qui vont composer l'animation

Le mieux, est de les nommer par un numéro, dans l'ordre de l'animation, (001, 002, 003...) afin qu'elles soient classées automatiquement lorsque nous les compilerons tout à l'heure.

Voici donc mes 4 images qui vont composer mon GIF animé :

alt

alt Lorsque vous créez les images, prenez garde à ce qu'elles fassent toutes les mêmes dimensions (hauteur/largeur), au pixel près : sinon, vous aurez des images qui "dansent" pendant l'animation et le résultat sera très médiocre.

 

Je vais ensuite compiler les images afin de créer l'animation. Lancez Animation Shop

alt

 

Allez ensuite dans le menu "Fichier", puis cliquez sur "Assistant d'animation"

alt

 

Nos images faisant toutes les mêmes dimensions, sélectionnez la première option "Même taille que la première image", puis, cliquez sur "Suivant"

alt

 

Vous pouvez ensuite choisir la couleur de fond de l'animation. Ce réglage n'a d'importance que si vous travaillez à partir d'images pourvues de transparence (format .png). Dans mon cas, je souhaite un fond transparent. Je peux donc laisser le choix par défaut. Cliquez sur "Suivant"

alt

 

Ces fonctions ne seront pas utilisées, puisque nous avons pris le soin de créer des images ayant toutes les mêmes dimensions. Cliquez sur "Suivant"

alt

 

Vous pouvez ici faire en sorte que l'animation soit lue en boucle ou qu'elle soit lue un certain nombre de fois. Vous pouvez également régler la durée d'affichage de chaque frame, en centième de secondes. Laissez la valeur par défaut, nous pourrons la modifier plus tard. Cliquez sur "Suivant"

alt

 

Cliquez sur "Ajouter l'image", et allez cherchez vos frames que vous avez créées tout à l'heure. Vous pouvez en sélectionner plusieurs à la fois, en maintenant la touche "Alt Gr" de votre clavier...

alt

 

Voyez-vous l'intérêt de numéroter au préalable les images dans l'ordre ? :o)
Si vos images ne sont pas dans le bon ordre, utilisez les boutons "Monter" et "Descendre" pour corriger.
Cliquez sur "Suivant" lorsque vous avez terminé.

alt

 

L'importation est finie : cliquez sur "Terminer"

alt

 

Voici mon animation.
En bas de chaque frame, figure le numéro de l'image, ainsi que sa durée d'apparition (D : 100), exprimée en centièmes de secondes.
altSi vous vous rendre compte qu'une image n'est pas à la bonne place, vous pouvez la faire glisser afin de la déplacer où vous le souhaitez.

alt

 

Testez votre animation en cliquant sur le bouton "Visualiser l'animation"

alt
alt

 

Si vous souhaitez modifier la durée d'apparition d'une ou plusieurs images, sélectionnez les images souhaitées, puis faites un clic droit dessus et choisissez "Propriétés de l'image"

alt

 

Indiquez ensuite une nouvelle durée d'apparition, puis validez par "Ok"

alt

 

Testez à nouveau votre animation pour voir si elle vous convient...

alt
alt

 

Une fois que le résultat vous plait, cliquez sur "Ficher" puis sur "Enregistrer sous"

alt

 

Donnez un petit nom à votre GIF, puis cliquez sur "Enregistrer"

alt

 

Vous pouvez ensuite régler les paramètres de qualité de l'animation en déplaçant le curseur situé à gauche.
Plus la qualité de l'image sera élevée, plus le GIF sera volumineux. A l'inverse,plus la qualité sera basse et plus le GIF sera léger (et laid :o) )

altNe diminuez la qualité de l'animation que si votre GIF est composé de très nombreuses frames !

Cliquez ensuite sur "Suivant"

alt

 

Animation Shop a terminé l'optimisation du GIF, vous pouvez cliquer sur "Suivant"

alt

 

Le programme vous présente à gauche la version originale, et à droite la version optimisée. Si celle-ci est trop dégradée à votre goût, vous pouvenez revenir en arrière afin de modifier la qualité de l'animation. Si le résultat vous convient, cliquez sur "Suivant"

alt

 

Quelques statistiques sur le fichier (qui seront utiles aux Webmasters) sont communiquées. Cliquez sur "Terminer"

alt

 

Et voilà, vous avez créé votre premier GIF animé :o)

alt

 

 

Un GIF à base de photos

Voici un second exemple de GIF animé, que je vais réaliser à partir de photos numériques.

J'ai pris en photo une fleur d'orchidée, à intervalles régulières :

planche

Je vais en faire un petit GIF animé :o)

alt

Vous pouvez voir sa création, en vidéo, en cliquant sur le bouton ci-dessous :

video

 

alt

 

1000 caractères restants