Voilà mon petit tuto pour faire un gif animé... j'utilise un cas précis mais il est adaptable à n'importe quelle situation...


Logiciels utilisés:
- Photoshop cs ( vous pouvez utiliser une autre version on s'en fout)
- Image ready.

La situation: mettons que vous vouliez faire un fondu entre cette jolie image de japonaises (interceptor no coment) et cette jolie image de japonaise...
Donc une image doit être affichée, progressivement remplacée par l'autre et vice-versa.



1ère partie: composition de l'image.

On a besoin pour cette partie de photoshop (ou paint shop pro j'suis pas rasciste)

-On ouvre les deux images...(ou plus)



-Si c'est pour une bannière ou un avatar, on découpe les images aux dimensions voulues (les mêmes pour toutes les images sinon ça fait un peu con.) La meilleure solution: on en découpe une grâce à l'outil "recadrage" (entouré en rouge):
On fait une sélection, puis clic droit -> recadrage.



voilà, comme ça on a une image aux proportions voulues...

-Maintenant on copie l'autre image, puis on la colle sur la première image, et on la redimensionne pour qu'elle corresponde aux proportions de cette première image. (comme vous pouvez le voir il y a donc 2 calques pour cette image. Quant à celle qu'on a copié (dans mon cas l'image avec la fille), on peut la fermer on en a plus besion.




-Voilà, la partie photoshop est maintenant terminée, vous pouvez encore ajouter des effets ou autres, mais ça vouv vous débrouillez.
allez alors dans fichier -> modifier dans image ready.



2ème partie: mettre en mouvement tout ça!

Vous êtes donc maintenent dans Image ready.

- Vous avez trois petites fenêtres: l'image, les calques et une fenêtre animation.
Allez dans calque et cliquez sur le petit oeil à côté d'un des calque.
Vous avez alors un des calques qui est devenu invisible (normal si pour l'animation on veut un fondu d'une image, puis l'autre)



-Bon, dans la fenêtre animation, cliquez sur l'espèce de petit bloc-notes... ça crée une deuxième image pour l'animation. Recliquez alors sur le petit carré vide où il y aavait l'oeil dans la fenêtre calque.



-Maintenant si vous cliquez sur la petite flèche (symbole play) de la fenêtre animation, vous verrez les deux images qui défilent...ça veut dire que l'animation est créée! Mais bon c'est brutal, rien à voir avec un bon fondu et c'est très rapide...on va régler ça.
Après avoir vérifié que vous avez sélectionné la première image (surlignée en beu clair)cliquez sur l'espèce de sigle audi à côté du bouton "nouvelle image"...une fenêtre s'ouvre, vous demandant combien d'images de transition il faut rajouter pour faire le fondu. Plus vous rajouter d'image, plus le fondu est beau, mais plus l'image est lourde! Choisissez, puis faites ok.



-voilà, maintenant vous avez un beau fondu! Mais c'est toujours trop rapide...
Cliquez alors en dessous de la première image (il doit être marqué "0 sec."), et sélectionnez la durée où sera affichée cette image (par ex 1/2 sec)

-Faites de même avec la dernière image de votre animation (vous pouvez le faire avec les images intermédiaires mais aolrs vous n'aures plus un fondu)

Et voilà, vous avez votre belle animation!

-facultatif: si vous désirez que l'animation revienne au début, vous sélectionnez la dernière image, vous cliquez sur le sigle pour créer une image, et vous masquez encore un calque (le petit oeil), pour retrouver la première image. Et alors vous resélectionnez l'image précédente et vous recréez des images de transition. (attention! les images de transitio auront la même durée d'affichage que l'image à partir de laquelle vous les avez créés. Regardez bien la duré d'affichage en dessous des images.) Et quand vous avez créé ces images, supprimez la dernière de l'animation.

-vous pouvez encore redimensionner l'image si elle est trop grande pour être mise en bannière: allez dans Image -> taille de l'image et tapez vos dimensions.


Et voilà le résultat!

-Pour l'enregistrer: Fichier -> enregistrer une copie optimisée sous.



Sachant que je ne suis pas sur un site de création graphique, j'ai essayer de la faire le plus détaillé et facile à comprendre, mais si vous avez des questions ,n'hésitez pas.




Et je pense qu'on pourrait mettre tous les tutos en post-it non? Qu'est-ce qu'en pensent les modos?

Cool Nemo ton tuto. Pour le post it je ne pense pas que ca soit une bonne idée parce que y'as trop de tuto. Mais j'ai une idée, je vais regarder ce que je peux faire pour regouper tout les tutos.

Merci grace a toi j'ai reussi a faire se projet de Gif avec mon pseudo tagé sur le mur lol sa j'en est meme pas fait expré quand j'ai ecrie mon pseudo

salut , esque sa marche pour : photoshop image raedy ?

cte geni a écrit:salut , esque sa marche pour : photoshop image raedy ?

??? euh...... sans vouloir paraitre chiant.......

nemo a écrit:
Logiciels utilisés:
- Photoshop cs ( vous pouvez utiliser une autre version on s'en fout)
- Image ready.

Bye

Kanéda a écrit:

cte geni a écrit:salut , esque sa marche pour : photoshop image raedy ?

??? euh...... sans vouloir paraitre chiant.......

nemo a écrit:
Logiciels utilisés:
- Photoshop cs ( vous pouvez utiliser une autre version on s'en fout)
- Image ready.

Bye

désolé j'avais mal lu ! desolé

Est-ce que tu pourrais me dire comment faire pour que les images de mon gif soient de super bonne qualite? Quelles 'settings' (mon programme est en anglais) tu as mis pour l'optimization? (transparence, 'dither',...)
Le mien a plein de point...
Et ca passe d'une image a l'autre toujours abrupte!!!
Bref ca marche po.

Quels logiciels utilises tu ?

Et poste une image de ton gif qu'on voit ce qui cloches.

Photoshop image ready...
en anglais....

voila l'image originale:

Et le gif pourri que j'ai fait:

Les settings que j'ai sur ca sont:

Optomize
Gif
Custom Colors 128
Diffusion 100%
Transparency
Diffusion transparency 100%
Interlaced web snap: 0

J'ai essaye de modifier tous ces parametres mais ca n'a fait qu'empirer la qualite.