[tuto] Comment réaliser une image animée à partir d'une vidéo!

Partagez
avatar
Iron Ankh
Valléen de l'enfer
Valléen de l'enfer

Masculin
Age : 31
Nombre de messages : 15822

SOS [tuto] Comment réaliser une image animée à partir d'une vidéo!

Message par Iron Ankh le Sam 19 Nov 2011 - 19:23

Après avoir vu comment on pouvait réaliser simplement un montage d'image, nous allons voir comment réaliser une animation.
En vous baladant sur le net et notamment sur les forums vous avez du voir des gens avec des bannières animées directement tirées d'un film ou d'une série.
En regardant de plus près, vous avez pu vous apercevoir qu'il ne s'agit pas d'une mini-vidéo mais d'une image au format ".gif". Enfin d'une succession d'images pour être exact.


Avant de commencer, il faut éclaircir quelques points :

- c'est une vidéo, pour le cinéma par exemple c'est un enchaînement rapide d'images, en l’occurrence 24 par secondes. C'est cet enchaînement qui créait l'illusion du mouvement et c'est illusion que nous allons utiliser pour réaliser notre ".gif".

- c'est une succession d'images. Ça veut dont dire que le poids de toutes les images utilisées s'additionne!! Attention à ne pas utiliser des images trop lourde sous peine d'avoir un ".gif" très lourd et inexploitable.

- c'est trèèèèèèèès long à faire mais c'est simple.

- GIF (ou .gif) est l'abréviation de Graphics Interchange Format, format créé vers 1987 pour échanger des images en couleur via le net. Il existe depuis d'autres formats pour faire des animations mais ils ne sont pas connus et très peu utilisés.


C'est parti pour le montage. Le but est d'obtenir cette image à la fin du tutoriel :



Pour ce faire, vous aurez besoin d'une vidéo, ici un des trailers d'Assassin's Creed Revelation qui a l'avantage d'être légalement téléchargeable sur de nombreux site comme "jeuxvideo.fr/.com".
Une fois sur votre machine, lancez le avec VLC. Vous pouvez le faire aussi depuis YouTube ou autres, sans télécharger la vidéo mais cela va vous obliger à faire des captures d'écran fréquemment, rajoutant des manipulations et étant très peu pratique.

Donc, vous avez la vidéo et le lecteur sur votre machine. La première étape va consister simplement à trouver la séquence que vous voulez garder. N'oubliez pas que l'animation finale va être une suite rapide d'images alors ne soyez pas trop gourmand sur le temps de film que vous voulez reprendre. Une séquence d'une dizaine de secondes sera largement suffisante pour débuter.

Vous allez donc devoir des captures d'écrans sur VLC.


En rouge, l'endroit où appuyer pour capture les images.

Vous n'avez pas besoin de faire des captures toutes les secondes ni tous les centièmes de secondes. Arrangez vous pour découper le mouvement pas grand passage. Pour être sûre d'avoir un enchaînement potable, faites défiler vos captures d'écrans rapidement à l'aide de la visionneuse Windows ou Picasa ou autres. Si vous arrivez à créer une illusion crédible de mouvement, c'est dans la poche!


J'ai découpé le clip en 20 images. En avant pour le montage!

Maintenant nous allons rentrer dans le vif du sujet. La première étape consiste à s'assurer que nos 20 images seront identiques pour ne pas avoir de faux raccords, de changements de taille ou tout problèmes visibles à l'écran qui gâcheraient le défilement final.
Pour ce faire nous allons redimensionner les images, ce qui est pratique pour diminuer leur poids, très utile à la fin, puis nous allons modifier la couleur des images (ce n'est pas obligatoire mais j'avais envie) et enfin les entourer avec un cadre.

1, redimensionner l'image :


Nous avons donc une image. Là c'est la numéro 19 mais il est évident qu'il faut le faire de la n°1 à la n°20!


Allez dans "Image" (1) puis sur "Redimensionner l'image" (2)


Dans le cadre Hauteur (1) rentrez la taille voulu (ici 150 pixel de haut) puis cliquez sur la chaîne (2). Vous avez remarqué que la largeur à également été automatiquement modifiée. Si ça correspond à la largeur défini pour chacun de vos images (ici 358 pixel), c'est bon. Sinon assurez vous que la chaîne est bien brisé (2) et rentrez la largeur voulu dans le cadre Largeur (3) et enfin cliquez sur Echelle (4)


2, changer les couleurs :


Allez dans Couleurs (1) puis cliquez sur Colorier (2)


