Blog Metlivi

Comment choisir une palette limitée pour un sprite de petit animal

Pour un sprite de petit animal, commencez par les quelques couleurs nécessaires pour distinguer sa silhouette, son corps principal, son ombre et un ou deux traits caractéristiques. Construisez un dégradé court du sombre au clair pour la matière dominante, puis testez les couleurs sur le sprite à sa taille d'affichage prévue. Un bon premier jet compte souvent environ 4 à 8 couleurs pour un personnage en 16×16, mais il s'agit d'une fourchette de départ et non d'une règle : la taille du sprite, le nombre de matières, l'éclairage et le design ont tous leur importance.

15 octobre 20267 min de lecturePar Metlivi Editorial Team
Section 1

Partez de la fonction et de la taille du sprite

Déterminez ce que l'animal doit communiquer au premier coup d'œil. Une toute petite icône peut n'avoir besoin que d'une forme corporelle nette et d'un signe distinctif ; un personnage plus grand pourra aussi nécessiter des couleurs distinctes pour le ventre, les oreilles, les pattes ou des accessoires. Ne listez que les éléments qui doivent rester reconnaissables à la taille prévue pour le sprite. Cela permet d'associer le choix de la palette à des fonctions visuelles plutôt qu'à un nombre cible de couleurs.

Un guide spécialisé en pixel art suggère environ 4 à 8 couleurs, contour compris, pour un personnage en 16×16 et 8 à 16 pour un personnage en 32×32. Considérez ces chiffres comme des repères pratiques : un animal composé d'une seule matière peut en nécessiter moins, tandis que plusieurs matières ou des motifs particulièrement importants peuvent en exiger davantage. Le véritable critère est de savoir si chaque couleur apporte une distinction visible. Guide des palettes en pixel art de Tsubu

Section 2

Choisissez les éléments qui méritent leur propre couleur

Avant de choisir les teintes exactes, identifiez la matière principale du corps et le trait secondaire le plus reconnaissable de l'animal. Par exemple, un petit renard peut utiliser un dégradé pour le corps et réserver une couleur claire pour le museau et le poitrail ; un chat sombre peut utiliser un visage plus clair ou des détails au niveau des yeux pour faire ressortir son expression. Ce sont des exemples de design, pas des schémas de couleurs imposés pour les animaux. Si deux zones se confondent à la taille réelle, elles ont peut-être besoin d'une séparation de valeur plus nette. Si elles se lisent déjà comme une seule forme, leur attribuer des couleurs distinctes risque d'alourdir l'ensemble sans apporter d'information utile.

Le contour peut partager la teinte la plus sombre du corps ou utiliser sa propre couleur. Partager une teinte sombre économise un emplacement dans la palette et peut aider à unifier les formes, tandis qu'un contour distinct est pertinent lorsque le sprite a besoin d'une délimitation marquée par rapport à son arrière-plan. Vérifiez le rendu sur l'arrière-plan réel du jeu ou sur le fond d'exportation : un contour qui se fond dans cette couleur ne délimitera pas nettement la silhouette.

Section 3

Construisez un dégradé court pour le corps principal

Un dégradé (ramp) est une courte séquence de nuances pour une même matière, ordonnée du sombre au clair. Commencez par trois rôles : ombre, base et lumière. N'ajoutez une ombre plus profonde ou un rehaut éclatant que si le sprite en a réellement besoin. Les conseils en pixel art décrivent couramment des dégradés de trois à cinq étapes, l'étape la plus sombre faisant parfois aussi office de tracé pour les contours. Guide des dégradés de palette de Pixor

Choisissez une couleur de base qui correspond au rendu souhaité, puis créez une nuance plus sombre et une nuance plus claire. Chaque étape doit être visiblement différente de la suivante une fois appliquée sur le sprite. Une rangée d'échantillons peut sembler variée tout en ne produisant que peu de changement visible sur un petit groupe de pixels ; évaluez donc le dégradé en contexte. Ne partez pas du principe que chaque matière a besoin d'une séquence entièrement distincte : une ombre ou une lumière partagée peut permettre à une palette compacte d'ombrer plusieurs zones.

Section 4

Faites varier la teinte en plus de la luminosité

Lorsque vous créez une ombre en assombrissant uniquement la couleur de base, le dégradé peut paraître plat ou terne. Essayez de décaler légèrement la teinte au fur et à mesure que la luminosité change : par exemple, une base chaude peut avoir une ombre plus froide et une lumière plus chaude. L'orientation dépend de l'éclairage et du style souhaités ; ainsi, les ombres bleu-violet et les rehauts jaune-orangé sont des options courantes, non une formule obligatoire. Guide du décalage de teinte de Pixor

Gardez ce décalage suffisamment subtil pour que le dégradé se lise toujours comme une seule et même matière. Appliquez une direction d'éclairage cohérente sur le corps de l'animal, sa tête et tout dégradé secondaire ; des décalages sans lien peuvent donner l'impression qu'un tout petit sprite est éclairé depuis plusieurs directions. Le tutoriel de palette du pixel artist Raymond Schlitter aborde également les changements de teinte le long des dégradés et l'ajustement de la saturation, tout en insistant sur le fait que le résultat visuel du dégradé relève du jugement plutôt que d'une recette mathématique fixe. Pixelblog de Slynyrd sur les palettes de couleurs

Section 5

Vérifiez la séparation des valeurs avant d'ajouter des détails

Les noms de teintes ne garantissent pas à eux seuls que des zones voisines se distingueront. Un corps brun-roux et un accessoire vert, par exemple, peuvent avoir une luminosité similaire et se fondre l'un dans l'autre à petite échelle. Affichez temporairement le sprite en niveaux de gris ou comparez les zones à l'œil nu : distinguez-vous toujours la silhouette, le visage et le motif clé ? Pixor recommande de vérifier la luminosité des dégradés en niveaux de gris ; le guide de Tsubu souligne de même l'importance de tester les zones adjacentes à la taille réelle du sprite. Pixor sur les dégradés, Tsubu sur le contraste de valeurs

Si deux zones importantes se confondent, ajustez d'abord la luminosité de l'une des couleurs ou choisissez une nuance de dégradé proche offrant une meilleure séparation. Si elles restent difficiles à distinguer, modifiez la teinte ou réservez un accent bien distinct. N'ajoutez pas une nouvelle couleur uniquement parce qu'un détail est difficile à voir, alors que le détail lui-même est peut-être trop petit pour subsister à la taille finale. Dans ce cas, simplifier ou agrandir la forme peut être plus efficace que d'ajouter un nouvel échantillon.

Section 6

Testez la palette sur le sprite, pas seulement sur un nuancier

Appliquez les couleurs sur le dessin réel et examinez-le à sa taille d'origine. Zoomer facilite le placement des pixels, mais cela peut masquer le fait que les couleurs ne fonctionnent pas lorsque le sprite est affiché en petit. Vérifiez le contour par rapport à son arrière-plan, puis vérifiez le visage et les autres traits distinctifs. Si l'animal est animé, prévisualisez quelques images : une couleur qui fonctionne dans une pose peut se confondre avec un autre élément lorsque la silhouette change.

Adoptez une boucle de révision simple : définissez le rôle de chaque couleur, examinez le sprite à échelle 1×, identifiez le premier élément qui manque de clarté et modifiez le plus petit nombre d'échantillons possible pour le rendre lisible. Lorsqu'une couleur n'a aucune fonction visible, essayez de la supprimer ou de la fusionner. Lorsque vous ajoutez une couleur, explicitez ce qu'elle permet d'accomplir (comme séparer un ventre pâle du torse), puis vérifiez que la distinction est réellement visible. Cette vérification basée sur les rôles est un moyen pratique d'éviter d'agrandir la palette par simple habitude.

Section 7

Choisissez une palette prête à l'emploi ou créez-en une petite sur mesure

Une palette communautaire peut fournir un ensemble de couleurs harmonieux à tester rapidement. Sélectionnez un sous-ensemble adapté aux matières de l'animal et à l'ambiance recherchée ; le nombre total d'entrées d'une palette ne constitue pas un objectif pour chaque sprite. Si vous créez la vôtre, commencez par le dégradé du corps et n'ajoutez des couleurs que pour les éléments qui nécessitent une distinction. Construisez et testez le sprite avant de compléter avec des nuances superflues.

Dans Aseprite, le mode RVB permet d'utiliser des couleurs qui ne figurent pas dans la barre de palette, tandis que le mode Indexé associe chaque pixel à une entrée de la palette et restreint le dessin à ces entrées. Modifier la couleur d'une palette indexée change les pixels qui utilisent cet index, ce qui peut s'avérer utile pour ajuster tout un dégradé en une seule fois. Le mode Indexé utilise également un index de palette pour la transparence. Il s'agit là de comportements propres au flux de travail de ce logiciel, et non d'exigences pour choisir une palette limitée. Documentation d'Aseprite sur les modes de couleur

Section 8

Une liste de contrôle décisionnelle synthétique

Avant de figer la palette, confirmez que la silhouette de l'animal et son trait distinctif se lisent bien à la taille d'affichage prévue ; que le dégradé du corps présente des rôles clairs d'ombre, de base et de lumière ; que les zones voisines importantes restent distinctes en niveaux de gris ; que le contour détache bien le sprite de son arrière-plan ; et que chaque nuance a une fonction visible. Si l'un de ces points fait défaut, retravaillez cette relation précise et examinez à nouveau le sprite. Gardez la palette aussi restreinte que le design le permet, tout en préservant les traits qui rendent cet animal parfaitement lisible.

Section 9

Sources

À lire aussi

Continuer sur ce thème