TUTOS   DIY   COUTURE   WEB   DÉCO   LIFE   LOVE   CONTACT

18 mars 2014

Blogdesign pour les nulles : Créer un gif animé avec Gimp

Aaaah, ça faisait bien trop longtemps à mon goût que je ne vous avait pas cassé les pieds avec un peu de bidouillage de Gimp...
Aujourd'hui je vous épargnerais le vantage de mérites de ce logiciel parce que je l'ai déjà fait (mais quand même j'insiste c'est gratuit ça fait tout et ça marche bien et c'est pas compliqué à utiliser, suffit de chercher des tutos sur le net histoire de comprendre comment ça marche et le reste ça coule tout seul, et puis c'est un logiciel open source, et ça j'aime bien)

Bref. Suite à une suggestion de ma copinette Gabulle qui avait galéré à trouver comment faire un gif animé, je vais vous expliquer comment en créer un avec Gimp, très simplement. Promis juré, c'est VRAIMENT facile...





Vous aurez besoin, à la base :

- De 2 images minimum (mais vous pouvez en prendre plus)
- Du logiciel The Gimp
- De moi et de mon tuto parce que mon ego a besoin d'être flatté

et puis c'est tout...

Petit récapitulatif des étapes si vous êtes déjà un peu familier-e-s du logiciel :

1. Ouvrir ses images, les redimensionner toutes à la même taille et ajouter ce qu'on veux dessus (texte...)

2. Faire un copié-collé de toutes ses images par dessus la première (en créant pour chaque image un nouveau calque)

3. Vérifier l'ordre des calques (le calque du bas sera la 1ère image à apparaître)
 puis exporter en choisissant le format "gif"

Si vous ne maîtrisez pas bien le logiciel, on va voir tout ça en profondeur :

1ère étape : Préparer ses images

- Ouvrez vos deux (ou trois, ou quatres...) images dans Gimp.
J'en ai pris 3 pour l'exemple histoire que vous pigiez bien le principe. 

- Redimensionnez-les, si besoin. ( Menu "image" > "Echelle et taille de l'image..." et vous choisissez la taille qui vous convient. J'ai pris 400 pixels de large pour que ça ne soit pas trop grand mais assez pour que vous puissiez y voir quequ'chose)

Voilà quoi doit ressembler votre écran à ce moment-là (à quelques différences près que j'utilise Linux -je vous ai dit que j'aimais bien les open source ?- et que j'ai un peu changé l'apparence de Gimp pour mon utilisation , mais vous devez avoir globalement les mêmes fenêtres) : 

(ouais, mes flèches sont très laides, j'ai fait ça à la souris, si ça vous fait mal aux yeux vous pouvez bien sûr m'offrir une tablette graphique)

- A ce moment là, vous pouvez vous amusez sur vos images et rajouter du texte, des effets...

2ème étape : Assembler les images


Beaucoup plus simple qu'il n'y paraît !

- Choisissez quelle sera votre "première" image (la première qui apparaîtra, chronologiquement, dans votre gif) c'est elle qui va nous servir de base.

- Allez sur votre DEUXIÈME image (vous cliquez simplement sur l'image miniature qui correspond à votre image, en haut) et faites un bête tout séléctionner / copier.
Pour cela, avec gimp vous pouvez utiliser Ctrl+A suivi de Ctrl+C , OU choisir le menu "Sélection" >"tout" puis menu "Edition">copier.


- Allez maintenant sur votre PREMIÈRE image, et faites "coller" (ou Ctrl+V)
AAAAAAAAAAAAAAAAAAAAAAAAAh mais que se passe-t-il ??? Ma première image à disparuuuuuuu !! J'ai fait quoi de travers ?

PAS DE PANIQUE, c'est normal : on vient de coller une image sur une autre image... Et donc on ne voit plus la première. Mais c'est pas pour ça que la première n'existe plus : elle est "sous" la deuxième, et c'est très bien, c'est que qu'on veux. 

Revenons en à nos moutons : vous avez donc collé votre deuxieme image sur la première. Pour le moment, votre collage n'est pas encore fixé, c'est une image flottante, ce qui ne nous sert pas à grand-chose...

On va donc changer cela : 

- Dans la boîte des calques (si par un quelconque miracle/hasard/mauvaise manip, elle n'apparaît pas, faites la apparaître en allant dans le menu "fenêtres">"fenêtres ancrables">"calques") vous pouvez voir un miniature de votre première image, + votre deuxième image intitulée "sélection flottante (calque copié)"

Faites un clic droit sur cette fameuse sélection flottante, et cliquez sur "vers nouveau calque" 


Vous avez maintenant deux calques avec vos deux images.

- Répétez la même opération pour toutes vos images

- Pour vous retrouver là-dedans, pensez à renommer vos calques dans l'ordre : "image 1", "image 2"... Pour cela, clic droit sur le calque en question > "modifier les attributs du calque" et vous mettez ce que vous voulez :


Etape 3 : Exporter en gif


C'est presque terminé !

- Vous allez maintenant vérifier l'ordre de vos calques, car de cela dépend la chronologie de votre gif animé.

Dans la boîte des calques, vous avez la liste de vos images (image 1, image 2...)
La première image qui est censée apparaître dans votre gif doit se trouver tout en bas de la liste, et la dernière tout en haut, comme sur cette image : 


- Maintenant que vous êtes sures de l'ordre, on va exporter tout ça au format gif !

Cliquer  sur le menu "Fichier">"Exporter..."

Une fenêtre s'affiche. Tout d'abord, renommez votre fichier comme bon vous semble (ou pas hein vous faites ce qui vous chante en fait)

Ensuite, cliquez sur "sélectionner le type de fichier" pour afficher les choix disponibles, et cliquer sur "image GIF"
(Ouais ouf hein)

Puis sur "Exporter" :


Une AUTRE fenêtre s'affiche (ouiii encore mais c'est la dernière) pour que vous choisissiez les paramètres de votre gif : 


1. Cochez bien la case "As animation", ou seule l'image du dessus apparaîtras...

2. Boucle infinie : si vous voulez que votre Gif tourne en boucle. Si nous ne cochez pas cette cas l'animation de jouera qu'une seule fois.

3. Délai entre les images : ici vous choisissez le temps de pause entre les images, et donc la vitesse de votre gif. Sur l'exemple ci-dessous, j'ai choisi 2000 millisecondes (soit 2 secondes) (boss des maths moi hé hé)

4. Cochez ces deux cases pour que Gimp comprenne bien que tout cela s'applique à TOUS les calques du Gif animé.

Et enfin, cliquez sur "exporter" 
Et c'est terminé ! Vous avez votre Gif animé :





Et si jamais vous n'avez pas envie de faire ça avec Gimp, ou que vous trouvez que je raconte nawak ou je sais point quelle raison, vous trouverez d'autres manières de faire : Ici pour créer un gif animé avec photoshop, ici et ici aussi pour en faire avec encore d'autres logiciels !

Je n'ai pas testé ces dernières méthodes parce que je n'utilise pas photoshop et que j'ai toujours fait avec Gimp, et que comme ça marche, ben, pas de raisons d'ailler voir ailleurs donc si vous les avez testées, dites moi ce que vous en pensez , et n'hésitez pas à filer vos tuyaux. Il y a pleeein de manière de faire, à vous de trouver celle qui vous convient !





Related Posts Plugin for WordPress, Blogger...

10 commentaires:

  1. Merci pour ce p'tit tuto !
    En te lisant, je me rends compte que je suis pas totalement une quiche et que j'ai encore des bons restes de la fac... Y a plus qu'à !
    Et j'approuve entièrement le choix de Gimp pour sa simplicité d'utilisation et le fait que ce soit un logiciel Open Source...

    RépondreSupprimer
  2. Super ! Merci pour le temps passé à rédiger ce tuto. Je l'ai partagé sur twitter. Prochain billet, faire des flèches rouges qui déchirent ;-)

    RépondreSupprimer
  3. Tant de simplicité (c'est bien expliqué faut dire) ça donne envie de se lancer ! Merci !

    RépondreSupprimer
  4. ah je vais essayer ! merci pour ce tuto qui m'a l'air bien clair !
    (à ma première tentative j'avais téléchargé une logiciel gratuit juste pour faire les gifs, ça a marché une fois et c'est tout...)

    RépondreSupprimer
  5. Merci pour le petit tuto :)
    Par contre je ne sais pas si c'est normal mais à chaque fois que je veux poster une gif sur blogger elle est de très mauvaise qualité (des pixels qui ressortent avec une teinte grisâtre..) tu sais comment y remédier ?
    Bisous

    RépondreSupprimer
  6. Merci pour ce tuto clair et efficace !!!!! Et quelle réactivité ! A moi les gifs animés :-)

    RépondreSupprimer
  7. Alors là, je vais me coucher, mais j'ai trop hâte d'essayer ton tuto.
    Ce que je peux déjà te dire, c'est que je suis absolument d'accord avec toi sur The Gimp. Simple, efficace et gratuit!

    RépondreSupprimer
  8. Merci merci ! ça m'a pris deux secondes et j'en suis trop fière de mon petit gif animé !!

    RépondreSupprimer
  9. Bonjour,
    Merci pour ce tuto, j'ai découvert Gimp et je me suis amusée comme une petite folle (non, je n'ai pas 70 ans, pourquoi?) à faire un GIF. Pour le voir, je l'ai mis dans ma bannière de blog, mais je crois qu'il ne va pas rester longtemps, il pique un peu les yeux ;-)
    (au cas où, c'est ici: http://danslestiroirsdejul.eklablog.com)

    RépondreSupprimer