Votre image va devenir bleue, pas de panique c'est du à la visualisation permanente. Votre image n'a pas encore été modifiée. Vous pouvez modifier les paramètres (1,2 et 3) dans l'ordre que vous voulez et vous pouvez soit rentrer une valeur soit faire défiler le curseur. Comme le but est ici d'avoir 20 images similaires, choisissez des paramètres pour l'image n°1, retenez les puis rentrez les directement pour chacune des 19 images suivantes. Quand c'est fini, cliquez simplement sur Valider (4)

3, rajouter un cadre :


Une fois que vous avez choisi un cadre pour l'image n°1, gardez le dans un coin en le collant dans une nouvelle image vierge par exemple. Si votre image de calque et votre image sont à la même taille, il sera automatiquement centré quand vous le collerez sur votre image. Gain de temps pour vous. Je ne rentre pas dans les détails, vous pouvez avoir l'aide pour faire un cadre dans le tuto précédent.

4, début de l'animation :


A ce niveau du tutoriel, vous devez avoir ça ou un truc qui s'en rapproche!


J'ai rajouté une image perso mais encore une fois, ce n'est pas obligatoire. Cette image est un montage de deux autres images : le logo d'Assassin's Creed, un découpage de fond dans une autre image, un changement de couleur et le cadre. Entre ce tuto et l'ancien vous avez tout pour refaire cette image!
Donc, vous ouvrez votre image n°1 (celle que vous voulez voir en première) puis vous allez dans Fichier (1) Ouvrir en tant que calque (2).
C'est la partie la plus longue et la plus pénible. Vous allez devoir ouvrir les images en tant que calque une par une, dans l'ordre!! C'est très important pour garder la cohérence de l’ensemble!! Si vous souhaitez qu'une image s'affiche plus longtemps, ici celle avec le logo, il faut suffit de l'ouvrir plusieurs fois de suite en tant que calque (ici le logo a été ouvert 4 ou 5 fois pour rester plus longtemps à l'écran).



Vous avez gagnez et c'est la dernière ligne droite pour votre montage! Allez dans Filtre (1) puis Animation (2) et cliquez enfin sur Rejouer l'animation(3)


Vous pouvez voir à l'écran le résultat non définitif, en enregistrant l'image vous pourrez régler plus finement l'image et la vitesse de défilement des calques.


Au cas où... Ficher(1) Enregistrer sous (2)


Renommez votre tas d'images et n'oubliez pas le ".gif" à la fin!


Argh, encore une fenêtre!!
En premier, assurez vous que c'est bien enregistré en tant qu'animation (1) puis vérifiez que c'est bien le (2) qui est choisi puis cliquez sur Exporter (3)



En (1) vous pouvez régler la vitesse de défilement des images. Attention c'est en millisecondes. Le mieux c'est de ne pas fermer l'image sous Gimp tant que vous n'êtes pas satisfait de la vitesse. Ici les images passent à 120 millisecondes mais vous pourriez avoir besoin de monter ou de diminuer ce temps. Ensuite, vous allez devoir régler l'enchaînement des images à l'acran (2). Si vous mettez cumulatif, les images se superposeront, très pratique pour les animations avec des calques transparents, pour faire évoluer une balle ou un barre de chargement; Sinon prenez l'option "remplacer". Vous n'avez plus qu'à enregistrer (3) et c'est prêt!!


Pour finir, en essayant de charger l'image vous pourriez ne pas réussir à voir son animation. Ça arrive souvent si elle est lourde et avec servimg. Dans ce cas, passez par un autre Uploader d'image!


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
avatar
Dawson
Valléen du ghetto
Valléen du ghetto

Masculin
Age : 33
Nombre de messages : 10437
Humeur du moment :

SOS Re: [tuto] Comment réaliser une image animée à partir d'une vidéo!

Message par Dawson le Sam 19 Nov 2011 - 23:31

Je lirai ça et j'essaierai plus tard :)


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"Je crois que tous les mystères de l'univers, toutes les grandes questions de la vie sont quelque part dans un Film de Spielberg"(Dawson Leery)
"On est des cocos mais le pire c'est qu'on aime assez ça" (Dr CAC)
avatar
couscous
DJ Vallée
DJ Vallée

Masculin
Age : 32
Nombre de messages : 1386

SOS Re: [tuto] Comment réaliser une image animée à partir d'une vidéo!

Message par couscous le Dim 20 Nov 2011 - 0:36

Un super tuto !
Tu t'es déchiré là.
Un grand bravo !

Au passage, je me suis déjà fait des gif avec une vraie séquence vidéo, pas image par image, pour une taille et un rendu équivalent, tu estimerais que ça serait plus lourd à quel point ?
Je demande ça parce que ceux que j'avais fait était pour un avatar et en plus j'avais trouvé un soft qui permettait d'alléger encore la taille du fichier.
Par exemple pour un gif d'environ 6 secondes en 120*150, ça me prends juste un peu plus d'1 Mo

(apparemment ça ne passe pas donc je zappe mon exemple mais l'idée est là)
avatar
Iron Ankh
Valléen de l'enfer
Valléen de l'enfer

Masculin
Age : 31
Nombre de messages : 15822

SOS Re: [tuto] Comment réaliser une image animée à partir d'une vidéo!

Message par Iron Ankh le Dim 20 Nov 2011 - 1:50

1mo c'est lourd, surtout pour 6 secondes de film. En fonction du mouvement tu peux obtenir les 6 secondes avec moins d'images que le film et sans perdre trop de qualité.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
avatar
couscous
DJ Vallée
DJ Vallée

Masculin
Age : 32
Nombre de messages : 1386

SOS Re: [tuto] Comment réaliser une image animée à partir d'une vidéo!

Message par couscous le Dim 20 Nov 2011 - 1:53

Euuuh, ton image les fait presque les 1 Mo et pour une seule seconde.
avatar
Iron Ankh
Valléen de l'enfer
Valléen de l'enfer

Masculin
Age : 31
Nombre de messages : 15822

SOS Re: [tuto] Comment réaliser une image animée à partir d'une vidéo!

Message par Iron Ankh le Dim 20 Nov 2011 - 2:03

elle a dû prendre du poids lors du transfert, sur ma machine elle est moins lourde.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
avatar
couscous
DJ Vallée
DJ Vallée

Masculin
Age : 32
Nombre de messages : 1386

SOS Re: [tuto] Comment réaliser une image animée à partir d'une vidéo!

Message par couscous le Dim 20 Nov 2011 - 2:17

AH d'acc, nan mais c'est vrai que tu obtiens une super qualité comme ça. Je me demandais juste si pour des images petites ça valait le coup de s'échiner autant
avatar
Iron Ankh
Valléen de l'enfer
Valléen de l'enfer

Masculin
Age : 31
Nombre de messages : 15822

SOS Re: [tuto] Comment réaliser une image animée à partir d'une vidéo!

Message par Iron Ankh le Dim 20 Nov 2011 - 2:46

ben après, j'ai voulu rester dans l'idée d'un truc pour un forum, genre signature. Mais c'est vrai que le rapport travail/taille est pas vraiment super. Y'a des logiciels qui le font depuis une vidéo je crois, directement (c'est de ça dont tu parlais hein?). L'idée ici est de modifier un peu les images.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
avatar
couscous
DJ Vallée
DJ Vallée

Masculin
Age : 32
Nombre de messages : 1386

SOS Re: [tuto] Comment réaliser une image animée à partir d'une vidéo!

Message par couscous le Dim 20 Nov 2011 - 2:49

Ouais ouais exactement.
Je t'avoue que ça fait longtemps que je ne trafique plus rien en images et ça a jamais été mon fort. Je crois qu'à l'époque j'avais fait ça avec Macromedia Flash, je parle de transformer une vidéo directement en gif.
Mais ta technique est vachement instructive et détaillée ;)
avatar
Iron Ankh
Valléen de l'enfer
Valléen de l'enfer

