Retour à l' AccueilRetour aux Tutoriaux Web Design liste 1
 

Bouton Lumineux

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

Créez un nouveau document 300 x 100 px. Fond Noir.
Note : Le bouton est volontairement grand pour plus de précision. A vous de l' adapter à vos besoins.

Créez un nouveau calque nommé [Bouton].
Tapez [D] puis [X] pour mettre Blanc par défaut.

Prenez l' outil Rectangle arrondi [U] Pixels de remplissage.
Rayon : 30 px.
Tracez une ellipse de 200 x 40 px.

Double cliquez sur le calque [Bouton] pour ouvrir la fenêtre de Style de calque et appliquez ces Styles :

LUEUR EXTERNE
Mode de fusion : Superposition.
Opacité : 35%.
Bruit : 0%.
Couleur : # 00B9FE.
Technique : Plus tamisée.
Grossi : 10%.
Taille : 20 px.
Contour : Linéaire - Lissé : Décoché.
Etendue : 50%.
Variation : 0%.

LUEUR INTERNE
Mode de fusion : Superposition.
Opacité : 25%.
Bruit : 0%.
Couleur : # 00B9FE.
Technique : Plus tamisée.
Source : Contour.
Maigri : 0%.
Taille : 20 px.
Contour : Linéaire - Lissé : Décoché.
Etendue : 50%.
Variation : 0%.

INCRUSTATION COULEUR
Mode de fusion : Normal.
Couleur : # 00B9FE.
Opacité : 10%.

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

CONTOUR
Taille : 1 px.
Position : Intérieur.
Mode de fusion : Normal.
Opacité : 50%.
Couleur : # 00B9FE.

Allez dans Images > Réglages > Négatif [Ctrl+I].

Créez un nouveau calque [Reflet].
Tapez [Ctrl+clic] sur la vignette de [Bouton] pour récupérer sa sélection.

Prenez l' outil Dégradé [G] Linéaire et Noir, Blanc.

Appliquez le dégradé du bas vers le haut de la sélection.
Note : Maintenez [Maj] enfoncée pour que votre dégradé soit droit.

Passez le calque [Reflet] en mode Superposition et réduisez son Opacité à 30%.

Tapez [Ctrl+D] pour déselectionner.

Prenez l'outil Ellipse de sélection [M].
Tracez une ellipse qui croise votre bouton comme ceci :

Tapez [Retour arrière] pour supprimer puis [Ctrl+D] pour déselectionner.

Créez un nouveau calque [Séparation].
Prenez l' outil Trait [U] Pixels de remplissage.
Epaisseur : 1 px - Lissage : Décoché.

Tracez un trait couleur # 00B9FE puis un Noir sur la gauche de votre bouton.
Note : Maintenez [Maj] enfoncée pour tracer droit.

Passez le calque [Séparation] en mode Lumière tamisée.

Créez un nouveau calque [Flèche].
Prenez l' outil Lasso polygonal [L] et tracez une flèche.
Remplissez la sélection de Noir.
Tapez [Ctrl+D] pour déselectionner.

Appliquez-lui ce Style :

LUEUR EXTERNE
Mode de fusion : Superposition.
Opacité : 75%.
Bruit : 0%.
Couleur : # 00B9FE.
Technique : Plus tamisée.
Grossi : 0%.
Taille : 5 px.
Contour : Linéaire - Lissé : Décoché.
Etendue : 50%.
Variation : 0%.

Passez le calque en mode Superposition.

Passons maintenant au texte...

Tapez votre texte en Blanc et appliquez ce Style :

LUEUR EXTERNE
Mode de fusion : Superposition.
Opacité : 50%.
Bruit : 0%.
Couleur : # FFFFFF.
Technique : Plus tamisée.
Grossi : 0%.
Taille : 5 px.
Contour : Linéaire - Lissé : Décoché.
Etendue : 50%.
Variation : 0%.

Dupliquez le calque [Texte].
Allez dans Edition > Transformation > Symétrie axe vertical.

Prenez l' outil Déplacement [V] et, à l' aide des flèches de votre clavier, déplacez le nouveau calque 1 px sous votre texte.
Note : Une pression sur une touche correspond à 1 px.

En bas de la Palette de calques, cliquez sur > Ajouter un masque de fusion.

Prenez l' outil Dégradé [G] sans vous soucier des réglages et appliquez comme ci-dessous :

Et voilà votre Bouton Lumineux terminé !
Essayez avec d' autres couleurs...

~ Graphisme Delphine © 2006 ~