MP #96 : réussir son Cinemagraph ou le Gif animé

Nous vous présentions hier la technique du Cinemagraph, permettant de donner vie à vos photos en utilisant un Gif animé. La bonne nouvelle est que réaliser un Cinemagraph est à la portée de tous (techniquement en tout cas, seule votre créativité vous limitera).

Matériel nécessaire pour faire un Cinemagraph

Au niveau du matériel, il vous faudra un appareil pouvant filmer (caméscope, smartphone ou votre apn préféré s’il dispose de cette option), un trépied pour la stabilisation et Photoshop (ou consort) pour la réalisation du fichier final. Vous pouvez également prévoir aussi un logiciel tiers de montage pour redimensionner la vidéo,une qualité de 1080p n’étant pas toujours indispensable.

Pour ce MP, j’ai utilisé mon iPhone 4s pour la vidéo avec un support pour le maintenir stable. Pour la production, iMovie m’a permis de redimensionner la vidéo, puis j’ai fait le montage du Gif sous Photoshop CS5. Pensez à cliquer sur les images pour les voir en taille réelle.

Les étapes pour réaliser un Cinemagraph

1. La première étape, après avoir récupéré le fichier sur Mac / PC, est de le redimensionner si nécessaire. Comme je l’ai dit plus haut. J’ai tout simplement utilisé iMovie, où j’ai récupéré la séquence de mon film qui m’intéresse et exporté la vidéo au format 480*272. Bien entendu, Plus votre vidéo a une grande résolution, plus votre fichier gif final sera lourd (si vous gardez cette résolution).

2. Ensuite, ouvrez le fichier avec Photoshop (ou équivalent). Vérifiez bien que la fenêtre animation est ouverte (Fenêtre / Animation)

  1. Délimitez la zone de travail et sélectionnez l’image principal, attention ne soyez pas trop gourmand plus votre animation sera longue et plus votre gif sera lourd.

  1. Dupliquez le calque de la vidéo et pixellisez le calque le plus bas ( Calque / Pixellisation / Video )
  2. Maintenant il faut faire une sélection de la partie qui sera animée. Pour cela vous pouvez utiliser le Lasso Polygonal.

  1. Sélectionnez le calque Vidéo et ajoutez un masque

  1. Il ne vous reste plus qu’à enregistrer votre film au format web (Fichier / Enregistrer pour le Web et les Périphériques). Il faut bien penser à sélectionner GIF et dans « option de boucle » : Toujours.

Et voici le résultat final :

Voilà, vous savez désormais créer votre Cinemagraph. Vous pouvez partager vos propres créations dans les commentaires.

Attention, n’abusez pas du GIF. Et si vous voulez voir d’autres Cinemagraphs, voici le Tumblr If We Don’t, Remember Me qui reprend des scènes de films bien connus.

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

  1. C’est superbe, et comme Adil je vais en faire toute la journée.

    La journée vient de commencer pour nous deux mais on est quand même les premiers à commenter 😉

    Bonne journée

  2. Merci pour l’explication, par contre, je me posais la question de mouvements « parasites ». En effet, lorsqu’on sélectionné la zone animée, n’y a t il pas un risque de mouvement non désiré, dans l’exemple ci dessus par exemple, le bras du modèle pourrait bouger derrière la bougie, mais je ne vois rien sur le gif final…
    Une sélection plus précise peut être ?

  3. bon, je dois pas être doué… !
    Déjà, je n’ai pas sur mon calque (j’en suis au tout début de la démarche) le petit sigle représentant du film (dans la palette des calques).

    Ensuite, bien que ej duplique le calque, impossible de la pixelliser (options grisée)…

    Bref, j’ai essayé de faire un gif animé…

  4. Merci beaucoup pour ces explications, ce sont les seules trouvées en français.
    On a réussi un gif, après plusieurs tentatives pour maitriser au mieux Photoshop.
    Cordialement.

  5. Bonjour,

    Je n’arrive pas à importer ma vidéo sur Photoshop CS5. Lorsque je fais File<Import<Video frames to layers rien ne se passe. Pourtant la fenêtre Animation est bien ouverte. J'ai changé plusieurs fois le format du fichier video ( .avi, .mov, .gif, .mpeg etc… ) sans succès.

    Que dois-je faire pour réussir à ouvrir ma vidéo ?

    Merci,
    Julie.

  6. Voici un petit cinemagraph maison réalisé en suivant vos conseils : Champion du monde clin d’oeil 2012
    http://dynamite.re/post/18097205233/champion-du-monde-clin-oeil-2012

    Si je peux rajouter quelquechose, c’est que le cinemagraph, dans son infinité, ne convient pas à tous les types de mouvements. Si cela marche très bien avec des cheveux ou une flamme, malheureusement cela ne fonctionne pas très bien avec la fumée par exemple.

  7. Ping : Le Japon en cinemagraph | Issekinicho
  8. Ping : C’est l’histoire d’un mème: le GIF animé | Phototrend.fr
  9. Ping : « cinémagraphe » « cinemagraph » qu’est-ce que c’est ? | Scopart : agence web à Clermont-Ferrand (Puy-de-dôme 63)
  10. Ping : Cinemagr.am et Flixel : les applis pour créer des cinemagraphs
  11. Est-ce qu’il existe un autre logiciel pour faire ce genre de chose ? Ce n’est pas possible sur photofiltre par exemple ?

  12. Ping : Créer des gifs animés Cinemagraph mode d'emploi
  13. Ping : Cinemagraphs & l'application Cinemagr.am | Culture Nomad
  14. Ping : One, un projet photo de Nicolas Ritter qui utilise le Cinemagram | Phototrend.fr
  15. Ping : Livre : 50 ateliers pour maîtriser Photoshop, de Jérôme Lesage | Phototrend.fr
  16. Bonjour, c’est vraiment super je ne connaissais pas et j’ai tout de suite essayé, j’y arrive très bien sauf que lorsque je veux l’enregistrer Fichier / Enregistrer pour le Web et les Périphériques mon photoshop se ferme automatiquement il ne veut plus fonctionné :/ vous avez une solution ?
    Merci car j’aime vraiment trop le principe.

  17. Bonjour !

    Merci beaucoup pour ce tuto !! sait tu si on peut importer un gif comme ça sur after effect pour le convertir en .mov ?

  18. Ping : Tutos | Pearltrees
  19. Ping : Photographies - Page 44 - Forum de la Cartoonerie
  20. Ping : Cinemagraphs et l'application Cinemagr.am | Culture Nomad
  21. Ping : Le Cinemagraph, une nouvelle forme d’art. « artnumerica
  22. Ping : Le Cinemagraph | DdlV
  23. Ping : Photo | Pearltrees
  24. Ping : Pierre Fayet (pierrefayet) | Pearltrees
  25. Ping : Cinemagraph, l'art de faire du cinéma avec des GIFs - LeMagTechno | LeMagTechno
  26. Ping : Tutoriaux gimp et photoshop | Pearltrees
  27. Ping : Cinemagraph | Pearltrees
  28. Ping : Animation/ Infographie | Pearltrees
  29. Ping : Observez New York à travers une paire de lunettes grâce à ces cinemagraphs | Phototrend.fr
  30. Ping : Agathemuller | Pearltrees
  31. Ping : Cinemagraph : Le Gif revisité
  32. Ping : Nouveauté: Adieu les Gif animés, le Cinemagraph est l’avenir…