Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Graphisme > Image Ready > Animer un avatar > Lecture du tutoriel

Animer un avatar

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Avatar
Auteur : sadar
Visualisations : 3 021

Plus d'informations Plus d'informations
Bonjour !
Dans ce tutoriel, vous allez voir comment animer des images avec image ready. Contrairement aux autres tutoriels proposés dans la catégorie, ce tutoriel va parler de la création d'un avatar animé. J'essayerai d'être le plus clair et précis possible. Toutefois, si vous avez des doutes ou des questions, ma messagerie privée du site du zéro sera très contente d'entendre de vos nouvelles. :)
Sans plus attendre, on démarre.
Sommaire du tutoriel :
Icône du chapitre

Préréquis

Dans cette première partie, nous allons étudier les bases. Ce sera souvent du vocabulaire que j'utiliserai lors de la seconde partie. Ce vocabulaire n'est pas utilisé que par moi. Nous étudierons aussi les boutons que nous allons utiliser dans ce tutoriel.
Avant de commencer, je vais vous faire part de quelques-unes de mes créations tirées de la partie 2 :

Image utilisateur Image utilisateur Image utilisateur

On apprendra juste à animer ces images, pas à les créer. ^^

À l'assaut de Image Ready



Sans plus attendre, une première impression d'écran :

Image utilisateur


  1. Ceci est la barre des tâches de Image Ready. Nous y ferons quelques petits tours dans le tutoriel. Vous devez retenir que quand je dirai barre des tâches ce sera en haut. :)
  2. Ceci est le côté droit généralement. Cette partie nous intéresse peu, ce qui nous intéresse est la dernière mini-fenêtre [Calques, Historique, Scripts...]. J'appellerai cette fenêtre calque.
  3. C'est une barre très importante quoi que peu utilisée dans ce tutoriel, c'est la barre des outils.
  4. Ceci est la barre des options des outils.


Après cette brève description générale, je vais m'attarder sur quelques points que l'on étudiera.

Étudions la fenêtre calque



Nous allons juste voir les fonctions que nous utiliserons dans ce tutoriel.
P.S. : Désolé pour les nombres, mais je ne suis pas un peintre né. ^^

Image utilisateur


  1. Cette fonction sert à créer des groupes si jamais vous avez trop d'images. Cette fonction je la précise, mais on ne l'utilisera pas, car nous travaillerons que sur deux images. Avec deux calques on va s'en sortir. :)
  2. Cette fonction est "Crée un nouveau calque". C'est une fonction très importante !
  3. Cette fonction sert tout simplement à supprimer un calque.


Étudions la barre d'animation



Rendez-vous dans la barre des tâches > "Fenêtre" > "Cocher la case animation si cela n'est pas déjà fait". Apparition donc d'une nouvelle fenêtre.


Votre barre d'animation est maintenant activée. Étudions-la.

Image utilisateur


  1. Ceci est une barre d'avancement. C'est un peu comme si vous étiez sur votre magnétoscope ou lecteur dvd. J'appellerai cela : la barre d'avance. Original non ? ^^
  2. Nous allons passer pas mal de temps sur cette fonction. C'est la fonction d'animation si on peut dire.
  3. Je pense que vous l'avez deviné, c'est la fonction "crée un nouveau calque".
  4. Même chose, nous l'avons déjà vue, la fonction pour supprimer un nouveau calque.


Bon très bien, je crois que nous avons terminé. Nous sommes partis !

La théorie, ça va un moment...

Vos images que vous voulez animer doivent être de la même taille, si non, les redimensionner.


Créez un nouveau document. Pour ce faire, rendez-vous dans la barre d'outils : "Fichier" > "Nouveau" > "Donnez un nom à votre document" > "Mettez les dimensions nécessaires" > "Ok". Cette manipulation sert si vous avez des images venant du net. Vous faites un copier/coller dedans.


"Fichier" > "Ouvrir" > "Sélectionner votre document 1" > "Ok".

"Fichier" > "Ouvrir" > "Sélectionner votre document 2" > "Ok".

Cette manipulation sert si vos fichiers se trouvent sur votre ordinateur.

Dans tous les cas, il faut qu'à la fin de la manipulation vous ayez les deux images sur un seul et même document. Vos deux images se trouveront dans la fenêtre calque.


Jusqu'ici, ce n'est pas le cas pour la manipulation deux. Pour ce faire, mettez vos deux documents ouverts côte à côte [il faut que vous voyiez les deux]. Toutefois, sélectionnez-en un. L'autre a alors sa barre d'affichage un peu grisée. "Vous allez dans la fenêtre calque de ce même document" > "Vous sélectionnez le calque de l'image" > "Vous faites glisser le calque tout en le maintenant dans l'autre document".

De cette manière, votre document 1 contient deux calques. L'image un et deux. Vous allez me dire l'image 2 n'est pas bien calée. Si vous avez bien fait la manipulation, c'est le calque le plus haut que vous devriez voir. Si vous voyez les deux, votre image de calque 2 n'est pas bien calée. Allez donc dans la barre d'outils, "sélectionnez l'outil de la première ligne [la flèche avec la croix sur la droite]" > "Allez au c%u0153ur de votre image" > "Sélectionnez l'image deux et recadrez-là".

Maintenant, on anime !



Rendez-vous dans la fenêtre d'animation. Il devrait se trouver un calque, ce que vous voyez un peu plus haut en grand. Admettons que vous avez deux images. "Allez dans la fenêtre calque et sur la deuxième calque" > "Cliquez sur l'oeil". Maintenant vous voyez en grand comme dans la fenêtre d'animation, votre image 1. Dans la fenêtre d'animation, "créez un nouveau calque" > "recliquez là où vous avez cliqué dans la fenêtre calque pour réactionner l'oeil du calque 2" > "désactivez l'oeil du calque 1". Maintenant vous voyez l'image 2. "Créez encore un nouveau calque dans la fenêtre d'animation" > "Activez l'oeil du calque 1 et désactivez celui du deuxième".

Dans la fenêtre d'animation, "sélectionnez votre calque 3" > "appuyez sur la fonction d'animation" > "Trajectoire avec l'image précédente" > "15 images à ajouter" > "Tous les calques" > "Cochez les trois dernières cases" > "Ok".

Revenez au calque deux de votre fenêtre d'animation et faites la même manipulation qu'une ligne plus haut. Normalement, une fois cela effectué, "vous sélectionnez le calque 17 (un truc comme ça :p ) "> "Cliquez sur la petite flèche en dessous de la miniature" > "Donnez-lui une valeur d'une seconde". "Sélectionnez le calque 1" > "Donnez-lui une valeur de une seconde". Une petite vérification, dans votre barre d'animation et il devrait y avoir "Une fois " ou "Toujours". Si cela est une fois, cliquez sur la petite flèche à côté et accordez-lui une valeur de toujours.

Explication de tout ce travail



Vous avez créé trois images. Pourquoi, alors que vous en aviez que deux ? Un petit schéma s'impose. :p
P.S. : Je ne suis pas bon pour les schémas non plus. ^^


Image utilisateur


Si vous enlevez la deuxième flèche et le troisième carré, cela fera un retour au carré un. Hors ça se passera d'un coup, ce qui fera mal aux yeux donc une liaison n'est pas mal. :)

Pourquoi avoir créé 15 images ? C'est moi qui ai choisi. Tout simplement je trouve que c'est un bon rapport rapidité (par trop vite / pas trop lent). Vous pouvez changer cette valeur, si vous la diminuez cela ira plus vite, si vous l'augmentez cela ira plus lentement.

Ensuite pourquoi accorder des valeurs aux images ? C'est le temps qu'il va passer sur l'image avant d'aller sur la suivante. C'est pour faire une petite pause histoire de bien voir l'image.

Pourquoi avoir mis "Toujours" ? Très simplement, si vous avez mis "Une fois", l'animation ne se serait répétée qu'une fois. :)

L'étape ultime



Maintenant votre fichier créé, vous pouvez le tester avec les fonctions d'avancement. Une fois cela effectué, "rendez-vous dans la barre des tâches" > "Fichier" > "Enregistrer une copie optimisée sous..." > "Enregistrer votre copie".

Pour que l'animation marche, il faut que la copie soit avec l'extension .gif


Vous n'aurez plus qu'à l'héberger. Attention, une image animée pèse lourd, donc si vous avez des problèmes, référez-vous à ce lien : Tutoriel des hébergeurs d'images.
Je ne fais pas de pub, mais il y a quelques projets des zéros dedans. :)

Voilà, ce tutoriel est à présent terminé. Je vous remercie de m'avoir suivi. Comme indiqué plus haut, n'hésitez pas à m'envoyer un mp.
À la prochaine ! :)
Retour en haut Retour en haut


Créé : le 27/02/2008 à 11:09:41
Modifié : le 22/08/2008 à 16:06:26
Avancement : 100%
Licence : Copie non autorisée

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news | XHTML 1.0 | CSS 2.0
Édité par Simple IT SARL : Nous contacter | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 254 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.0765s (0.066s)