Partenaire

Sonic Wikia Francais

 


 


Ressources

Les .gif

Publié par ZEbluehedgehog le 20 août 2006

Voilà un tutorial vous montrant les étapes de fabrication de différents gifs, allant de cas très simples à des cas plus compliqués.


C’est quoi un gif ?

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.

Avant de commencer

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 ^^’.

Un cas simple

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)

JPEG - 100.5 ko

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.

PNG - 6 ko

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 :

JPEG - 50.9 ko

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 :


Personnage en mouvement

Ca se complique : non seulement le perso prend différentes positions, mais en plus vous devez le faire avancer !

On part de ça :

1) Ouvrez les sprites dans photoshop et faites de chaque position de Sonic un cadre, puis superposez parfaitement les 4 sprites.

JPEG - 45.4 ko

2) Agrandir la zone de travail.

N’hésitez pas à faire trop grand, il est plus simple de rogner un gif que d’augmenter ses dimensions.

JPEG - 63.6 ko

3) Eloigner les sprites les uns des autres.

Il va falloir que chaque sprite soit éloigné du sprite suivant par un certain nombre de pixels. Pour ce gif j’en ai choisi 15, après c’est à vous de choisir en fonction de la situation. Ainsi, il y aura 15 pixels entre le sprite 1 et le sprite 2, 15 pixels entre le sprite 2 et le sprite 3, etc...

Personnellement pour aller plus vite, je lie entre eux les sprites 2, 3 et 4 et je les déplace ensemble de 15 pixels (pour ça j’appuie 15 fois sur la flèche droite de mon clavier, puis je répète l’opération seulement avec les sprites 3 et 4, puis seulement avec le sprite 4). A vous de trouver la méthode avec laquelle vous êtes le plus à l’aise, l’essentiel étant d’arriver à ça :

JPEG - 64.4 ko

4) Sauver les images dans un dossier.

Voir étape 4) du premier cas.

5) Ouvrir les 4 images avec GMG

Rendez tout de suite le fond bleu transparent. C’est pas essentiel mais ça rendra les choses un peu plus claires.

Allez dans Cadre>Propriétés globales et choisissez "couleur d’arrière-plan"

6) Ouvrir un autre GMG (on va appeler cette fenêtre "fenêtre 2")

Copiez les 4 cadres de la fenêtre 1 (n’oubliez pas que vous pouvez copier et coller plusieurs cadres à la fois) et collez-les dans la fenêtre 2

7) C’est maintenant que les choses se compliquent un peu ^^.
Pour que Sonic se déplace vers la droite, il faut répéter un peu plus à droite son petit déplacement comprenant 4 positions (les sprites 1, 2, 3 et 4). Bien sûr, on pourrait décaler sur photoshop les 4 sprites, sauver les images, les mettre dans GMG, redécaler les 4 sprites, etc... mais c’est vite lourd .-.
C’est là qu’intervient une petite astuce qui va vous faire gagner beaucoup de temps \o/

Rappelez-vous, on a choisi une distance de 15 pixels entre chaque sprite. Comme il y a 4 sprites, en un cycle (c’est à dire quand les 4 sprites se succèdent) Sonic se déplace de 4×15=60 pixels. Le décalage à faire est donc de 60 pixels. Au lieu d’utiliser Photoshop pour faire le décalage, on peut utiliser directement GMG !

Dans la fenêtre 2, allez dans Cadre>Propriétés globales et entrez 6O dans Décalage X : le contenu des 4 cadres se déplace de 60 pixels vers la droite. Il ne vous reste plus qu’à copier ces quatre cadres et à les coller dans la fenêtre 1 à la suite des 4 premiers cadres. Pour la suite, vous n’avez qu’à répéter cette opération en augmentant à chaque fois la valeur du Décalage X de 60 jusqu’à ce que votre perso aille assez loin \o/

GIF - 19.4 ko

Après quelques petites modifs, ça m’a donné ça :

GIF - 19.2 ko

La fusion

Ouais, comme dans DBZ \o/
Enfin presque .-.

La fusion consiste à réunir 2 gif différents dans un seul gif !

Prenons par exemple le gif de l’exemple précédent :

GIF - 19.4 ko

Nous allons le fusionner avec ce gif-là :

GIF - 30.4 ko

But de l’opération : faire voler Tails au-dessus de Sonic \o/.

1) Ouvrir les 2 gifs avec GMG

