Mon premier bouton plastique [:dawa]

Mon premier bouton plastique [:dawa] - Infographie 2D - Graphisme

Marsh Posté le 25-11-2002 à 21:37:16    

http://www.multimania.com/MRollerClub/Pingou.jpg
 
Dites moi ce qui va po please  :sweat:  
 
Merci  :hello: (Chui un ptit nouveau  :whistle: )


---------------
Gnnnnniiiiiiiiiiiiiiiiiii [:zebra33]
Reply

Marsh Posté le 25-11-2002 à 21:37:16   

Reply

Marsh Posté le 26-11-2002 à 00:01:37    

moi ca me plais bien :)
tu pourrais menvoyer le PSD? :)

Reply

Marsh Posté le 26-11-2002 à 00:39:10    

Il est très bien ton bouton... Pour l'améliorer il faudrait arrondir un peu le reflet du haut je pense.

Reply

Marsh Posté le 26-11-2002 à 08:53:49    

Oui pas mal... Moi je l'aurais fait ainsi :
 
http://www.pyksel.com/bouton.jpg
 
Donc travaille un peu les ombres, ajoute un peu de flou mais laisse nette le reflet du haut. Sinon bien...

Reply

Marsh Posté le 26-11-2002 à 10:58:46    

Pyksel a écrit a écrit :

Donc travaille un peu les ombres, ajoute un peu de flou mais laisse nette le reflet du haut. Sinon bien...




 
 
Euh, moi je suis plus de l'avis de Valm, faudrais  changer un peu le reflet du haut=)
euh, en fait, j'ai l'habitude de les faire en 3D, donc je suis peut etre pas bon conseiller=))  :lol:

Reply

Marsh Posté le 26-11-2002 à 14:04:13    

Pyksel a écrit a écrit :

Oui pas mal... Moi je l'aurais fait ainsi :
 
http://www.pyksel.com/bouton.jpg
 
Donc travaille un peu les ombres, ajoute un peu de flou mais laisse nette le reflet du haut. Sinon bien...




 
Nickel le tien !
Merci pour l'exemple :)
 
 
PS: Pour le PSD je mets un peu d'ordre et ya pas de problème :)


---------------
Gnnnnniiiiiiiiiiiiiiiiiii [:zebra33]
Reply

Marsh Posté le 26-11-2002 à 14:46:14    

http://www.multimania.com/MRollerClub/Pingou2.jpg
 
J'arrive pas à avoir le même résultat Pyksel  :cry:  
Un peu de mal sur l'effet du haut  :sweat:
 
EDIT: Et l'ombre carrément foirée :'(


Message édité par Pingouino le 26-11-2002 à 14:49:11

---------------
Gnnnnniiiiiiiiiiiiiiiiiii [:zebra33]
Reply

Marsh Posté le 26-11-2002 à 15:34:51    

Heu sur les tutorials ils parlent de dodge color pour les effets... Je crois que c'est "Densité Couleur -" (FR) mais ça fait rien  :sweat:  
 
Ca faisait ptêt qq chose sur la 5.0...
J'fais comment (c'est pour mon effet du haut) SVP  :sarcastic:


---------------
Gnnnnniiiiiiiiiiiiiiiiiii [:zebra33]
Reply

Marsh Posté le 26-11-2002 à 15:43:39    

ya des tutos qui apprenent a faire ca ?
 
http://shakalaka.gouns.free.fr/Greg/transparent.jpg
 
 :heink:


---------------
www.depot69.fr.st
Reply

Marsh Posté le 26-11-2002 à 15:47:57    

_-_-_-_GREG_-_-_-_ a écrit a écrit :

ya des tutos qui apprenent a faire ca ?
 
http://shakalaka.gouns.free.fr/Greg/transparent.jpg
 
 :heink:  




 
 [:ytrezax]  [:ytrezax]  [:ytrezax]  
 [:ytrezax]  [:ytrezax]  [:ytrezax]


---------------
Gnnnnniiiiiiiiiiiiiiiiiii [:zebra33]
Reply

Marsh Posté le 26-11-2002 à 15:47:57   

Reply

Marsh Posté le 26-11-2002 à 15:50:17    

@ GREG
le faute d'orthographe ça va aussi dans la provoc. ?
 :D

Reply

Marsh Posté le 26-11-2002 à 15:51:41    

wax09 a écrit a écrit :

@ GREG
le faute d'orthographe ça va aussi dans la provoc. ?
 :D  



[:totozzz]


---------------
www.depot69.fr.st
Reply

Marsh Posté le 26-11-2002 à 16:04:13    

Ben mettez  vos psd en down ici alors   :lol:

Reply

Marsh Posté le 26-11-2002 à 16:56:32    

Voici le premier:
 
http://www.multimania.com/MRollerC [...] astik1.psd
 
Vala  :whistle:


---------------
Gnnnnniiiiiiiiiiiiiiiiiii [:zebra33]
Reply

Marsh Posté le 26-11-2002 à 18:20:49    

Et hop un petit explicatif du comment faire un bouton plastique sans avoir à toucher au mode de fusion (mode produit, denisté couleur, etc....)
 
PS : desolé pour la taille de l'image, mais je pense que ce tuto aidera certains... (153 Ko) ;)
 
http://www.pyksel.com/tuto_bouton.gif

Reply

Marsh Posté le 26-11-2002 à 18:55:34    

Pyksel a écrit a écrit :

Et hop un petit explicatif du comment faire un bouton plastique sans avoir à toucher au mode de fusion (mode produit, denisté couleur, etc....)
 
PS : desolé pour la taille de l'image, mais je pense que ce tuto aidera certains... (153 Ko) ;)
 
http://www.pyksel.com/tuto_bouton.gif



moi je le fait pas comme ca [:neffy]


---------------
www.depot69.fr.st
Reply

Marsh Posté le 26-11-2002 à 19:02:26    

_-_-_-_GREG_-_-_-_ a écrit a écrit :

moi je le fait pas comme ca [:neffy]



you have forgotten me ...


---------------
Tu sais, faut pas avoir peur... Google est ton ami. :)
Reply

Marsh Posté le 26-11-2002 à 19:03:33    

scott a écrit a écrit :

you have forgotten me ...



non j ai eu un retour a l expediteur  :heink:


---------------
www.depot69.fr.st
Reply

Marsh Posté le 26-11-2002 à 19:04:59    

_-_-_-_GREG_-_-_-_ a écrit a écrit :

non j ai eu un retour a l expediteur  :heink:  



Citation :

Reysset Jean-Charles
12 Allée Louis Aragon
9127


 
 :??:


---------------
www.depot69.fr.st
Reply

Marsh Posté le 26-11-2002 à 19:20:29    

http://membres.lycos.fr/lecastor2001/Glass.jpg
 
Ou comme ça ?
 
Aucuns dégradés, aucuns filtres, juste avec deux styles de calques...


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
Reply

Marsh Posté le 26-11-2002 à 19:23:03    

Citation :

La lumière existe dans l'obscurité


 
 
 :lol:  :lol:  :lol:


---------------
www.depot69.fr.st
Reply

Marsh Posté le 26-11-2002 à 19:25:44    

_-_-_-_GREG_-_-_-_ a écrit a écrit :

Citation :

La lumière existe dans l'obscurité


 
 
 :lol:  :lol:  :lol:  




 
C'est pas drôle ! Normalement y'a quatres lignes, mais y'a que la première qui s'affiche, faut que je répare ça...


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
Reply

Marsh Posté le 26-11-2002 à 20:49:03    

Le Castor a écrit a écrit :

http://membres.lycos.fr/lecastor2001/Glass.jpg
 
Ou comme ça ?
 
Aucuns dégradés, aucuns filtres, juste avec deux styles de calques...




 
z aime bien cui la moi  :bounce:  [:nofret]
 
edit : tu nous explique un peu plus approfondi ? plizzzzzz


Message édité par metos le 26-11-2002 à 20:49:44

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

Marsh Posté le 26-11-2002 à 21:32:22    

MetoS a écrit a écrit :

 
 
z aime bien cui la moi  :bounce:  [:nofret]
 
edit : tu nous explique un peu plus approfondi ? plizzzzzz




 
Ben attendez 30 minutes, je fais un tutut là-dessus


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
Reply

Marsh Posté le 26-11-2002 à 21:36:26    

