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

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.


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!


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 :



2, changer les couleurs :


3, rajouter un cadre :


4, début de l'animation :



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!

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

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à)

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é.

Euuuh, ton image les fait presque les 1 Mo et pour une seule seconde.

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

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

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.

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 ;)

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.

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 ?

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.