TUTTI GRAPHIES
!! connexion !!

TUTTI GRAPHIES

L'île aux Arts
 
AccueilFAQRechercherS'enregistrerConnexion
Faire un peu d'animation avec Photoshop + Création de gif, by Suisei553
Partagez | 
 

 Faire un peu d'animation avec Photoshop + Création de gif, by Suisei

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Suisei
ligne
ligne


Age: 28
lieux de résidense: Paris
Humeur: Pouet !
Date d'inscription: 15/10/2011

MessageSujet: Faire un peu d'animation avec Photoshop + Création de gif, by Suisei   Dim 16 Oct - 14:14

Tuto : Faire un peu d'animation avec Photoshop + Création de gif, by Suisei

Plateforme : PC/Mac
Logiciel : Photoshop
Versions : Tests réalisés avec CS5 (disponible sur CS3 et CS4 aussi, à voir pour les versions antérieures)
Niveau : Moyen
Résultat recherché : Créer et lire une animation avec Photoshop.
Exemple d'usage : Création de gif.

Et oui ! Réaliser des petites séquences d'animation avec Photoshop est tout à fait possible ! Very Happy Que ce soit pour faire un gif, des personnages animés pour un jeu vidéo 2D ou réaliser un petit extrait de dessin animé, il y a tout ce qu'il vous faut.

L'objectif de ce tuto est de vous montrer comment s'y prendre. Dans un premier temps, je vous montrerai comment réaliser votre animation image par image, ensuite, comment la lire sous Photoshop et pour finir, en bonus, je vous expliquerai comment l'enregistrer en gif.
Pour l'exemple, je vous propose un petit personnage qui court. Smile


Réaliser l'animation image par image