On peut essayer sur du texte...
 
http://www.pyksel.com/logoaqua.jpg

Reply

Marsh Posté le 26-11-2002 à 21:36:46    

Le Castor a écrit a écrit :

 
 
Ben attendez 30 minutes, je fais un tutut là-dessus




 
mici  [:mumu]  [:mumu]  [:mumu]  [:nofret]


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

Marsh Posté le 26-11-2002 à 21:52:59    

Pyksel a écrit a écrit :

On peut essayer sur du texte...
 
http://www.pyksel.com/logoaqua.jpg




 
 
 
 :ouch:  
 
tu fait ca comment?? meme principe que ton tuto ?
respect

Reply

Marsh Posté le 26-11-2002 à 22:10:19    

Voilà comment faire un bouton de ce style, uniquement avec des styles de calque :
 
http://membres.lycos.fr/lecastor2001/Glass.jpg
 
1) Créer un nouveau document. Ici, je vais prendre un truc de taille 256*256. Note : je vous conseille pour ce tutorial de suivre ces valeurs, sinon ça fout le bordel, ouinnnn.... Créer un nouveau calque (ctrl + shift + n). Y dessiner un cercle parfait dedans (taille 192*192), couleur gris neutre RGB(127, 127, 127) :
 
http://membres.lycos.fr/lecastor2001/tutut/01.jpg
 
3) Maintenant, le style de calque, youpi ! Pour ceux qu'on jamais fait ça : dans la p'tite fenetre calque, cliquer sur le petit "f", et sélectionner "blending options" :
 
http://membres.lycos.fr/lecastor2001/tutut/02.gif
 
4) Dans "advanced blending", mettre à 90%, pour un peu de transparence (seule le cercle en lui-même sera transparent, les effets d'ombre et d'estampage (emboss) resteront opaques, c'est exactement ce que l'on veut :
 
http://membres.lycos.fr/lecastor2001/tutut/03.gif
 
5) Un peu de couleur, boudiou ! -> Color overlay, mettre en mode overlay, j'ai choisi RGB(37, 150, 187), opacité 100% :
 
http://membres.lycos.fr/lecastor2001/tutut/04.gif
 
6) Le plus interessant maintenant : bevel & emboss. Mettre les valeurs ci-dessous, avec les bons modes de fusions. Attention ! Le "gloss contour" change aussi, ça n'est plus une droite, mais une courbe :
 
http://membres.lycos.fr/lecastor2001/tutut/05.gif
 
Gloss contour :
 
http://membres.lycos.fr/lecastor2001/tutut/06.gif
 
7) Juste en dessous du choix "bevel & emboss", y'a un truc contour. Là, on y met une espèce de courbe chelou, avec 35% pour le range :
 
http://membres.lycos.fr/lecastor2001/tutut/07.gif
http://membres.lycos.fr/lecastor2001/tutut/08.gif
 
Courbe de contour :
http://membres.lycos.fr/lecastor2001/tutut/09.gif


Message édité par Le Castor le 26-11-2002 à 22:16:56

---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
Reply

Marsh Posté le 26-11-2002 à 22:16:34    

Le Castor a écrit a écrit :

Voilà comment faire un bouton de ce style, uniquement avec des styles de calque :
 
http://membres.lycos.fr/lecastor2001/Glass.jpg
 
1) Créer un nouveau document. Ici, je vais prendre un truc de taille 256*256. Note : je vous conseille pour ce tutorial de suivre ces valeurs, sinon ça fout le bordel, ouinnnn.... Créer un nouveau calque (ctrl + shift + n). Y dessiner un cercle parfait dedans (taille 192*192), couleur gris neutre RGB(127, 127, 127) :
 
http://membres.lycos.fr/lecastor2001/tutut/01.jpg
 
 
merci j essay demain et je montre le resultat !
 
 
 
Merci castor j essay demain    :jap:  :jap:  :jap:  :jap:  
 
3) Maintenant, le style de calque, youpi ! Pour ceux qu'on jamais fait ça : dans la p'tite fenetre calque, cliquer sur le petit "f", et sélectionner "blending options" :
 
http://membres.lycos.fr/lecastor2001/tutut/02.gif
 
