Bonjour ! J'ai décidé de faire un gros mix de tout mes tutos d'animation. Je vais vous apprendre a créer un smiley sous Photoshop, puis à l'animer en utilisant certains effets !
I : Création du smiley sous Photoshop
II : Animation de base
III : Animation avancée
IV : Outil Trajectoire
V : Astuces diverses
I : Création du smiley sous Photoshop
Bon on va commencer par ouvrir Photoshop 
! Nouveau document de n'importe quelle taille, il faut juste que ce soit assez grand pour mettre un smiley ! Fond transparent, important.
Vous pouvez mettre en arrière-plan un fond blanc histoire de mieux faire ressortir le smiley.
Créez un nouveau calque (Ctrl+Maj+N) que vous nommerez smiley. Prenez l'outil Ellipse de Sélection (M), vérifiez que la case Lissé est décochée, et tracez un cercle parfait. Pour ce faire, il faut maintenir la touche Shift de votre clavier enfoncée pendant le traçage de la sélection. À l'aide de l'outil Pot de peinture (G) Remplissez votre sélection avec du noir. Enfin, allez dans le menu Sélection >> Modifier >> Contracter. Entrez "1" comme valeur dans la boite de dialogue, puis validez. Enfin, supprimez.
Créez le calque Couleur, que vous passerez sous le calque Smiley. Maintenant, on va colorier !
Vous allez choisir des couleurs, et grâce a l'outil Crayon (B) vous allez colorier votre smiley de cette façon !
Vous avez votre ptit rond, il ne reste plus qu'a ajouter des yeux, une bouche...
Créez encore un nouveau calque, que vous passerez entre le calque Smiley et le calque Couleur. Prenez l'outil Crayon et à nouveau, tracez des yeux et une bouche. Je me suis pas trop foulé pour l'exemple, mais bon, a vous de faire mieux.
Voici l'un des smileys qui me servira dans les exemples suivants : 
II : Animation de base
Passez sous ImageReady grâce au bouton en bas de la barre des Outils.
Dans ImageReady, la palette d'Animation est très importante. Si vous ne l'avez pas, allez dans Fenêtre >> Animation. Dans cette même palette, vous pouvez apercevoir votre première image, une indication de temps en dessous, et des ptits boutons tout en bas. Vous ne pouvez cliquer sur qu'en seul, le bouton "Reproduir l'image sélectionnée". En français, ça veut dire dupliquer l'image. Vous n'avez pas trop le choix, alors cliquez dessus. Votre deuxième image est prête.
a) Même image
Si vous voulez simplement bouger votre smiley sur les axes X et Z, alors il vous suffit de le déplacer à l'aide des touches flèchées. A partir de là, vous pouvez lancer l'animation avec le bouton LECTURE. Si vous n'avez que deux images, l'animation sera brève et répétitive. Si en plus, vous donnez comme délai d'apparition a votre image "Sans délai" alors les images vont s'enchainer très vite. Vous pouvez rentrer n'importe quelle valeur pour le temps d'apparition.
Exemple : 
Ce petit smiley bouge dans tout les sens !
b) Image différente
Imaginons maintenant que vous ne voulez pas faire bouger votre smiley, mais le faire changer de tête. Alors là, il vous faut préparer un nouveau smiley, qui a une tête différente. Retournez sous Photoshop, et préparez votre second smiley. Retournez sous ImageReady, et grâce à la case la plus a gauche devant chaque calque, dans la Palette des calques, masquez votre second smiley.
Dupliquez votre image, puis cette fois ci, masquez le premier smiley, et faites apparaitre le second, toujours grâce a la case avec un ½il. Si vous lancez l'animation, votre smiley changera de tête a chaque fois que l'animation reprendra.
Si vous voulez que votre animation ne se répète que X fois, l'option est disponible dans le coin inférieur gauche de la palette d'Animation.
Exemple : 
Celui ci, change d'humeur régulièrement :) !
III : Animation avancée
Avant toute chose, l'animation avancée, c'est quoi ?
Contrairement à la partie précédente où vous n'avez bougé qu'un seul calque, ici, vous allez en bouger plusieurs. Prenons un exemple concret :
Les deux smileys divergent. Pour arriver à un résultat comme ça, il faut le faire manuellement.
Pour arriver à faire ça, il faut énormément de patience, car pour seulement 5 pas, il m'aura fallu 1h30.
Quelques petites astuces.
Il faut un calque avec chaque partie différente. Moi j'ai pris "Tête, Bide, Main gauche, Main droite, Pied gauche, Pied droit".
Si les mouvements de vos bras et de vos pieds sont saccadés, alors vous pouvez créer une petite courbe, et déplacer les membre sur celle ci. Retournez sous Photoshop. Prenez l'outil Plume (P), et tracez une courbe qui correspondra a votre mouvement de bras. Clic droit >> Contour du tracé >> Crayon >> OK
Vous pouvez maintenant vous aider de la courbe pour déplacer la main de façon régulière.
Le PSD du Bonhomme qui marche est disponible ici.
IV : Outil Trajectoire
De nouveau sous ImageReady. Imaginons que vous voulez que votre smiley se déplace d'un point A à un point B. Si vous ne voulez le déplacer manuellement, il existe un moyen !
a) Position
D'abord, il faut préparer notre affaire.
Première image : le smiley au point A
Seconde image : le smiley au point B
Attention, il faut que ce soit le même calque, mais le smiley déplacé !
Cliquez sur l'icône Trajectoire, c'est la 5e icône dans la palette d'Animation.
Remplissez les options comme ci dessus ! Vous pouvez maintenant lancer l'animation. Votre smiley se déplace de votre point A a votre point B en 7 images (la première, la dernière et les 5 images créées par l'outil Trajectoire). Plus vous rajoutez d'image, plus votre animation sera lente et longue. Si en revanche, vous en enlevez, on aura l'impression que votre smiley est hyper-rapide !!!
b) Opacité
Admettons maintenant que vous voulez faire disparaitre progressivement votre smiley. Rien de plus facile avec l'outil Trajectoire !
Première image : le smiley tout a fait normal
Seconde image : le calque du smiley masqué
Cliquez à nouveau sur l'icône Trajectoire, cette fois ci en cochant l'option Opacité !
Votre smiley disparait progressivement ! Là encore, vous pouvez jouer sur le temps d'apparition des calques et sur leur nombre !
c) Effets
Cette fois, on va jouer sur les styles de calques ! Je vais encore prendre un exemple bidon, on va imaginer que notre smiley a une ombre, et que celle ci va changer de couleur (complètement débile je sais).
On va déjà s'occuper de donner une ombre au smiley ! Retournez sous Photoshop. Cliquez sur le petit F en bas de la Palette des Calques, puis choisissez Ombre portée.
Bon on va pas se fouler, on prend les options par défaut.
Cliquez pour agrandir
On reeeeeeetourne sous ImageReady ! Ouvrez la fenêtre Options/styles de calques (Fenêtre >> Option/style de calque). Dupliquez votre image, et double cliquez sur "Ombre portée" dans la Palette des Calques ! Changez la couleur de l'ombre.
Cliquez pour agrandir
Enfin vous pouvez lancer l'animation !!!
V : Astuces diverses
Nous passons a la dernière partie de ce tuto, qui a pour but de vous apprendre quelques petits trucs pour que vos animations soient réalistes !
a) Boucles et continuités
Pour illustrer ceci, je vais m'appuyer sur le smiley de tout a l'heure : .
Lorsque vous utilisez l'outil Trajectoire, vous partez d'un calque avec le smiley complètement visible, et d'un calque avec le smiley complètement invisible. Pour ce smiley, l'opacité des calques ça donne ça :
100% >> 80% >> 60% >> 40% >> 20% >> 0%
Et on repart pour les 100% !
0% >> 20% >> 40% >> 60% >> 80% >> 100%
En bref on a ça !
100% >> 80% >> 60% >> 40% >> 20% >> 0% >> 20% >> 40% >> 60% >> 80% >> 100%
Mais si votre animation s'exécute en boucle, alors il y aura deux images avec le smiley visible à 100% ! Si vous voulez donc que votre animation soit une boucle parfaite, il vous faudra supprimer la dernière image 
b) Faire tourner la tête à un smiley
Vous voulez donner l'impression que votre smiley fait un tour sur lui même ? Une astuce simple permet de le faire ! Retournez sous Photoshop, et préparez un calque avec le smiley sans les yeux ni la bouche, et un calque avec les yeux et la bouche séparément ! Passez le calque avec les yeux et la bouche en masque d'encrêtage avec le calque de la tête. Pour ce faire, maintenez la touche Alt, et cliquez entre les deux calques !
Grâce à ça, tout les pixels du calque soumis au masque d'encrêtage qui sortent de la surface occupée par le calque inférieur ne se voient plus. Un peu chaud comme phrase. C'est hyper simple vous allez voir. Permutez sous ImageReady. Dupliquez votre calque, et à chaque nouvelle image créée, décalez le calque avec les yeux et la bouche d'un pixel sur la gauche. Au bout d'un moment, le calque aura complètement disparu. C'est pas magique ?
Difficile d'imaginer que c'est juste un calque tout plat qui passe par dessus un rond tout plat aussi ^^
c) Faire sauter un smiley
Comment donner une impression réaliste de saut ? Une petite astuce : Lorsque votre smiley est au point le plus haut de son saut, vous pouvez le laisser une petit peu en hauteur pour donner un effet plus réaliste. Le premier réflexe est donc de changer la valeur temporelle de l'image (je sais pas si ça se dit).
Autrement dit, vous passez de "Sans délai" à "0,1 seconde". Pourtant, vous voyez que l'effet n'est pas réaliste. Il suffit juste de mettre deux calques avec une valeur "Sans délai" !!!
Pour le point le plus haut du saut, vous pouvez mettre trois images, et pour retomber, seulement deux. Petit exemple :
d) Inclinaisons des pentes de déplacement
Pour l'instant, notre smiley s'est toujours déplacé sur une ligne horizontale. Mais imaginons qu'il veuille faire du ski sur une pente ? Eh bien tout dépendra de l'inclinaison de la pente. Sous ImageReady, on ne peut pas faire subir une rotation à un calque sans qu'elle n'ait de répercussions sur les autres images de celui ci. Il faut donc faire un nouveau calque avec un smiley qui aura lui, subit une rotation. Maintenant il vous faut calculer l'inclinaison de la pente. Pour les lignes de pixel art les plus répandues, les angles sont connus, sinon il faudra utiliser un autre moyen, comme mettre une ligne horizontale et une ligne inclinée, et faire subir une rotation a la ligne horizontale pour avoir la même inclinaison que la ligne inclinée et regarder l'angle, mais c'est une autre histoire, et c'est surtout prise de tête. Pour l'exemple du ski, il ne faut pas oublier que si votre smiley dévale une pente, il va prendre de la vitesse ! Vous pourrez donc utiliser l'Outil Trajectoire avec un petit nombre de calques intermédiaires ! Je prends un exemple avec un wagonnet !
Ceci va clore le tuto ! J'espère que vous l'aurez compris et qu'il vous servira, si jamais vous voulez que j'ajoute d'autres petites astuces, aucun problème !!
EDIT :
REEDIT :
Tutoriel rédigé par Bidibidou pour CrystalXP.net, toute reproduction interdite sans l'accord de l'auteur
)
(Enfin, tes smileys 
)
!!
? Intéressant ça 
! Enfin c'est pas juste pour ceux qui écrivent rien 
