S'inscrire |

 
TEAM
Avatar de Smike
Smike est déconnecté Smike est un Homme 05/02
XP de Smike 3 420 Nombre total de messages de Smike
Voir le profil Facebook de Smike Voir le compte Twitter de Smike Voir le compte DeviantART  de Smike
Administrateur
  #1 (permalink)  
Vieux 07/10/2005, 12h37
[Tuto] Image ready Animer un bouton

Gif animé sous Image Ready


Donnez du dynamisme à vos page web en y insérant des gifs animés.

Allons y :

- Dans Photoshop, préparez les différentes images qui composeront votre animation sur des calques séparés.
- Dans la palette des calques, masquez les éléments qui n'apparaîtront pas sur la première image, comme le montre ce screen :


- Enregistrez votre travail, puis tout en bas de la barre d'outil de Photoshop, cliquez sur cette icone :


- Ce qui aura pour effet de passer votre document sous Image ready automatiquement.

- Image ready n'est pas très different de photoshop, vous retrouvez vos calques (Fenêtre>Calques)
et affichez aussi la palette d'animation (Fenêtre>Animation)


- Sur cette même palette, vous devez ajouter la seconde image, pour cela, il vous faut cliquez sur l'icône de duplication (comme ci-dessous)


- Sur cette seconde image, dans la palette des calques, masquez le calque nommé "Bouton off" puis affichez le calque "Bouton up".


Puis faites de meme avec la 3ème :
- Ajoutez maintenant une troisième image en cliquant sur l'icône de duplication dans la palette animation.
- Sur cette troisième image, dans la palette des calques, masquez le calque nommé "Bouton up" puis affichez le calque "Bouton down".


- Il ne vous reste plus qu'a choisir le temps de diffusion de chaque image. (dans notre exemple, nous allons attribuer le même temps pour les 3 images). Pour cela, sélectionnez les toutes en cliquant dessus et en maintenant la touche (shift) enfoncé.
- Une fois les quatre images sélectionnées, effectuez un clic droit sur l'une d'entre elle. Choisissez le temps qui vous convient (pour notre exemple, 0.5) et elles prendrons toutes la meme valeur.


- Pour notre exemple, nous souhaitons que cette animation tourne en boucle. Dans la palette animation ci-dessus, il nous faudra sélectionner l'option "toujours".


Dernier détail, comme le titre le di c'est un gif donc si vous complez en jpeg ça va pas marcher
alrs ouvrez la fenêtre d'optimisation (Fenêtre>optimisation) et choisissez le format gif (16, 32, 128).


- Voilà ! il vous faut maintenant optimiser votre image au format "gif". Puis faire (Fichier / Enregistrer une copie optimisée sous…) ou (Ctrl + Maj + Alt + S).
Rendu :
Réponse avec citation
Avatar de bedji
bedji est déconnecté Sexe Non renseigné 09/05
XP de bedji 857 Nombre total de messages de bedji
WahRanI
  #2 (permalink)  
Vieux 07/10/2005, 16h57
bien expliqué le tuto merci Smike
Réponse avec citation
Avatar de Masahiro
Masahiro est déconnecté Sexe Non renseigné 09/05
XP de Masahiro 63 Nombre total de messages de Masahiro
Membre Habitué
  #3 (permalink)  
Vieux 07/10/2005, 19h26
je trouve le résultat plutot moyen, tu aurais du plutot expliquer comment faire un boutont qui brille, pas qui clignote
par contre le boutton est tres jolie
Réponse avec citation
Avatar de bedji
bedji est déconnecté Sexe Non renseigné 09/05
XP de bedji 857 Nombre total de messages de bedji
WahRanI
  #4 (permalink)  
Vieux 14/10/2005, 18h01
Citation:
Envoyé par Masahiro
je trouve le résultat plutot moyen, tu aurais du plutot expliquer comment faire un boutont qui brille, pas qui clignote
par contre le boutton est tres jolie
en fait c'est un tuto qui montre comment animer une image tout simplement
sur le boutton ont aurait preferait les changement d'etat par sourie
c'est l'animation la plus adapté pour un boutton
Réponse avec citation
Avatar de herz3leid
herz3leid est déconnecté Sexe Non renseigné 08/05
XP de herz3leid 1 034 Nombre total de messages de herz3leid
Modérateur
  #5 (permalink)  
Vieux 14/10/2005, 18h28
Tuto clair, bien expliqué, utile ! Tout ce qu'il faut ! Merci !
Réponse avec citation
Réponse

Outils de la discussion

Config des règles de ce forum
Règles de messages
Vous ne pouvez pas créer de nouvelles discussions
Vous ne pouvez pas envoyer des réponses
Vous ne pouvez pas envoyer des pièces jointes
Vous ne pouvez pas modifier vos messages

Les balises BB sont activées : oui
Les smileys sont activés : oui
La balise [IMG] est activée : oui
Le code HTML peut être employé : non
Trackbacks are oui
Pingbacks are oui
Refbacks are oui


A propos d'IK

Infographik alias IK est un forum d'entre-aide dans le domaine de l'infographie numerique
Depuis plus de 10 ans ce forum propose des tutoriaux un espace communautaire francophone.

We need You !

Faire un don permet de régler les frais de fonctionnement du site tel que l'hebergement, le ndd etc...
Faire un don

Fuseau horaire GMT +2. Il est actuellement 23h06.