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