Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Graphisme > Divers > images animées faciles > Lecture du tutoriel

images animées faciles

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Avatar
Auteur : Petimuel
Note : 17 / 20 (17 votes)
Visualisations : 30 845

Plus d'informations Plus d'informations
Bonjour les gens!

Je vous propose aujourd'hui de réaliser rapidement et simplement des images animées on ne peut plus élémentaires.

Attends attends... ici, tu nous proposes de faire des images animées alors que plusieurs tutos en proposent sur ce même site?

Oui. :D
Oui mais les miennes sont rapides et faciles à réaliser. Ceci dit, ce tutoriel ne vous permettra pas de faire de véritables dessins animés, quelques petites animations suffiront.

Et bonne nouvelle, les flemmards seront ravis. ;)
Sommaire du tutoriel :
Icône du chapitre

Ce dont vous aurez besoin

Vous vous en doutez, pour faire une image animée facilement, vous aurez besoin d'un minimum d'outillage.

Hein!? :o Et moi qui espérais que pour une fois, on me laisse tranquille... avec Notepad ++, Easy PHP et tous les autres logiciels que j'ai déjà du télécharger ...

On se calme les gens!
Pour ce tutoriel, il vous suffira de deux logiciels (moi j'en utilise trois, mais je suis un cas particulier :lol: ).

* Avant tout, il vous faudra un logiciel de retouches d'image pouvant sauvegarder des images en format .gif . Vous en avez sans doute déjà un : Paint.
Seulement bon, paint, ce n'est pas très pratique, et puis surtout, il détériore grandement la qualité des images lorsque l'on sauvegarde en .gif. Vous pouvez le prendre si vous voulez, ce n'est pas la mort non plus, mais pour ma part, je vous propose photophiltre, avec qui les images pâtissent moins de leur enregistrement dans ce format.
Pour le télécharger, allez ici : ici. Il existe encore d'autres logiciels, je ne sais lesquels, mais ce qui est sûr, c'est que Photoshop ne fonctionne pas. Bon.

* Ensuite, il vous faudra UnFREEz

Le tuto était censé être simple et je suis déjà largué... c'est quoi UnFREEz?

Ah, UnFREEz, mes amis, c'est la base de ce tuto!
C'est un programme simple et très léger.
Voici un lien où le télécharger (il doit en exister d'autres) : lien.

Il est indiqué que le logiciel est en anglais, et j'en comprends pas un mot!

Aucun problème! Rassurez-vous, UnFREEz est un tout petit logiciel, et en lisant ce tuto, vous saurez tout de lui.
Allez, foin de palabres, on charge dans le vif!

préparation des images

Avant d'animer vos images, il faudra évidement les préparer.
Je vais ici travailler sur deux images : un dessin de chevalier, et une photo de mon chat. Ce dernier a été fait sur photoshop (version 5.0), tout simplement parceque je me sens plus à l'aise dessus que sur photophiltre.
Le chevalier a été fait sur photophiltre.


Alors, pour le chat, j'avais envie de lui faire clignoter les yeux!(oui, je suis bizarre :lol: )
J'ouvre donc photoshop, et j'ouvre ma photo:
Image utilisateur

Ensuite, je recadre l'image, et là, j'enregistre!
En effet, le principe d'UnFREEz, c'est de faire défiler des images différentes. Si l'on enregistre pas chacune de ses étapes, ma qué tout, il est perdou. Caramba... :(


Bon, maintenant, je rajoute des halos dans les yeux.
Image utilisateur

J'enregistre l'image, et hop! Voici mes deux images, cayoutte 1 et cayoutte 2 (il est interdit de faire des remarques sur le nom de mon chat! :-° ) côte à côte!

Image utilisateur

Bon, passons au chevalier (fait sur photophiltre exceptionnellement pour ce tuto et parceque c'est facile). Je voulais me faire un avatar animé pour un forum. Or un membre de ce même forum avait dessiné ce même avatar (en fait, il "m"'avait dessiné). J'ai donc repris ces images, je les ai recadrées, et voilà tout!

Image utilisateur

Et voilà, vos images sont prêtes, on va pouvoir...
attends attends... tu me dis que les images sont prêtes? Mais je croyais qu'il fallait impérativement qu'elles soient en .gif ? :o

Ah oui! :-°
Pour les images directement faites sur photophiltre/paint, j'espère que vous avez eu la présence d'esprit de les enregistrer directement en gif. (si ce n'est pas le cas, vous êtes juste un peu fatigué, ça arrive ^^ ).
Pour celles faites sur photoshop -si vous en avez-, ouvrez-les avec photophiltre, puis cliquez sur "enregistrer sous", et enregistrez-les en .gif. Voilà ^^ .

Allez, la partie préparation est finie, on touche au but!

Animation

C'est la lutte finaaaale!
Ca y est? Les images que vous voulez utiliser sont prêtes? Paaarfait! Le gros du boulot est fait, c'est déjà presque gagné. ;)

On va -enfin!- pouvoir utiliser UnFREEz.
Alors, lancez-le.À présent que vous l'avez téléchargé et installé, hop! A l'attaque!

Double-cliquez sur son icône. Vous tombez sur une fenêtre rikiki comme celle-là :
Image utilisateur

Mais c'est quoi ce bazar!? On a un carré blanc et deux options bizarres! Et c'est avec ça que tu veux qu'on fasse des animés!? o_O

Eh ouais ^^ .
Je vous avais dit que c'était facile et léger.
Alors c'est simple, voilà la marche à suivre :
-allez dans vos documents, dans le dossier où se trouvent vos images
-faites glisser les images dans le bon ordre jusqu'au carré blanc, comme ceci :
Image utilisateur

Bon. Maintenant, il faudra bien faire défiler ces images. Avez-vous vu cette petite case en bas à droite?

Image utilisateur

C'est le temps qu'il marquera entre chaque image. Comme indiqué, c'est en centi-secondes : si vous entrez la valeur 100, ça durera une seconde.
Pour mon chat, j'entre 90.

Ensuite, appuyez sur le gros bouton "make animated gif", enregistrez votre gif animée, et hop! yabon!
Double-cliquez dessus pour voir le résultat.
Lorsque vous faites ça, votre image ne sera pas mise en boucle : pour mon chat-guirlande, ça fera éteint/allumé puis c'est tout. Mais quand vous l'ouvrez, par exemple, sur internet, ça se fera en boucle (soit: éteint/allumé/éteint/allumé etc...)


Et voilà donc ce que donne ce fameux chat (et en même temps, ça vous montre ce que peut faire un mauvais cadrage... attention donc, ne refaites pas cela chez vous :-° ).

Bon, passons maintenant au chevalier. Je vous rappelle que le but, c'est d'avoir un avatar, j'aimerais donc qu'il évite de se prendre une torgnole toutes les 5 secondes... le but est qu'on le voit souvent droit, les bras croisés, lui, c'est vraiment moi (si vous voyez ce que je veux dire ^^ ). Et de temps en temps, pour agrémenter, boum! On le giffle.
Alors, comment que je fais?

Euh... tu mets un chiffre plus gros dans la case en bas à droite? :o

Biiiip!
Mauvaise réponse! :)
en effet, si je fais ça, tous les temps seront équilibrés, et on ne le verra pas plus droit et fier que les fesses par terre, ou encore que le grand "smash".
Alors?

Je sais! Tu rentres plusieurs fois l'image 1!

Bravo! :)
Exactement, il faut que je rentre plusieurs fois l'image 1.
Je l'ai rentrée pas moins de 11 fois, ainsi que quatre fois pour l'image trois, et j'ai règlé le défilement à 120 cs :
Image utilisateur

Et voilà le résultat, bien cadré pour cette fois! ;) .

Chtite astuce pour ceux qui n'aiment pas s'encombrer de trop de fichiers : une fois que vous avez sauvegardé votre image animée, vous pouvez supprimer les images qui vous ont servi à la créer.


Bon eh bien ma foi vous savez tout! Avouez que ça n'était pas trop dur!
Ah si, j'ai oublié de dire que malheureusement,
on ne peut pas ajouter des fichiers au milieu de la liste dans UnFREEz, ainsi, si par exemple vous voulez, après coup, mettre deux fois le chevalier2, il faudra tout recommencer. :(

Bon! Après tout ce tuto et toutes ces photos, cela peut paraître un rien indigeste. Aussi le petit QCM qui suit est-il là pour vous rappeler à quel point c'est déconcertant de facilité! ;). D'ailleurs, je précise vite fait que vous pouvez ainsi créer vos propres smilies pour msn ou les forums : il suffit de supprimer le fond et de réduire la taille de l'image!

Q.C.M.

Je n'aime pas trop surcharger mon ordinateur, mais j'aimerais tout de même faire des animations avec des images plutôt jolies. Quel logiciel dois-je utiliser?
en quel format doivent être mes images?
Comment dois-je m'y prendre pour ajouter des images dans UnFREEz?
Je voudrais que mes images défilent toutes les deux secondes. Quelle valeur dois-je rentrer dans cette petite case?
Image utilisateur
Voilà, j'ai quatre images : arbre_au_printemps.gif, arbre_en_ete.gif, arbre_en_automne.gif et arbre_en_hiver.gif; et je voudrais qu'on voit arbre_au_printemps.gif deux fois plus longtemps que chacun des autres. Comment faut-il faire?

Statistiques de réponses au QCM


Voilà. C'est tout. Facile, non? ;)
Pour peu que vous puissiez utiliser UnFREEz convenablement, vous avez de quoi faire très simplement des images animées.

Elle est pas belle, la vie? :lol:

Quoiqu'il en soit, n'hésitez pas à me poser vos questions en commentaires.
Retour en haut Retour en haut


Créé : le 26/01/2006 à 13:16:18
Modifié : le 22/08/2008 à 16:08:53
Avancement : 100%
Licence : Copie non autorisée

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news | XHTML 1.0 | CSS 2.0
Édité par Simple IT SARL : Nous contacter | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 465 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.37s (0.3548s)