Réaliser un gif animé à partir d'une vidéo [Terminé !]

Bienvenue dans ce énième tutow du prof bisow\' Réaliser un gif animé à partir d'une vidéo [Terminé !] 712166

Dans ce tutoriel nous allons apprendre à faire un gif animé à partir d\'une vidéo.

Outils :

Il vous faut la version de photoshop CS3 Extended au moins. OU, si vous avez des versions antérieures, photoshop + IR (Image Ready)
Cela tient au fait que à partir de CS3 Extended, la fonction que nous allons utiliser ici n\'est pas incluse dans photoshop, mais incluse dans IR. Dans les versiosn postérieures à CS3 Extended, elle est comprise dans le logiciel.

Outcome :

Nous allons apprendre à faire ce genre de petites choses :

Réaliser un gif animé à partir d'une vidéo [Terminé !] Birhdayhug

Réaliser un gif animé à partir d'une vidéo [Terminé !] Youbroughtasnack

Réaliser un gif animé à partir d'une vidéo [Terminé !] Jacobrise

Je vais faire ce tutoriel à partir de ma version de photoshop : photoshop CS4 Extended.

Importation de la vidéo (où comment on commence à se prendre le chou) :

Pour faire ces gifs, il faut importer la vidéo dans le plan de travail de photoshop. Seulement voilà, photoshop n’accepte pas d’importer tous les types de format vidéo. Il n’accepte que les vidéos de format .mov (qu’on ouvre avec quicktime) .mpg , .mpeg et .avi .

Premier souci qui peut donc se poser : si vous avez une vidéo d’un autre format que ceux-ci, soit vous vous arrangez pour trouver la même en ces formats, soit vous utilisez un logiciel approprié qui les convertira (google est votre best friend).

Pour importer la vidéo vous faites Fichier >> Importer >> Importer une vidéo en images.

Spoiler:

Si tout se passe bien, vous devriez avoir ceci

Spoiler:

Malheureusement, parfois malgré le fait que le format soit le bon, vous ayez ceci .

Spoiler:

Cela est dû aux codecs de la vidéo que photoshop ne reconnaît pas ou n’a pas. Bref, ça fait un truc blanc et il peut pas travailler avec. Ce qui nous embête bien. Vous n’avez alors qu’une solution : passer par un logiciel qui vous mettra la vidéo dans le même format, mais avec les bons codecs que toshop pourra lire. Le seul que je connaisse est Windows Movie Maker, déjà intégré dans votre PC.

Windows Movie Maker :

Petit détour rapide pour vous expliquer comment on fait cette transformation sous WMW. Faites « importer le média » , allez chercher votre vidéo dans le PC. Puis faites glisser la vidéo apparue en haut, vers le premier « cadre » en bas à gauche.
Spoiler:

Ensuite cliquez sur « Publier un film » . Sélectionner « Cet Ordinateur » Définissez lui un nom et l’emplacement sur lequel il sera transféré. Sélectionnez ensuite « autres paramètres » et « DV AVI (Pal) », puis cliquez sur « Publier ».

Importez ensuite cette vidéo sous photoshop comme dit plus haut, et là, vous devriez pouvoir voir la première frame de votre vidéo au lieu du blanc.

Donc, si nous reprenons à la capture 2 où tout se passe bien quand on importe la vidéo, vous avez plusieurs choix avant de confirmer.
Vous avez le choix entre demander à photoshop de diviser votre vidéo en calques du début à la fin de celle-ci. Ou de sélectionner seulement une partie de la vidéo.
Pour faire ces gifs, il est préférable de prendre la seconde option parce qu’on va pas faire un gif qui dure 1h hein. Il faut savoir qu’en moyenne, un gif animé/vidéo est constitué de 15 à 30 frames.
Celui que je ferais ici, a environ 11-16 frames. J’ai dû limiter parce que je les utilise majoritairement sur LiveJournal où la taille des gifs que l’on peut ulploader en tant qu’image perso ne peut excéder les 40ko. Ce qui limite vachement le nombre de frame. Mais basiquement, vous pouvez y aller jusqu’à 30-45 frames si vous n’avez pas de restriction de taille finale pour l’uploader sur un site ^^.

