JN Forum

Posté le: 27 Mar 2007 22:51:58

Maj = Shift
tutorial expliqué sous Photoshop 7

bonjour,
voici un tutorial très détaillé qui va vous permettre de réaliser un bouton ayant un halo lumineux. Nous ferons le bouton puis un reflet, une ligne de séparation, une forme et un texte. C'est partit !

bouton_lumineux.psd

le bouton
- créer un nouveau document de 300x100 pixels en 72dpi
- remplissez le fond de noir (touche D puis Alt+Suppr)
- créez un nouveau calque (Ctrl+Maj+N) et nommez-le bouton
- prenez du blanc (touche D puis touche X)
- prenez l'outil Rectangle arrondi (U)

- mettez un rayon de 30px dans la barre d'Options (Fenêtre/Options)
- tracez une forme de 200x40 pixels (

- cliquez sur Calque/Lueur externe... et mettez ces paramètres:

- ensuite, dans la même fenêtre, cliquez sur Lueur interne mettez:

- puis cliquez sur Incrustation couleur avec:

- cliquez sur Incrustion en dégradé et mettez:

pour le dégradé:

- enfin cliquez sur Contour:

- validez

- faites Ctrl+I (pour inverser les couleur > négatif)

le reflet
- créez un nouveau calque (Ctrl+Maj+N) et nommez-le reflet
- dans la Palette des calques (Fenêtre/Calques), maintenez Ctrl et faites un clic sur la vignette du calque bouton
(cela a pour effet de sélectionner tout ce que contient le calque bouton)

- prenez l'outil Dégradé (P)

- dans la barre d'Options (Fenêtres/Options) prenez un dégradé noir vers blanc et linéaire

- faites un dégradé du haut en bas de la sélection (en maintenant Laj pour qu'il soit bien droit)
- faites Ctrl+D pour désélectionner

- sur la Palette des calques, passez le calque Reflet en Mode Superposition et l'Opacité à 60%

- prenez l'outil Ellipse de sélection (M)
- tracez cette sélection:

- appuyez sur la touche Suppr de votre clavier pour supprimer ce que contient la sélection
- faites Ctrl+D pour tout désélectionner

voilà pour le reflet.

la ligne de séparation
- créez un nouveau calque (Ctrl+Maj+N) nommé séparation
- prenez l'outil Crayon (clic droit sur l'outil Pinceau)

- prenez une brosse de taille 1px et du bleu (#00B0FF) en couleur de 1er plan

- tracez un ligne verticale bleu sur votre bouton
(maintenez Maj pour faire une ligne bien verticale)

- faites la même chose avec une ligne noire (#000000) juste à droite

- sur la Palette des calques, passez le calque séparation en Mode Lumière tamisée

voilà pour la séparation de la forme (ou l'icône) et du texte.

la forme
- créez un calque nommé forme
- prenez l'outil Forme personnalisée, le lasso polygonale ou importez une autre forme

- tracez votre forme (noire: #000000) ou mettez votre image/icône

- cliquez sur Calque/Style de calque/Lueur externe... et mettez ces paramètres:

- validez
- passez le calque en Mode Superposition

voilà pour la forme.

le texte
- prenez du blanc en couleur de 1er plan (touche D puis X sur votre clavier)
- prenez l'outil Texte (T)

et cliquez sur l'image pour entrez votre texte

- cliquez sur Calque/Style de calque/Lueur externe... et mettez ces paramètres:

- validez

- maintenant, dans la Palette des calques, faites glisser tous les calques sous le calque reflet

et voilà, c'est enfin fini !!!!!!

bouton_lumineux.psd

- Tutorial by Jack NUMBER -
- Tutorial de base by Graphisme Delphine -

salut belle job sa fait 10 fois je recommence se tutoriel pis il ne marche pas

où es-tu bloqué ?
qu'est-ce qui ne marche pas ?

bonjour mon amie j'essaie de faire ton tuto depuis un bout maintenant pis sa marche toujours pas quand j'arrive a un place qui demande de faire ctrl+I il ne veut pas inverser les couleurs tu pourrait m'aider svp merci continu ton beau travail

desoler si j'ai repondu en retarde

peut-être que le raccourcis ne marche pas, essai:
Image/Réglages/Négatif

sinon as-tu bien créé un nouveau calque pour y mettre la forme blanche (tout au début)

oui mon ami sa ete fait meme que j'ai essayer image/reglage/inverser et sa pas marcher non plus parce que je peut pas cliquer sur inverser il est pas en noir il est comme grise Sad

oké,
es-tu en mode RVB ?
Image/Mode/Couleur RVB

oui je suis en mode rvb

mince alor !!

es-tu en 8 bits ?
Image/Mode/8bits/couche

sinon essai de le faire la forme directement en noir, pour mieux voir, masque le fond noir (calque d'en dessous).

tu veut dire le calque bouton de le faire en noir s'est sa ?

oui, enfin la forme qui est sur le calque bouton, de la faire en noire

merci mon ami tes super en passant je suis quebecois

ha tien ??
je ne pensai pas avoir des lecteurs quebecois Malicieux

merci beaucoup !

n'hésite pas si tu a d'autres questions Wink

et oui j'ai d'autre question Laughing

ok maintenant que ton bouton est fait je veux en faire au moins un dizaine s,est pour ma prochaine page web en flash
sa va prendre du temps je suis qu'un debutant Crying or Very sad

est-ce possible d'avoir ton bouton qui flash comme un effet de miroir avec le soleil tu comprend se que je veut dire la moi il est 7 du mat je doit aller travailler bonne journee mon ami a+