Créer un bouton dans le style de Windows Media Player

Ce tutoriel aide, grace à un peu de dessin vectoriel, à créer un bouton dans un genre d'imitation de verre.

Résultat final

Lien du tutorial concernant la création de bouton : Un bouton intéractif

- Bon, la première chose qu'il faut faire, c'est créer un document 100*100px.

- Pour l'étape suivante il nous faudra créer un cercle parfait de couleur vive (en maintenant shift enfoncé), puis le dupliquer 3 fois (à l'aide de CTRL+J), ce qui nous fait 4 cercles en tout.

Etape 1: Bouton de base.

- Passons directement au deuxième calque. Changez la couleur (mettez du blanc). Applatissez ensuite l'image.



- Prenez l'outil gomme avec un tampon de 130px, et effacez le calque à moitié.

- Puis faites une modification d'échelle de 96% Edit => Transformer => Echelle (j'ai une version anglaise alors peut être que ce n'est pas tout à fait le chemin dans la version française)

- Créez un dégradé (du blanc vers la couleur du cercle, ici du bleu), blanc vers le haut.


Etape 2: Bouton en RollOver.

- Attaquons nous maintenant au 3ème cercle.

- Attribuez lui une opacité de couleur de 0% (Fill en anglais je connais pas le mot français désolé ^^)

- Puis attribuez lui les caractéristiques suivantes:


- Maintenant créez un cercle de couleur Bleu turquoise et applatissez l'image comme cela.


- Attribuez un flou gaussien de 20px, puis à l'aide de notre outil de sélection magique ^^, nous allons sélectionner l'extérieur des cercles précédents afin de supprimer le flou qui dépasse de notre bouton.



Etape 3: Bouton enfoncé.

- Prenez votre dernier cercle et attribuez les caractéristiques suivantes.


Etape 4: Pour finir...

- Enregistrez sous les trois étapes du bouton en PNG pour garder la transparence des ombres et tout le tralala...^^.

- Vous devez alors avoir cela, (le triangle en moins)


Par Aknot , Le 26 Avril 2007 à 14h51
Ce tutoriel est la propriété d'Aidoweb et ne peut en aucun cas être copié.

Retour à Photoshop

Commentaires sur cet article

C'est la qualité ou le résultat est aliasé et pas net du tout ? (ou mon affichage merdique ? :boulai: )

Non c'est juste qu'un bouton prend rarement la moitier e l'écran, donc j'ai pa fait un calque de 1024 de coté ça ser a rien ^^.