Pour sélectionner une partie de la vidéo,appuyez sur play, bougez le curseur sous la vidéo jusqu’à arriver à peu près au début de l’endroit que vous voulez garder et maintenez enfoncée la touche SHIFT de votre clavier en même temps que vous bougerez le curseur jusqu’à à peu près la fin de votre extrait. Vous devriez voir apparaître une zone grisée plus foncée sur la barre de navigation, signalant l’extrait que vous avez choisi de garder.

Spoiler:

Cochez « limiter à » et laissez la valeur par défaut qui est de 2.
Et cliquez sur OK.

C’est le moment où vous allez voir si vous avez un ordinateur puissant, capable de supporter une des tâches les plus gourmandes en vitesse et en mémoire de PC. Assurez vous d’avoir de la place sur le disque dur où vous avez installé toshop. De toute façon, si photoshop n’y arrive pas, il ne se gênera pas pour vous signaler par un message d’erreur que « erreur, il n’y a pas assez de mémoire disponible sur le scratch disque », et ne fera pas la tâche demandée. Dans ce cas, allez dans Edition >> Préférences >> Performances. Dans la fenêtre affichée, sur la gauche vous verrez apparaître dans un cadre les différents disques durs présents et connectés à votre PC (si il y a). Pour une performance optimale, en général on conseille de cocher deux disques durs, l’un qui a vista installé dessus et un autre avec masse de mémoire disque disponible. Débrouillez vous donc pour cocher ces deux types de disques dur. A défaut de deux disques dur, si vous n’en n’avez qu’un, libérez alors de la mémoire pour que toshop puisse faire sa tâche correctement . N’oubliez pas de valider. Redemandez lui la tâche plus haut, et vous devriez voir la bestiole l’effectuer sans rien dire ^^

L’Animation (ou commence ENFIN l’action, la vraie):

Après l’importation vous vous retrouvez avec trois tonnes de calques dans la fenêtre des calques. Beh oui, toshop a fait son boulot et a découpé la vidéo en frames/images/calques.

Il vous faut maintenant afficher ZE fenêtre qui fait à peu près tout : Animation. Allez dans Fenêtres >> Animation. Et là, z’avez une nouvelle longue boîboîte qui s’affiche. Elle est subdivisée en deux onglets comme vous le voyez sur la capture. Choisissez le tout premier comme moi , où s’affichent les images.
Vous avez donc une interface qui ressemble à ceci :

Spoiler:

Histoire que ça soit pas trop le bordel dans la fenêtre des calques, sélectionnez donc tous vos calques et regroupez les en un fichier.

Bien, c’est là que ça se corse. Pour réaliser ce gif, il va falloir jongler entre deux fenêtres : celle des calques et celle des frames (images).

Il faut savoir que à chaque frame que vous avez, correspond en fait un calque. Quand vous cliquez sur une frame, regardez dans la fenêtre des calques, la frame sélectionnée correspond à celle qui a un œil à côté. L’œil signifie que le calque est visible. Quand une frame est sélectionnée, un calque est visible, les autres pas.
Donc, d’après cette logique, toute action sur une frame, influe sur les calques donc.

On va donc bien séparer ce que vous allez faire sur les deux fenêtres :
Sur celle des frames : vous allez gérer les temps, le nombre et les éventuelles apparition/disparition.
Sur celle des calques : tout. Comme une création.

Définir la vitesse de défilement (ou comment que ça va vite ou pas) :

On commence par bien poser le plan de travail sur celle des frames :
Cliquez sur la petite icône en haut à droite de la fenêtre et cliquez sur « sélectionnez toutes les images ». Puis faites un clic droit sur la flèche en bas à droite d’une des frame et sélectionnez « Autres ». Changez le 0,04, mettez un temps de 0,08 secondes.
Ce temps est le temps entre chaque frame. Ce qui correspond à la vitesse normale de la vidéo.
Pour ne pas se tromper, il faut faire un simple calcul à partir du nombre de frame que vous avez demander à toshop de fractionner lors de l’import de la vidéo et la valeur par défaut de 0,04s entre chaque frame. On a pris 2 lors de l’import. On multiplie 2 par 0,04, ce qui nous donne 0,08. Si vous avez pris 3, ça fait un temps de 0,12s etc…

