Tutoriaux photoshop
page d'accueil   tutoriaux   annuaire   contact
 

Navigation

Tutoriaux par catégorie

Les plus vus...

Partenaires

Voir un tutoriel

Créer un bouton web 2


A intégrer sur vos sites
Vu 1594 fois



Dessinez un rectangle de la couleur de votre choix (cette couleur sera votre couleur de base) à l'aide de l'outil Rectangle arrondi. Ici, notre couleur de base porte le code #009cff.



Dupliquez la forme que vous venez de créer (clique droit sur le calque dans la fenêtre des calques > Dupliquer le calque...) et changez sa couleur en blanc.



Il nous faut maintenant pixelliser la forme dupliquée pour en supprimer une partie:
Dans la fenêtre des calques, faites un clique droit sur la forme que vous avez dupliquer puis choisissez "Pixelliser le calque" ("Rasterize layer" en anglais).

Votre fenêtre des calques devrait maintenant ressembler à ca:



Changez l'opacité du calque pour une opacité de 30%.


Sélectionnez la moitié inférieure (environ) de votre calque (toujours le même)...



Et supprimez la.




Nous allons maintenant appliquer 2 effets sur notre forme de base (la première forme qui a été créée et à laquelle nous n'avons pas encore touché) pour terminer notre bouton.

Veillez à ce que la couleur de premier plan soit le blanc:

Dans la fenêtre des calques, cliquez droit sur la première forme que vous avez créé puis sélectionnez "Options de fusion" ("Blending Options" en anglais).

Dans la fenêtre qui apparaît, choisissez l'option "Incrustation en dégradé" ("Gradient Overlay" en anglais).
- Changez l'opacité à 80%.
- Sélectionnez le deuxième dégradé dans la liste des dégradés (dégradé blanc vers transparent).
- Cochez la case "Inverser.
- Changez l'échelle à 70%.
- Déplacez le dégradé vers le haut à l'aide du curseur (placez votre curseur en dehors de la fenêtre de style, sur votre espace de travail, et remontez votre dégradé en maintenant le bouton gauche de votre souris enfoncé (jusqu'à ce que le dégradé ne dépasse plus de la moitié supérieure du bouton).

Voici à quoi devrait ressembler votre fenêtre:




Cochez maintenant l'option "Contour":
Réglez la taille du contour à 1px, l'opacité à 40% et prenez comme couleur la couleur de base de votre bouton (#009cff dans notre cas)






Vous pouvez maintenant placer votre texte avec l'outil texte (Verdana/Gras/14pt avec lissage "Net" dans notre cas) et lui appliquer un contour avec les même paramètres que pour le bouton.



Enfin, si vous le souhaitez, vous pouvez créer un effet de reflet à votre bouton. (Voir ce tutorial).




Fin :)





 0 Commentaire


  Soyez le premier à poster un commentaire !


Ajouter un commentaire




Devenir partenaire ?