Tuto, réaliser un Cinemagraph: Gif animé

tuto réaliser cinemagraph
Le GIF, ou Graphics Interchange Format, est un format d’image que le monde utilise sur internet. Si vous ne donnez pas dans l’imagerie et la conception de site web, cela risque de ne rien vous dire. Très prisés dans le début du web et très mal utilisés, ils ont été relégués au rang d’image de mauvais gout. Ils reviennent aujourd’hui sur le devant du net par l’intermédiaire des Cinemagraph.

Le GIF Animé

L’un des intérêts du format GIF, est la possibilité de « l’animer ». Attention, on ne parle pas ici des réalisations de Pixar: non, le GIF ne va pas vous permettre de réaliser un film comme avatar avec votre ordinateur de bureau.
Votre GIF ainsi animé, sera alors constitué de quelques images: Celui-ci en compte 6.
tuto réaliser cinemagraph
Nous obtenons donc ici un GIF des plus banal, de celui qui a tué le format: inutile, flashy, trop présents sur les pages, le GIF permettait d’obtenir un soupçon d’animation sur une page web souvent morne.

Tuto: Cinémagraph

Nous allons donc améliorer le visuel et transformer le GIF en belle image animée un cinemagraph:
Il vous faut (dans notre cas sous Windows 7):
– Photoshop
– Freemake video converter: gratuit, simple disponible ici

(Cliquez sur les images pour les agrandir)
Il est nécessaire d’avoir une vidéo d’une scène ou peu d’éléments sont en mouvement: une personne, une main, un feuillage…
En fonction de la qualité de la vidéo, il sera nécessaire de réduire les dimensions de la vidéo. Freemake Video Converter permettra cette réduction. Préférez le format MP4 en 640×360.
– Ouvrez votre vidéo sous le logiciel
– Cliquez sur MP4
– Cliquez sur la roue dentée
tuto cinemagraph

Cliquez ensuite sur taille de l’image, plusieurs propositions vous seront faites. Attention, le format GIF détruit la source. J’ai toutefois testé des images de grandes dimensions sans perte de qualité.
Ici, nous choisirons 640 x 360 (la vidéo source était de 1280 x 720):
tuto cinemagraph

Validez ensuite la conversion: le temps dépendra de la taille de la vidéo.
Un fois la conversion réalisée, nous passons sous Photoshop

– Importez votre vidéo MP4 sous Photoshop (installer Quicktime si demandé) créant ainsi un premier calque.
– Afficher la fenêtre « animation »: Menu Fenêtre -> cochez Animation:
tuto cinemagraph photoshop
La fenêtre d’animation s’affichera dans l’espace de travail:
animation GIF
Délimitez la zone de travail, ou le temps d’animation, avec les 2 onglets bleus: plus vous ajoutez du temps, plus votre fichier sera lourd préférez un temps compris entre 2 et 10 secondes.
– Dupliquez le calque (raccourci: crlt+J) et pixelisez le calque le plus bas:
Calque -> Pixellisation -> Vidéo
animation GIF
animation GIF
Nous allons maintenant travailler sur le calque du haut, il faut donc commencer pas le sélectionner.
Sur ce calque, réaliser une sélection de l’élément que nous voulons animer: plume, lasso au choix de vos habitudes. Vous pouvez choisir un rayon de pixel afin de ne pas trancher les limites de l’animation.
Tuto cinemagraph
Puis appliquez un masque de fusion:
Tuto cinemagraph

Notre travail est presque terminé puisqu’il faut enregistrer et générer notre GIF:
Fichier -> Enregistrer pour le Web:
Tuto cinemagraph animation

Sélectionnez GIF et dans Option de boucle, valider sur Toujours:
Tuto cinemagraph
tuto animation gif

Votre Gif est généré, il suffit de l’ouvrir sous un navigateur web.
Et voici une réalisation rapide:
Cinemagraph evilspoon

cinemagraph evilspoon

Mais vous pouvez également modifier l’image immobile de l’animation pour souligner certains détails:
tuto cinemagraph
Voici l’ordre des calques et du masque de fusion pour cette dernière modification:
tuto cinemagraph

Voilà, vous savez faire des cinémagraph, des GIF animés, bien plus beaux que dans le passé.
Vous trouverez d’autres magnifiques réalisations sur cinemagraphs.com/

Author: Evilspoon

Share This Post On

Trackbacks/Pingbacks

  1. Des photos de VTT, encore ! | Le Blog de Jean Gaillat - [...] je termine par un petit Cinémagraph dont j’ai le secret ! Cliquez dont là dessous [...]
  2. La formidable histoire des gifs | Couloirs du net - […] pouvez vous y coller, voici un tuto pour photoshop, et un avec Gimp ou avec Cliplets , cliquez pour pour télécharger Cliplets gratuitement . …

Submit a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Featuring Recent Posts WordPress Widget development by YD