×
En poursuivant votre navigation sur MangeToiÇa, vous acceptez l'utilisation des cookies assurant le bon fonctionnement du site. En savoir plus.
Afficher les articles:  TOUT   HORS HABBO   HABBO
[BLOG] Comment faire un bon GIF, par notMiceElf
commentaires 8
Posté par -Karlo (Lawliet) le samedi 25 octobre

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. 

 

Tout d’abord. L’animation est comme un processus va dépendre du programme que vous utilisez. Certains programmes ne prennent pas en charge la création d’animation, donc si votre objectif est d’animer, assurez-vous que le programme que vous utilisez a un support pour cela ! Si vous cherchez simplement à sauver un statique (non animée) GIF vous pouvez passer votre chemin jusqu’à la fin. Je vais utiliser Photoshop, mais le processus va être essentiellement le même d’un programme à un autre. Je suggère de trouver un tutoriel qui décompose les détails du programme que vous êtes en train de d’utiliser. Ok, on y va

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.

example_new

 

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”.

example_wheretimeline

 

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.

example_timelinestart

 

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.

frank_sneeze_onionskin

 

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 ?

example_timeline

 

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.

frank_sneeze_slowfrank_sneeze

 

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é.

example_color

 

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.

example_savegif

 

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.

example_autodither

 

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.

example_nomatte

 

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.

example_websnap

 

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.

 

CatégorieSulake
Avant de publier votre commentaire :
Les preums / first sont interdits
Les insultes, menaces entre visiteurs sont interdites.
Les propos racistes, homophobes et pornographiques sont interdits.
Les pubs & liens vers des sites d'arnaques ou rétroserveurs sont interdits.
Les commentaires inutiles et hors-sujet peuvent être supprimés

Merci de respecter les CGU de MTC (à lire ici). Le non-respect de ces règles pourra entraîner le bannissement des commentaires ou du site ; pour porter réclamation, utilisez l'uservoice
  • Merci pour cet traduction !

  • Merci MTC :)

  • -Karlo (Lawliet)

    De rien !

  • -Karlo (Lawliet)

    De rien ;)

  • x-thhabbo-x

    L’humour est pitoyable ..

    Merci pour la traduction,sa nous en apprend des trucs sur habbo et sur le pixel art lui-même.

  • Jim Carrey

    c’est dur de bien traduire l’humour anglais :p

  • Blaseur

    A vraie dire, ce n’est ni pour faire de la pub ou quoi que ce soit mais vPicture logiciel (en Alpha actuellement) propose un outil nommé GifCreator. Celui-ci permet de créer des gif animmés de tout ou d’une partie de l’écran. C’est assez pratique pour gagner du temps.

  • Jim Carrey

    ça n’a pas de rapport

FORUM: DERNIERS SUJETS
xavier31x - Mtc <3

Bibliothèque d’articles

La bibliothèque d'articles de MangeToiCa est une mine d'Or ! Un coup de blues ou envie de te plonger dans la nostalgie des années MTC ? Retrouve l'intégralité des articles, enquêtes et dossiers ci-dessous classés par date de publication.
REMONTER