Un gif, c'est un format d'image. Cette image peut être composée d'une ou plusieurs images, appelées cadres. Si un gif n'a qu'un seul cadre, il n'est pas animé. S'il en a plusieurs, les cadres s'affichent successivement : c'est un gif animé.
Les gif, en plus de pouvoir être animés, peuvent aussi être transparents et ont aussi l'avantage d'être en général assez légers. Enfin, un gif ne peut pas avoir plus de 256 couleurs.
Quand je fais un gif, j'utilise Gif Movie Gear 3 et Adobe Photoshop Elements 2.0. Ce tuto est donc construit autour de ces deux logiciels, je vous conseille donc de vous les procurer (ou bien leurs équivalents, c'est pas grave si vous avez GMG 4 ou une autre version de toshop). Je dois aussi préciser que c'est un tuto sur les gif et pas sur photoshop : les manips à faire sur toshop sont très basiques (en gros vous devez savoir ce qu'est un calque, comment bouger un calque, comment utiliser la gomme magique, enfin rien de bien méchant quoi ¬¬).
Enfin, sachez que mes méthodes ne sont pas LES méthodes, vous pouvez (c'est même recommandé) prendre vos propres habitudes à partir de ce que je vais vous montrer !
Au fait, essayez plutôt de regarder ce tuto avec firefox. Je ne suis pas un fervent défenseur de ce navigateur mais IE ne m'affiche pas très bien les gif ^^'.
Commençons par un cas fort basique : le perso fait des mouvements mais ne se déplace pas. Pour cet exemple je vais détailler chaque opération, ça ira plus vite aux prochains exemples ^^.
Créons un Sonic en déséquilibre ! \o/
1) Chopper des sprites
On part de ça : 
2) Isoler chaque position
 Ouvrez votre image contenant les sprites avec photoshop
Faites disparaître la couleur de fond avec la gomme magique (tolérance : 0, pas de lissage, décocher "contiguë")
Faites de chaque position de Sonic un calque bien distinct (donnez à chaque calque un nom précis, c'est bien utile)
Créez un calque de fond avec une couleur unie dedans (évitez d'utiliser une couleur présente dans les sprites)
3) Superposer les sprites
Pour plus de précision, j'vous conseille de déplacer le sprite avec les flèches de votre clavier, ça permet de faire du pixel par pixel.
4) Sauvegarder les images
Voilà le principe : vous allez sauvegarder dans un dossier de votre choix une image avec la position 1, puis une image avec la position 2, etc.
Masquez les calques "sonic2" et "sonic3" : seuls les calques "sonic1" et "fond" doivent être affichés
Fichier>enregistrer sous>votre dossier
Appelez par exemple cette image "01" et sauvez la en .psd (vous pouvez aussi la sauver en .bmp si vous voulez, mais surtout pas en .jpg)
Masquez ensuite le calque "sonic1" et affichez le calque "sonic2", puis enregistrez cette nouvelle image sous le nom de "02"
pareil pour la troisième position
5) Ouvrir les images avec Gif Movie Gear
Lancez GMG
Fichier>ouvrir>votre dossier
Sélectionnez à la fois 1, 2 et 3.psd, puis cliquez sur Ouvrir
Cochez "Un cadre composite" puis cliquez sur OK (il faut faire ça pour chaque .psd que vous ouvrez avec GMG, vous n'aurez pas cette étape si vous ouvrez par exemple des .bmp)
6) Manipuler les cadres
Dans un .gif, un cadre (frame en anglais) est une étape de votre animation : ici, il y a donc 3 cadres. Ces trois cadres s'affichent successivement, chacun pendant une durée que vous pouvez choisir. Voilà quelques actions de bases à maîtriser :
sélectionner plusieurs cadres à la fois (laissez appuyer sur control et cliquez sur chacun des cadres)
copier et coller un ou plusieurs cadres à la fois
changer l'ordre des cadres (là encore, il est possible de déplacer plusieurs cadres à la fois) avec un simple cliquer glisser
7) Arranger le gif
Maintenant que tous vos cadres sont dans GMG, assurez-vous qu'ils sont dans le bon ordre. Dans ce cas-là, c'est pas bien compliqué, les cadres doivent se suivre dans cet ordre là : 1, 2 ,3. Une fois qu'ils sont en ordre, lancez l'animation (la touche "lecture" en noir) : ceci ouvre une petite fenêtre dans laquelle vous voyez votre animation. Vous pouvez y zoomer, faire défiler l'animation image par image, et régler la durée d'affichage de chaque cadre. Et surtout, vous pouvez y vérifiez si votre gif ressemble à quelque chose \o/
régler la durée d'affichage des cadres
Sélectionnez un cadre, et repérez cette case-ci :
Le nombre qu'on y voit est la durée en 1/100 de secondes pendant laquelle est affiché le cadre sélectionné. Vous pouvez faire varier cette durée et celle des autres cadres, et consulter immédiatement le résultat de vos modifications dans l'aperçu d'animation.
Rogner les cadres
Il peut être utile de rogner votre animation pour qu'elle prenne moins de place. Pour ça : Animation>Rogner. N'hésitez pas à zoomer pour être plus précis, et faites gaffe à ne pas rogner trop loin !
Optimiser le gif
Si vous comptez mettre votre gif sur internet, il est important d'en réduire la taille (celle en octets, pas celle en pixels). Pour ça, faites tout simplement Animation>Optimiser, cochez toutes les options concernant la réduction de cadres et cliquez sur OK. Pour un gif aussi simple, la réduction n'est bien sûr pas énorme. N'oubliez pas que vous pouvez à tout moment annuler l'optimisation. Si vous comptez mettre de la transparence, il faut optimiser après l'ajout de transparence.
Mettre de la transparence
Si vous souhaitez remplacer une des couleurs du gif par de la transparence (par exemple le fond bleu) allez dans Cadre>Propriétés globales et cochez transparence, puis choisissez la couleur à rendre transparente (ici, votre joli fond bleu).
Il est possible que l'ajout de transparence donne parfois ce genre de résultat :
Dans ce cas, allez dans Cadre>Propriétés globales et, pour la dernière option, choisissez "Couleur d'arrière plan".
Voilà, votre gif est terminé et devrait ressembler à ça :
| | 1  |  | |
