• Incruster une vidéo dans une image

    Article d'Ey@el

    Available in English

    À l'occasion du passage à l'équinoxe d'automne, je vous propose un petit tuto graphique réalisé à partir d'une vidéo filmée avec mon téléphone pour vous mettre dans l'ambiance. Il y a cinq ans (oups, déjà !), je vous expliquais comment incruster un GIF animé tout prêt dans une image à l'aide d'Animation Shop et de Paint Shop Pro (voir Articles connexes). Depuis, je suis passée à Linux et je découvre peu à peu toutes le fonctionnalités de GIMP 2.10 même si pour certaines choses (notamment les filtres externes et les masques), j'utilise encore Paint Shop Pro 8 qui fonctionne très bien sous Wine (à part certains filtres sympas mais non indispensables).

    Pour ce tuto, vous aurez donc besoin uniquement d'une version récente de GIMP disponible pour Windows, Mac et Linux.

    Matériel nécessaire

    - une vidéo au format MP4, WebM, AVI, MPEG, FLV, MOV, 3GP ne dépassant pas 100 Mo
    - une image avec une zone transparente pour y incruster la vidéo (évitez une trop grande résolution sinon l'animation résultante sera de mauvaise qualité et trop lourde à charger sur une page Web)

    Instructions

    1. Nous allons commencer par transformer la vidéo en GIF animé. Pour cela nous allons utiliser une application gratuite en ligne qui va faire tout le travail. Rendez-vous ici : https://ezgif.com/video-to-gif

    2. Dans Upload video file, cliquer sur Parcourir pour sélectionner une vidéo sur votre ordinateur ou insérer un lien vers une vidéo en ligne dans Paste video URL. Cliquer ensuite sur le bouton Upload video.

                                  Fig. 1                                                                          Fig. 2

    3. Une fois votre vidéo téléversée, vous devriez la voir s'afficher avec une barre d'outils au-dessus (fig. 1).

    4. Dans cette barre, sélectionner l'outil Resize video pour redimensionner la vidéo à une taille adaptée à l'image dans laquelle nous souhaitons l'incruster. Indiquer dans New width la taille en pixels souhaitée. Laisser le cadre New height vide pour que l'algorithme calcule automatiquement le bon ratio. Ne modifier rien d'autre et cliquer sur le bouton Resize video (fig. 2).

                                  Fig. 3                                                                          Fig. 4

    5. La vidéo redimensionnée apparaît un peu plus bas sur la page avec une barre d'outils au-dessous (fig.3).

    6. Cliquer sur l'outil Crop video pour recadrer votre vidéo sinon ignorer cette étape et cliquer sur un autre outil. Vous avez la possibilité de choisir un ratio (carré, 4:3, 16:9, etc.) ou de tracer le cadre de sélection manuellement en approchant le curseur de la vidéo comme dans un logiciel de retouche d'image et le modifier à volonté en sélectionnant un des poignées de redimensionnement tout autour. Cliquer ensuite sur le bouton Crop video (fig. 4).

                                  Fig. 5                                                                          Fig. 6

    7. La vidéo recadrée apparaît un peu plus bas sur la page avec une barre d'outils au-dessous (fig.5).

    8. Cliquer sur l'outil Cut video pour ne conserver qu'une petite séquence. Pour ce faire, cliquer sur la flèche du lecteur pour commencer à lire la vidéo. À l'endroit souhaité où doit démarrer la séquence, cliquer sur le bouton Use current position à droite de Start time pour marquer le début de la séquence, puis pareil pour End time (fin de la séquence). Vous pourrez modifier ces chiffres manuellement après pour plus de précision si nécessaire. Ensuite cliquer sur le bouton Cut video (fig. 6).

                                  Fig. 7                                                                          Fig. 8

    9. Comme pour les autres étapes, la vidéo résultante apparaît une peu plus bas dans Processed video avec une barre d'outils. Vous pouvez sélectionner d'autres outils si vous souhaitez par exemple modifier la vitesse, etc.

    10. Sélectionner l'outil Video to GIF pour convertir la vidéo en GIF animé. Dans la nouvelle fenêtre, modifier le débit d'images par seconde (Framerate) en fonction de la durée de votre clip. Plus ce nombre sera élevé, plus il y aura d'images et plus le GIF résultant sera lourd. Ensuite cliquer sur le bouton Convert to GIF (fig. 7).

    11. Le GIF résultant apparaît un peu plus bas avec sa barre d'outils. Cliquer sur l'outil Save pour l'enregistrer sur votre ordinateur (fig. 8).

    12. Lancer GIMP et ouvrir une copie du GIF. Dans la fenêtre des calques, toutes les images composant votre animation apparaîtront de bas en haut. Vous pouvez visualiser l'animation en cliquant dans le menu Filtres - Animation - Rejouer l'animation. Là il est encore possible de raccourcir la séquence en supprimant des calques consécutifs depuis le haut et/ou le bas de la pile mais pas au hasard sinon le mouvement risque d'être saccadé.

    13. Afin de pouvoir travailler les couleurs, nous allons en augmenter le nombre en cliquant dans le menu Image - Mode - RVB.

    14. Sélectionner le calque en haut de la pile. Dans un nouvel onglet, charger l'image dans laquelle vous souhaitez incruster l'animation. Vous pouvez soit la copier et la coller comme nouveau calque dans la séquence d'images ou plus rapide, sélectionner son onglet et tout en maintenant le bouton gauche de la souris enfoncé, le faire glisser sur l'onglet de l'animation pour ouvrir sa fenêtre et le descendre sur l'animation elle-même où elle sera automatiquement ajoutée comme nouveau calque.

    15. Si vous avez correctement redimensionné votre vidéo sur EzGif, votre image dans laquelle l'insérer sera plus grande et en la glissant comme nouveau calque, elle sera tronquée. Cliquer sur le menu Image - Ajuster le canevas aux calques pour résoudre ce problème. Vous pourrez ensuite ajuster parfaitement votre image/cadre à l'animation à l'aide de l'outil de mise à l'échelle ou le menu Calque - Échelle et taille du calque.

    16. À l'aide de la baguette magique, sélectionner la partie transparente du calque puis inverser la sélection. Sélectionner le calque sous celui du cadre et cliquer sur la touche Suppr de votre clavier. Faites de même pour tous les calques. Désélectionner en cliquant dans le menu Sélection - Aucune.

    17. Déplacer le calque du cadre du haut de la pile juste au-dessus du calque Arrière-plan. Faire un clic droit et fusionner vers le bas (ou menu Calque -  Fusionner vers le bas).

    18. Il ne vous reste plus qu'à exporter votre image. Cliquer dans le menu Fichier - Exporter sous... Choisir l'emplacement sur votre disque dur et le nom. Au bas de la boite de dialogue, cliquer sur Sélectionner le type de fichier (selon l'extension) et choisir Image GIF puis cliquer sur le bouton Exporter. Une nouvelle boite de dialogue s'ouvre. Cocher les options En tant qu'animation et Boucler indéfiniment avant de cliquer à nouveau sur le bouton Exporter.

    NOTE : J'ai effectué d'autres manipulations que je n'ai pas mentionnées afin que ce tutoriel reste le plus simple possible. Comme mon cadre avait également une zone transparente autour, j'ai ajouté un calque de la couleur des pages de mon blog tout en bas de la pile et j'ai fusionné le calque d'arrière-plan avec en prenant bien soin de le renommer exactement pareil pour que l'animation fonctionne. Pour unifier les teintes de mon animation au cadre, avant de fusionner ce dernier à l'étape 17, j'ai cliqué dans le menu Couleurs - Balance des couleurs et sauvegardé mes réglages avant de l'appliquer au calque sélectionné. J'ai refait l'opération pour TOUS les calques de l'animation SAUF celui du cadre à l'aide des touches CTRL + F (Répéter le dernier filtre).

    Et voilà ! J'espère que ce tutoriel vous aura plu. Il y a des modules à rajouter pour transformer les animations dans GIMP mais cela me semble un peu trop compliqué pour l'instant et si jamais je change d'avis et trouve le temps de les explorer, qui sait cela fera peut-être l'objet d'un nouveau tutoriel.

    Sources

    • Cadre issu du kit "Autumn Romance" de Bea Creations
    • Video de source personnelle

    Articles connexes

    La reproduction du contenu de ce billet est strictement interdite.
    © lapensinemutine.eklablog.com. Tous droits réservés.
    « Le test des trois passoiresPourquoi la prouvabilité scientifique est un mythe »
    Pin It

    Tags Tags : , , ,
  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :