Animer un personnage (gif animé)

Photoshop Animation

 

 

Animer un personnage (gif animé)

Ce tutoriel est écrit avec Photoshop CC.

 

Voici une animation simple, avec un personnage sympathique.

 

Télécharger les images :

Liens vers les images originales :

Les images proviennent du site Pixabay.com

Images réduites en 720px pour le tutoriel :

Pour créer notre animation, qui sera au final au format .gif, nous n’avons pas besoin d’images de grande résolution, donc voici directement les images utilisées pour ce tutoriel, elles sont en 720×720 pixels.

            

Cliquer sur les images pour les afficher en grand (720 px)

 

Ajouter les personnages :

ouvrir l’image du personnage 01 (personnage-01-720.jpg)

Personnage 01

dans le panneau Calques, faire un double-clic sur le calque Arrière-plan (et valider la fenêtre qui s’affiche) pour convertir le calque en calque libre ou maintenir la touche Alt et faire un double-clic sur le calque

renommer ce calque 01, soit par le menu Calque / Renommer le calque… soit en faisait directement un double-clic sur son nom

Renommer le calque 01

Notre image fait 720 x 720 pixels, nous allons ajouter un Repère dans l’image afin de positionner les autres personnages, au centre de l’image (par rapport au premier).

choisir le menu Affichage / Nouveau repère…
dans la fenêtre, cocher Vertical et entrer 360 dans le champ Position (la moitié de 720px)

Nouveau repère au centre de l'image

Cela ajoute un Repère vertical au centre de l’image.

Il faut centrer le personnage dans l’image,
déplacer le calque du personnage de façon à l’aligner (approximativement) au centre de l’image grâce au Repère

Aligner le personnage au centre de l'image

Comme nos différents personnages bougent beaucoup, l’alignement se fera sur les pieds (à peu près).

Vous pouvez également ajouter un Repère horizontal au niveau des pieds.

ouvrir les autres images : personnage-02-720.jpg, personnage-03-720.jpg, personnage-04-720.jpg et personnage-05-720.jpg

copier ou déplacer (avec la souris) chaque image dans la 01 de façon à obtenir 5 calques dans le panneau Calques,
puis renommer les calques des personnages de 01 à 05

5 personnages sur 5 calques

Pour notre animation, il faut que le personnage en mouvement soit dans le même sens donc,
sélectionner successivement les calques 03, 04 et 05 et inverser le sens de l’image par le menu Edition / Transformation / Symétrie axe horizontal

Vous devez avoir tous les personnages dans le même sens.

aligner chaque personnage au centre de l’image environ, en se servant du Repère

Il faut positionner les pieds. Pas besoin d’un alignement très précis car leur attitude est très différente.

Aligner les personnages

Tous dans le même sens

 

Créer l’animation :

afficher le panneau Montage par le menu Fenêtre / Montage

Dans le panneau,
1 cliquer sur la flèche de droite
2 sélectionner Créer une animation d’image
3 puis cliquer sur le bouton

Créer une animation d'images

Si vous avez affiché le panneau en version montage vidéo, il faut cliquer sur l’icône en bas à gauche pour basculer en mode animation d’images.

Convertir en animation d'images

La création de l’animation consiste à créer 5 vignettes dans le panneau Montage, qui vont correspondre aux 5 calques du panneau Calques.
Pour cela on se sert de l’icône Masquer le calque en début de ligne du calque (panneau Calques).

Dans le panneau Montage vous avez 1 vignette,
dans le panneau Calques, cliquer sur chaque icônes Œil en début de ligne des autres calques, pour masquer tous les calques sauf le 01
ou faire un Alt + clic sur l’icône

Masquer tous les calques sauf le 01

Créer les autres vignettes de l’animation :

dans le panneau Montage
cliquer sur l’icône Duplication des images sélectionnées

Dupliquer l'image

puis dans le panneau Calques,
cocher l’icône Œil du calque 02 et décocher l’icône Œil du calque 01

Afficher le calque 02 avec la vignette 02

Donc on affiche le calque 02 du panneau Calques, avec la vignette 02 du panneau Montage.

Faire pareil pour les 5 calques
ajouter 3 autres vignettes dans le panneau Montage et afficher uniquement la vignette correspondante dans le panneau Calques.

Vous devez avoir 5 vignettes en tout. À chaque vignette correspond 1 calque et 1 seul.

5 calques et 5 vignettes

Choisir la vitesse de l’animation :

Maintenant que notre montage est prêt, il ne nous reste plus qu’à choisir la vitesse de l’animation.

Pour sélectionner toutes les vignettes,
dans le panneau Montage, cliquer sur la 1ère vignette (celle de gauche)
maintenir la touche Maj et cliquer sur la dernière vignette (celle de droite)

cliquer sous une des vignettes, sur la flèche indiquant le délai et dans le menu déroulant choisir une vitesse, par exemple 0,2 secondes

Choisir la vitesse de l'animation

Nous voulons que notre animation fonctionne en continu donc,
sélectionner en bas du panneau : Toujours (au lieu de Une fois)

Animation en continu

Lire l’animation en appuyant sur l’icône en forme de flèche vers la droite
ou appuyer sur la Barre d’espace

Notre animation est trop rapide,
sélectionner à nouveau toutes les vignettes puis
dans le menu Délai, choisir une vitesse plus lente, par exemple 0,5 secondes

Lire à nouveau l’animation.

Il semble que la bonne vitesse soit plutôt 0,3 secondes donc
sélectionner toutes les vignettes puis dans le menu Délai choisir Autres…
et dans la fenêtre, entrer 0,3 (secondes)

Modifier le délai

Lire à nouveau l’animation.

Si la vitesse vous convient, nous allons maintenant enregistrement l’animation en .gif.

 

Enregistrer l’animation en gif :

choisir le menu Fichier / Enregistrer pour le Web ou les touches Alt + Maj + Ctrl + S

Dans la fenêtre en haut à droite,
dans le menu déroulant Paramètre prédéfini, choisir GIF 64 Tramé
puis décocher la case Transparence

Enregistrer en Gif 64 tramé

Dans cette image il n’y a pas 64 couleurs, par contre il y a des niveaux de gris, donc nous avons besoin d’une bonne qualité pour les dégradés de gris.

Si votre image contient peu de couleur, vous pouvez les diminuer
dans le menu Couleur, choisir par exemple 16 ou 8 couleurs

En bas de la fenêtre vous pouvez choisir les dimension de l’image.

Pour le format GIF, les dimensions de l’image influent directement sur le poids du fichier final, que vous pouvoir en bas à gauche de la fenêtre..

Poids du fichier final

Le nombre de couleurs fait également grossir le fichier final.

Pour cette image, qui contient beaucoup de zones blanches unies, j’ai choisi le format 400×400 pixels.
Mais pour une autre image qui contiendrait beaucoup de couleurs il faudra peut-être réduire davantage ses dimensions.

Il n’y a pas de poids limite pour un fichier GIF, mais essayez de ne pas dépasser 500-600 ko (sauf exception).

dans la fenêtre vous pouvez également lire directement l’animation (boutons en bas à droite)

puis cliquer sur le bouton Enregistrer… et donner un Nom à votre fichier.gif

Si le fichier est destiné à Internet, ne mettez pas d’espace dans son nom, ni de signes spéciaux (uniquement les signes – ou _ ).

L’animation a finalement été réglée sur 0,4 images/seconde.

L’image finale se trouve au début du tutoriel ▲

 

Ce tutoriel est la propriété du site Photoshoplus.
Toute reproduction, exploitation ou diffusion du présent document est interdite.

 

Articles similaires :

2 commentaires pour : « Animer un personnage (gif animé) »

  1. Animation avec une roue dentée.

    Calques : 3 roues sur 3 calques décalés d’1/3 de rotation chacun (9 calques)
    Montage : 3 vignettes, vitesse 0,1 seconde
    roue centrale inversée (ordre des calques)

Commentaires fermés.