HabbStray, habbo, pixel-art, tutoriels, graphisme


Bienvenue sur Habbstray.com ! Inscris-toi vite sur le forum !

!!! Clique ici !!!

Ici tu pourras faire ta commande de pixel-art, apprendre à faire du pixel-art et großers, et même gagner des crédits grâce à nos concours !



 
AccueilRechercherMembresGroupesS'enregistrerConnexion

Partagez | 
 

 [Paint] Ombrages et couleurs

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Z-shear
Fondateur
Fondateur
avatar

Messages : 4107
Age : 26
Pseudo Habbo : shear
Date d'inscription : 18/08/2009

MessageSujet: [Paint] Ombrages et couleurs   Jeu 9 Déc - 11:52

Voici mon tout premier tutoriel, j'espère ne pas vous décevoir et en aider beaucoup dans cette dure tâche qu'est de placer les ombres au bon endroit et bien utiliser les couleurs.

Pour un débutant, et on à déjà du vous le dire, pour bien placer ses ombres il faut une source de lumière.
Mais ce n'est pas suffisant, certes sur un cube c'est plutôt facile de les placer mais sur un objet tel qu'une voiture, une maison, même une personne...c'est une autre histoire.

Tout d'abord prenons un exemple assez simple, un...ordinateur !

Bon, ce n'est pas le dernier cri mais avec cette forme ça devrait en faire un bon exemple. La line vient tout juste d'être finie, vous vous empressez déjà de colorier (avec des couleurs prises à l'arrache)...Bonne initiative, vous avez déjà un aperçu des couleurs que vous allez utiliser.

Donnons une touche de réalisme, commençons par prendre des couleurs plus réalistes, je ne vous y oblige pas, mais par soucis d'esthétisme on va éviter d'utiliser des couleurs de base comme le bleu flashy pour l'écran. évitez à tout prix d'utiliser les couleurs de la palette par défaut, elles sont souvent trop basiques et freinent les possibilités de création: jetons plutôt un coup d'œil sur le spectre correspondant à notre bleu flashy:



Voici le spectre des couleurs où vous pouvez choisir a votre guise vos couleurs, cliquez sur celle de votre choix dans le spectre puis sur "ajouter aux couleurs personnalisées" et votre couleur sera sauvegardée dans la palette des couleurs personnalisées à gauche.
Ici ce n'est pas vraiment le but, nous avons une couleur flashy, que l'on veut adapter à celle d'un écran d'ordinateur...vous connaissez le vieux fond d'écran par défaut bleu de windows ? On va virer notre bleu flashy vers du gris et l'assombrir pour donner un bleu plus sombre, terni, plus réaliste pour un écran:



Voilà la démarche la plus simple pour ternir une couleur, ceci dit, selon votre création ne ternissez pas trop vos couleurs sinon votre création paraîtra grisâtre, tout dépend de l'ambiance que vous voulez donner, il existe plusieurs façons de dévier une couleur, ce sera expliqué plus loin.

Une fois l'écran rempli, passons aux choses sérieuses, les ombrages !
Avant tout, vous devez vous confectionner une palette pour les ombrages, pour le gris, pas besoin de dévier le curseur (changer la saturation)...Ceci dit, les couleurs autres que le gris/blanc doivent être déviées (vous n'êtes pas non plus obligés mais le mieux pour une création réaliste est d'avoir des nuances non-linéaires):



On peut dire que les couleurs les plus sombres doivent être ternies et les plus claires, éclatantes, ici le reflet de l'écran sera sur une teinte plus colorée que le bleu terne. Les nuances lumineuses seront teintées et pour les sombres, dé-teintées:



Nous allons prendre comme source lumineuse a gauche (en face de l'ordinateur), vous vous doutez bien que les ombres se situeront à l'arrière, ceci dit, le côté ne prend pas entièrement la lumière, il y aura donc 3 niveaux d'ombres pour les 3 surfaces de l'arrière de l'écran (vous pouvez diminuer le nombre de couleurs avec du dithering léger ou du shading, ceci dit, si vous utilisez plus de couleurs, elles serviront pour les futurs contours). Ainsi, votre palette est terminée et vous avez appliqué les premières ombres:



notez que les arrêtes extérieures nécessitent une couleur plus claire pour donner du relief. Les arrêtes intérieures (noues) doivent avoir une couleur plus sombre que la surface environnante mais ici, il n'y en a pas.

Attention ! Au niveau du socle, vous avec affaire à une figue non plane (une coupole ici, ça peut être une boule/sphère, comme une figure irrégulière telle qu'un arbre, une colline...), pour bien appliquer l'ombre à ce genre d'endroit, vous devez prendre en compte non seulement la source lumineuse, mais aussi s'il y a un objet qui le cache (ici l'écran d'ordi). Le truc est de voir dans l'espace: vous savez que la figure est une coupole, donc l'ombre portée ne sera pas droite mais légèrement arrondie, n'oubliez pas que le côté et l'arrière du socle est sombre:



Voilà, vous avez appliqué les premiers tons d'ombres.
L'étape suivante est d'appliquer les nuances secondaires et les contours.
Pour les nuances secondaires (nuance = couleur à laquelle on applique un ajout de blanc ou de noir pour l'assombrir ou l'éclairer), vous devez avant tout garder en tête une chose: éviter d'ajouter de nouvelles couleurs ! En effet, en pixel-art, lorsqu'on cherche la perfection, on à tendance à prendre plus de couleurs pour que le rendu soit plus lisse et propre...mais le principe du pixel-art est justement d'en utiliser le moins possible. Vous devez donc vous assurer de choisir des couleurs qui serviront à différents endroits de votre création en déviant le curseur sur le spectre (voir plus haut) de façon à obtenir des couleurs communes à d'autres. C'est assez difficile en soi mais je vais vous donner une petite astuce: pour en trouver, déviez toujours en passant par le gris, par exemple, si vous avez 2 couleurs, du rouge et du vert, pour trouver une plage de couleurs communes, faites comme ceci:



Voilà, avec ceci, vous devriez être capable d'effectuer les ombrages sans problèmes et ceci sans utiliser trop de couleurs, vient ensuite à utiliser à bon escient l'anti-aliasing et le dithering (le dithering est à utiliser aux endroits les plus vastes, par exemple sur la toiture d'une voiture selon si la surface est lisse ou non, par exemple sur de la terre, on utilisera le dithering à défaut d'un mur, tout dépend aussi de l'intensité de la source de lumière, si vous avez du soleil (lumière pure), l'ombre portée sera lisse donc pas de dithering, si le temps est gris (lumière assombrie), la lumière sera plus "ternie" donc vous pourrez en utiliser...Après c'est plus de la logique, mais veillez à ne pas trop nuancer les couleurs pour le dithering !).

Notez aussi qu'aux endroits les plus petits et sur les détails, utilisez l'anti-aliasing pour les ombrages ou le shading (sur le socle):
Pour l'arrière de l'écran, je vous avait dit que sur les surfaces lisses, pas de dithering, ceci dit, sur certaines matières, l'ombre portée est plus floutée, après c'est par rapport au feeling... Soyez observateur, regardez les objets dans votre chambre ou dehors, l'effet que donne la lumière sur l'environnement: il faut avant tout être observateur pour être perfectionniste.

Après avoir appliqué les ombrages secondaire (pas besoin donc de couleurs communes, ici il n'y en à que 2), vous devriez arriver sans trop de mal à ça:



IL reste une dernière chose à faire, on y est presque ! Les contours...
Cette partie n'est pas trop difficile si vous comprenez le principe de l'anti-aliasing (AA).
Le principe de l'AA est d'utiliser d'utiliser 2 couleurs séparant un trait pour le lisser ... bon je suis sur que vous avez compris que tchi, un dessin vaux mieux qu'on long discours:



La zone entourée en vert étant incliné, on usera de l'AA, mais pas pour la zone entourée en rouge, qui n'est qu'un simple trait droit (qu'il soit horizontal ou vertical)

Vous l'aurez compris (ou pas), du côté blanc, on assombris légèrement sur un côté du contour (d'un pixel) à l'aide du gris clair déjà existant, et du côté gris, on assombris légèrement d'un pixel le contour (également à l'aide d'un gris déjà existant), en tout, le trait de contour doit faire 3 pixels pour un trait simple ! pas plus ! L'AA est à manier avec précaution, ne jamais lisser un trait avec plus d'un pixel d'épaisseur (le pixel central n'est quasiment jamais noir, sauf pour les couleurs foncées, il peut y avoir 2 pixels centraux soit un trait de 4 pixels selon l'endroit):

Au final, vous devriez obtenir ceci:

N'oubliez pas que dans le style habbo, les concours sont noirs ou de couleur omniprésente foncée (prenez la couleur avoisinant le contour et foncez-là à son maximum un peu avant le noir pur), les contours noirs sont principalement extérieurs !
Voilà, ce tutoriel touche à sa fin.
J'espère qu'il vous sera d'une aide précieuse Wink

See you later !

_________________


Page facebook        Chaine youtube         Galerie Deviantart

Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Kevin-reborn
Habitué
Habitué
avatar

Messages : 2687
Age : 22
Pseudo Habbo : South-Graph
Date d'inscription : 01/07/2010

MessageSujet: Re: [Paint] Ombrages et couleurs   Jeu 9 Déc - 12:34

Excellent tuto' !

Je m'en servirais la prochaine fois que je ferais une créa, merci Very Happy
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Sotax
Petit Explorateur
Petit Explorateur
avatar

Messages : 1403
Pseudo Habbo : S0t4x
Date d'inscription : 05/12/2010

MessageSujet: Re: [Paint] Ombrages et couleurs   Jeu 9 Déc - 13:10

Merci très bon tuto j'en avait bsoin pour mes groBer Smile
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Chésar
V.I.P
V.I.P
avatar

Messages : 15317
Age : 27
Pseudo Habbo : JointdePurple
Date d'inscription : 05/08/2010

MessageSujet: Re: [Paint] Ombrages et couleurs   Jeu 9 Déc - 13:32

Un tuto à la shear, donc un tuto parfait. Rien à dire Very Happy
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.chucknorris.fr
Z-shear
Fondateur
Fondateur
avatar

Messages : 4107
Age : 26
Pseudo Habbo : shear
Date d'inscription : 18/08/2009

MessageSujet: Re: [Paint] Ombrages et couleurs   Jeu 9 Déc - 13:45

il t'en reste un peu là troll

_________________


Page facebook        Chaine youtube         Galerie Deviantart

Revenir en haut Aller en bas
Voir le profil de l'utilisateur
.:-SALIF-:.
Petit Scarabée
Petit Scarabée
avatar

Messages : 970
Age : 23
Pseudo Habbo : .:-SALIF-:.
Date d'inscription : 16/09/2009

MessageSujet: Re: [Paint] Ombrages et couleurs   Jeu 9 Déc - 14:38

il etait temps que tu poste ce tuto ici ^^
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.habbgraph.jeunforum.com
MoveeDead
Petit Scarabée
Petit Scarabée
avatar

Messages : 371
Date d'inscription : 13/05/2011

MessageSujet: Re: [Paint] Ombrages et couleurs   Ven 13 Mai - 18:22

Très bon et complet comme d'ab
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
directory
Habitué
Habitué
avatar

Messages : 2763
Age : 22
Pseudo Habbo : Directory ancien Deeluxe.s
Date d'inscription : 16/01/2011

MessageSujet: Re: [Paint] Ombrages et couleurs   Ven 13 Mai - 22:55

Oulalala Gros remontage de sujet fait attention.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
jawe
Noob
Noob


Messages : 2
Pseudo Habbo : jawe
Date d'inscription : 30/04/2011

MessageSujet: Re: [Paint] Ombrages et couleurs   Sam 14 Mai - 1:44

Un topic utile. merci Smile
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Chésar
V.I.P
V.I.P
avatar

Messages : 15317
Age : 27
Pseudo Habbo : JointdePurple
Date d'inscription : 05/08/2010

MessageSujet: Re: [Paint] Ombrages et couleurs   Sam 14 Mai - 2:01

Il peut remonter ici ^^
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.chucknorris.fr
Crime
V.I.P
V.I.P
avatar

Messages : 3819
Pseudo Habbo : .:Crime:. / Swagi
Date d'inscription : 28/07/2010

MessageSujet: Re: [Paint] Ombrages et couleurs   Sam 14 Mai - 23:25

Oui, mais bon c'est mieux de poser une question que ce genre de commentaire. ^^

_________________

J'sais pas quoi mettre en signature..
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Wirebug
Petit Explorateur
Petit Explorateur


Messages : 1247
Age : 21
Date d'inscription : 15/01/2011

MessageSujet: Re: [Paint] Ombrages et couleurs   Lun 2 Jan - 6:13

J'en ai appris des choses ^^ Bon Tuto
Spoiler:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
lIl-smile-lIl
Petit Explorateur
Petit Explorateur
avatar

Messages : 1246
Date d'inscription : 17/01/2011

MessageSujet: Re: [Paint] Ombrages et couleurs   Lun 2 Jan - 11:24

merci wirebug sa ma permit de voir ce tuto Wink
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Jack-M
Habitué
Habitué
avatar

Messages : 3328
Pseudo Habbo : //
Date d'inscription : 06/12/2009

MessageSujet: Re: [Paint] Ombrages et couleurs   Ven 6 Jan - 9:44

Beau Tutos.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Mr.fric2
Noob
Noob


Messages : 52
Age : 20
Pseudo Habbo : Herver-Millard
Date d'inscription : 07/04/2011

MessageSujet: Re: [Paint] Ombrages et couleurs   Ven 24 Fév - 17:33

Merci pour ce tutoriel complet, ça va m'aider.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.youtube.com/user/thefric73
-Pixelz.
Habitué
Habitué


Messages : 4784
Date d'inscription : 11/01/2012

MessageSujet: Re: [Paint] Ombrages et couleurs   Sam 25 Fév - 7:37

Jack-M a écrit:
Beau Tutos.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Contenu sponsorisé




MessageSujet: Re: [Paint] Ombrages et couleurs   

Revenir en haut Aller en bas
 
[Paint] Ombrages et couleurs
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
HabbStray, habbo, pixel-art, tutoriels, graphisme :: Salle des artistes :: 
Apprends le pixel-art! - Tutoriels
-
Sauter vers: