DIY

DIY : réaliser un gif animé (tutoriel)

En réalisant le gif animé de mon dernier article, je me suis dit que cela serait sympa de partager avec vous ma méthode « maison », absolument pas standard ou conventionnelle, mais qui marche néanmoins très bien ! N’hésitez SURTOUT PAS à me corriger ou à ajouter certaines informations !

Je précise avant toute chose que je possède la version 11.0 de Photoshop CS4.

Donc l’idée c’est d’obtenir cela :04Cela permet de donner une dynamique visuelle sympa à votre blog, et je dois avouer que c’est également très pratique pour glisser certains messages subliminaux dans vos photos. Un exemple :

exemple-lol

Trêve de plaisanterie ! Au boulot ! La première étape consiste à afficher la fenêtre « Animation » et à ajouter « Vidéo » dans l’espace de travail. On obtient alors la nouvelle fenêtre en bas de l’écran, comme indiqué ci-dessous. 01Je vous conseille ensuite d’ouvrir toutes les images que vous souhaitez présenter dans votre gif animé, et d’en réduire la taille, afin de ne pas se retrouver avec un fichier trop volumineux à la fin.

02Il faut maintenant créer un unique fichier, dans lequel vous mettrez toutes vos images, superposées les unes aux autres, à l’aide de différents calques (comme en bas à droite de la fenêtre ci-dessous).

03Dans la « barre » Animation en bas de votre fenêtre, il vous faut créer de nouveaux calques en cliquant sur le bouton indiqué ci-après. Créer autant de calques que d’images que vous souhaitez voir défiler.

04Pour la suite, je vais essayer d’être le plus claire possible mais ce n’est pas évident. Pour chacun des calques que vous venez de créer, il faut sélectionner une image, ce qui se fait grâce à « l’œil » que vous voyez en bas à droite. Vous laissez l’œil pour l’image que vous souhaitez voir apparaître sur votre calque, et vous décocher ceux de toutes les autres images. Vous reproduisez l’opération pour chacun des calques de votre barre Animation.

05Il vous faut ensuite choisir la durée d’apparition de vos images (1e photo), et le nombre de répétition du gif (2e photo).

06 07Vous sélectionnez ensuite tous vos calques.

08Puis vous cliquez sur Fichier > Enregistrer pour le web et les périphériques.

09Pour finir, vous voyez cette fenêtre apparaître, avec plein d’infos certainement primordiales que je ne peux malheureusement vous expliquer, ignorante que je suis. Vous cliquez sur « Enregistrer » et le tour est joué ! Vous n’avez plus qu’à l’insérer sur votre site web.

10J’espère que cela vous aidera.

N’oubliez pas de partager vos liens pour que l’on puisse découvrir vos créations !

10 réflexions au sujet de « DIY : réaliser un gif animé (tutoriel) »

    1. Oh ba dis donc c’est sacrément gentil de partager ce lien ! C’est beau cette ambiance blanc/noir minimaliste. Merci encore Marie-Josée, je n’hésiterai pas à te rendre la pareille si découvre un site sympa :)

  1. Jadis (!) quand j’étais au collège, on réalisait des GIF animés en cours de techno (véridiques… on passait des heures à faire rebondir une balle dans les 4 coins d’un carré par exemple), et on faisait ça avec GIF animator. Je ne sais pas si ça existe encore. On n’était pas peu fiers de nous !

    1. dis donc ! aujourd’hui, le prof qui fait ça au collège avec des photos de justin bieber doit être le roi du pétrole !!! moi sinon j’ai réalisé un très joli porte clé à led… ^^

  2. Et bien voilà, je l’ai enfin utilisé pour faire une animation sur mon blog. J’ai encore du boulot sur les photos (sans pieds pour fixer le tout c’est pas évident) mais le tuto est parfait. Merci :)

    1. Ouaaa c’est formidable !!! J’avais déjà vu ton article hier et je m’étais justement dit que le gif était très beau ! Merci pour ce retour qui me fait très plaisir :)

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s