[Tutoriel] Faire des "glossy buttons" avec paint shop pro 8

Faire des "glossy buttons" avec paint shop pro 8 [Tutoriel] - Ressources - Graphisme

Marsh Posté le 19-02-2004 à 14:04:12    

http://membres.lycos.fr/tototoz/glossy/final.png
 
 
 
créer une nouvelle image avec un fond blanc ( ou transparent) ( taille que voulez mais sa doit rester assez petit pour des boutons quoi)
 
 
faire une selection de la taille et de la forme voulue (la j'ai choisi le rectangle au bords arrondis)
 
http://membres.lycos.fr/tototoz/glossy/selection.gif
 
remplir d'une couleur au choix ( avec l'outil http://membres.lycos.fr/tototoz/glossy/remplissage.gif ) (la c'est R:109 V:255 B:11)
Ne rien deselectioner
 
http://membres.lycos.fr/tototoz/glossy/selection_faite_plus_couleur.gif
 
Selectioner l'outil de selection au lasso http://membres.lycos.fr/tototoz/glossy/selection_au_lasso.gif
 
Maintenez la touche Ctrl enfoncée en permanence et efectuer la selection comme suit:
http://membres.lycos.fr/tototoz/glossy/selection_au_lasso_effectue.gif puis relacher Ctrl et vous obtenez ceci http://membres.lycos.fr/tototoz/glossy/selection_au_lasso_effectue_final.gif
 
Cliquez sur Selection,Modifier,Contracter
http://membres.lycos.fr/tototoz/glossy/selection_et_contracter.gif
Mettre ces paramètres ( la je met 3 mais sa peut varier suivant la taille de la selection au lasso)
http://membres.lycos.fr/tototoz/glossy/selection_et_contracter_parametre.gif
Et sa donne ceci: http://membres.lycos.fr/tototoz/glossy/selection_et_contracter_final.gif


Message édité par skiri le 19-02-2004 à 16:48:15
Reply

Marsh Posté le 19-02-2004 à 14:04:12   

Reply

Marsh Posté le 19-02-2004 à 14:13:59    

Maintenant on va appliquer une couleur en degradé (blanc) pour faire l'effet glossy
 
selectionner le blanc en couleurs puis cliquer sur l'icone degradé
http://membres.lycos.fr/tototoz/glossy/selection_degrade.gif
Changer l'angle du degradé (choisir 0°)
http://membres.lycos.fr/tototoz/glossy/selection_degrade_choix_angle1.gif
 
Remplir ( http://membres.lycos.fr/tototoz/glossy/remplissage.gif ) la selection avec le degradé blanc
http://membres.lycos.fr/tototoz/glossy/degrad%e91.gif
 
Cliquez sur Réglages,Flou,Flou gaussien
http://membres.lycos.fr/tototoz/glossy/selection_flou_gaussien.gif
Effectuer ce reglage (3 est une bonne valeur)
http://membres.lycos.fr/tototoz/glossy/reglage_flou_gaussien.gif
Et vous obtenez ceci ( penser a deselectionner avec Ctrl D )
http://membres.lycos.fr/tototoz/glossy/final_flou_gaussien1.gif
 
La partie superieur est fini, on passe à la partie inferieur du bouton !C'est grosso modo la même chose sauf une petite diference pour la selection au lasso et pour la couleur et l'angle du degradé
 
Avec la Selection au lasso faire une selection comme suis puis maintenez enfoncé la touche Ctrlet avec la Baguette magique cliquez sur la partie blanche dans la selection ( pour la suprimer) :
http://membres.lycos.fr/tototoz/glossy/selection_au_lasso_et_bagumagik_bas.gif
 
Cliquez sur Selection,Modifier,Contracter, laisser la valeur en 3.
http://membres.lycos.fr/tototoz/glossy/contracter_bas.gif


Message édité par skiri le 19-02-2004 à 15:22:08
Reply

Marsh Posté le 19-02-2004 à 14:14:03    

Choisir une couleur très legerement + foncé que le vert d'origine ( pas trop foncé sinon c pas bon)
J'ai choisi :
R:94
V:231
B:3
Et choisir un angle de degradé de 180° http://membres.lycos.fr/tototoz/glossy/selection_degrade_choix_angle2.gif
 
Remplir la selection avec le degradé et effectuer un flou gaussien (valeur 3) puis deselectioner ( Ctrl D )
http://membres.lycos.fr/tototoz/glossy/final_flou_gaussien2.gif
 
Et pour accentuer le volume du bouton on va lui faire une petite ombre portée !
 
Cliquer sur la zone blanche avec la Baguette magique, inverser la selection ( Selection,inverser
http://membres.lycos.fr/tototoz/glossy/selection_inversion.gif
 
Puis Cliquer sur Effets,effets 3D,ombre portée, les valeur peuvent varier selon les gouts de chacun
http://membres.lycos.fr/tototoz/glossy/ombre_parametre.gif
 
et voila le resultat final ! on peut faire varier les formes et les couleurs à sa guise.
http://membres.lycos.fr/tototoz/glossy/final.gif
 
 
http://membres.lycos.fr/tototoz/glossy/final.png


Message édité par skiri le 19-02-2004 à 16:05:30
Reply

Marsh Posté le 19-02-2004 à 19:22:06    

sympa :jap:

Reply

Marsh Posté le 19-02-2004 à 19:42:20    

t'as un curseur de souris qui tue :D


---------------
icite ca shoot : albphoto.fr   //   la ca bricole : albworkshop.fr  //  A VENDRE Canon ST-E2
Reply

Marsh Posté le 19-02-2004 à 19:45:05    

et si kelkun peut faire mieux kil le post sa m'interesse (mais seuleument sous psp ) :) g bidouiller sa a partir d'un tut pour photoshop mais je trouve que c pas encore aussi bien kavec photoshop
 
avec ps
http://www.guistuff.com/articles/photoshop_gloss/img11.gif


Message édité par skiri le 19-02-2004 à 19:45:33
Reply

Marsh Posté le 19-02-2004 à 20:04:11    

MetoS a écrit :

t'as un curseur de souris qui tue :D

et encore ta pas vu celui en forme de goute de metal bleue animé a mort, c presk ipnotizan :D
 
http://membres.lycos.fr/tototoz/buro%20(Small).jpg
 
en grand
http://membres.lycos.fr/tototoz/buro.jpg

Reply

Marsh Posté le 21-02-2004 à 10:31:25    

c'est un tuto de la mort ça ! Merci, c'est super bien expliqué.

Reply

Marsh Posté le 21-02-2004 à 14:03:59    

http://forum.hardware.fr/icones/icon14.gif


Message édité par EpoK le 21-02-2004 à 14:04:22
Reply

Marsh Posté le 21-02-2004 à 14:45:25    

Super beau mais moi je n'y arrive pas:
- Quand je choisi le dégradé, j'ai un dégradé blanc et noir au lieu de blanc et vert.
-Je n'arrive pas à trouver la fenetre Style & Texture
-Et enfin, le texte on le place comment s'il empiète sur le dégradé ?


Message édité par Mams le 21-02-2004 à 14:45:56

---------------
Je me lève de bonne humeur
Reply

Marsh Posté le 21-02-2004 à 14:45:25   

Reply

Marsh Posté le 21-02-2004 à 22:39:31    

Mams a écrit :

Super beau mais moi je n'y arrive pas:
- Quand je choisi le dégradé, j'ai un dégradé blanc et noir au lieu de blanc et vert.
-Je n'arrive pas à trouver la fenetre Style & Texture
-Et enfin, le texte on le place comment s'il empiète sur le dégradé ?

g pas la patience d'expliquer les fonctions de base  :whistle:  ( je fais un bien piètre professeur :D )
 
le texte c un peu le systeme D on va dire, g choisi les meme couleur que pour les bouton en inversant les contours et en changeant legerement les couleurs + un effet d'ombre portée

Reply

Marsh Posté le 21-02-2004 à 22:44:55    

super :jap:


---------------
** STRAVA || Photos flick r || Pooky's world trip **
Reply

Marsh Posté le 21-02-2004 à 22:46:26    

poster vos resultats, sa peut etre interessant :)

Reply

Marsh Posté le 21-02-2004 à 22:55:57    

http://membres.lycos.fr/tototoz/glossy/test.jpg

Reply

Marsh Posté le 22-02-2004 à 13:17:03    

http://perso.wanadoo.fr/epok0/home.png
 
avec toshop

Reply

Marsh Posté le 22-02-2004 à 14:05:44    

Franchement sympa le Tuto :)

Reply

Marsh Posté le 22-02-2004 à 17:17:57    

en fait avec PS le degradé blanc est mieux kavec PSP

Reply

Marsh Posté le 22-02-2004 à 17:52:53    

me rapelle plus comment on fait les ombre sous toshop  [:tinostar]edit: j'ai retrouver :o
 
http://opflashfr.free.fr/ofp/autres/images/boutontrans.gif
 ca veut tout dire :D


Message édité par coockie_jr le 22-02-2004 à 18:22:47

---------------
** STRAVA || Photos flick r || Pooky's world trip **
Reply

Marsh Posté le 22-02-2004 à 18:32:14    

Un peu répétitif comme bouton (;)) mais j'aime beaucup ta police... :D c'est quoi le nom ?
et sinon, tuto bien réalisé et de qualiaÿ ! :)

Reply

Marsh Posté le 22-02-2004 à 18:40:39    

guepe a écrit :

Un peu répétitif comme bouton (;)) mais j'aime beaucup ta police... :D c'est quoi le nom ?
et sinon, tuto bien réalisé et de qualiaÿ ! :)


 
je suis aussi intéréssé :)


---------------
** STRAVA || Photos flick r || Pooky's world trip **
Reply

Marsh Posté le 22-02-2004 à 23:11:25    

c repetitif mais c juste pour créer des boutons :D dans une interface sa fait vraiment sympa :)
sinon la police s'appelle "fatboy_slim" :D oui oui comme le groupe de zik :D  

Reply

Marsh Posté le 22-02-2004 à 23:22:48    

skiri a écrit :

et encore ta pas vu celui en forme de goute de metal bleue animé a mort, c presk ipnotizan :D
 
http://membres.lycos.fr/tototoz/buro%20(Small).jpg
 
en grand
http://membres.lycos.fr/tototoz/buro.jpg


 
on peux l'avoir ou ce curseur ?

Reply

Marsh Posté le 23-02-2004 à 01:58:41    

j'utilise cursorXP, mais ce curseur me bouffe 5 mo de ressources :D

Reply

Marsh Posté le 23-02-2004 à 19:51:21    

