Poster sur l'ancien forum par Mehack2
Grâce à l’outil rectangle, aux dégradés de couleurs et aux masques de fusion, vous pouvez créer tous types de boutons pour votre site web à l’aide de Adobe Photoshop.
Ce tutorial va vous expliquer comment réaliser, pas à pas, un bouton web 2.0.
1- Créez un nouveau document de 150 x 50 pixels.
2- A l’aide l’outil rectangle arrondi, dessinez votre bouton à l’intérieur de votre espace de travail. Vous pouvez choisir la couleur de votre choix.
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
3- Une fois votre forme crée, dupliquez le calque (clique droit sur le calque > dupliquer) et changez la couleur du nouvel objet en blanc (double clique sur le calque).
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
Vous disposez à présent de deux calques superposés, l’un contenant un objet de la couleur que vous avez choisi, et l’autre de couleur blanche.
4- Nous allons maintenant transformer notre forme blanche en un dégradé d’opacité, afin de simuler un reflet de lumière.
Sélectionnez le calque de votre forme blanche (si ce n’est pas déjà fait) et créez un masque de fusion : Calque > Masque de fusion > Tout masquer.
Vous constatez que votre forme blanche a disparu, laissant apparaître le calque inférieur.
Le principe est simple (enfin presque), un masque de fusion laisse apparaître le calque sur lequel il a été ajouté si sa couleur est blanche, et le cache si sa couleur est noir. En partant de ce principe, si l’on fait un dégradé du noir vers le blanc sur notre masque, notre objet va être dégradé de l’opacité 100% à l’opacité 0%.
Choisissez l’outil dégradé (dans votre boite à outils) et spécifiez le noir et le blanc comme couleurs de votre dégradé
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
En maintenant la touche de votre souris enfoncée, faites un dégradé du bas vers le haut (si la couleur noir est à gauche de votre dégradé, comme sur notre illustration)
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
Le masque de fusion nous a permis de transformer notre forme blanche en dégradé d’opacité.
Pour donner une touche de réalisme (il suffit parfois d’une touche finale pour donner du réalisme), nous allons couper notre forme blanche en deux (l’éclairage est souvent coupé par une ombre).
Pour cela, nous allons sélectionner la moitié de notre objet, puis peindre à l’aide de l’outil \\\\\\\"pot de peinture\\\\\\\" notre moitié sélectionnée en noir (et donc en transparent).
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
5- Enfin, nous allons rajouter un contour de 1 pixel à notre bouton.
Nous allons utiliser les options de fusion pour le faire assez rapidement : clique droit sur le calque de l’objet en couleur > options de fusion. Il suffit alors de cocher \\\\\\\" contour\\\\\\\" et de choisir une taille de 1px et une couleur noir.
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
6- Il nous suffit maintenant de rajouter du texte, soit entre nos deux calques, soit au dessus (le rendu est différent selon les cas).
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
Et voici le résultat, à vous de jouer maintenant
Grâce à l’outil rectangle, aux dégradés de couleurs et aux masques de fusion, vous pouvez créer tous types de boutons pour votre site web à l’aide de Adobe Photoshop.
Ce tutorial va vous expliquer comment réaliser, pas à pas, un bouton web 2.0.
1- Créez un nouveau document de 150 x 50 pixels.
2- A l’aide l’outil rectangle arrondi, dessinez votre bouton à l’intérieur de votre espace de travail. Vous pouvez choisir la couleur de votre choix.
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
3- Une fois votre forme crée, dupliquez le calque (clique droit sur le calque > dupliquer) et changez la couleur du nouvel objet en blanc (double clique sur le calque).
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
Vous disposez à présent de deux calques superposés, l’un contenant un objet de la couleur que vous avez choisi, et l’autre de couleur blanche.
4- Nous allons maintenant transformer notre forme blanche en un dégradé d’opacité, afin de simuler un reflet de lumière.
Sélectionnez le calque de votre forme blanche (si ce n’est pas déjà fait) et créez un masque de fusion : Calque > Masque de fusion > Tout masquer.
Vous constatez que votre forme blanche a disparu, laissant apparaître le calque inférieur.
Le principe est simple (enfin presque), un masque de fusion laisse apparaître le calque sur lequel il a été ajouté si sa couleur est blanche, et le cache si sa couleur est noir. En partant de ce principe, si l’on fait un dégradé du noir vers le blanc sur notre masque, notre objet va être dégradé de l’opacité 100% à l’opacité 0%.
Choisissez l’outil dégradé (dans votre boite à outils) et spécifiez le noir et le blanc comme couleurs de votre dégradé
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
En maintenant la touche de votre souris enfoncée, faites un dégradé du bas vers le haut (si la couleur noir est à gauche de votre dégradé, comme sur notre illustration)
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
Le masque de fusion nous a permis de transformer notre forme blanche en dégradé d’opacité.
Pour donner une touche de réalisme (il suffit parfois d’une touche finale pour donner du réalisme), nous allons couper notre forme blanche en deux (l’éclairage est souvent coupé par une ombre).
Pour cela, nous allons sélectionner la moitié de notre objet, puis peindre à l’aide de l’outil \\\\\\\"pot de peinture\\\\\\\" notre moitié sélectionnée en noir (et donc en transparent).
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
5- Enfin, nous allons rajouter un contour de 1 pixel à notre bouton.
Nous allons utiliser les options de fusion pour le faire assez rapidement : clique droit sur le calque de l’objet en couleur > options de fusion. Il suffit alors de cocher \\\\\\\" contour\\\\\\\" et de choisir une taille de 1px et une couleur noir.
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
6- Il nous suffit maintenant de rajouter du texte, soit entre nos deux calques, soit au dessus (le rendu est différent selon les cas).
Ce lien n'est pas visible, veuillez vous connecter pour l'afficher. Je m'inscris!
Et voici le résultat, à vous de jouer maintenant