[tuto] Comment faire un gif animé?

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.

moi pour faire des GIF j'utilise GIMP je sais pas si vous connaisées mais il est pas mal.
je sais pas m'en servir et si quelqu'un sait il peut m'envoyer les tutos.

merci grand dieu pour avoir inventer les tutos:

respect mec§

moi j photoshop cs2 mais je ne peux pas faire ça aider moi pour faire sa svp



____________________________________
lucatoni

Ya des tuto pour sa ...

imad1996 a écrit:moi j photoshop cs2 mais je ne peux pas faire ça aider moi pour faire sa svp

c'est pas photoshop qu'il faut, c'est imageready (fourni normalement avec... si c'est une version originale... )

j'ai image redy mais il ne veut pas entre quand je click sue image redey une plaque sort elle il ecrit erreur pouvez tu m'aider

__________________________

Dj Nemo a écrit:

imad1996 a écrit:moi j photoshop cs2 mais je ne peux pas faire ça aider moi pour faire sa svp

c'est pas photoshop qu'il faut, c'est imageready (fourni normalement avec... si c'est une version originale... )

ou on peut télécharger la version original

__________________________

Photoshop est payant...
Et puis Image Ready il est forcément avec photoshop

Oui, si tu l'as bien acheté légalement dans le commerce et pas téléchargé une version pleine de bugs sur le net...

en maroc en na pas photoshop original on a la demo

stp donne le site pour que je le télécharge toi ou mantana

----------------------------------________---------------------------

La Maroc c'est pas le fin fonc de l'amazonie, vous avez des magasins.
Alors un bon site pour télécharger si tu n'as pas de magasin dans le coin c'est là!

clique ici

Photoshop est payant impossible de télécharger autre que par le P2P, mais bon la on peut pas t'aider desolé, cherche toi même soit:

De l'argent
ou
De l'argent

Au choix !!! @++

nn je veux télécharger pas acheter

Ok, tu me donnes 1070 euros, et je me débrouilles pour te l'envoyer au Maroc, c'est comme si tu l'avait téléchargé!

Mais je croyait pas qu'il coutait 1070, moi ^^ Lol
Non mais sinon, Imad espère pas trop
Tout ou presque l'as acheté, moi j'ai une ancienne version, si vraiment tu veut pas payer, pas tu télécharger GIMP

@+

Dj Nemo a écrit:Ok, tu me donnes 1070 euros, et je me débrouilles pour te l'envoyer au Maroc, c'est comme si tu l'avait téléchargé!

mais je n'ai pas d'euro en plus je n'ai pas un compte

_________________

Si tu veux le télécharger illégalement, on ne t'aidera pas si tu as un problème avec et je te souhaite plein de virus!

kev: ben ouais ça coûte un pont mais c'est le meilleur. C'est un peu comme les prog 3d, 3ds max (qui pour moi est le meilleur) est à 5000 euros. Si tu veux du bon matos pour faire de bonnes choses, faut y mettre le prix. Comme pour la photo.

nn ta pas compris on maroc on a pas le euro le dirham ta compris mnt

__________________

luca toni

Perso je voit pas le rapport, si tu veut je te trouve un site avec des Dirham .... Tu le pâyeras aussi cher

@pouss

Exact, et j'ai eu la vérification par un pote qu'on peut l'avoir moins cher qu'en Europe (bon en Anglais) au Maroc. Alors ou tu économises pour pouvoir te l'acheter, ou bien tu laisses tomber mais alors tu la fermes.

oui je le payent

je vais l'achter si je le trouve

______________

Evite les Deouble-post, euh question c'est qui dans t'as signature ?

c l'italien luca toni tu ne connais pas ce joueur

_________________________

Non parceque je crache sur les italien lol, je rigole, non mais je n'aime pas les italien, C'est tout, bon on arète de pourrir le sujet a nous deux, @+++ et vive l'italie

-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.

Ou est le petit bloc note s'il te plait ?

Dans la fenêtre animation (regarde sur mon screen, c'est là où il est marqué "toujours", et les symboles de lecture. Le bouton que tu cherches est à côté de la poubelle.

bon voila , je suis fiere , j'ai fait ma premiere signature animé





Dite moi ce que vous en pensé

c'est grand mais c'est beau ^^

C'est bien mais c'est énorme! Ca met deux heures à charger chez moi... tu saurais pas nous montrer une version plus petite (taille normale de sign) pour que ce soit plus agréable?


Et aussi... ce serait encore mieux si tu laissais une seconde les images affichées, pour qu'on ait bien le temps de lesvoir...

ok , je vais essayer , mais c'est quoi la taille normal

et surtout merci pour tes tuto

Les même dimensions que ta sign...


Et de rien pour les tutos, je suis modo graphique, faut bien que j'alimente ma section première!

c'est vrai

Mais moi sa m'enerve! j'ai pris pour la 1ere fois photoshop (version d'essaie) donc je l'installe et ils me mettent le numéro de serie est incorect alors qu'ils me demande pas dans l'installation un num' de serie 'sont cons lol est-ce-que sa fait sa a quelqu'un d'autre ?
a+

Je crois que pendant l'install', il faut que tu coches "version d'essai" ou un truc du style

Ok je regarde et je vous tien au courant
Et dans le dossier, il faut que je prenne quel fichier pour lancer l'installation svp
merci d'avance !
PS: j'ai lancé un fichier qui s'appelle setup mais montana il n'y a rien a coché

je vais t'envoyer une email avec une piece jointe c'est le même que le mien on verra si tu arrive a le faire ,
ta version est peut-etre abimé ?

D'accord, merci beaucoup Zaruto !!! mdr

donne moi ton adresse email par MP s'il te plait

Voila, c'est bon !

salut a tous

je veut savoir est ce qu ' on peut faire les signature animé avec photoshop en version démo ou non ? merci de me répondre @+

Oui tu peux les faire avec Image Ready (inclus dans Photoshop) , ça marche en version complète et en démo