32
Créer un bouton Crystal avec incrustations
Comment créer un bouton Crystal avec un petit effet d’incrustation ? : une méthode simple mais terriblement efficace !
ETAPE 1
Je crée un nouveau document (fichier > nouveau document) je choisis une couleur d’arrière plan gris-claire, puis je ne perds pas de temps avec l’outil rectangle arrondi (U) (10 pixels) je crée la forme de mon futur bouton en noir au milieu de mon image.
ETAPE 2
Je vais maintenant ajouter un contour à mon rectangle, pour cela je vais dans le menu édition > style de calques > contour. Je sélectionne un contour de 4 pixels sous forme de dégradé. Voici la configuration exacte.
Pour plus de facilité, le fichier PSD utilisé dans ce tutorial est disponible au téléchargement (voir en haut de cette page), vous pourrez y retrouver tous les styles de calques nécessaires à la réalisation de ce tutorial.
ETAPE 3
Je vais ajouter toujours à ce même calque, une ombre interne, une lueur interne ainsi qu’une incrustation de couleur.
ETAPE 4
Une étape difficile !
Dans l’image exemple ci dessous vous avez 7 petites étapes :
- je récupère la sélection de mon rectangle en faisant CTRL + Clic sur mon calque rectangle (dans la fenêtre des calques)
- dans le menu sélection je clique sur modifier puis sur contracter, j’entre la valeur de 4 pixels
- je clique sur l’outil dégradé ou j’appuie sur la touche (G), j’appuie sur (D) puis sur (X) et enfin j’applique un dégradé du haut vers le bas
- résultat du dégradé
- j’appuie sur la touche (Alt) (que je garde enfoncée) puis je selectionne la moitié de ma sélection (milieu du rectangle)
- quand je lache, je remarque que cette manipulation à coupé ma sélection en deux
- je clique sur sélection puis sur inverser et j’appuie sur la touche (Suppr)
ETAPE 5
Je crée un nouveau calque et je récupère la sélection de mon rectangle. Je modifie ma sélection en la contractant de 1 pixel (voir les étapes précédentes pour les détails). Je crée un dégradé du bas vers le haut (en m’arrêtant à la moitié de mon rectangle).
Je modifie l’opacité de mon calque à 50%.
ETAPE 6
J’ajoute mon texte avec une petite ombre portée de distance 0 taille 5 opacité 50%.
ETAPE 7
Pour une variante je change simplement la couleur de mon rectangle !
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 29 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
-
20 mars 2007 20:00, par Wonka
A partir de quelle étape voit tu que ta composition ne suit plus ? J’ai peut être mal expliqué certaines étapes !
Répondre
-
-
23 mars 2007 08:42
étape 4 je n’ai pas le même rendu je pense qu’il y a un problème dans la sélection ou un truc du genre...
Répondre -
25 mars 2007 21:40
oui effectivement c’est beaucoup mieux je comprend mainteant le pourquoi du comment. merci beaucoup
Répondre-
26 mars 2007 12:19, par Wonka
Est bien voila qui est parfait
Répondre
Bonne chance pour ta composition graphique !
-
-
-
22 avril 2007 17:58, par Swiss-Power
Super tuto ! Bon moi je baisserais encore un tout petit peu l’opacité du reflet blanc mais sa c’est mon avis ^^
Répondre -
26 mai 2007 19:23, par phymo
Coucou , tout d’abord merci pour ce petit tuto super sympa. Je suis totalement débutant en photoshop et j’ai la version CS. Deux questions :
La premiere : Pour faire mon bouton j’ai pris un document de 200 * 100 pixels , donc j’ai mon joli bouton au milieu du gris. hors comment pourrai je recuperer direcement le bouton sans le fond gris qui me gene pour le mettre sur mon site ?? Merci
Deuxieme question, je voudrai faire des boutons rectangulaires exacement similaires à ceux du haut de page (transparents voile blanc) : http://www.amrodriguezassociates.com/en/ Si quelqu’un peut m’aider ????
Merci d’avance Phymo
Répondre-
2 juillet 2007 16:39, par Bruno
Salut, pour faire ce type de bouton j’applique simplement une transparence css. Il n’y a aucune image et ca tient en 3 lignes (pour gérer les différents navigateur) :
filter:alpha(opacity=90) ; -moz-opacity:0.90 ;
khtml-opacity : 0.90 ;Plus de détail en regardant la feuille de style complête
Voir en ligne : Css du site
Répondre
-
-
8 juin 2007 11:21, par akeon
Excelent travail ! mais est-ce que ca sera possible de faire le même bouton mais enfoncé ? et curseur flotant desus ? Merci ^^
Répondre -
-
30 août 2007 14:49, par Wonka
Photoshop bien sur
Répondre disponible sur le site officiel d’Adobe (en version d’évaluation).
-
-
1er septembre 2007 19:30, par MoussPSP
Je n’y arrive jamais à l’étape 4, cela doit être parceque j’ai photoshop CS 3...ou tout simplement que je suis vraiment pas doué arf Si jamais quelqu’un arrive à faire le bouton bleu en 300 x 100 pixels merci de me l’envoyer à mousspsp@yahoo.fr ! Merci d’avance
Répondre-
6 octobre 2007 22:03, par mawii
Je voudrais sa voir comment faire pour rajouter un lien sur le bouton... (je suis sur que personne n’a compris ...) Comment doi-je faire pour que quand on clique sur le bouton on arive sur une autre page ?
Répondre-
7 octobre 2007 15:01, par Wonka
Déjà il faut travailler dans un fichier HTML, tu crées un document texte et tu le renomme par exemple mapage.html.
Ensuite tu clic droit sur ce fichier et tu fais ouvrir avec > éditeur de texte (bloc note).
La tu tombes sur le code source de ta page.
Pour afficher l’image
.Et pour l’image plus un lien
C’est aussi simple que cela
Répondre
Bonne chance !
-
-
-
30 mai 2008 19:45
Merci pour ce tutoriel. Les effets démontrés dans celui-ci peuvent aidés pour faire toutes autres créations et boutons. C’est génial cet aide que vous offrez à tous les créateurs et les apprenties.
Répondre -
9 juillet 2008 15:11, par maj
Coucou, D’abord, merci pour ce tuto et pour tous les efforts fournis pour nous répondre ! A ce propos, je bloque à l’étape 4 : quand je veux appliquer le dégradé, un message d’erreur s’affiche disant : « Impossible d’utiliser l’outil dégradé car le contenu du calque n’est pas directement modifiable » ? aurais-je fais une mauvaise manip’ ou ... ?
Merci d’avance pour votre aide
Répondre-
10 juillet 2008 17:43, par Wonka
Le dégradé doit s’appliquer sur le masque de fusion, on est d’accord hein
Répondre et il ne faut pas de selection sur le document et pas avoir selectionner plusieurs calques.
-
-
8 juillet 2009 15:29, par Thomas
Salut D’abord merci pour tes tutoriels. Ça dépanne bien. J’ai veux créer des boutons. J’ai tout bien suivi à la lettre MAIS... j’ai un problème avec le dégradé, en effet au moment de l’appliquer j’ai un message d’erreur : Impossible d’utiliser l’outil dégradé car le contenu du calque n’est pas directement modifiable Qu’est-ce que je dois faire ? J’ai tout essayer mais un truc doit m’échapper. Je te remercie d’avance pour ta réponse Bonne journée Thomas
Répondre-
8 juillet 2009 19:01, par Wonka
Je pense que tu dois dabord créer un nouveau calque avant d’utiliser l’outil dégradé ! En sachant qu’on ne peut utiliser l’outil dégradé sur une forme vectorielle comme un rectangle arrondie (par exemple).
Répondre
-
-
17 février 2010 11:32, par FanFanLaTuFlippe
Un grand merci de partager ton expérience et tes tutos avec nous
Super !!
Répondre -
19 mars 2010 10:03, par Naast
Très bon tuto, le rendu final est magnifique. Par contre, l’étape 5 ne correspond pas avec l’image, tu n’as pas expliqué comment supprimer la partie supérieure du reflet. Aussi, pour le dégragé à l’étape 4, si je ne me trompe pas, tu utilises un dégradé de blanc (opacité 100%) vers blanc (opacité 0%) non ? Ce n’est pas précisé dans le tuto ^^ Une dernière chose, pourrais-tu un jour faire un tuto pour faire un bouton interactif (bouton inactif, rollover, bouton enfoncé) ? Je pense que ce tuto intéresserait de nombreuses personnes (dont moi :D)
Répondre
Je vais refaire l’ètape 4 