Une chose importante : faites en sorte qu’avant chaque action que vous allez faire, la frame sélectionnée dans la fenêtre des frames, soit la toute première. Sinon gare aux gros problèmes par la suite…

Réduction de la taille (ou comment que ça devient tout rikiki qu’on voit plus rien – ou presque) :

Pour faciliter un peu le déroulement par la suite de la vidéo, on va réduire la taille de l’ensemble. Moi je veux l’inclure dans un avatar de 100x100. Je me foule pas, et puisque je veux un cadre, je vais donc choisir une taille de vidéo qui va occuper la moitié en hauteur mais les trois quart en largeur , donc 70x50.
Bien sûr, si vous voulez que votre vidéo occupe entièrement l’avatar, laissez à 100x100. Mais il sera difficile de mettre par la suite un cadre Réaliser un gif animé à partir d'une vidéo [Terminé !] 77189

Réaliser un gif animé à partir d'une vidéo [Terminé !] 77189

Je prends l’outil recadrage (en dessous du lasso), donc je vais régler les paramètres(dans la barre en haut. Mettez px après la valeur) pour qu’il me fasse un beau cadre de 70x50 sans souci pour moi de savoir si j’ai trop pris ou pas. Sélectionnez la partie que vous voulez garder, puis clic droit >> recadrage.

Spoiler:

Le cadre (ou comment qu’on fait un cadre sans en faire vraiment un tellement qu’on est feignant) :

Vous vous retrouvez avec un machin tout rikiki par rapport à avant. Maintenant, on va faire le « cadre ».
Allez dans Image >> Taille de la zone de travail. Sélectionnez comme mesure les pixels (et pas les cm comme par défaut) et mettez 100x100. Un fond transparent apparaît.

Notez qu’il est apparu sur chaque frame de votre fenêtre d’animation. On va colorer ce fond.
Allez dans la fenêtre des calques, créez un nouveau calque que vous placez en dessous du dossier Animation contenant les calques images. Prenez le pot de peinture et appliquez y la couleur de votre choix.

Spoiler:

Et là, tadaaam sur chaque frame, le fond est apparu !

Le triage (ou comment que c’est bien beau, mais c’est bien l’bordel dans tout ça, on JETTE ! ) :

On va faire l’étape qui consiste à trier un peu ce qu’on garde de ce qu’on jette dans cette animation.
Ah ! vous avez certainement remarqué que la fenêtre des frames a un petit bouton « play » « stop » et tout. Vous pouvez jouer votre animation pour voir un peu la vitesse et aussi ce qu’elle contient.

Placez vous dans la fenêtre des frames et procédez méthodiquement comme suit :
En vous aidant du bouton play pour estimer ce que vous gardez ou pas dans les frames, sélectionnez les frames que vous ne voulez pas garder et appuyez sur la petite corbeille en bas de la fenêtre des frames. Donc parallèlement placez vous dans la fenêtre des calques, ouvrez le dossier et chercher le calque qui a l’œil à côté.
Si vous faites le début de l’animation, la frame sélectionnée doit être la toute première, et supprimez alors tous les calques avant le calque avec l’œil.
Si vous faites la fin du gif,la frame sélectionnée doit être la toute dernière ; et supprimez les calques au dessus de celui avec l’œil.
Cela réduira déjà bien grandement le contenu du gif et sa taille/poids !
Me voilà à mon objectif : 14 frames. Contente je suiiis !

Spoiler:

Basiquement, sans fioriture ni amélioration, votre gif est terminé à ce stade ^^

Si ça vous plaît comme ça, ou que vous vous dites que « jusque là ce fut assez dur faut pas déconner nan mais oh j’arrête j’suis crevé » alors passez à l’enregistrement :

L’Enregistrement (ou comment ne pas se retrouver comme un gogol à devoir tout refaire) :

