AccueilPortailFAQRechercherS'enregistrerMembresGroupesConnexion

Partagez | 
 

 poisson qui avance (+bulles)

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Lunard
Chef
Chef
avatar

Féminin
Nombre de messages : 642
Age : 28
Date d'inscription : 01/04/2006

MessageSujet: poisson qui avance (+bulles)   Sam 02 Mai 2009, 03:52

Ce tutoriel est divisé en deux parties: la première partie pour apprendre à animer un poisson qui se déplace, la deuxième pour ajouter des bulles à la première animations. La première partie est assez simple, la deuxième un peu plus complexe.

Partie I:
Nous allons apprendre à faire une animation comme celle-ci:


Pour commencer, nous devons avoir une joli photo de poisson de profil, moi je suis allée prendre des photos de mon aquarium, je vais prendre le poisson rouge et blanc sur cette photo:


Je le détoure soigneusement (à la plume avec un peu de gomme pour atténuer les nageoires) et j'augmente un peu les contrastes de ma photo un peu terne:


Ensuite il nous faut avoir fait la base de la créa où on veux mettre l'animation, on insère le poisson dedans, et on le met à la bonne taille (édition => transformation manuelle )


On va maintenant créer les mouvements des nageoires du poisson quand il se déplacera, pour ça on duplique le calque poisson, et on fait filtre => fluidité, puis avec l'outil déformation en haut à gauche, on déplace un peu les nageoires du poisson en gardant un mouvement naturel

( on peut utiliser alt + roulette ou ctrl+/ctrl- pour zoomer/dézoomer si besoin )

Ensuite on valide, et on duplique encore ce calque, et on refait encore le filtre fluidité pour avoir trois images du poisson avec les nageoires mises différemment.

On va lier les trois calques contenant le poisson, pour toujours les déplacer ensemble.


Voilà on va pouvoir commencer l'animation, donc ouvrez la fenêtre des animations si vous avez Photoshop CS2 ou plus, ou passez dans imageready si vous avez une version plus vieille.

Dans la fenêtre d'animation, on crée une nouvelle image.
Dans l'image un, je met les calques du poisson tout à droite, hors champ (ou tout à gauche si mon poisson regardait vers la droite); et dans l'image deux, je les met tout à gauche, hors champ aussi (ou tout à droite si le poisson regardait dans l'autre sens).
Avec l'outil trajectoire, on va créer la trajectoire entre l'image 1 et l'image 2. Le nombre d'image qu'on ajoute dépend de la distance que le poisson aura à parcourir, moi je vais mettre 50.

On a déjà l'animation du poisson qui se déplace, mais les nageoires ne bougent pas encore.


On se place sur l'image 1, et on cache les calques "poisson copie" et "poisson copie 2" (en cliquant sur le petit œil). On remarque que ces calques sont cachées aussi sur toutes les autres images de l'animation (et si c'est pas le cas, selon les version d'imageready ça peut changer, on sélectionne toutes les images de l'animation et on cache ces calques sur toutes les images en même temps).
Le but du jeu est que les calques "poisson", "poisson copie" et "poisson copie 2" apparaissent chacun leur tour. On va donc sélectionner, avec ctrl + clic (ou cmd + clic pour ceux qui ont des mac ) les images 2, 5, 8, 11, 14, 17, 20 etc (une image sur trois en commençant par la 2 ), et une fois au bout, on cache l'image 1 et on fait réapparaitre l'image 2.


Ensuite de la même façon on va sélectionner les images 3, 6, 9, 12, 15, 18, 21... et y cacher l'image 1 et faire réapparaitre l'image 3.

ça donne:


on a réussi Very Happy

_________________


Dernière édition par Lunard le Dim 03 Mai 2009, 23:22, édité 1 fois
Revenir en haut Aller en bas
http://collegepoudlard.virtuaboard.com
Lunard
Chef
Chef
avatar

Féminin
Nombre de messages : 642
Age : 28
Date d'inscription : 01/04/2006

MessageSujet: Re: poisson qui avance (+bulles)   Sam 02 Mai 2009, 06:07

Partie II: ajout de bulles dans l'animation


J'ai divisé ce tuto en deux parce qu'on peut très bien s'arrêter à la première partie, ou utiliser la deuxième partie avec une autre animation que celle de la première partie. La première partie est plus facile que la deuxième.

Je commence donc avec cette animation:

Dans la fenêtre d'animation, je vois qu'elle a 52 images (mais vous pouvez avoir le nombre d'images que vous voulez)
Le principe est le même que si on veux insérer un gif animé dans une créa (voir tuto). Nous allons d'abord créer séparément un gif de bulles qui remontent, et après on va l'insérer dans l'animation.

A) création du gif bulles
Je dessine ma bulle ( voir tuto comment dessiner une bulle )

J'ouvre un nouveau document plus haut que mon rang admin ou je veux mettre l'animation, peu importe la largeur, et je colle trois fois la bulle dedans, de trois tailles différentes (que je nomme bulle 1, 2 et 3), je les place en bas de mon document.


J'ouvre ma palette d'animation (ou je passe dans Imageready si j'ai Photoshop CS ou moins ). Je crée une nouvelle image, et je déplace mes bulles pour les placer en haut de l'image:


Je vais maintenant créer les images intermédiaires avec l'outil trajectoire, mais cette animation devant correspondre avec l'animation du poisson, il faut qu'elles aient le même nombre d'images. Mon animation du poisson contient 52 images, j'ai déjà deux images pour mes bulles, il me faut donc en ajouter 50 pour en avoir 52. Bien entendu, à chacun de calculer combien lui devra mettre d'image (une soustraction en -2 ça devrait aller pour tout le monde xD )

voilà mon animation, la votre peut donner autrement selon comment vous avez placé vos bulles, mais l'important est juste qu'on voit que les bulles montent


On enlève l'arrière plan blanc qui va nous gêner, on lie les calques des bulles et on va sélectionner tous les images de l'animation, en cliquant sur la petite flèche à droite de la fenêtre d'animation:
Spoiler:
 
encore en cliquant sur la petite flèche à droite de la fenêtre d'animation, on va "copier les images"

Une fois les images copiés, on va retourner sur l'animation du poisson (mon rang admin), sélectionner toutes les images de la même façon que précédemment.
Puis encore en cliquant sur la petite flèche à droite de la palette d'animation, on fait "coller les images", et on coche bien "coller sur la sélection"


Je lance mon animation pour voir:

On remarque deux choses: les bulles ne vont pas jusqu'en haut, et elles passent par dessus le cadre.
C'est normal, nous allons corriger ça, on a fait une animation plus haute que notre création exprès, il suffit donc de sélectionner les calques bulles dans la palette des calques et de les placer en dessous du calque du cadre, puis de les remonter un peu dans la fenêtre ou on voit notre créa pour que les bulles aillent jusqu'en haut (et au passage de les placer ou on veux de gauche à droite, le tout en gardant bien toutes les images de l'animation sélectionnées)

et voilà:

_________________
Revenir en haut Aller en bas
http://collegepoudlard.virtuaboard.com
 
poisson qui avance (+bulles)
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Bonjour, je m'appelle marin je suis poisson clown.
» mots fléchés
» "Joyeux Noël"
» A New Chapter In The Story ?
» Site de tubes

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Le fofo de Lunard :: étagère 3: Tutos et astuces :: ● Tutoriels :: Photoshop :: Imageready-
Sauter vers: