Comment faire un Gif animé ?

Bon, je commence par les explications de base, les détails viendront ensuite

Une fois votre création et après avoir ouvert la fenêtre animation si cela n'est pas fait ( Fenêtre > Animation ), dupliquez deux fois votre création grâce à ce bouton :



Placez-vous sur le calque de texte de l'image 1 et réglez l'opacité à 100%, puis sur le texte de l'image 2 et réglez l'opacité à 0%, puis sur le texte de l'image 3 et réglez l'opacité à 100% :



A présent, replacez-vous sur la 1re image de la fenêtre d'animation et cliquez sur le bouton trajectoire : les petits ronds qu'on voit là

Vous allez voir apparaître une fenêtre de dialogue :



Laissez les réglages comme ils sont, ne changez que le nombre d'images à ajouter, j'ai mis 15 (Attention plus il y a d'images et plus votre animation sera lente).

A présent, votre animation possède 18 images (les trois de départ + les 15 qu'on vient d'ajouter).
Positionnez-vous sur l'image 17 (l'avant-dernière, donc) qui a une opacité de 0% pour le calque texte et cliquez à nouveau sur "Trajectoire" pour créez les images manquantes.

Jouez l'animation pour voir si ça vous plait (bouton Play, comme pour les chaines hi-fi).
Si c'est ok, vous allez devoir enregistrer votre créa. Enregistrez votre animation en gif en faisant "Fichier > Enregistrer pour le web et les périphériques" (puis là, vous choisissez bien le format gif et vous aurez votre créa animée dans un dossier associé à une page web, mais ça ne pose pas de problème : ouvrez ledit dossier et vous aurez votre bonheur).

Voilà le résultat (vite fait) pour ce tuto :



Remarque : je vous conseille d'enregistrer votre créa en psd au cas où vous auriez un jour des modifications à y apporter.

Faites votre créa, moi je choisis une userbar pour l’exemple.



Comme vous pouvez le constater, la fenêtre des calques est visible, ainsi que celle de l’animation.
Dans votre fenêtre d’animation, dupliquez votre créa.



Puis, dans votre palette de calques, placez-vous sur le calque qui doit bouger (ici, le render de Bob Sinclar) et appuyez sur V pour pouvoir faire bouger ce calque (j’utilise les touches directionnelles pour ne pas dévier mon image).
Ici, il faut faire attention à vos effets : il faudra peut-être faire bouger un deuxième calque si celui-ci fonctionne avec l’image que vous voulez faire glisser.

Retournez à votre fenêtre d’animation et placez-vous sur la première image, de manière à la mettre en surbrillance, puis, cliquez sur "Trajectoire"



Il n’y a pas grand-chose à changer dans la boîte de dialogue qui s’ouvre, juste le nombre d’images :



Il faut éventuellement régler le temps des images si, comme moi, vous ne l’avez pas fait d’emblée en commençant votre animation. Pour ça, il faut sélectionner toutes les images de votre fenêtre d’animation et cliquer sur une des petites flèches de temps.



Vous pouvez, si vous voulez, faire revenir votre image en bas : il suffit de refaire une trajectoire en sélectionnant la dernière image dans la fenêtre d’animation et de modifier, dans la boîte de dialogue, "Image suivante" en "Première image" et votre animation se fera en boucle.

Voilà, il reste à enregistrer votre créa animée :
Fichier > Enregistrer pour le web et les périphériques



Veillez toujours bien à ce que ça soit en Gif ! sinon, vous aurez fait tout ça pour rien XD

Alors, vous allez voir que ça ressemble assez au défilement vertical pour les étapes à effectuer, mais tant mieux, comme ça, ce sera plus facile ^^

Faites donc votre créa. Cette fois, je fais une petite signature.



Alors voilà, je voudrais ajouter un texte qui défilerait de droite à gauche sur cette signature. En fait, rien de plus simple : il faut d’abord créer ce calque de texte et le placer soit au-dessus du stock (ici, la fille aux cheveux flamboyants), soit en dessous. La différence est simple : si vous mettez le texte au-dessus, on le verra passer devant la fille dans l’animation, si vous choisissez de le mettre en dessous, le texte de l’animation passera derrière elle.

Moi je le mets au-dessus et j’applique quelques options de fusion.



Bon, évidemment, il va falloir commencer à bidouiller pour notre animation, maintenant…
D’abord, il faut agrandir un peu votre fenêtre de travail pour avoir un champ de vision plus large (n’agrandissez pas au maximum, c’est chiant).
Avec l’outil de déplacement des calques (raccourci = touche V de votre clavier), prenez le calque de texte et faites-le glisser tout à fait à droite de votre créa, on ne doit plus le voir du tout :





Dans votre fenêtre d’animation, dupliquez l’image telle qu’elle est, donc, avec le calque de texte tout à fait à droite.



Positionnez-vous sur l’image portant le numéro 2 et retournez à vos calques. Il va falloir à nouveau déplacer le calque du texte, mais cette fois-ci, tout à fait sur la gauche, jusqu’à ce qu’on ne le voit plus, donc (shift et flèches directionnelles, pour aller plus vite).
Une fois que c’est fait, vous pouvez créer les images manquantes de votre animation (bouton trajectoire).

Ici, le problème qui se pose est le réglage de la vitesse de défilement, il faut toujours faire un essai (bouton play) pour voir ce que ça donnera, car il n’est pas facile de déterminer le nombre d’images à créer ni le laps de temps. Pour cette signature de 400 px de largeur, j’ai créé 40 images manquantes, avec un temps de 0.2 :



Il est possible de faire revenir le texte de gauche à droite, en créant les images manquantes entre la dernière et la première image (cf. tuto pour l’image qui défile verticalement).

Cette technique de défilement peut s’utiliser pour des images aussi, évidemment.

Alors cet effet, assez facile à faire, donne ceci :



Pour commencer, faites votre créa, sans texte, et aplatissez-là (Calque > aplatir l’image).



A présent, créez le calque de texte sur lequel vous allez mettre votre effet scanner.
Vous l’aurez compris, nous allons ici animer le texte « Do you know me ? » (police = Fluoxetine)



Une fois que vous avez fait votre texte, faites Ctrl+shift+N pour créer un nouveau calque au-dessus du calque de texte. Sur ce nouveau calque, avec l’outil trait (s’il n’est pas affiché, il faut le sélectionner dans la barre d’outil en cliquant du bouton droit de la souris sur l’outil rectangle, forme personnalisée, etc.).
Moi, je lui mets 4px d’épaisseur et j’y ajoute une lueur externe (données variables à modifier comme vous le voulez).



Comme vous pouvez le constater, j’ai placé mon trait à gauche du texte et j’ai veillé à ce qu’il ne le « touche » pas.

Créez un nouveau calque, masquez le calque du trait (cliquez sur l’œil à gauche du calque dans votre palette) et positionnez-vous, toujours dans la palette des calques, sur le calque vierge et faites Image > appliquer une image. Votre fond est désormais copié.



Dans la palette des calques, sélectionnez la copie du fond, puis placez votre curseur sur l'icone "T" de votre texte , en maintenant la touche "control" cliquez sur l'icone "T" Votre texte est ainsi sélectionné et apparait en pointillés sur la copie de votre fond :



Appuyez sur la touche Del (Suppr) pour effacer la sélection sur la copie de votre fond.

Cliquez sur l’œil pour rendre à nouveau visible le calque du trait (qui en fait est caché par la copie du fond) et passez dans la fenêtre d’animation.

Dupliquez l’image (frame) que vous avez là et restez positionné(e) sur la duplication, puis repassez dans votre palette des calques. Là, il faut vous positionner sur le calque du trait et, à l’aide de l’outil de déplacement des calques, faites glisser ce trait vers la droite, en le laissant bien sur le texte.