4) Dans "advanced blending", mettre à 90%, pour un peu de transparence (seule le cercle en lui-même sera transparent, les effets d'ombre et d'estampage (emboss) resteront opaques, c'est exactement ce que l'on veut :
 
http://membres.lycos.fr/lecastor2001/tutut/03.gif
 
5) Un peu de couleur, boudiou ! -> Color overlay, mettre en mode overlay, j'ai choisi RGB(37, 150, 187), opacité 100% :
 
http://membres.lycos.fr/lecastor2001/tutut/04.gif
 
6) Le plus interessant maintenant : bevel & emboss. Mettre les valeurs ci-dessous, avec les bons modes de fusions. Attention ! Le "gloss contour" change aussi, ça n'est plus une droite, mais une courbe :
 
http://membres.lycos.fr/lecastor2001/tutut/05.gif
 
Gloss contour :
 
http://membres.lycos.fr/lecastor2001/tutut/06.gif
 
7) Juste en dessous du choix "bevel & emboss", y'a un truc contour. Là, on y met une espèce de courbe chelou, avec 35% pour le range :
 
http://membres.lycos.fr/lecastor2001/tutut/07.gif
http://membres.lycos.fr/lecastor2001/tutut/08.gif
 
Courbe de contour :
http://membres.lycos.fr/lecastor2001/tutut/09.gif
 
8) Ensuite, un p'tit dégradé pour que le haut du cercle soit un peu plus sombre. Donc là, un dégradé du blanc RGB(255,255,255) vers un gris clair RGB(170,170,170). Notez que le blanc se trouve à 40% du bidule :
 
http://membres.lycos.fr/lecastor2001/tutut/10.gif
 
Dégradé en détail :
 
http://membres.lycos.fr/lecastor2001/tutut/11.gif
 
9) Maintenant, on voit que notre cercle est un peu plat, alors un ch'tit "inner glow" de couleur noire pour simuler du relief :
 
http://membres.lycos.fr/lecastor2001/tutut/12.gif
 
10) Voilà, le cercle de base est terminé ! On passe maintenant au deuxième, qui ne va être que le machin blanc vers le haut du cercle.
 
11) Donc sélectionner le cercle précédent (ctrl + clique sur le nom du calque, dans l'onglet layers). Puis Select > Modify > Expand > 10 pixels. Remplissez d'une couleur quelconque. Puis, style de calque !
 
http://membres.lycos.fr/lecastor2001/tutut/14.jpg
 
12) Dans "blending options", mettre 0% dans Fill opacity :
 
http://membres.lycos.fr/lecastor2001/tutut/13.gif
 
13) Bevel & emboss, mettez tout ce qui suit. La courbe "gloss contour" reste inchangée :
 
http://membres.lycos.fr/lecastor2001/tutut/15.gif
 
14) Chochez simplement la case "Contour",juste en dessous de bevel & emboss, ne changez rien dedans, et ça devrait donner un meilleur effet :
 
http://membres.lycos.fr/lecastor2001/tutut/07.gif
 
15) Déplacez ce calque maintenant de quelques pixels vers le bas (15 environs je crois), pour que le truc blance se positionne de manière correcte sur l'autre cercle
 
16) Rajoutez ombre, texte, et effets additionnels, et on obtient normalement le truc fini et nickel. Et comme c'est des styles de calques, si on s'est trompé quelque part, pas de panique, on peut tout modifier dynamiquement.




Message édité par The Dml le 27-11-2002 à 17:00:59
Reply

Marsh Posté le 26-11-2002 à 22:17:14    

8) Ensuite, un p'tit dégradé pour que le haut du cercle soit un peu plus sombre. Donc là, un dégradé du blanc RGB(255,255,255) vers un gris clair RGB(170,170,170). Notez que le blanc se trouve à 40% du bidule :
 
http://membres.lycos.fr/lecastor2001/tutut/10.gif
 
Dégradé en détail :
 
http://membres.lycos.fr/lecastor2001/tutut/11.gif
 
9) Maintenant, on voit que notre cercle est un peu plat, alors un ch'tit "inner glow" de couleur noire pour simuler du relief :
 
http://membres.lycos.fr/lecastor2001/tutut/12.gif
 