skiri a écrit :

j'utilise cursorXP, mais ce curseur me bouffe 5 mo de ressources :D  


et la police ?


---------------
** STRAVA || Photos flick r || Pooky's world trip **
Reply

Marsh Posté le 23-02-2004 à 20:12:50    

coockie_jr a écrit :


et la police ?


 
fatboy slim , il la dit :)
 
cé la meme police qu utilise le groupe de musique
 
ou il utilise la meme police que le groupen cé au choix :)

Reply

Marsh Posté le 24-02-2004 à 18:28:46    

joulpouille a écrit :


 
fatboy slim , il la dit :)
 
cé la meme police qu utilise le groupe de musique
 
ou il utilise la meme police que le groupen cé au choix :)


ah vi j'avais meme pas vus  [:tinostar]


---------------
** STRAVA || Photos flick r || Pooky's world trip **
Reply

Marsh Posté le 24-02-2004 à 19:05:03    

:D

Reply

Marsh Posté le 27-02-2004 à 11:21:07    

Skiri >>> Y dechire ton thème de bureau ,tu l'as trouver ou ?

Reply

Marsh Posté le 27-02-2004 à 13:30:55    

c le thème "metalcolor" pour windowblinds :)

Reply

Marsh Posté le 27-02-2004 à 14:09:19    

merci !   :)

Reply

Marsh Posté le 27-02-2004 à 21:50:37    

De nada

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed