Koqas
Membre
- Inscription
- 22 Juin 2012
- Messages
- 817
- Réactions
- 190
- Points
- 16 898
- Tutoriel -
Difficulté :
Faire un .gif avec Photoshop.
Résultat :
Dans ce tutoriel, j'ai fais un exemple neutre (j'avais pas d'idée Difficulté :
Faire un .gif avec Photoshop.
Résultat :
) donc j'ai décidé de se faire balader notre petit logo 
présent en haut à gauche de la page.Requis :
- Photoshop
- Un minimum de connaissances dans ce dernier
1 : Choisissez une image à animer
Pour ma part, il s'agit d'un screen de la page :
2 : Choisissez l’élément à animer
RG et découpez le grâce à l'outil de sélection rapide :
Puis faites en un calque (clic droit > Calque par copier) Attention à ne pas le changer de place, laissez le au même endroit sur l'image :
Vous avez maintenant le logo ! Il ne reste plus qu'à faire disparaître celui de l'image qui ne nous sert plus ...
Vous pouvez vous aider du tampon de duplication par exemple
3 : Faire l'animation
Si ce n'est pas déjà fait, activez la fenêtre "Montage" dans l'onglet "Fenêtre".
Puis, en bas apparaîtra ceci; cliquez sur "Créer un montage vidéo"
Cliquez maintenant sur les 3 petits carrés pour faire apparaître le montage sous forme de vignettes
Ce qui vous donne ceci :
Pour que votre .gif soit un .gif qui redémarre à l'infini, à la place de "Une fois" (en bas du screen) sélectionnez "Toujours"
Maintenant, créez une ou plusieurs nouvelles vues en cliquant sur le bouton suivant
En cliquant sur ces vignettes, vous voyez ce que vous verrez à ce moment la dans le .gif, vous comprenez ?
Faites en sorte que la première vignette (1) reste comme sur l'image de base.
Ensuite sur la deuxième, vous pouvez déplacer le logo ou vous voulez sur la page, voici un exemple (on voit bien que sur la vignette 1, le logo
est à son emplacement, puis a été déplacé sur la 2) :
Maintenant, il ne vous reste plus qu'à faire de nouvelles vignettes et de déplacer votre logo à chaque fois pour donner un effet de mouvement !
4 : Régler le .gif
C'est bien beau tout ça, mais le .gif est lent non ?
Cliquez sur le temps affiché en bas (0.5s sans doute) et modifiez le, mettez celui de votre choix (0.1 pour le tuto)
Vous pouvez aussi mettre plus de temps sur une vignette si vous voulez qu'elle soit présente plus longtemps ...
5 : Enregistrer votre image en .gif pour les navigateurs.
Et non, il ne faut pas enregistrer en .gif !
Il faut enregistrer "pour le web" : Fichier > Enregistrer pour le web
Il n'y a rien de spécial à vérifier dans la page qui s'affiche si ce n'est que l'option de boucle est réglée sur "toujours"
Des suggestions pour l'améliorer ? Postez ici !
J'ai entièrement réalisé ce turoriel ce qui m'a demandé assez de temps, merci de me demander si vous voulez le copier.
Dernière édition:
De rien, avec plaisir 