Bouton Animé

  Passez votre curseur sur le texte en vert pour une infobulle en image 

Créez un nouveau document 200 x 100 px. Fond Blanc.
Note : J' ai choisi un fond Blanc pour que les captures d'écran soient plus lisibles...

Créez un nouveau calque nommé [Bouton].
Tapez [D] pour mettre les couleurs par défaut.

Prenez l’outil Rectangle arrondi [U] Pixels de remplissage.
Rayon : 10 px - Lissage : Coché.
Tracez un rectangle de 150 x 40 px.

Pour obtenir l’ aspect verre suivant, consultez le tutoriel > "Bouton de Verre" - Section Web Design.

Tapez votre texte en Blanc.
Double cliquez sur le calque [Texte] pour ouvrir la fenêtre de Style de calque et appliquez ce Style :

BISEAUTAGE ET ESTAMPAGE
Style : Estampage.
Technique : Lisser.
Profondeur : 100%.
Direction : Haut.
Taille : 2 px.
Flou : 0 px.
Angle : 120° - Elévation : 30° - Utiliser l’éclairage global : Coché.
Contour brillant : Linéaire - Lissé : Décoché.
Mode des tons clairs : Superposition - Couleur : # FFFFFF - Opacité : 75%.
Mode d’ombrage : Produit - Couleur : # FD9603 - Opacité : 75%.

Fusionnez les calques [Bouton] et [Texte].

Prenez l' outil Forme personnalisée [U] Pixels de remplissage.
Forme : Flèche 6 ( par exemple ) - Lissage : Coché.
Tapez [D] pour mettre les couleurs par défaut.

Créez un nouveau calque [Flèche] et tracez votre forme.
Note : Maintenez [Maj] enfoncée pour conserver les proportions de la flèche.

Appliquez ces Styles à votre flèche :

INCRUSTATION EN DEGRADE
Mode de fusion : Normal.
Opacité : 100%.
Dégradé : Ci-dessous - Inverser : Décoché.
Style : Linéaire - Aligner sur le calque : Coché.
Angle : 0°.
Echelle : 100%.

CONTOUR
Taille : 2 px.
Position : Extérieur.
Mode de fusion : Normal.
Opacité : 100%.
Dégradé : Idem ci-dessus - Inverser : Coché.
Style : Linéaire - Aligner sur le calque : Coché.
Angle : 0°.
Echelle : 100%.

Créez un nouveau calque et placez-le sous [Flèche].
Cliquez droit sur [Flèche] puis > Fusionner avec le calque inférieur.
Note : Les Styles de calque sont ainsi "écrasés".

Allez dans Edition > Transformation > Rotation.
Tapez  -120° dans la barre du haut, près du symbole représentant un angle.
Tapez [Entrée] pour valider votre transformation.

Prenez l' outil Déplacement [V] et placez votre flèche.

Revenez à votre [Bouton] et appliquez ce Style :

OMBRE PORTEE
Mode de fusion : Produit.
Couleur : # 000000.
Opacité : 20%.
Angle : 120° - Utiliser l’éclairage global : Coché.
Distance : 8 px.
Grossi : 0%.
Taille : 5 px.
Contour : Linéaire - Lissé : Décoché.
Bruit : 0%.
Ombre portée masquée par le calque : Coché.

Dupliquez le calque [Bouton].
Cliquez droit sur [Bouton copie] puis > Effacer le style de calque.

Allez dans Edition > Transformation manuelle [Ctrl+T].
Réglez les proportions dans la barre du haut comme ci-dessous.

Tapez [Entrée] pour valider votre transformation.
Masquez [Bouton] en cliquant sur l' oeil.
Votre Palette de calques ressemble désormais à ceci :

Dupliquez le calque [Flèche]. Prenez l' outil Déplacement [V] et déplacez-la.

Masquez le calque [Flèche].
Pensez à sauvegarder votre travail [Ctrl+S], c' est plus prudent...


Passons à l' animation...

Ouvrez Image Ready [Maj+Ctrl+M] ou cliquez sur  .

En bas de la Palette d'Animation, cliquez 1 fois sur > Reproduit l' image sélectionnée.

L' image 1 reste telle quelle.

Modifiez la visibilité des calques pour l' image 2 comme sur la capture ci-dessous :

Revenez à l' image 1 et cliquez sur le bouton > Trajectoire.

Une fenêtre de dialogue s' ouvre. Paramètrez comme suit :
Trajectoire avec : Dernière image.
Images à ajouter : 3.
Calques : Tous les calques.
Paramètres : Position Coché.

Vous avez désormais 5 images.
Sélectionnez l' image 1 et cliquez sur > Définit le délai des images :

Sélectionnez 0,5 secondes.
Réglez les suivantes comme ci-dessous :

Modifiez le délai si vous souhaitez une animation plus lente ou plus rapide...

Pour visionner le résultat dans Internet Explorer, tapez [Ctrl+Alt+P] ou cliquez sur

Fermez la fenêtre de votre navigateur...

Il ne vous reste plus qu' à enregistrer votre travail.
Note : Vous devez le faire dans Image Ready et pas dans Photoshop...

Allez dans Fichier > Enregistrer une copie optimisée sous... [Ctrl+Maj+Alt+S].
Choisissez le dossier dans lequel sera rangée votre animation.
Nommez-la et choisissez Type : Images (.gif).

Note : Si votre animation est destinée au web, le nom ne doit comporter ni espaces, ni caractères accentués, ni majuscules.

Voilà, votre animation est terminée !
A vous d' utiliser cette technique pour attirer l' attention de vos visiteurs...

~ Graphisme Delphine © 2006 ~