Pour commencer, vous démarrez Photoshop et vous créez un nouveau document de la taille qui vous plait (pas trop grand quand même). Le mien fait 558*558 pixels.
Ensuite, vous créez 12 calques transparents (ceci permet de visualiser plusieurs étapes superposées de l'animation afin d'avoir des repères pour créer une nouvelle étape de l'animation). Ces 12 calques correspondent aux douze étapes du mouvement du personnage.


Suite à cela, il faut dessiner les étapes de l'animation sur vos calques ainsi créés. Une étape d'animation par calque.

Je ne vais pas vous faire dessiner les 12 étapes maintenant, l'objectif de ce tuto étant de vous montrer quelques fonctionnalités de Photoshop. Le dessin des étapes dans une animation peut faire l'objet d'un autre tuto indépendant de tout logiciel.
Je vous propose donc simplement de copier coller mes 12 dessins fournis dans le spoiler qui suit. Smile

/!\ Attention ! Le dessin numéro 1 doit être en bas de la liste de calques et le numéro 12 en haut ! Je vous montrerai pourquoi. /!\

Spoiler:
 

Le résultat final donne ça.


Oui, on ne voit rien du tout, mais c'est pas gênant. Razz
(Note, la jambe rouge, c'est pour distinguer la jambe gauche et la jambe droite du personnage.)

C'est pas le tout, mais maintenant que nos dessins sont faits, on aimerait bien voir l'animation histoire de voir si le mouvement attendu est bien rendu.

Visualiser l'animation

Pour visualiser votre animation, rien de plus simple. Photoshop dispose d'un petit module élémentaire qui vous permet de faire défiler vos calques les uns après les autres.
Pour l'afficher, allez dans le menu "Window" ou "Fenêtre" en Français et cliquez sur "Animation".



Une petite fenêtre toute allongée doit apparaître en bas de votre écran.



Dans cette fenêtre sont affichées chaque étape de l'animation dans l'ordre de leur affichage.
Vous remarquerez, par défaut, il crée une seule étape composé de ce qui est affiché sur votre document (ici, les 12 étapes superposées).
Ce n'est pas ce qui nous intéresse. Nous, ce qu'on veut, c'est créer une étape par calque.
Pour cela, il suffit d'aller dans le menu déroulant du module en cliquant sur l'icône encadrée en rouge en haut à droite et de cliquer sur "Make frames from layers" ou "Créer des images à partir des calques" en Français.




Vous remarquerez qu'il a pris en compte le calque "Background" qu'on n'a pas utilisé. On n'en veut pas. Pour supprimer l'étape correspondante, il suffit de cliquer dessus pour la sélectionner et de cliquer sur l'icône de la poubelle encadrée en rouge.
Pour lire votre animation, il suffit de cliquer sur la flèche de lecture encadrée en vert. Et magie !!! Vous avez votre animation. Very Happy

/!\ Vous remarquerez que lors de la création automatique des images de l'animation à partir des calques, il commence d'abord par le calque du bas puis il remonte la pile de calques. C'est pour ça que je vous ai dit de faire attention de mettre le dessin 1 en bas de la pile et le dessin 12 en haut de la pile. /!\

/!\ Si vous souhaitez retravailler un calque après avoir lu l'animation, notez ce phénomène.
Lors de la lecture, il affiche les calques un par un, l'un après l'autre. Les calques qui ne sont pas affichés lors d'une étape de lecture ne sont pas masqués avec le petit oeil à côté des calques, mais leur opacité est mise à 0%. Le problème, lorsque vous arrêtez l'animation, c'est qu'il ne remet pas l'opacité des calques à sa valeur initiale. Donc, si vous voulez retravailler un calque qui n'apparait pas, vérifiez son opacité. Si elle est à 0%, remettez là à 100%.
Je préviens parce que sinon, vous êtes bon pour le quart d'heure d'agacement aigu à pas comprendre ce que fout Photoshop. Laughing /!\


/!\ Attention ! Piège ! Oui, encore un, dans la même veine que le précédent. Lorsque vous faites défiler l'animation, celle-ci se joue directement dans votre fenêtre de travail. Si vous arrêtez l'animation, votre fenêtre de travail ne revient pas dans son état initial mais dans l'état qui correspond à l'étape où vous avez arrêté l'animation. C'est à dire, calque de l'état courant visible, les autres masqués. En revanche, si vous cliquez sur une autre étape d'animation dans le fenêtre d'animation, votre fenêtre de travail s'affiche dans l'état qui correspond à l'étape que vous venez de sélectionner. Ce qui veut dire que si vous faites des modifications (réafficher des calques, gribouiller dessus), elles seront directement prise en compte pour l'étape courante de l'animation et si vous la relancez, vous aurez des résultats assez folkloriques. Alors pour faire simple et ne pas vous casser la tête lorsque vous faites des modifications, vous ouvrez le menu déroulant de la fenêtre d'animation, vous cliquez sur "Delete animation" ou "Supprimer l'animation" en Français.


Cela fait, vous pouvez faire toutes les modifications que vous voulez dans vos calques en toute quiétude et une fois vos modifications finies, vous recréez l'animation de la même manière que la première fois. Ça vous évitera de longues heures de prise de tête. Smile /!\

Si la vitesse de lecture ne vous convient pas, vous pouvez changer la durer d'affichage de chaque image ou toutes à la fois. Pour cela, il suffit de les sélectionner puis de faire un clic droit sur le "0 sec." en dessous de l'une des images et de sélectionner la durée qui vous convient.


Moi, j'ai fait "Other" ou "Autre" en Français et j'ai directement tapé 0,06 secondes pour chaque image.
Et voilà le résultat ! Very Happy


Bon, c'est chouette, on a notre animation, mais on aimerait bien la montrer aux copains tout de même.
Ok ok, alors on va enregistrer ça dans un format lisible par tout le monde si vous le voulez bien. Smile

Enregistrement d'un gif animé

J'ai choisi le gif parce que notre animation est courte et on veut pouvoir la diffuser rapidement et facilement.

Pour cela, il suffit d'aller dans le menu "File" ou "Fichier" et de cliquer sur "Save for Web & Devices…" ou "Enregistrer pour le web..." en Français.


Une fenêtre de réglages apparait.


Sélectionnez le format GIF (encadré rouge), et dans "Looping Options" (encadré vert), choisissez "forever" ou "boucle". Touchez pas au reste et cliquez sur "Save" ou "Enregistrer".
Et voilà ! Vous avez votre gif ! Smile


Voilà, vous pouvez désormais créer vos petites animations avec Photoshop. Si un point vous paraît flou ou si vous avez des questions, n'hésitez pas à m'en faire part. Smile


Dernière édition par Suisei le Sam 5 Nov - 16:22, édité 8 fois (Raison : Bug imageshack)
Revenir en haut Aller en bas
http://suiseipark.blogspot.com/
Shotaro
ligne
ligne


Age: 40
lieux de résidense: Minas Tirith
Humeur: up and down
Date d'inscription: 12/10/2011

MessageSujet: Re: Faire un peu d'animation avec Photoshop + Création de gif, by Suisei   Dim 16 Oct - 15:06

Pour faire mumuse régulièrement avec le système d'animation de Toshop, c'est bien expliqué, et on comprend tout (enfin si moi j'ai compris c'est que c'est clair Very Happy )
Revenir en haut Aller en bas
http://www.taistoidonc.fr
Suisei
ligne
ligne


Age: 28
lieux de résidense: Paris
Humeur: Pouet !
Date d'inscription: 15/10/2011

MessageSujet: Re: Faire un peu d'animation avec Photoshop + Création de gif, by Suisei   Dim 16 Oct - 15:30

Merci !
Erf ! Je viens de me rendre compte que j'ai oublié de parler d'un autre piège qui peut s'avérer problématique si on fait des retouches importantes.
Je corrige cet oubli dès que j'ai fini de récurer ma nouvelle douche.
Revenir en haut Aller en bas
http://suiseipark.blogspot.com/
Radol
surface
surface


Age: 16
lieux de résidense: Nice,Alpes Maritimes
Date d'inscription: 25/09/2011

MessageSujet: Re: Faire un peu d'animation avec Photoshop + Création de gif, by Suisei   Dim 16 Oct - 16:18

C'est là que Photosop me manque...

Mais ton tuto est parfaitement expliqué et clair,merci!
Revenir en haut Aller en bas
d-jpp
Admin


Age: 60
lieux de résidense: iles de France
Humeur: Enfin réconcilié avec mon SY.S.
Date d'inscription: 27/02/2006

MessageSujet: Re: Faire un peu d'animation avec Photoshop + Création de gif, by Suisei   Dim 16 Oct - 16:48

Kek tu veux t'es pas ingénieur pour rien ...
Y rien à redire ...Sad

( )


..........................Pas de Concours ...... >>>>>>>>    ..............FIN DU CONCOURS........................... /Bienvenu Invité
Revenir en haut Aller en bas
http://d-jpp.new.fr
Suisei
ligne
ligne


Age: 28
lieux de résidense: Paris
Humeur: Pouet !
Date d'inscription: 15/10/2011

MessageSujet: Re: Faire un peu d'animation avec Photoshop + Création de gif, by Suisei   Dim 16 Oct - 17:21

Ha ! Chuis contente qu'il vous plaise. ^^
Bon, ben voilà, j'ai ajouté un petit paragraphe pour vous prémunir du piège que j'avais oublié d'évoquer.
Revenir en haut Aller en bas
http://suiseipark.blogspot.com/
philhamel
romboïde
romboïde


Age: 52
lieux de résidense: un pied sur une ile et l autre dans les etoiles et les fesses au chaud
Humeur: creatif content ;-)
Date d'inscription: 10/10/2011

MessageSujet: Re: Faire un peu d'animation avec Photoshop + Création de gif, by Suisei   Dim 16 Oct - 20:40




je m en vais de ce pas l essayer ,
ce chouette tuto
Revenir en haut Aller en bas
Kass
surface
surface


Age: 17
lieux de résidense: Dans mon pyjama tout dou :D
Humeur: Miaw ! :D
Date d'inscription: 25/09/2011

MessageSujet: Re: Faire un peu d'animation avec Photoshop + Création de gif, by Suisei   Sam 22 Oct - 15:14

Surprised sa sera utiill sa Very Happy merci suisei ! (va falloir que je teste qqc avec mais avant de le teste faut que je fasse les dessin grrr =o=)


PackBarre.com
Revenir en haut Aller en bas
Achille
cube
cube


Age: 15
lieux de résidense: Sous la Lune ...
Humeur: Grand Artiste !
Date d'inscription: 16/10/2011

MessageSujet: Re: Faire un peu d'animation avec Photoshop + Création de gif, by Suisei   Jeu 27 Oct - 9:03

Moi j'en ai déjà fait des animations sur flipnote et merci pour l'info Suisei cheers

Revenir en haut Aller en bas
kokokaine



Age: 27
Date d'inscription: 24/10/2011

MessageSujet: Re: Faire un peu d'animation avec Photoshop + Création de gif, by Suisei   Jeu 27 Oct - 10:53

très bon tuto !! bravo Suisei ^^

Une petite info en plus lorsque vous enregistrez votre gif, il est préférable de faire aussi une sauvegarde psd (photoshop -> enregistrer sous.), car si vous voulez modifier votre animation, la reprise de votre gif sous photoshop bug de temps à autre.
Revenir en haut Aller en bas
http://www.coragraph.fr
le crayon fantome



Age: 17
lieux de résidense: dans un pot de crayon "en thé"
Humeur: hivernal
Date d'inscription: 28/10/2011

MessageSujet: Re: Faire un peu d'animation avec Photoshop + Création de gif, by Suisei   Sam 29 Oct - 14:49

sinon y'en a un tres bien et plutot facille, c'est pivot (le seul probleme c'est de créer un personage valable)
Revenir en haut Aller en bas
 

Faire un peu d'animation avec Photoshop + Création de gif, by Suisei

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
TUTTI GRAPHIES ::  :: -