Boucle de vitesse

Appropriez-vous les possibilités du logiciel GIMP, afin de créer un GIF animé satisfaisant la proposition suivante : le décor défile à toute vitesse.

#vitesse #boucle #animation #gif animé #cinemagraph

Qu’est-ce que l’animation ?

Dans le domaine de l’audiovisuel, l’animation est un ensemble de techniques qui, par une succession d’images, donne à un public l’illusion que des personnages, des objets, des décors en réalité immobiles sont dotés de mouvement naturel.

Ces techniques sont le résultat d’une recherche étalée sur plus d’un siècle pour obtenir des ouvrages visuels ou audiovisuels donnant l’illusion que des dessins, des peintures, des objets inertes divers (maquettes, poupées, marionnettes, etc.) ou des images de synthèse, sont doués de mouvements et de déplacements propres, comme s’ils étaient vivants, d’où l’utilisation du terme « animation » du latin animalis « animé, vivant, animal ». Source Wikipédia

Qu’est-ce qu’un GIF animé ?

GIF est l’acronyme de Graphics Interchange Format. Il fait partie des formats d’images les plus partagés sur le web. Ce format d’image numérique a pour particularité de permettre la réalisation de très courtes animations tournant en boucle.

Créé en 1987 par l’ingénieur informatique Steve Wihilte, un Américain qui se verra remettre le Lifetime Achievement Award 26 ans plus tard au gala des Webby, le GIF survit miraculeusement aux progrès technologiques et aux multiples mutations de l’internet. Universellement supporté, tant par les vieux PC jaunis que l’iPhone ou l’appareil Android dernier cri, ce fichier ultra compressé (256 couleurs au lieu de 16,7 millions pour le JPEG) est en quelque sorte l’équivalent contemporain du folioscope. Source Wikipédia

Tutoriel

Au préalable, définissez clairement votre projet d’animation et avec méthode, notamment, afin de faciliter l’organisation des calques nécessaires à l’animation image par image.

  1. Lancez GIMP puis cliquez sur FichierNouvelle image et définissez la taille de l’image (1920×720 px) qui va vous servir comme support à la création de l’ensemble du décor.
  2. Utilisez les outils habituels (: outil pinceau, outil de remplissage, outil de barbouillage, etc.) pour représenter votre décor et quelques effets si vous le souhaitez à partir de l’onglet Filtres.

L’animation GIF se présentant nécessairement sous la forme d’une boucle, il faut que les deux extrémités de l’image puissent visuellement se rejoindre. Pour se faire :

  1. Copiez votre image : CTRL+C ou à partir du menu contextuel Édition et Copier.
  2. Doublez la largeur de la zone de travail. Sélectionnez Image et Taille du canevas. Saisissez la nouvelle taille de l’image : 3840 px de large par 720 px de haut (décalage : 0, 0), cliquez Redimensionner.
  3. Dans le menu Édition, utilisez Coller comme, Nouveau calque pour coller l’image précédemment copiée.
  4. Utilisez sur le calque l’Outil retournement puis déplacez-le à droite afin d’obtenir un effet miroir.
  5. Fusionnez vers le bas le calque supérieur en utilisant le menu contextuel de la fenêtre Calques.
  6. Retouchez l’image en préservant les extrémités.

Le GIF animé est composé de plusieurs calques dont la lecture successive donne l’illusion du mouvement. L’étape suivante propose une solution simple pour créer les calques utiles à l’effet recherché.

  1. Réduisez la largeur de l’image à 1280 px : sélectionnez Image et Taille du canevas. Saisissez la nouvelle largeur de l’image.
  2. Dans la fenêtre des calques contenant la première image, cliquez sur Dupliquer le calque puis déplacez de 320 px la copie du calque vers la gauche : utilisez le menu contextuel du calque dupliqué et cliquez Modifier les attributs du calque puis saisissez un Décalage X de -320 px.
  3. Répétez cette manœuvre à partir du calque supérieur en baissant la valeur du décalage X : -640, -960, -1280, -1600, -1920, -2240 et -2560. Vous devriez avoir 8 calques et un arrière-plan.
  4. Par défaut, la durée entre chaque image est de 100 millisecondes. Vous pouvez prévisualiser le résultat final en lançant la lecture de l’animation. Pour cela, cliquez sur le menu Filtres puis sur Animation et Rejouer l’animation. Une nouvelle fenêtre s’ouvre, dans laquelle vous disposez de boutons pour lancer et arrêter la lecture et faire défiler les images les unes après les autres.

Si le résultat ne vous convient pas, vous pouvez augmenter ou réduire le délai entre chaque image.

  1. Cliquez sur le menu déroulant situé dans la partie inférieure gauche de la fenêtre puis sélectionnez une vitesse de transition qui est réglée par défaut sur 1x. Vous pouvez également jouer sur le nombre d’images par seconde. Vous pouvez appliquer ces modifications en cours de lecture pour en voir les effets instantanément.
  2. Une fois que votre animation est prête, vous allez l’optimiser. Pour cela, cliquez successivement sur FiltresAnimations et Optimiser (pour GIF).

Dernière étape, l’enregistrement de l’animation.

  1. Cliquez sur Fichier puis Export As.
  2. Dans la fenêtre qui s’ouvre, placez le curseur dans le champ Nom et tapez le nom de fichier suivi de l’extension .gif
  3. Puis, dans le menu déroulant de la partie inférieure de la page, sélectionnez le format de fichier Image GIF (*.gif). Cliquez sur Exporter.
  4. Dans la fenêtre qui s’ouvre, vous cocher l’option As animation. Si vous n’avez pas spécifié de délai au moment de créer l’animation, vous pouvez encore le faire en modifiant la valeur proposée. Cliquez enfin sur Exporter pour finaliser la création de votre GIF animé. 

Questionnement

Comment les modifications du décor peuvent-elles suggérer la vitesse ? Quels procédés graphiques et principes formels analysés dans les œuvres en référence sont-ils à convoquer pour créer l’effet attendu ? Dans quelle mesure le numérique révèle-t-il des qualités expressives ? En quoi son usage dépasse-t-il une solution technique ?

Références du CRCN

  • 3.2./ Développer des documents multimédia/ Produire une image, un son ou une vidéo avec différents outils numériques
  • 3.3/ Adapter les documents à leur finalité/ Convertir un document numérique en différents formats
  • 5.2/ Évoluer dans un environnement numérique/ Utiliser les fonctionnalités élémentaires d’un environnement numérique
Paul ROBERTSON, Expedition, 2014, GIF animé

Extensions les plus courantes de formats d’images

  • JPEG ou JPG : Joint Photographic Experts Group
  • PNG : Portable Network Graphics
  • GIF : Graphics Interchange Format
  • PSD : Photoshop Document
  • AI : Adobe Illustrator Document
  • SVG : Scalable Vector Graphics
  • HEIF : High Efficiency Image File Format – format utilisé par Apple depuis 2017
  • WebP : Web Picture – format développé et mis à disposition par Google
  • XCF : eXperimental Computing Facility – format natif de GIMP

Références artistiques possibles

  • Louis Carrogis de CARMONTELLE, les transparents de Carmontelle (1801) se composent d’un long rouleau de feuilles peintes collées bout à bout. Tendu entre deux bobines et éclairé par transparence, ce rouleau défilait devant les yeux des spectateurs en leur donnant l’impression de se mouvoir à travers un paysage.
  • Étienne Jules MAREY, Le Coup de marteau, 1895, chronophotographie
  • Auguste et Louis LUMIÈRE, L’Arrivée d’un train en gare de la Ciotat, 1895, film
  • Eugène ATGET, Angle de la rue des Nonnains d’Hyères et de l’Hôtel de Ville, 1899, photographie
  • Giacomo BALLA, Dynamisme d’un chien en laisse, 1912, huile sur toile, 90,8 x 110 cm, Albright-Knox Art Gallery
  • Marcel DUCHAMP, Nu descendant un escalier n°2, 1912, huile sur toile, 147 x 89,2 cm, Philadelphia Museum of Art, Philadelphie
  • Jacques-Henri LARTIGUE, Grand Prix de l’ACF, automobile Delage, circuit de Dieppe, 26 juin 1912, 1912, photographie
  • Luigi RUSSOLO, Automobile in corsa (Dynamisme d’une automobile), 1912-1913, huile sur toile, 106 x 140 cm, Centre Pompidou, Paris
  • Umberto BOCCIONI, Dinamismo di un ciclista (Dynamisme d’un cycliste), 1913, huile sur toile, 70 x 95 cm, Collection Peggy Guggenheim, Venise
  • Émile COHL, Les Allumettes ensorcelées, 1913, animation
  • Robert DELAUNAY, Hommage à Blériot, 1914, huile sur toile, 46×46 cm, Musée des Beaux-Arts de Grenoble
  • Norman McLAREN, Dots, 1940, Boogie DoodleSpook Sport
  • Carol-Anne BELZIL-NORMAND, carolann.cool, GIF animés
  • David WHYTE, Bees & Bombs, GIF animés

Questionnement(s)

  • La représentation plastique et les dispositifs de présentation : les différentes catégories d’images, leurs procédés de fabrication, leurs transformations.

Expérimenter, produire, créer (D1, D2, D4, D5)

  • Rechercher une expression personnelle en s’éloignant des stéréotypes.
  • Intégrer l’usage des outils informatiques de travail de l’image et de recherche d’information, au service de la pratique plastique.

Mettre en œuvre un projet artistique (D2, D3, D5)

  • Identifier les principaux outils et compétences nécessaires à la réalisation d’un projet artistique.
  • Se repérer dans les étapes de la réalisation d’une production plastique individuelle ou collective, anticiper les difficultés éventuelles.

* D1 Les langages pour penser et communiquer – D2 Les méthodes et outils pour apprendre – D3 La formation de la personne et du citoyen – D4 Les systèmes naturels du monde et l’activité humaine – D5 Les représentations du monde et l’activité humaine


En bandeau, GIF animé obtenu à partir d’une capture de Cowboy Bebop S1 Ep7 | Heavy Metal Queen | 1998