10) Voilà, le cercle de base est terminé ! On passe maintenant au deuxième, qui ne va être que le machin blanc vers le haut du cercle. Créer un deuxième calque (ctrl + shift + n).
 
11) Donc sélectionner le cercle précédent (ctrl + clique sur le nom du calque, dans l'onglet layers). Puis Select > Modify > Expand > 10 pixels. Remplissez d'une couleur quelconque. Puis, style de calque !
 
http://membres.lycos.fr/lecastor2001/tutut/14.jpg
 
12) Dans "blending options", mettre 0% dans Fill opacity :
 
http://membres.lycos.fr/lecastor2001/tutut/13.gif
 
13) Bevel & emboss, mettez tout ce qui suit. La courbe "gloss contour" reste inchangée :
 
http://membres.lycos.fr/lecastor2001/tutut/15.gif
 
14) Chochez simplement la case "Contour",juste en dessous de bevel & emboss, ne changez rien dedans, et ça devrait donner un meilleur effet :
 
http://membres.lycos.fr/lecastor2001/tutut/07.gif
 
15) Déplacez ce calque maintenant de quelques pixels vers le bas (15 environs je crois), pour que le truc blance se positionne de manière correcte sur l'autre cercle
 
16) Rajoutez ombre, texte, et effets additionnels, et on obtient normalement le truc fini et nickel. Et comme c'est des styles de calques, si on s'est trompé quelque part, pas de panique, on peut tout modifier dynamiquement.


Message édité par Le Castor le 27-11-2002 à 07:03:51

---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
Reply

Marsh Posté le 27-11-2002 à 00:05:18    

The Dml a écrit a écrit :

 
 
 
 
 :ouch:  
 
tu fait ca comment?? meme principe que ton tuto ?
respect




 
Non, c'est pas du tout la même technique... La c'est un peu plus complexe, mais ce serait trop long a expliquer ici... Enfin, photoshop c'est de l'imagination pour arriver à ses fins...

Reply

Marsh Posté le 27-11-2002 à 00:06:46    

J'ai même fait une faute de frappe à Pyksel lol  :non: pas bien ;)

Reply

Marsh Posté le 27-11-2002 à 02:14:17    

t'as pas oublié de dire qu il faut un 2e calque apres avoir expend la selection de 10 pix ?

Reply

Marsh Posté le 27-11-2002 à 07:02:55    

MetoS a écrit a écrit :

t'as pas oublié de dire qu il faut un 2e calque apres avoir expend la selection de 10 pix ?




 
oups... je corrige ça...


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
Reply

Marsh Posté le 27-11-2002 à 07:29:22    

Tiens, avec du texte :
 
http://lecastor2001.multimania.com/Untitled-1.jpg


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
Reply

Marsh Posté le 27-11-2002 à 08:04:50    

Le Castor a écrit a écrit :

Tiens, avec du texte :
 
http://lecastor2001.multimania.com/Untitled-1.jpg




 
C'est pas mal avec le style de calque, mais je trouve que ca fait trop "carré" et pas assez naturel... Ca remplace pas la technique manuelle mais bon c'est pas mal d'automatiser non plus surtout quand c'est pressé...

Reply

Marsh Posté le 27-11-2002 à 08:36:48    

en plus je les préfère goût orange...
 
 
 
...hein ?
non rien.

Reply

Marsh Posté le 27-11-2002 à 08:38:21    

goût orange en pixel-art c'est super dûr. [:toma_]

Reply

Marsh Posté le 27-11-2002 à 09:55:57    

Pyksel a écrit a écrit :

 
 
C'est pas mal avec le style de calque, mais je trouve que ca fait trop "carré" et pas assez naturel... Ca remplace pas la technique manuelle mais bon c'est pas mal d'automatiser non plus surtout quand c'est pressé...




 
C'est clair que c'est dur de faire certain truc avec les styles de calques, ça remplace pas toujours tout... Mais si tu t'es planté dans le texte par exemple, tu peut toujours le modifier à la volée, le style va s'adapter en conséquence.


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
Reply

Marsh Posté le 27-11-2002 à 16:40:36    

le castor > tu peux poster ton PSD pke j ai tout fais mais ca donne pas la meme chose ... ?
pourtant j ai tout suivi.  :sweat:


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

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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