Fichiers >> Sauver pour Web. Et là, apparaît ZE fenêtre de ouf malade. Choisissez tout en haut, l’onglet « 4 vues ». Photoshop vous présente alors donc 4 vues différentes avec des réglages différents qu’il a fait lui-même.
Pour ceux qui ont une limite de taille à respecter ça devient très important comme outil cette vue à 4.Parce que en dessous de chaque vue, il y a la taille que prendra le gif choisi. En haut à gauche, l’original, sous format .psd. Donc inutile de le choisir, nous on veut .GIF. Il nous en reste trois donc. Sur les trois, basiquement voici les 2 réglages qui changent : le nombre de couleurs et le « dither » (j’sais pas en français ce qui est mis, ça doit être la précision je crois).
Plusieurs modes de couleurs existent, mais deux sont vraiment utiles et exploitables pour donner qqchose de correct ici : 256bit et 128bit. Quand au dither y a 0 et 100%, que bien sûr vous pouvez choisir de régler à n’importe quelle valeur hein. Vous pouvez là aussi, faire jouer l’animation pour les 4 en même temps et regarder ce qui change et ce qui vous plaît le mieux. Comparez par rapport à l’original et réglez les paramètres à droite. Une fois réglés appuyez sur OK et enregistrez dans votre PC. Et voilà, prêt à être exploité on the web !

Note : plus vous montez en couleur et en dither, plus la taille du GIF augmentera. De même, plus on augmente le nombre de frame, plus la taille augmentera. Et également, plus la taille de la vidéo sera grande, plus son poids sera grand et moins vous pourrez mettre de frame (durera donc moins lgtps) pour que ça rame pas. D’où le fait que les gifs vidéos soit du 50x50 et pas du 1000x1000

Si vous êtes pas fatigués ou que vous êtes des ouf malades qui veulent souffrir jusqu’au bout du toshop pour avoir ZE gif travaillé jusqu’au bout, on continue donc.

Ici, on va rajouter des brush sur le fond , améliorer les couleurs de la vidéo (comme un coloring, mais en vidéo mwahaha), pourquoi pas faire un fondu sur la fin et un petit texte tout mimi histoire de vous montrer comment qu’on faiiiiit.

Les brush on the background (ou comment on améliore son fond pour que ça fasse plus classieux) :

Dans les calques, on créé un nouveau calque qu’on place au dessus de celui du fond , mais en dessous du dossier. Dans la fenêtre des Frames, on vérifie bien que notre toute première frame est bien celle sélectionnée aussi. On prend ses p’tits brush, une couleur et hop on y va.

Ça, c’était facile. Même pas mal qu’on dit.

Le coloring (ou comment on voit tout de suite mieux la vidéo) :

Rien de bien compliqué là aussi. Même principe que le brush. Sauf que astuce. On réfléchit 30 secondes ici. On ne peut pas faire comme sur une créa banale à dupliquer des calques. Parce que ces calques sont des vidéos ici ! Donc, on doit se rabattre sur des techniques de coloring et d’amélioration d’image ne nécessitant pas le dupliqua de celle-ci. Héhé, allez on fouille dans sa p’tite tête et on trouve quelques techniques : les ajustements.

Placez vous sur le dossier Animation et allez dans Ajustements, choisissez Niveaux et bidouillez avec les curseurs. Je vous laisse découvrir ce que chaque mouvement de curseur fait AHAH.
Si vous avez un fond coloré (comme moi), vous allez vite vous rendre compte en bidouillant les curseurs des niveaux, bah que TOUT change ! Même le fond. Quelle loose. Nous on voudrait que seule l’image change de coloration, de teinte et tout. Rien de plus simple voyooons.
Prenez l’outil sélection, faites un zoom suffisant sur votre gif (Ctrl et + ), sélectionnez la partie occupée par la vidéo. Dézoomez (Ctrl et - ), prenez vos deux calques de fond et de brush et placez les au dessus du calque de niveau (ou d’animation si vous avez pas touché encore aux niveaux), puis sélectionnez le fond et faites Supp, puis de même avec celui des brush. Vous devriez avoir ceci :

Spoiler:

Pour revenir au réglage du niveau double cliquez sur son calque Réaliser un gif animé à partir d'une vidéo [Terminé !] 77189

Ensuite j’ai mis un calque de balance des couleurs. Pareil, on bidouille, on teste. Puis, parce que la luminosité et le contraste me plaisaient pas, j’ai refait un calque réglage de niveaux.

Ca devient bon. Allez, courage , presque terminééé !

Le fondu (ou comment que l’image elle disparaît doucement, pas comme un bourrin) :

Là faut bien gérer Calques et Frames, ça rigole plus.
Créez un nouveau calque au dessus du calque Fond. Maintenez la touche CTRL enfoncée et cliquez sur le calque du Fond. Pour bien récupérer la sélection du cadre de la vidéo, faite un Ctrl + Shift+ I pour inverser la sélection. Remplissez la de la même couleur que votre fond originel.

Et là, toutes les frames se remplissent de marron. Et là vous dites « maiiiis moi j’veux pas ça, j’veux que 2 ou 3 comme ça ! ». Sélectionnez toutes les Frames et dans la fenêtre des calques, rendez invisible le calque qu’on vient de remplir . Tadaaaa a plus nulle part de marron !

Moi je veux que mon fondu se fasse à la fin. Je vais donc me placer sur la frame 12(3 frames avant la fin) et je vais faire réapparaître mon calque marron. Je fais de même pour la 13 et la 14. Vous pouvez évidemment sélectionner les trois dernières et faire réapparaître le calque Réaliser un gif animé à partir d'une vidéo [Terminé !] 77189

On vient d’indiquer que quand l’animation arrive à la 12, 13 et 14, le remplissage marron apparaît.
Maintenant, on veut qu’il se fonde. Rien de plus simple : on utilise l’opacité de ce calque de remplissage. On se met sur la frame 12 et on baisse l’opacité du calque marron à 30%. Puis on se met sur la frame 13 et on baisse l’opacité à 60%. Puis à la 14, bah on laisse à 100%. Faites jouer l’animation et OH COMME C’EST BEAUUUU, ça marche !

Rajouter du texte (ou comment on peaufine son GIF en montrant sa maîtrise de l’anim) :

Là c’est un peu plus compliqué. On veut rajouter du texte. Mais pas partout. Moi je veux qu’il apparaisse à la toute fin. Après ma 14ème frame quoi. Alors je vais ajouter moi-même une frame.
Je me place à la 14, je clique sur la petite icône à côté de la poubelle dans la fenêtre des frames et une nouvelle, une 15ème frame apparaît.

Spoiler:

Elle a pris les même paramètres que la 14ème, à savoir le remplissage marron et l’opacité à 100%. C’est une copie en somme ^^.
Restez sur la 15ème. Dans votre fenêtre Calques, créez du texte. Changez la couleur, déplacez le, bref c’que vous voulez ^^. Vous notez que, pareil que pour le remplissage marron, il apparaît sur toutes les frames. Moi je veux que la dernière. Je fais comme avant, je sélectionne toutes les frames, je rend invisible le calque texte. Puis je sélectionne la 15ème frame et je rend visible le texte.

Si je fais jouer mon animation, j’me rend bien compte qu’on a pas le temps de voir mon texte. Je vais donc changer juste le temps de la 15ème frame. Je la met ici à 1seconde. La frame reste donc 1 seconde en place avant de passer à la suivante.

Et voilà, je suis satisfaite. Je peux donc enregistrer !
Et voilà le résultat :

Réaliser un gif animé à partir d'une vidéo [Terminé !] Rsultat

Merci beaucoup bisow' pour ce tuto' je te montrerais le résultat quand j'essayerais =).

Super Tutoo =D

J'ai testéé Réaliser un gif animé à partir d'une vidéo [Terminé !] 712166

C'est un p'tiit peu beaucoup pixelliséé mais bon XD Puis la vidéo de départ avait pas une très bonne qualitéé Réaliser un gif animé à partir d'une vidéo [Terminé !] 827569

J'ai fait un long gif aussi x) J'testerai après avec un truc plus couurt Réaliser un gif animé à partir d'une vidéo [Terminé !] 827569

Spoiler:

Par contre, j'ai pas eu l'courage de finir et mettre un texte, trop fatiguéée Réaliser un gif animé à partir d'une vidéo [Terminé !] 512690

En tou cas, même si j'l'ai déjàà dit, super tuto mercii Réaliser un gif animé à partir d'une vidéo [Terminé !] 712166

Merci bisow' pour ce super tutow! Réaliser un gif animé à partir d'une vidéo [Terminé !] 451733

AH! Je suis très très très très fière d emoi! Merci Bisow'!!! <3

http://i62.www.servimg.com/u/f62/12/12/82/96/beatit11.gif

ton lien ne marche pas chez moi Réaliser un gif animé à partir d'une vidéo [Terminé !] 949701

Moi non plus, il ne marche pas... Je l'héberge pourtant avec Servimg... Je vais essayer avec mabul!
http://moe.mabul.org/up/moe/2009/06/13/img-2244006q0t6.gif
Moi, ça marche, pour celui-là =)

EDIT:
Un deuxième =)
http://moe.mabul.org/up/moe/2009/06/13/img-2339474ptgc.gif

je vois que mon tuto est clair, ça fait plaisir de voir vos résultats, réussis du premier coup !

Ton tuto est magnifique! Vraiment parfait! Bon, voyons, si j'arrive à faire un cadre è_é

EDIT: Halleluyah! J'y arrive. J'ai juste un seul problème, dans ton tuto, en faites: je n'arrive pas à faire un coloring juste sur la vidéo, et non sur le cadre =/

c'est ce que j'ai expliqué dans le tuto justement, partie coloring Réaliser un gif animé à partir d'une vidéo [Terminé !] 77189

Je sais, mais j'ai du mal xDDDD Je vais persévérer, j'y arriverai, t'inquiète pas èwé

bisow' a écrit:: je vois que mon tuto est clair, ça fait plaisir de voir vos résultats, réussis du premier coup !

Yeep, c'super bien expliqué =D

Un Deuxième pour la route x) :

Réaliser un gif animé à partir d'une vidéo [Terminé !] 090613113253459012

*Texte un peu vite à mon goût j'arrangerai pit être un jour, si j'ai pas la flemme x). Bref =P*

wé, on voit la dernière image en fond avec ton texte. Et la seconde partie de ton texte, derrière on voit encore la première partie qui n'a pas disparue x)
Il est super, j'aime bcp l'effet que t'as donné à ton texte ^^ Par contre, super sombre le coloring :/

Je me sens stupide en posant cette question mais...vous les prenez où vos vidéos? Razz

moi le trailer de New Moon je l'ai téléchargé sur une communauté de LiveJournal que je gère en collaboration avec d'autres, qui parle de toutes les news du film et des acteurs. Après, bah tu recherches un peu sur le net. Sur Youtube tu peux choper des vidéos avec un site qui les récupères et te permet de les télécharger, qui s'appelle fluvore

Ouais, j'ai un autre site qui te permet de télécharger des vidéos de Youtube ou Daylimotion avec leurs liens, il s'appelle Keepvid. http://keepvid.com/
Sinon, t'as, évidemment, des moyens illégaux, mais je te conseille pas. Ou, sinon, en dernier recours, ou i t'as un abonnement, tu peux les 'acheter'.

Ha ! 'Faut juste que je télécharge le logiciel et c'est bon Réaliser un gif animé à partir d'une vidéo [Terminé !] 512690

D'accord merci beaucoup^^.

Invité

J'ai une question, est ce que photoshop c'est un peu comme photofiltre ??
pasque si c pareil je prendrais photoshop a la place de photofiltre pour faire ce genre de chose ...

Bah, c'est dix mille fois mieux que Photofiltre. J'y croyais pas trop au début, mais quand tu explore Toshop tu trouves plein de choses qu'il n'y a pas dans Photofiltre! Rien que ImageReady, par exemple! En plus, Photoshop est utilisé par les professionels, c'est donc certain qu'il est de qualité!

Invité

Ok Merci
bah je vais peut être remplacer Photofiltre par Photoshop =)

Bonjour,

juste pour vérifier; ça ne fonctionne pas avec Photoshop 5.0 limited edition ?

Nope, tu dois avoir au moins la version CS3 Extended puisque c'est seulement a partir de celle ci que tu as l'animation intégrée a photoshop.pour les versions antérieures tu dois avoir en plus Image Ready qui possède l'animation Réaliser un gif animé à partir d'une vidéo [Terminé !] 77189

Encore une question; E-Anim peut fonctionner avec Photofiltre ?

» Réaliser un gif animé à partir d'une vidéo [En préparation]
» tite cowmmande pas longue a réaliser
» Plume Création [à partir p 11]
» foond animé
» × Faire une bannière animé • débutant ×