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.

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)
• Photoshop gratuit
• Clipets (gratuit)
• Paint.net (gratuit)
• Gimp (gratuit)
• Pixlr (gratuit, directement sur le net)
• Cinemagram (application Android, gratuit)
• Fotodanz (application Android, gratuit)
• GifBoom (application, gratuit)

Il y a encore un logiciel qui mérite l’attention comme une excellente alternative à Photoshop pour débutants – SmartSHOW 3D. Ce programme convivial vous permet d’animer les parties choisies de vos photos – l’eau, l’herbe, des objets, etc. pour créer des cartes de voeux, des portraits qui bougent comme dans “Harry Potter”, des cinémagraphs nature et d’autres projets créatifs.