[Tuto] Créer un Bouton On / Off avec Photoshop !

    Publicités

Users Who Are Viewing This Thread (Total: 1, Members: 0, Guests: 1)

SonGoku

Je suis Légendaire
V
Ancien staff
Mar 27, 2011
6,131
75
954
Alpha
Créer un bouton On / Off avec Photoshop

( j'ai trouvé ce tuto sur le net je me devais de vous le partager il est super ! ) source : dotdesign

switch_final.jpg


Étape 1 : création du document et du background

Nous allons commencer par créer un document 500x400px et le remplir d'un gris léger #cac9c8. Ensuite, rajoutons le bruit pour remplir ce fond.
Créer un nouveau calque et le remplir d'une couleur (n'importe laquelle) puis Filtre » Bruit » Ajout de bruit : Quantité 150%, Répartition Gaussienne. Et enfin Image » Réglages » Désaturation.
Maintenant il suffit de passer le calque en mode Lumiére tamisée et Opacité 20%.

switch1.jpg


Étape 2 : fond du bouton On/Off du bouton neutre

Utilisez l'outil Rectangle arrondi d'un rayon de 500px pour avoir des bords totalement arrondis. Le fond du bouton fait 200x80px !
Il faut maintenant remplir le style du calque comme sous les images ci-dessous :

switch2.jpg


switch3.jpg


switch4.jpg


switch5.jpg


switch6.jpg


Pour obtenir ce résultat :

switch7.jpg


Étape 3 : création du switch

Nous allons utiliser l'outil Elipse pour faire un rond de 76x76px et le placer à droite ou à gauche de l'élément créé précédemment

switch8.jpg


Il ne reste plus qu'à remplir le style de calque, voici les paramètres

switch9.jpg


switch10.jpg


switch11.jpg


switch12.jpg


Le rond de notre bouton est fait !

switch13.jpg


Étape 4 : ajout de l'ombre

Il ne reste plus qu'à ajouter l'ombre en dessous du rond pour donner un effet un peu plus "3D".
- Récupérer la sélection du rond et le remplir de noir
- Faire Filtre » Atténuation » Flou gaussien d'un rayon de 5 pixels
- [CTRL + T] pour transformer l'image, et l'étirer verticalement sur environ 100px
- Couper l'ombre au 2/3
- "Raboter" les deux coins supérieurs pour cacher le haut de l'ombre sous le rond
- Baisser l'opacité à 30%

switch-anim.gif


Étape 5 : ajout du bruit

Ajoutons maintenant du bruit dans le bouton pour donner un effet de texture.
Créer un nouveau calque, le remplir d'une couleur et faire Filtre » Bruit » Ajout de bruit : Quantité 150%, Répartition Gaussienne puis finalement Image » Réglages » Désaturation. Maintenant il suffit de passer le calque en mode Lumiére tamisée et Opacité 10%.
Sélectionner le rectangle arrondi en faisant ([CTRL + clic gauche] sur l'image du calque), inverser la sélection [CTRL + SHIT + I] et supprimer ! Placer le calque tout en haut, au dessus du rectangle arrondi et du rond.

switch14.jpg


La version neutre de notre bouton est terminée, il ne reste plus qu'à en faire plusieurs versions, adaptées au situations.

Version verte "On"

Il suffit de changer l'incrustation en dégradé avec : de #478f45 à #5faf5d ! Le texte est avec la police Helvetica Rounded en bold, de 32pt de couleur #1a5419. L'ombre portée est très simple : #ffffff en mode incrustation à 50% d'opacité, une distance de 1px et une taille de 0px.

switch15.jpg


Version rouge "Off"

Il suffit de changer l'incrustation en dégradé avec : de #9a3535 à #c54646 ! Le texte est avec la police Helvetica Rounded en bold, de 32pt de couleur #530e0e. L'ombre portée est très simple : #ffffff en mode incrustation à 50% d'opacité, une distance de 1px et une taille de 0px.

Version neutre et bouton 3D

Nous pouvons donner un meilleur effet à notre bouton, pour cela commencer par tracer un trait noir vertical de 1px de large au centre du bouton, et 2 lignes blanches de la même taille à la gauche et à la droite.

switch17.jpg


Nous allons ajouter deux dégradés noirs de plein à transparent à 5px du centre, à gauche et à droite du rond. Sélectionner le rond, inverser la sélection [CTRL + SHIFT + i] et supprimer. Passer le calque en mode incrustation à 50% d'opacité (voir image).

switch-anim2.gif


Pour finir, fusionner le calque du trait et des deux dégradés. Passer le tout en mode incrustation à 30% d'opacité.

Une autre alternative au bouton

switch19.jpg


Créer un autre rond à l'intérieur du bouton, plus ou moins petit selon l'effet que vous voulez. Ensuite, il suffit d'ajouter le style suivant au calque :

switch20.jpg


switch21.jpg


switch22.jpg


Les emplacements des curseurs dans le dégradé n'a pas une grande importance, vous pouvez en ajouter plus ou moins un peu partout !

switch_final.jpg


( un petit merci ne fait pas de mal, que du bien ;) )

Cordialement SonGoku
 

SonGoku

Je suis Légendaire
V
Ancien staff
Mar 27, 2011
6,131
75
954
Alpha
Elles ont été animés avec photoscape ouais ce sont des petites .gif ;) et de rien !