Il est l’heure ! Non, ce n’est pas l’heure de changer vos couches pour bébés sur Habbo. Il est l’heure pour une autre session de questions/réponses avec notMiceElf. Nous sommes encore incandescent (aha, briller… vous avez compris… ouais) de la dernière Q + R afin de mieux dessiner un sourire sur notre visage…  et comme toujours, vous pouvez soumettre une question lorsque l’article apparaît sur Habbo.com. Donc c’est parti pour les questions !

Comment faites-vous un bon GIF?

(question posée par shiony) 

Cette question avait l’air si simple à première vue, puis j’ai commencé à réfléchir sur la façon d’y répondre et en spirale dans l’animation et mon cerveau à peu près volé en éclat. Alors merci de me donner un léger mal de tête avant mon café du matin, shiony! L’idée de l’animation est un peu trop charnue pour ce blog, donc je vais me concentrer davantage sur la mise en place d’une animation, puis aller sur une façon décente de l’enregistrement des fichiers gif. 

Animation:

Tout ce que vous pensiez est faux. Ouep.  C’est une illusion quiii *fait de grands cercles avec ses mains*.  Je suis sûr que l’on vous l’a déjà dit 1000 et une fois, mais, l’animation est une séquence d’images fixes avec un contenu légèrement différent sur chacune d’entre elles.  Chacune de ces images statiques est appelée « frame » (cadre ou trame en français).  Lorsque l’on voit un enchaînement rapide de ces images nous l’interprétons donc par un mouvement.  Le nombre d’images que nous voyons dans une seconde d’animation est donc appelé « images par secondes » (techniquement parlant, je sais) ou fps (les gamers me diront, “hé, c’est l’acronyme de « first person shooter!”, mais l’animation a eu ce nom en premier, si si!) mais vous pouvez oublier ce concept si vous voulez parce-qu’avec les gif, le fps est plus une question de configuration par rapport au délais d’enchaînement des images.

La première chose que nous devons faire est de créer un nouveau fichier. La taille n’a pas d’importance (lol) tant qu’elle correspond à votre animation, mais les animations de petites tailles sont généralement meilleures au niveau des pixels.  La résolution de l’image, d’autre part, est quelque chose dont vous devez tenir compte.  Le pixel art doit être fait en utilisant une résolution de 72 pixels par pouces (ça revient à la même chose avec les cm).  Ne cherchez même pas à contester ou chercher une explication à la raison pour laquelle elle doit être de ce nombre.  C’est comme ça.  Obéissez.

La prochaine chose dont nous avons besoin est d’une chronologie pour notre animation.  Sur Photoshop, celle-ci se trouve dans le menu “Fenêtre” puis “Montage”.  Dans les précédentes version de Photoshop elle était nommée “Animation” au lieu de “Montage”.

Une fois que la frise est ouverte choisissez votre image en tant que base pour l’animation.  La méthode du « frame » est assez commune pour les autres programmes d’animation de pixels et est plus facile à comprendre pour les débutants. De plus, l’animation est classique.

Afin de créer une animation, vous devez d’abord créer (ou avoir déjà créé) des images d’animation de sorte que vous puissiez les enchaîner. Chaque dessin de votre animation doit être un nouvel élément dans votre palette des calques. Qu’il s’agisse de Pixel Art ou de dessins faits à la main les concepts sont les même. Vous visez à dessiner des images de sorte que lorsqu’elles sont reliées leur mouvement a un bon débit et est clairement lisible. Cette explication est si rudimentaire qu’elle me donne les larmes aux yeux donc si vous êtes un intéressés par la vraie animation, vous pourrez trouver un bon livre (ou, ouais je sais, YouTube c’est mieux) sur le sujet. Il y a un ensemble de (douze) principes sur lesquels les animateurs de Disney ont basé leur travail pendant des siècles. Je vous invite à y jeter un coup d’œil.

Avec une petite astuce, il y’a un moyen simple de tester le mouvement entre les images en utilisant une technique nommée « dépouillement d’oignon », qui vous permet de voir plusieurs images en même temps. Photoshop ne supporte pas cette fonctionnalité. Afin d’obtenir quelque chose de similaire au dépouillement d’oignon sur Photoshop, vous devez baisser l’opacité des calques de votre dessin en cours, de sorte à ce que vous puissiez les voir lorsque vous dessinez une nouvelle image. Les animateurs qui créent des animations utilisent une boîte à lumière pour voir à travers les dessins.

Bien, quand vos dessins sont prêts regardez votre frise chronologique. Cliquez sur l’icone « duplication […] » en bas de la frise de montage cela créera des calques pour votre animation et vous aurez besoin d’un calque par dessin.  Avec une image que vous aurez sélectionné, allez dans la palette des calques et cachez tous les calques sauf celui sur lequel vous voulez travailler.  Sur l’exemple que vous pouvez voir j’ai mis un fond gris avec un dessin d’animation que vous apercevez sur le premier calque.  Pour cacher des calques vous pouvez cliquer sur l’œil que vous apercevez en bas des vignettes.  Suivez le même procédé pour chaque dessin.  Rien de tel qu’une bonne répétition pour que ça roule… pas vrai ?