Assurez-vous que l’option "Couleur d’arrière-plan" est choisie dans Cadre>Propriétés globales.

2) Redimensionner les gif

Il faut que dans chaque gif il y ait de la place pour les 2 persos à la fois. La dimension des 2 gifs est de 605×46. J’ai choisi de leur donner une taille de 605×90.

Allez dans Animation>Propriétés et entrez 90 en hauteur (faites le pour les 2 gifs).

3) Décaler un des persos

Comme vous pouvez le voir, Sonic est trop haut : si on fusionnait les gifs maintenant, il se superposerait à Tails. Il faut donc décaler Sonic \o/.

Allez dans Cadre>Propriétés globales et entrez 44 en Décalage Y (j’ai choisi 44 car j’ai augmenté la taille des cadres de 44 pixels, mais vous pouvez faire un peu plus ou un peu moins, à vous de voir).

4) Synchroniser les durées

Encore un petit détail à régler : vu le mode de fusion que nous allons utiliser, il faut que les 2 gifs aient une durée égale.

PNG - 23.2 ko

Le gif Sonic dure 2,40 secondes et le gif Tails dure 3,00 secondes. Il faut donc rajouter 3-2,4=0,6 soit 60 centièmes de secondes au gif Sonic. Pour ça, créez tout simplement un cadre complètement vide, foutez-le à la fin du gif et donnez lui une durée de 60 \o/.

5) Fuuuuuuusion \o/

Pardon .___.

Il est temps de fusionner tout ça !
Prenez n’importe lequel des gifs et faites Fichier>Fusionner. Choisissez l’autre gif. Une fenêtre s’ouvre alors. Notez qu’elle vous propose d’opérer un décalage, ce qui permet de sauter l’étape 3) si vous êtes à l’aise.
Choisissez de synchroniser avec la durée. La case "boucle plus courte avec l’animation" ne change rien dans ce cas, puisqu’on a pris soin de donner les mêmes durées aux gifs.

Et voilà, normalement vos gifs sont bien fusionnés \o/

Mon résultat :

GIF - 92.1 ko

Vous n’avez plus qu’à peaufiner comme vous voulez votre nouveau gif, personnellement j’suis arrivé à ça :

GIF - 87.8 ko

6) Quelques mots sur la fusion

- Rien ne vous empêche de fusionner plusieurs fois plusieurs gif.
- La fusion avec durée synchronisée offre plus de liberté (donner la même durée a des gifs est souvent bien plus simple que de créer 2 gifs ayant le même nombre de cadres) que l’assemblage des cadres un à un mais donne souvent des gifs d’un poids assez conséquent, faites-y attention si vous voulez utiliser ça comme sign ou avatar sur un forum. Donner un fond non transparent au gif puis optimiser peut faire gagner beaucoup de place.
- La fusion peut aussi être utilisée pour rajouter un fond à un gif transparent : choppez un fond, foutez le dans GMG, donnez-lui la même durée qu’au gif transparent et fusionnez en synchronisant avec la durée \o/.

Un petit exemple de ce que ça peut donner :

GIF - 62.2 ko

- Enfin, vous pouvez même l’utiliser pour "poser" des objets sur un gif.

Un exemple de ce qu’on peut faire avec ça :

On part de ça :

On arrive à ça :

Le mot d’la fin

Bon bah avec tout ça vous devriez pouvoir faire quelques trucs, j’espère que ce tuto vous aura aidés \o/.

N’hésitez pas à me contacter sur IRC ou via un mp sur le forum si vous avez une question sur ce sujet ^^.

Merci à Quennedeau pour m’avoir donné l’idée de faire ce tuto \o/.



Vous avez aimé cet article? Partagez le!
Commentaires (11) - Forum

ZEbluehedgehog

Haut de page


Ressources

Cliquez pour écouter :
L'article du moment
Fan humour second degré
Ahhh les femmes...

Le pifomètre
Sonic X
Dossier complet sur Sonic X
Archie
Résumé Sonic Archie n° 150
PlayStation 3, XBoX 360
Sega Superstars Tennis
 
 
  Discussions
 Accès au Forum
Derniers sujets :

 
 
 
Planete-sonic, design, mise en page et textes © 2003/2017 L'équipe de PLANETE-SONIC.COM, Tous droits réservés. Toutes les oeuvres sur ce site sont la propriété de leurs auteurs respectifs. Toute reproduction partielle ou totale d'une oeuvre est interdite sans l'avis préalable de son auteur.