Comment réaliser un Cinémagraph avec photoshop ?

Pour dynamiser votre site web et lui apporter une touche de fraîcheur, quoi de mieux que ce petit frère du gif animé, ludique et simple à réaliser.

Exemple de cinémagraph entreprise

Qu’est ce qu’un cinémagraph ?

Popularisés en 2011 par Kevin Burg et Jamie Beck afin de dynamiser leurs photos de mode, les cinémagraph sont des images fixes dont une ou plusieurs parties sont animées. Simples à produire, ces images donneront du cachet et un brin de poésie à vos pages web tout en évitant les césures des gifs classiques. En effet, à l’instar de ces derniers, leur côté subtil et artistique permet de les intégrer efficacement dans la stratégie de votre entreprise.

Quels usages donner à vos cinémagraph?

Comme dit précédemment, le cinémagraph aura parfaitement sa place dans la stratégie de votre entreprise. Cet outil de storytelling touchera vos potentiels clients en plein cœur en leur permettant de s’immerger émotionnellement mais aussi de s’identifier à votre image de marque. Quelques champs d’applications :

  • L’œil étant instantanément attiré par la portion d’image mise en mouvement, le cinémagraph est un moyen de faire une campagne de publicité originale et efficace, l’idée étant de mettre l’accent sur votre produit.
  • Le mettre en toile de fond sur votre site internet peut rendre ce dernier plus dynamique et attrayant.
  • L’intégrer à vos newsletters vous permettra de toucher une cible plus large (des études ont démontré qu’un Email contenant des animations occasionne 25% de clics en plus).
  • Facebook permet maintenant de les utiliser comme photo de profil (vous pouvez aussi les partager sur instagram).

Comment réaliser un cinémagraph ?

Rien de plus facile. Il suffit d’un peu d’imagination et d’un trépied d’appareil photo (conseillé) pour gonfler l’âme de vos images. Cadrez votre sujet et filmez les quelques secondes.

Première étape :

Après avoir lancé photoshop, importez votre vidéo au format « .mov » : Fichier => Importation => Image vidéo dans des calques…

Seconde étape :

A l’aide des deux curseurs, sélectionnez la partie que vous trouvez la plus adaptée.

Troisième étape :

Afin de visualiser l’ensemble de vos calques dans une fenêtre appropriée, allez dans : Fenêtre => Montage. Dans le but de limiter le poids de votre cinémagraph, je vous conseille de limiter également le nombre de calques que vous utiliserez pour le concevoir. Ceci pour éviter qu’il ne soit trop lourd et ne tombe directement dans la boîte des spams lorsque vous l’enverrez par Email. Quelques calques suffisent!

Quatrième étape :

A l’exception du premier (qui vous servira de référence) vous allez créer un groupe dans lequel vous allez mettre l’ensemble de vos calques en pressant le bouton   de votre fenêtre de calques.

Cinquième étape :

Sélectionnez le groupe de calques en cliquant dessus, puis, avec l’outil de sélection sur lequel vous êtes le plus à l’aise (lasso, plume, baguette, pinceau), encadrez la partie de la séquence que vous voulez mettre en mouvement.

Sixième étape:

Intervertissez ensuite la sélection : Clic droit => Intervertir

Septième étape :

Afin d’isoler la partie choisie allez dans calque => masque de fusion => masquer la sélection.

Huitième étape :

Dans la fenêtre de montage, sélectionnez toutes les images de la séquence à l’exception de la première, puis, dans vos calques, appuyez sur l’oeil   de votre calque 1 afin de superposer l’ensemble de vos calques.

Pour visionner le rendu de votre cinématograph, désélectionnez vos calques dans la fenêtre de montage en cliquant sur n’importe lequel d’entre eux, puis, pressez le bouton lecture. Attention : la preview ne correspond pas au rendu final après enregistrement, il est donc normal que le mouvement soit saccadé.

Neuvième étape :

Enregistrez votre image en allant dans Fichier => Enregistrer pour le web

Choisissez les paramètres :

  • Gif
  • 256 couleurs
  • N’oubliez pas de corriger la taille si nécessaire.

Voila comment réaliser un cinémagraph en peu de temps! Si vous n’utilisez pas photoshop, voici quelques logiciels qui vous permettront d’en créer :

  • Cinemagraph Pro, à utiliser sur Mac (payant)
  • Clipets (gratuit)
  • Paint.net (gratuit)
  • Gimp (gratuit)
  • Pixlr (gratuit, directement sur le net)
  • Cinemagram (application Android, gratuit)
  • Fotodanz (application Android, gratuit)
  • GifBoom (application, gratuit)
  • mrsize

    Le rendu est très sympa !

  • merki 🙂 je crois que tout se joue sur le pouce 😀 lol

  • Noco

    Très bon tuto ! 🙂
    Je rajouterai que les cinémagraphes sont assez lourds comme fichiers et qu’une utilisation sur le web rend l’optimisation des fichiers importantes.

    Quelques astuces 🙂 :
    – C’est parfois mieux de faire une photo et de faire l’animation avec des effets en post prod qu’une vidéo (si vous voulez faire une animation de pomme qui tombe, autant faire l’animation en post prod à partir de photos…). La qualité sera bien meilleure (taille d’une photo > 4K en général) et le poids du fichier GIF beaucoup plus léger !
    – Plus la zone animée est grande, plus le fichier sera lourd.
    – Un fichier en noir et blanc sera plus léger.
    – À l’export, ne pas hésiter à jouer sur le curseur « Perte » pour gagner en poids ou même sur le nombre de couleurs si l’on a un décors qui s’y prête (un mur bleu avec seulement une pomme devant demandera pas forcément 256 couleurs).
    – Passer par une application de compression de gif comme compressor.io qui ne devrait pas toucher à la qualité mais réduire un peu le poids du fichier.

  • Top tes petits conseils, d’ailleurs, je suis d’accords avec tous 😉
    Sympa ton petit outils compressor 😉 dommage qu’il n’y a pas de version desktop pour les faire en batch 🙂

  • Noco

    Ah carrément ! Je ne comprend cette manie qu’ont les dev de ne faire que des trucs en lignes pour ce genre d’outils… Jpegmini par exemple a une version hors ligne et même un plugin lightroom. Bref, ça me dépasse tellement ce sont des outils intéressants pour des pros alors que ces derniers ne sont pas forcément fans du tout en ligne (y’a qu’à voir comment a été reçu adobe cloud par les pros…).

  • clair, perso j’utilise les batch fireworks ou photoshop mais cela n’a pas le même taux de compression de compressor 🙂
    je vais faire de la veille la dessus 😉
    Thx !