Graphismes 2D pour les programmeurs

Ombrage de base – la balle

Apprenez à ombrer vos scènes.

3 commentaires Donner une note à l'article (5)

Article lu   fois.

Les deux auteur et traducteur

Traducteur : Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Ombrage de base

Ce tutoriel sur l'ombrage est l'un des plus demandés. Comment faites-vous ? Pourquoi le faites-vous ? Où dois-je ajouter des ombres et quelles couleurs dois-je utiliser ? L'éclairage est un domaine vaste et les possibilités sont quasi infinies. Dans ce tutoriel, j'ai essayé de couvrir les bases fondamentales avec l'une des formes les plus simples : la balle. Correctement utilisés, les lumières et ombrages donneront tout à votre scène et les objets sembleront plus spectaculaires, réels et visuellement attrayants.

Commençons avec un cercle. Je sais, cela doit être la centième fois que j'écris ces mots, mais c'est toujours l'objet de départ le plus facile à manipuler.

Image non disponible
Image non disponible


Commencez avec un cercle et remplissez-le avec une couleur. Image non disponible
C'est un cercle plutôt plat.

Image non disponible


Pour lui donner un peu de relief, ajoutez un duplicata plus clair ainsi qu'un second encore plus clair pour le reflet.

Image non disponible


Pour le rendre encore plus sphérique, vous pouvez utiliser l'outil de dégradé et choisir un dégradé radial. Image non disponible

Image non disponible


La modification de la position de la lumière doit entraîner le déplacement du centre du dégradé.

Image non disponible


Ou encore, dans le cas d'une balle en cell-shading – le repositionnement des formes les plus claires.

Image non disponible


Des lumières moins intenses donnent des reflets moins grands et plus d'ombre à la forme.

Image non disponible


Vous pouvez utiliser les mêmes couleurs et juste altérer les positions des contrôleurs du dégradé. Image non disponible

Image non disponible


Pour obtenir un effet encore plus brillant à la place d'une surface terne, dupliquez le cercle, rétrécissez-le et dupliquez-le encore une fois.

Image non disponible


Utilisez le second cercle pour couper la forme blanche afin d'obtenir un croissant. Avec un peu de transparence et deux reflets, vous obtenez un éclat.

Pour rendre la scène plus intéressante, la plupart du temps, vous allez ajouter une seconde source lumineuse avec une autre couleur. Cela ajoute de l'intérêt et améliore la qualité réfléchissante de l'objet.

Image non disponible

Le résultat n'est pas réaliste, mais n'est pas trop cartoon. Si vous recherchez le second, le cell-shading en utilisant deux à quatre couleurs donnera un résultat satisfaisant. Pour avoir une balle plus réaliste, les éléments de reflets nécessitent plus de travail – et une recherche d'images sur Google pour quelque chose comme les décorations de Noël.

Voyons les conséquences de la modification des lumières sur notre balle.

Image non disponible
Image non disponible


Tout comme pour les reflets, l'ombre change suivant la position de la lumière.

Image non disponible


L'ombre « pose l'objet sur le sol ». C'est la connexion à la surface sur laquelle il est.

Image non disponible


Sans l'ombre, l'objet semble flotter et être suspendu dans l'air.

Image non disponible
Image non disponible
Image non disponible
Image non disponible


Essayez différentes variations pour les reflets – par exemple une série de croissants.

Image non disponible


Différentes intensités lumineuses peuvent provoquer des reflets plus clairs, mais aussi des ombres plus sombres.

Image non disponible


Un effet lumineux populaire est l'effet de verre avec un dégradé doux de la transparence sur la forme (un duplicata plus petit du cercle avec une vague).

Image non disponible

Si la balle se rapproche de la source lumineuse, l'effet de la lumière doit être plus fort – des reflets plus légers et des ombres plus sombres ainsi qu'un effet amoindri pour la source lumineuse secondaire.

Une question que l'on m'a souvent demandée est à propos du choix des couleurs. La configuration la plus basique sera composée d'une lumière blanche pour les reflets et noire pour les ombres. D'après moi, le résultat est souvent froid et morbide. Je préfère une lumière plus chaude et ma couleur favorite pour l'ombrage est le violet foncé ou le marron foncé (avec une transparence équilibrée). Vous obtenez de cette façon des tons plus chauds et des couleurs plus vivantes.

Encore une fois, la scène que vous essayez d'influencer détermine les couleurs de votre lumière et des ombres. Par exemple, une scène sous-marine serait très étrange avec des ombres marrons ou rouges – vous opteriez plutôt pour une sélection de couleurs blanche/bleue/verte. Un après-midi d'été aura une lumière jaune/or/marron foncé ou une grande palette rougeâtre – alors qu'une journée d'hiver aura une lumière blanche/gris bleutée et noire.

Voici quelques exemples d'effets de couleurs sur l'ombrage d'un objet.

Image non disponible
Image non disponible


Une lumière blanche avec une ombre noire donne un résultat très froid.

Image non disponible


En prenant une lumière avec un jaune très lumineux et une ombre rouge foncé, vous obtenez une scène beaucoup plus chaude.

Image non disponible


Ici, le jaune est plus sombre et l'ombre est violette.

Image non disponible


Une lumière brillante rend l'objet plus brillant et l'ombre devient plus sombre,

Image non disponible


alors que l'atténuation de la lumière dans une scène sombre donne des couleurs plus proches.

Image non disponible


La lumière peut aussi refléter la configuration (par exemple, une fin d'après-midi en automne grâce à une lumière orange).

Image non disponible


Pour ajouter de la complexité à l'éclairage d'un objet, il y a une lumière indirecte – une lumière qui rebondit de la surface des autres objets – par exemple le dessus d'une table blanche.

Image non disponible


L'utilisation de deux sources de lumière peut rendre l'objet bien plus intéressant,

Image non disponible


mais plus vous rajoutez des sources lumineuses plus cela devient confus,

Image non disponible


et finalement ce n'est plus « lisible ».

Pour finir, c'est une question d'expérimentations, trouver la bonne lumière pour donner le ressenti de votre scène et s'y tenir pour tous les objets de la scène. Amusez-vous avec ! Essayez de trouver quelque chose qui correspond à la sensation et à l'atmosphère que vous recherchez et ne soyez pas effrayé de tester des combinaisons de couleurs « étranges ».

Si vous créez des ressources pour un jeu, gardez à l'esprit les changements de scènes. Pour éviter de créer un éclairage dynamique - qui semble merveilleux, mais qui demande énormément de travail de programmation ainsi que de graphisme – je suggère de rester sur une configuration d'éclairage simple (par exemple de haut en bas – ainsi l'inversion horizontale du personnage n'entraîne pas la création de nouvelles ressources et garde la scène consistante). Il peut aussi être pratique de séparer les ombres des objets pour rendre cohérents les sauts et le parcours de surfaces non horizontales.

J'espère que cela vous a été utile. Je prévois d'ajouter des formes et objets plus avancés à ce tutoriel. Amusez-vous !

II. Remerciements

Cet article est une traduction autorisée de l'article paru sur 2D Game Art for programmers. Je remercie chaleureusement Chris Hildenbrand de nous avoir permis de le traduire.

III. Commenter

Vous pouvez commenter cet article ou présenter vos réalisations sur le forum.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2014 Chris Hildenbrand. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.