Index du Forum

© Zone Graphique
 
 Index du ForumFAQRechercherS’enregistrerConnexion

:: 16 - Bouton Animé ::

 
Poster un nouveau sujet   Répondre au sujet     Index du Forum -> Tutoriels -> Tutoriels PhotoShop -> Web Design
Sujet précédent :: Sujet suivant  
Auteur Message
Mr. © Zone Graphique
Administrateur

Hors ligne

Inscrit le: 13 Mar 2011
Messages: 49

MessagePosté le: Lun 18 Avr - 16:44 (2011)    Sujet du message: 16 - Bouton Animé Répondre en citant

 

Bouton Animé

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






 



Revenir en haut
Publicité






MessagePosté le: Lun 18 Avr - 16:44 (2011)    Sujet du message: Publicité

PublicitéSupprimer les publicités ?
Revenir en haut
Montrer les messages depuis:   
Poster un nouveau sujet   Répondre au sujet     Index du Forum -> Tutoriels -> Tutoriels PhotoShop -> Web Design Toutes les heures sont au format GMT + 1 Heure
Page 1 sur 1

 
Sauter vers:  

Index | Panneau d’administration | créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Texno x0.3 © theme by Larme D'Ange 2006
Powered by phpBB © 2001, 2005 phpBB Group
Traduction par : phpBB-fr.com