Dans la fenêtre d’animation, positionnez-vous sur la première image et créez les images manquantes grâce au bouton de trajectoire.



Positionnez-vous sur la toute dernière image de la fenêtre d’animation et cliquez encore sur trajectoire :



Pourquoi moins d’images cette fois ? eh bien simplement pour faire revenir le faisceau plus rapidement qu’à l’aller.

Réglez le temps (0,2 pour moi)

Et enregistrez pour le web et les périphériques.

Donc, maintenant qu’on a ouvert notre fenêtre d’animation, on va dupliquer deux fois notre première image (pour en avoir trois).




Puis, vous vous positionnez sur la première image dans votre fenêtre d’animation et vous la mettez en surbrillance avant de passer dans votre palette de calques où vous rendez invisibles les deux derniers calques de lune :



Ensuite, il faut se mettre sur l’image 2 de la fenêtre d’animation et faire comme juste au-dessus, mais en gardant visible le deuxième calque de la lune.



Vous l’aurez compris, on fait pareil pour la troisième image :



Voilà, il ne reste qu’à régler le temps, moi je mets 0,13.



Autres rendus possibles :



Ça marche aussi sur du texte =)

Virtual Dub : pour sélectionner le passage qui vous intéresse.
Autres ressources : voir ici (Attention : FVC est une version d'essai qui ne dure pas longtemps)

Mais ? Tu gères trop ?
Je testerais ça à mon retour de vacances
Un gros merci Rodolphus

J'ai hâte de voir le résultat, mon petit Beia...
Les autres aussi, bien sûr

J'avoue Moi aussi je ferais ça quand j'aurais du temps devant moi autrement dit... La semaine prochaine surement

Je vais tester ça aujourd'hui ou demain

Youuuhouuu j'ai réussit

Je vais par contre rallonger un peu le temps pour le Tonks de la fin ... et après essayage pour le mettre dans une création

Bien joué, Tonkinette !
Oui, le texte à la fin, il faut mieux doubler voire tripler le temps de l'image.

Par contre, Rodolphus :
Tu dis pour le texte qu'il faut centrer à vu d'oeil .... Pourtant, en cliquant droit dessus, il y a Move to center, qui le fait automatiquement ... A moins que je ne me trompes ?

A vrai dire, je n'en sais rien... je ne fais plus comme cela depuis maintenant deux ans :s
Mais tu as peut-être bien raison... auquel cas, ce serait beaucoup plus pratique !

Ah Bon, après vérification, ça semble bien centrer.

D'ailleurs, si je peux me permettre une question ... Comment fais-tu pour obtenir des gifs de la taille de celui que tu as en illustration perso ? C'est avec cette technique ou ..?

Non, je fais tout avec Photoshop, moi.
L'autre méthode, on me l'a apprise il y a longtemps, quand je ne savais pas encore animer avec PFS ni PSP.
Donc voilà...

Euh j'aurais une question pour la première méthode Quand je veux ouvrir ma vidéo avec Gif Movie Gear, il me dit : The "DIVX' codec must be installed for this AVI to be successfully imported. The codec can usually be found online by searching for "DIVX" codec.

EDIT : J'ai téléchargé un truc et ça a l'air de marcher

EDIT²: Voilà le résultat

Il te manquait un codec, tout simplement...
Sinon, il suffit d'installer K-lite codec pack et tu les as tous.

Normalement ça devrait aller mais si ça me le refait j'installerais ce que tu m'as donné Merci en tout cas pour le tuto

Bon je double post mais j'ai la flemme de bouger de compte Je n'arrive plus à utiliser Free Video converter, ils me demandent de m'enregistrer et tout Une solution ?

SI tu regardes attentivement là : https://world-of-harrypotter.forumsrpg.com/flood-f112/comment-faire-un-gif-anime-t2460.htm#39425 à côté du lien pour télécharger FVC, tu as un lien pour Format Factory... qui est gratuit à vie.

Ah J'lai téléchargé en plus J'savais pas que ça faisait la même chose