Modifier le « délai » d’une image changera combien de temps, en millisecondes, celle-ci est affichée avant de passer à la suivante.  Vous devez trouver un délai par image qui conviendra à votre animation.  Les animations qui sont trop lentes apparaissent moins transparentes donc moins animées et montrer plus d’images laissera moins de place à celles qui vont trop vite, elles souffriront du saut d’image.  Les navigateurs vont souvent renoncer à des délais d’images trop… rapides, c’est donc une bonne idée de vérifier votre animation sur quelques navigateurs différents pour voir que ça fonctionne comme vous le souhaitez.

La fonction de boucle permettra à votre animation d’être infinie ou de n’être répétée qu’une seule fois. La plupart des gifs que vous voyez autour de vous, sur internet, ont une boucle infinie. Et la partie de l’animation se termine. Ouf. Vous êtes toujours vivants ? *tapote*

Sauvegarder votre fichier:

S’il faut se rappeler de quelque chose à propos du format GIF c’est seulement un format 8bit qui a donc un maximum de 256 couleurs.  Les pixels ont soit une couleur ou ils sont entièrement transparent (cela compte comme une couleur :p).  Les GIF n’ont pas la capacité d’avoir des pixels semi-transparents comme une image 24bits le ferait.  Si vous avez déjà essayé de sauvegarder un GIF avec plus de couleurs que le maximum autorisé (comme une photo), vous verrez une réduction de la couleur: elles se compresseront pour s’adapter à la palette 8bits.  Vous devez faire preuve de considération par rapport au nombre de couleurs maximum quand vous faites des images (c’est là que l’art de la palette à pixels excelle dans le tramage restreint!). Ne vous inquiétez pas cependant, parce-que 256 c’est déjà assez élevé.

Dans Photoshop vous allez utiliser « Enregistrer pour le Web » dans le menu “Fichier” et sélectionner le format GIF.  Le type de palette ou le mode (Selective, Perceptual, Adaptive, Restrictive)… n’a pas vraiment d’importance.  C’est vraiment simple, le mode de palette est préférable pour certains types de couleurs plus que d’autre quand on les réduit en la petite palette de 8bit.  Vous pouvez tester ça après et choisissez celui que vous préférez (on a tendence à utiliser Selective pour n’importe quel gif que nous faisons). Tous types d’options automatiques de tramage doivent être évitées pendant le pixel art, ils ne sont pas tous bon de toute façons.  Si vous faites attention au nombre de couleurs pendant que vous dessinez vous n’aurez jamais besoin de cette option au final.  La même chose peut être dite pour le tramage de la transparence. Ew. Il devrait y avoir des autocollants pour voiture avec l’expression « simplement dire non au tramage de transparence » inscrit sur eux.

Si vous utilisez un programme qui force un gif à sauvegarder à l’aide de la palette des fenêtre ou quelque chose d’autre que les quatre ci-dessus… laissez le tomber, jetez le à la poubelle et obtenez-en un autre.  Les programmes qui font ça utilisent souvent l’auto-activation pour essayer de remettre la palette d’origine. Vous botiendrez des images avec des pixels de vraiment étranges couleurs lors d’un enregistrement d’une telle façon. C’est horrible. Vraiment Horrible. Mes yeux saignent tellement c’est horrible.

Pour la quantité de couleurs, si vous n’avez pas utilisé toutes les 256 couleurs, vous ne verrez que le montant que vous avez utilisé, donc ne paniquez pas si vous voyez un montant inférieur. L’option mat est une couleur qui est ajoutée à des pixels semi-transparents afin qu’ils deviennent complètement opaque, c’est principalement utilisé pour correpondre à ces couleurs semi-transparentes, une couleur blanc mat deviendra un gris clair dans mon image finale. Si vous ne choisissez pas de couleurs mate les pixels sous certaine transparence seront supprimés tandis que ceux ci-dessus seront complètement opaques. Cependant, si vous faites le pixel art tout droit, vous ne devriez jamais avoir de pixels semi-transparents.

Toute option pour le web « accrochage » signifie que les couleurs de votre palette seront décalées pour faire correspondre les couleurs Web standard comme à partir de 1985 (ce qui est assez laid). Vous devez craindre cette option comme la peste. S’il vous plaît.

Et c’est tout ! Pas trop mal, non ? Si vous êtes sur un autre programme que Photoshop, vous aurez probablement l’option « Enregistrer sous… » et un format de fichier gif. Un grand nombre de fonctionnalités comme le type de palette, le nombre de couleurs et le tramage sont assez communes à de nombreux programmes, il devrait être encore utile. Un programme spécifique de pixel art aura certainement ces options et répondra à vos besoins ! Bonne chance pour le GIF-ing dans l’internet !

Traduction réalisée par MTC.

Sulake