Vista est arrivé avec son nouveau style visuel intéressant et agréable. 
Voici un tuto pour réaliser des boutons web d'un style Vista 
Créer une nouvelle image de 150 * 50.
On va zoomer en 200% pour être plus précis.
Mettre des repères horizontaux à 10px et 40px, et verticaux à 10px et 140px.
Sélectionner le rectangle central avec l'outil de sélection carrée, et faire clic droit / sélection / arrondir la sélection / 25%
Créer un nouveau calque "Bordure".
Clic droit / sélection / bordure / 1px.
remplir la sélection de blanc, et mettre l'opacité du calque "Bordure" à 50%
Ajouter un repère horizontal à 20px et un autre à 25px.
Recommencer l'étape de sélection.
(Sélectionner le rectangle central avec l'outil de sélection carrée, et faire clic droit / sélection / arrondir la sélection / 25%)
Passer l'outil de sélection à Intersection.
Selectionner la partie haute (du repère 10 au repère 20) de la sélection actuelle.
Créer un nouveau calque "Top", et remplir la sélection de blanc.
Repasser en mode de sélection normale.
Dans l'outil dégradé, sélectionnez "PP vers Transparent".
Sélectionez le rectangle compris entre les 2 repères horizontaux 20px et 25px, et verticaux 10px et 140px.
Prenez un dégradé linéaire, et faites votre dégradé en maintenant Ctrl appuyé, depuis le guide 20px jusqu'au guide 25px, de manière à avoir le blanc en haut et le transparent en bas.
Passez la transparence du calque "Top" à 25%.
Prenez en première couleur du Noir, et en seconde un bleu foncé (le 0b0b68 convient bien.)
Sélectionez l'outil dégradé, radial, "PP vers AP (RVB)".
Sur le Calque "Arrière Plan", faites le dégradé en partant du point (75,40) jusqu'au point (75, -20)
On a alors ceci :
Recommencer l'étape de sélection.
(Sélectionner le rectangle central avec l'outil de sélection carrée, et faire clic droit / sélection / arrondir la sélection / 25%)
Faire Sélection / Inverser la sélection (ou Ctrl+i) et Ctrl+k pour la retirer.
Rajoutez un calque "BackGround" en dernier calque, noir pour voir correctement l'effet.
Pour le texte, le mieux que j'ai trouvé est la police "Angelina", taille 30px avec Lissage, en blanc.
Mettre le calque de texte sous "Bordure" et "Top", et le centrer manuellement.
Cisailler l'image en suivant les repères horizontaux 10px et 40px, verticaux 10px et 140px.
On peut retirer le calque "Background" pour utiliser cette image sur une page non-noire, mais c'est toujours préférable sur une page noire.
Une autre couleur pour le dégradé convenant aussi (et utilisable pour un changement de couleur quand la souris est dessus) est le violet "51006b".
Ce tuto permet de réaliser de belles interfaces web, à la fois soignées et simples.
Voir une de mes réalisations, avec ce style pour les boutons et les conteneurs :
Message édité par Fagoon le 25-06-2009 à 13:18:03