Masculin
Age : 31
Nombre de messages : 15822

SOS Re: [tuto] Comment réaliser une image animée à partir d'une vidéo!

Message par Iron Ankh le Dim 20 Nov 2011 - 10:53

là j'ai gardé une grande taille pour que ce soit plus visible pour tt le monde, mais si j'avais du me faire un truc comme ça, j'aurais fais plus petit, genre bouton en 100x50.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
avatar
k?
Overpowered valléen
Overpowered valléen

Féminin
Age : 31
Nombre de messages : 9511
Humeur du moment :

SOS Re: [tuto] Comment réaliser une image animée à partir d'une vidéo!

Message par k? le Dim 20 Nov 2011 - 17:14

Super ton tuto, ça peut servir je le garde de côté.
Par contre ouais 1 mo c'est super lourd, y'a pas moyen de réduire la taille en changeant des paramètres quelque part ?


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
avatar
Iron Ankh
Valléen de l'enfer
Valléen de l'enfer

Masculin
Age : 31
Nombre de messages : 15822

SOS Re: [tuto] Comment réaliser une image animée à partir d'une vidéo!

Message par Iron Ankh le Dim 20 Nov 2011 - 18:25

peut être mais je connais pas. En enregistrant chaque image en .gif elles sont plus lourde qu'en JPG. Normalement faut se limiter à des choses de petites tailles. Et puis 21 images c'est rares.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Contenu sponsorisé

SOS Re: [tuto] Comment réaliser une image animée à partir d'une vidéo!

Message par Contenu sponsorisé


    La date/heure actuelle est Jeu 19 Avr 2018 - 14:30