[GIF ANIME] Rotation (effet lecteur CD)

[Shyzen]

J'ai essayé d'être clair dans le titre mais ce n'est pas vraiment évident. Avez-vous déjà voulu créer un gif animé pour faire un bouton (par exemple) qui tourne sur lui même ? Vous êtes au bon endroit pour apprendre alors !

Pour faire un gif animé, il vous faudra au minimum deux logiciel :
- un premier pour concevoir les images. J'utiliserai Photoshop parce que je suis plus habitué à celui-ci.
- un second pour les assembler. Il y a des assembleurs qui travaillent à partir d'image gif. Moi je préfère utiliser Image Ready parce qu'il permet d'exporter son travail depuis Photoshop sans avoir à enregistré une à une les images constituant le gif. (oui pour ceux qui ne savent pas, un gif animé est en fait plusieurs images qui s'enchaînent les une à la suite des autres le tout rassemblé dans une seule et même image)


Donc nous allons créer un Gif animé sous la forme d'un bouton. La première choses à faire est de regarder ce qui sera mobile et ce qui ne le sera pas. On mettra les deux sur 2 calques différents. Ici on va mettre ce qui est mobile "en dessous" donc la partie fixe aura une zone transparente qui s'apparentera à un anneau (pour cet exemple)



J'ai laissé 3px au dessus de l'anneau pour marquer l'estampage qui suivra (on verra que ce n'est pas suffisent même si la taille de l'image finale est bien 100x103). Je tiens à rappeler que pour faire des cercles bien concentriques, il faut utiliser l'outil "Ellipse de sélection (M)" en maintenant Alt pour tracer à partir du centre et Shift pour avoir bien des cercles et non des ellipses. De plus, pensez à utiliser la fenêtre d'information : (ici le centre de mes cercles est en (50, 50 + 3) )



Maintenant qu'on a la forme de base, on va l'agrémenter avec des couleur et du texte. Pour les couleurs, j'ai utilisé l'outil dégrader avec du noir et du gris sur le disque central (sélection avec la baguette magique). J'ai ajouté un petit texte aussi :



On va donner un peu de volume à l'image. En terme artistique, on parle de galber le croquis qu'on vient de faire. Techniquement, on va faire un filtre (le petit f dans un cercle noir en bas de la page des calques). On sélectionne "Biseautage et Estampage". C'est assez compliqué car il y a beaucoup de paramètres mais c'est assez facile à s'y faire.
Pour cette image, j'ai fait comme cela :

STRUCTURE :
Style : Biseau Interne
Technique : Lisser
Profondeur : 100%
Direction : Haut
Taille : 7px
Flou : 5px

OMBRAGE :
Angle : -90° (la lumière viens du bas de l'image)
décocher la case utiliser l'éclairage globale (je ne sais pas pourquoi mais ca fait quelques effet étrange quand on passe à Image Ready)
Élévation : 30°
Laissez le reste par défaut.



Et la on se rend compte qu'on a pas tout à fait ce que l'on veux. En effet, il considère les bord de l'image comme des contour. Pour cela il suffit de ruser en agrandissant la zone de travail verticalement, on remplit en noir en dessous et au dessus de l'image d'origine et on refait le filtre. Ensuite on modifie la taille de la ZONE DE TRAVAIL. C'est très important car si on rogne ou quoi que ce soit d'autre on revient au même problème. Techniquement notre image est plus grande donc il y a toujours les bords de l'images qui sont estampés mais ils sont en dehors de la zone visible et on ne les voient donc pas. Fêtes glissez l'image si vous voulez en être sûr. Vous verrez qu'il y a de la matière en dehors du cadre (les joies de l'informatique). On obtient donc notre image fixe (tout ca pour ca...) :






Laissons la de coté pour le moment. On la rend invisible et on va travailler sur un nouveau calque en dessous. On choisit donc deux couleurs on effectue un dégradé (si possible la même teinte avec une plus clair que l'on place en premier plan et l'autre en second plan). On devrait obtenir quelque chose comme ca :



Et c'est la que ca se complique. Est-ce que l'on veut quelque chose de fluide ? La persistance rétinienne fait qu'au delà de 24 images par seconde, on perçoit le mouvement comme fluide. On doit donc prendre en compte le temps total du gif que l'on veut faire et s'en accommoder. Celui que j'ai fait a dix images par seconde. Ce n'est pas super fluide mais c'est suffisent pour la rotation sans avoir une image trop lourde (plus il y aura d'image, plus le gif sera lourd). Pour avoir 10 images par seconde, j'ai réglé (sous Image Ready) l'intervalle entre chaque image à 0.1 seconde mais avant d'en arrivé la il manque les images.

Si vous travaillez avec autre choses qu'Image Ready, pensez à enregistrer l'image entre chaque rotation du calque. Sinon créez de nouveaux calques (en copie) pour chaque rotation. En fait, ici j'ai repris une image qui à la base faisait un quart de tour en 0.6 seconde. L'image n'était pas très fluide et je l'ai donc réarrangé avec des images intermédiaires. Je me suis dis qu'une image toute les 0.1 seconde serait bien pour un premier essai et pour conserver la même durée de temps d'animation, j'ai rajouté 5 images intermédiaire pour faire un quart de tour. (plus l'image quand elle est arrivé au terme de son quart de tour). Concrètement, ca revient à diviser 90° en 6. On se retrouve donc avec 6 rotation de 15°. Il suffit donc de créer des calques (en copie : faire glisser le calque existant sur le bouton de nouveau calque en bas de la page de calque) et de lui faire faire une transformation de type rotation. Dans la barre de réglage en haut, on règle 15° et on valide. On répète l'opération 6 fois. Ensuite, comme c'est long et que je suis fainéant, j'ai dupliqué tout les calques que j'avais ainsi créés et je leur ai faits faire des rotation de 90°. Puis rebelotte avec des rotation de 180°. Au final, vous devriez avoir le calque d'origine et 23 copie.



Il ne reste plus qu'a les assembler avec la méthode de votre choix... J'ai choisi donc 0.1 seconde entre chaque image mais vous pouvez choisir 0.05. Ce sera plus fluide mais ca tournera deux fois plus vite. A vous donc de voir et d'estimer pour la vitesse. Si vous voulez garder la même vitesse avec plus de fluidité, essayez des rotations de 7,5°...

Si vous utilisez Image Ready, pour passez de Photoshop à ce logiciel il faut aller dans "Fichier" > "Passez à" > "Adobe Image Ready". Sous Image Ready, l'interface est sensiblement la même que sous Photohop. On aurait pu y effectuer tout le travail sur les rotations directement d'ailleurs. En bas, il y a une barre d'animation. On crée une nouvelle image, on règle sa durée et on choisi les calques que l'on veux faire apparaître dans la barre de calque :



Vérifiez votre animation : il est possible que certains pixels clignotent bizarrement sur les bords du disque. On aurait pu éviter le problème de la même façon qu'on a fait avec l'estampage : une image qui tourne plus grande que la zone de travaille. Si vous ne voulez pas tout refaire, jouez avec les calques à votre disposition : fêtes apparaître comme moi, le calque et ses deux précédents (en dessous). Cela devrait suffire à les faire disparaître.

Résultat final :



C'est à mettre sur un site au font noir. Un aperçu sur le site d'Holy Quest : http://holy-quest.forum-actif.net/portal.htm


Autre exemple : la même chose avec 0.05 seconde entre les images.

[Kyni]

Merci pour ce tutoriel Shyz *__*
J'en avais grand besoin!

*saura comment faire ça proprement pour la prochaine fois*

NB: il faut que tu ailles remplir ta fiche avant de poster des tutos normalement, c'est réservé aux membres ça... mais bon je te pardonne XD (par contre va remplir ta fiche zou!)

[Mélie]

Wow, c'est impressionnant *_* merci pour ce tuto qui ne me servira probablement pas tout de suite mais on ne sait jamais !!

[Contenu sponsorisé]