CalendrierAccueilFAQRechercherS'enregistrerMembresGroupesConnexion

Partagez | 
 

 [Tuto ImageReady] Animation Diaphragme

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



Nombre de messages : 5
Age : 37
Date d'inscription : 21/05/2006

MessageSujet: [Tuto ImageReady] Animation Diaphragme   Mar 22 Aoû - 2:10

Salut tout le monde !
Je vais tenter de vous apprendre à créer une animation d'ouverture d'un diaphragme, ou plus simplement : l'ouverture d'une porte blindée d'hélices. Et par là-même, vous apprendre à utiliser un script qui répètera une même opération autant de fois que vous le souhaitez.

Voici ce à quoi nous voudrions arriver :



  • Etape 1 : Mise en place du décor
    Nous allons ouvrir un nouveau document de 170*170 px.
    Sélectionnez l'outil "Ellipse" (raccourci U), et tracez un rond de 160*160 px que l'on va appeler "RondCentral".
    Vous devriez arriver à cela :





  • Etape 2 : Création des repères principaux
    Nous allons créer des repères afin de faire un travail de précision, ce qui sera primordial pour l'animation finale.
    Allez dans le menu "Affichage -> Nouveau Repère...".
    Choisissez d'abord l'option "Horizontale", et mettez la valeur "50%" pour la position.
    Refaites de même, mais en choisissant cette fois "Verticale"
    C'est magnifique ! Vous avez deux repères placés parfaitement au milieu de votre cadre ! Vous avez donc ça :



    Si les repères ne s'affichent pas, vérifiez que l'option est bien activée (raccourci CTRL +:)



  • Etape 3 : Création de la première hélice
    Commencez d'abord par dupliquer le calque "RondCentral" (clic droit sur le calque -> Dupliquer le calque).
    Vous appellerez ce nouveau calque "Hélice 1", changerez sa couleur en rouge, et le pixelliserez (clic droit sur le calque -> Pixelliser le calque)
    Récupérez la sélection de ce dernier en maintenant la touche CTRL appuyée, tout en cliquant sur la zone entourée en rouge sur ce screen :



    Sélectionnez le calque "Hélice 1" en cliquant simplement dessus.
    Utilisez l'outil "Rectangle de sélection" (raccourci M), et déplacez votre sélection vers le bas avec la touche SHIFT enfoncée jusqu'à ce que le haut de celle-ci rejoigne le repère horizontal en son milieu :



    Appuyez sur la touche Suppr.
    Gardez votre sélection active, et déplacez là de façon à avoir quelque chose qui ressemble à ce screen :



    Pour cette partie, n'hésitez pas à zoomer à fond pour que la sélection soit la plus précise possible.
    Maintenant, faites un clic droit sur votre sélection, et sélectionnez l'option "Intervertir" (raccourci MAJ + CTRL + I).
    Appuyez sur la touche Suppr.
    Voilà, votre première hélice est créée ! Vous devriez avoir quelque chose qui ressemble à ça :





  • Etape 4 : Création des autres hélices
    Bon alors là, ça va être assez difficile à expliquer, mais je vais faire avec les moyens du bord hein :mrgreen:
    • Dupliquez votre calque "Hélice 1", et renommez le "Hélice 2".
      ZOOMEZ A FOND VOTRE CALQUE de sorte à voir votre calque + le croisement que forment les deux repères.
      Sélectionnez ce nouveau calque, et allez dans le menu "Edition -> Transformation manuelle" (raccourci CTRL + T).
      Maintenant, il va falloir que vous placiez le point de référence pile poil sur le croisement que forment les 2 repères ! (le point de référence est le petit rond qui se place par défaut en plein milieu du calque).
      Ceci fait, appliquez une rotation de 90° à votre calque par le menu "Edition -> Transformation -> Rotation 90° horaire".
      Validez votre transformation.

      Vous arrivez donc à ça :



    • Maintenant, dupliquez les calques "Hélice 1" et "Hélice 2", puis renommez les "Hélice 3" et "Hélice 4".
      Selectionnez les calques 3 et 4, et allez dans le menu "Edition -> Transformation manuelle" (raccourci CTRL + T).
      Après, cela marche de la même façon pour placer le point de référence, mais au lieu d'appliquer une transformation de 90°, vous allez appliquer une transformation de 180° par le menu "Edition -> Transformation -> Rotation 180°".
      Validez votre transformation.

      Vous arrivez donc à ça :



    • Dupliquez de la même façon que tout à l'heure les calques "Hélice 1", "Hélice 2", "Hélice 3" et "Hélice 4" et renommez les "Hélice 5", "Hélice 6", "Hélice 7" et "Hélice 8".
      Selectionnez les calques 5, 6, 7 et 8, puis allez dans le menu "Edition -> Transformation manuelle" (raccourci CTRL + T).
      Appliquez une rotation de 30° par le menu qui se trouve en haut de l'écran, puis validez la transformation.



      Vous arrivez donc à ça :



    • Répetez enfin la même opération, mais en dupliquant cette fois-ci les calques "Hélice 5", "Hélice 6", "Hélice 7" et "Hélice 8" et en les renommant "Hélice 9", "Hélice 10", "Hélice 11" et "Hélice 12".

      Les étapes précédentes réitérées, vous devriez arriver à ça :



    • Bon la partie de création est terminée !
      Vous pouvez appliquer quelques effets sur les calques afin d'avoir des hélices avec une tête.... d'hélices...
      J'ai opté pour un simple dégradé sur les hélices afin qu'on les distingue mieux les unes des autres pour la suite.


  • Etape 5 : Création de nouveaux repères pour l'animation
    Bon alors déjà que jusque là c'était pas de la tarte à expliquer... maintenant ça va être le cauchemar !
    On va devoir créer de nouveaux repères afin de pouvoir positionner facilement les points de référence pour effectuer les rotations des hélices pendant l'animation.
    Vous avez déjà les deux repères centraux.
    Créez 4 nouveaux repères horizontaux, et 4 repères verticaux par le menu "Affichage -> Nouveau Repère..." (répétez l'opération autant de fois que nécessaire pour arriver au compte).

    Allez maintenant on va placer tout ce petit monde !
    On va donc déplacer les 8 repères un par un, de façon à avoir quelque chose du genre (placez les approximativement pour le moment) :



    Chaque hélice forme un croisement avec le contour du rond. Il va vous falloir retrouver ces croisements, et placer les repères pile poil dessus !
    Ca va être dur, il va peut être falloir vous y reprendre à plusieurs fois, mais je ne peux pas être d'une grande aide pour vous ici. Le seul conseil que je peux vous donner, c'est d'utiliser le zoom...


  • Etape 6 : Création du script pour l'animation
    Bon on va pouvoir passer aux choses sérieuses !
    L'animation va être divisée en une dizaine d'images, où les hélices vont se déplacer de 5° à chaque fois.
    Pour ne pas avoir à répéter la transformation sur chaque hélice pour chaque fragment de l'animation, nous allons créer un script qui va enregistrer tous les mouvements que nous allons faire à partir de maintenant.
    On va donc faire une fois le changement d'angle sur chaque hélice, puis nous utiliserons le script pour qu'il le répète autant de fois que nous le voudrons !

    • Sélectionnez l'onglet "Scripts" qui se trouve par défaut à côté de l'onglet "Historique". Si vous ne le voyez pas, allez dans le menu "Fenêtres -> Scripts" (raccourci ALT + F9).
      Cliquez sur l'icône en bas de la fenêtre de scripts "Commencer un nouveau script" : , et nommez le "RotationHelices".
      Désormais, toutes les actions que vous effectuerez seront enregistrées. Si vous faites une fausse manipulation, vous pouvez toujours revenir en arrière en décochant la case qui correspond à l'action dans l'onglet "Scripts".

    • ZOOMEZ A FOND de façon à voir le calque "Hélice 1" + le 4ème repère horizontal en partant du haut + le 1er repère vertical en partant de la gauche.
      Sélectionnez le calque "Hélice 1", et allez dans le menu "Edition -> Transformation manuelle" (raccourci CTRL + T).
      Placez votre point de référence au niveau du croisement que forment les 2 repères précédement cités.



      Appliquez une rotation de -5° par le menu qui se trouve en haut de l'écran, puis validez la transformation.



    • Il va falloir faire de même pour tous les autres calques d'hélice, en prennant à chaque fois le croisement des repères suivants, en tournant dans les sens des aiguilles d'une montre.
      Par contre, faites attention ! Je dois vous faire remarquer que le calque "Hélice 1" ne se trouve pas avant le calque "Hélice 2" si l'ont tourne dans le sens des aiguilles d'une montre !

      Pour vous y retrouver, voici les calques et leur correspondance.
      Le trait bleu montre l'endroit où vous devez mettre votre point de référence pour chaque calque.



    • Lorsque vous avez enfin terminé la rotation de tous les calques hélices, vous remarquerez que ça dépasse un peu sur les bords.
      Nous allons corriger cela en 2 secondes !
      Récupérez la sélection du calque "RondCentral".
      Faites un clic droit sur votre sélection, et sélectionnez l'option "Intervertir" (raccourci MAJ + CTRL + I).
      Maintenant, sélectionnez chaque calque d'hélice l'un après l'autre, et appuyez sur la touche Suppr. à chaque fois.
      Déselectionnez, et appuyez enfin sur le bouton d'arrêt dans l'onglet "Script" :


  • Etape 7 : Répétition du script, et création du gif
    • Nous avons créé un script que nous allons pouvoir réutiliser pour qu'il refasse toutes les opérations que nous avons enregistré.
      Enregistrez votre image en cours en la nommant par exemple "Animation-1" .

      Ensuite, appuyez sur le bouton d'exécution du script (vérifiez bien que c'est le script que nous avons créé qui est sélectionné) :

      Enregistrez cette nouvelle image sous "Animation-2".

      Répétez cette opération n fois en enregistrant les images sous le nom "Animation-n", jusqu'à ce qu'on ne voit plus les hélices à l'intérieur du rond.

    • Vous pouvez désormais utiliser ces images dans un éditeur de gif pour créer votre animation !
      Lorsque vous aurez maîtrisé la technique, vous pourrez facilement personnaliser l'animation en rajoutant un texte en fondu, etc...




Merci à tous ceux qui auront lu ce tutorial jusqu'au bout, et là je vais me coucher parce que j'ai passé 3 heures à le rédiger :mrgreen:

C'était Animation Diaphragme par Derzone
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Boing
Administrateur
Administrateur


Masculin Nombre de messages : 945
Age : 26
Logiciels : Photoshop, imageready, flash
Localisation : Boing-Paradise
Date d'inscription : 08/01/2006

MessageSujet: Re: [Tuto ImageReady] Animation Diaphragme   Mar 22 Aoû - 9:51

super tuto ! merci beaucoup ! :9:

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://boing-paradise.frbb.net
Ninpo59



Masculin Nombre de messages : 1
Age : 40
Logiciels : Photoshop
Localisation : Nord
Date d'inscription : 08/04/2007

MessageSujet: Re: [Tuto ImageReady] Animation Diaphragme   Jeu 12 Avr - 23:22

Salut,voila j'ai essayé le tuto mais une fois le script terminé comment tu fait pour l'animé par ce que je ne siai pas comment faire.
Merci d'avance.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Cozmoss
VIP Render
VIP Render


Masculin Nombre de messages : 474
Age : 27
Logiciels : photoshop, imageready, flash mx
Localisation : masculin
Date d'inscription : 17/02/2006

MessageSujet: Re: [Tuto ImageReady] Animation Diaphragme   Ven 13 Avr - 19:05

Tuto très intéressant

_________________
Allez dessus et inscrivez-vous on y prend vite gout ^-^

OoMon FoliooO
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.kosmo-design.com
Orphangel
Designer
Designer


Masculin Nombre de messages : 211
Age : 28
Logiciels : photoshop
Localisation : dimension
Date d'inscription : 13/04/2006

MessageSujet: Re: [Tuto ImageReady] Animation Diaphragme   Sam 21 Avr - 2:17

Ouai bonn boulot pour l'explication.
Nice tuto.

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
ziguy



Masculin Nombre de messages : 2
Age : 26
Logiciels : photoshop / flash 8
Localisation : 77
Date d'inscription : 11/03/2007

MessageSujet: Re: [Tuto ImageReady] Animation Diaphragme   Dim 29 Avr - 1:52

Très bon tuto. Très bien expliquer. Juste la fin sur le script je n'ai pas tout compris, il bugait au moment ou je lui demandait de supprimer les bout en trop. Donc je l'ai fait manuellement pour chaque image et arrêter le script au truc des 5°.

Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Vinniboy



Masculin Nombre de messages : 6
Age : 23
Logiciels : the gimp
Localisation : Canada
Date d'inscription : 05/04/2007

MessageSujet: Re: [Tuto ImageReady] Animation Diaphragme   Lun 30 Avr - 0:49

Magnifique ce tuto! Franchement bravo!
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
kirugon



Masculin Nombre de messages : 5
Age : 24
Logiciels : adobe photoshop 7.0
Localisation : 91 essonne
Date d'inscription : 25/04/2007

MessageSujet: Re: [Tuto ImageReady] Animation Diaphragme   Sam 12 Mai - 21:34

bouuuuuuuuuuuuuuuuuuuuuuuuu -9999999999999999999
( moi 9puisance 1000000000000000000000...)
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
black luster



Masculin Nombre de messages : 1
Age : 24
Logiciels : photoshop
Localisation : belgique
Date d'inscription : 22/07/2007

MessageSujet: Re: [Tuto ImageReady] Animation Diaphragme   Dim 22 Juil - 14:33

je trouve ce tuto super mais jarrive pas a changer les couleur du calques a letape 3, quelqu'un peut m'aider ?

PS : je debute donc je connait pas bcp
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Massivec



Masculin Nombre de messages : 1
Age : 26
Logiciels : Image ready
Localisation : France
Date d'inscription : 10/11/2008

MessageSujet: Re: [Tuto ImageReady] Animation Diaphragme   Lun 10 Nov - 18:40

Merci mais je ne vois pas les sreens X_x.. quelqu'un pourrait-t-il m'aider svp ?
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
zaz



Féminin Nombre de messages : 1
Age : 35
Logiciels : adobe
Localisation : evelle
Date d'inscription : 15/04/2009

MessageSujet: Re: [Tuto ImageReady] Animation Diaphragme   Mer 15 Avr - 23:55

Je ne comprends pas ce que tu appelles "image" à nommer animation1, ni comment lancer le script!

oui je ne suis pas douée!

Je pourrai le faire manuellement mais ça ne m'aiderais pas pour l'anim' que je veux faire qui est bien plus compliquée, et où le script m'est indispensable!

Je te remercie d' avance pour ton aide!
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Contenu sponsorisé




MessageSujet: Re: [Tuto ImageReady] Animation Diaphragme   Aujourd'hui à 9:05

Revenir en haut Aller en bas
 
[Tuto ImageReady] Animation Diaphragme
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [SOFT] BOOT ANIMATION ou comment changer l'animation de démarrage de votre mobile[Gratuit/Payant]
» [TUTO] Boot animation Jelly Bean
» [Tuto] Dessin vectoriel et animation, comment faire ?
» Tuto photoshop
» [SOFT/TUTO] UOT KITCHEN : Customiser votre phone en quelques clics [Gratuit]

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Boing Paradise :: :: Graphisme :: :: Tutoriaux: :: Tutoriaux imageready:-
Sauter vers: