Le cinémagraph ou comment immortaliser un moment | MultipleMedia
Lisez sur nos vingt ans !

Le cinémagraph ou comment immortaliser un moment

Le cinémagraph, vous connaissez? Selon les pionniers Jamie Beck and Kevin Burg, c’est le parfait mélange entre photo et vidéo. Plus précisément, un cinémagraph capture un moment animé dans une photographie statique. Utilisant la même technique qu’un GIF animé, cette approche se veut plus raffinée et artistique que son prédécesseur. La plupart des cinémagraphs s’appuient sur une photo de type nature morte ou sur un sujet central en incorporant quelques (parfois un seul) éléments légèrement animés.

 

cinemagraph | waving reeds

Il ne s’agit donc pas d’un exploit technique, mais plutôt d’un exercice artistique qui permet d’ajouter du réalisme à la dimension de l’œuvre ainsi qu’un deuxième niveau de réflexion et d’appréciation. Un des principaux critères de réalisation du concept est sa capacité à pouvoir jouer en boucle. C’est-à-dire que la partie animée devra se dérouler en entier pour ensuite être répétée à l’infini et ce, de façon à ce que la boucle soit la plus fluide possible, contrairement à la plupart des GIF animés saccadés. Les cinémagraphs les mieux réussis sont d’ailleurs ceux où nous nous questionnons pendant quelques instants sur la nature du médium (photo ou vidéo).

Différence entre un GIF animé conventionnel et un cinémagraph

Deux tendances populaires et deux types d’animation : comment distinguer le cinémagraph du GIF animé? Voici les principales différences:

  • Un cinémagraph isole un mouvement pendant que le reste de l'image est statique, contrairement à un GIF classique, généralement simple et court clip vidéo en boucle.
  • Un cinémagraph réussi part d’une belle photo. Donc les mêmes critères artistiques s’appliquent (choix du sujet, composition, éclairage, etc.).
  • À première vue, la boucle d'un cinémagraph ne devrait pas sauter à l’œil. C'est ce court instant où l'on se demande si on regarde une photo ou une vidéo qui est la clé d'un cinémagraph réussi.

 

À noter aussi que plusieurs cinémagraphs sont composés de clips tirés de films et ou de productions qui sont ensuite mis en boucles comme l’illustre l’exemple suivant:

 cinemagraph | marilyn

 

Les étapes pour créer un cinémagraph

 cinemagraph

Maintenant que vous avez compris le concept, comment faire?

  1. Tout appareil photo ayant la capacité de filmer de la vidéo peut être utilisé. Un téléphone intelligent peut aussi faire l’affaire. Il faudra par contre utiliser un adaptateur pour le stabiliser/fixer à un trépied. L’appareil doit être complètement stable afin de pouvoir obtenir une séquence vidéo à mettre en boucle.
  2. Le choix d’un sujet approprié au mouvement est aussi conseillé. À titre d’exemple, si vous filmiez un disque vinyle qui tourne sur une table tournante, l’ensemble de la composition resterait inchangé tandis que le centre du disque tournerait sur lui-même.
  3. Ensuite, vous aurez besoin d’un logiciel de montage vidéo. Il en existe plusieurs tel que Adobe Premiere ou Adobe After Effects, pour en nommer quelques-uns. Il est aussi possible d’en faire un à même Photoshop avec l’utilisation du Timeline. Le principe est sensiblement le même dans tous les logiciels de montage. Donc, si vous avez de l’expérience, même limitée, vous saurez sûrement vous débrouiller. Peu avant la publication de cet article, j’ai découvert l’application Flixel qui vous permet de réaliser des cinémagraphs à même votre cellulaire. Les résultats restent variables, mais c’est un autre outil qui s’offre à vous.

Entrons maintenant dans les détails techniques!

3a. Dans le Timeline, placer un exemplaire du clip vidéo capté avec votre appareil. Puis, créer une copie et la placer directement au-dessus de l’original.

cinemagraph

3b. Décaler les deux copies de façon à ce qu’elles restent superposées avec un léger décalage.

cinemagraph

3c. Placer des key frames afin de pouvoir diminuer l’opacité de la vidéo (copie 2) pour laisser apparaître la copie 1.

cinemagraph

3d. Tirer une image statique du clip qui représente l’ensemble du résultat final et la placer au-dessus des deux clips. Ajouter un masque à cette image et révéler la partie qui sera animée (laissant apparaître le clip animé en dessous).

cinemagraph_05_3d_1258x455

Une fois que vous aurez obtenu l’effet voulu, exporter le tout en GIF animé et le tour est joué.

Utilisations commerciales et potentiel marketing

Quoiqu’il soit possible d’utiliser les cinémagraphs pour plusieurs situations sous différents formats autant dans les sites web que les applications, c’est principalement les réseaux sociaux qui semblent l’avoir adopté ces derniers temps. Leur force est de pouvoir attirer rapidement l’attention des utilisateurs sans pour autant être visuellement trop criard. C’est donc tout désigné pour une campagne Facebook ou Instagram. Léger défi technique par contre: les GIF animés ne sont pas encore accepté dans la plateforme publicitaire. Heureusement, on peut facilement les convertir en mp4 pour rendre l’affichage de l’animation possible. En voici quelques exemples:

Pepsico

Dans l’exemple suivant, le premier cinémagraph débute à 10 secondes. Ici, on l’amène à un autre niveau avec la surimposition de différentes séquences vidéo.

Jack Daniel's

Il existe des centaines d’autres exemples. On peut même en trouver dans les banques d’images telles que ShutterStock. Donc, peu importe si vous comptez produire votre propre cinémagraph ou bien vous procurer un concept déjà tout fait, la solution qui répond à vos besoins vous attend!

L’importance de l’assurance qualité dans le web

Recherche

25 avril 2018

L’assurance qualité (ou QA) est une des étapes de production durant laquelle tous les tests de fonctionnement et de qualité sont effectués.   L’objectif est de...

Par : Yacine Maza, Développeur

LES MÉTIERS AU SEIN D’UNE AGENCE WEB. PARTIE 2: LES CRÉATIFS

Recherche

16 avril 2018

Si vous n’êtes pas familier avec les différents métiers du web ou s’il vous est parfois difficile d’identifier qui fait quoi et pourquoi dans une agence web, …

Par : Joséphine Marty, Coordonnatrice aux communications

5 arguments indiscutables pour le choix d’une application...

Recherche

3 avril 2018

Pourquoi développer une application mobile alors que votre site web est responsive? 1. Fonctionnalité. Une application mobile offre une capacité de personnalisation plus grande...

Par : Laurent Bourget, Intégrateur full-stack