[Tutoriel] Améliorez vos sprites en pixel art!

Introduction

Dans cet article je vais vous expliquer un certain nombre de techniques que j'utilise
pour améliorer les sprites de planet centauri avant leur intégration (ou animation).
Une partie des règles qui seront présentés sont très simples à mettre en œuvre
et/ou très mécaniques, donc même si vous n'êtes pas un grand artiste,
essayez de suivre ces quelques principes et vos sprites seront bien plus propres et beaux.


Couleurs

Il y a beaucoup d'erreurs faciles à commettre qui vont grandement dégrader
la qualité d'un sprite. Heureusement, elles sont aussi généralement simples
à corriger avec un peu d’expérience et un regard critique aiguisé.


Trop de couleurs

Le pixel art est l'art de la contrainte. Si deux couleurs sont très proches, essayez
tout simplement de les fusionner en une couleur moyenne, pour voir comment cela rend.
Avoir une palette avec peu de couleurs vous permettra de l’améliorer bien plus facilement,
mais simplifiera aussi la création du sprite en lui-même.
Cela permettra aussi plus facilement d'identifier les artefacts indésirables (pixels
placés au mauvais endroit).


Gradients

Si vous faites une palette sous forme de gradients, évitez à tout prix d'avoir des gradients
indépendants (c-à-d qui se contentent juste d'assombrir/éclaircir une couleur de base).
Faites des gradients aux couleurs interdépendants, qui se croisent.

Essayez aussi d'avoir des clairs plutôt saturés qui tendent vers le jaune ou cyan et des sombres
plus désaturés qui tendent vers le bleu ou violet. Mais évitez d'avoir une palette totalement
saturée ou désaturée. Cela nuit au contraste et rend généralement mal.
Faites aussi en sorte d'avoir des gradients de teintes assez éloignées pour ne pas vous retrouver
avec des contrastes de couleurs trop fades.

Rappelez-vous aussi de ne pas utiliser plus de couleurs que cela est nécessaire et
gardez des gradients assez contrastés au niveau de la luminosité.
N’hésitez pas à récupérer des palettes de référence sur d'autres sprites pour les tester sur le
vôtre, et voir si cela rend mieux ou non, pour l'adapter.


Couleurs voisines

Pour les détails ou traits fins, évitez autant que possible les trop forts contrastes avec
les couleurs voisines. Une ligne sombre sur fond clair ne fera généralement pas naturelle.
En revanche une ligne qui s'adapte à sa couleur de fond donnera une impression de volume
plus réaliste.


Cela vaut aussi pour les contours extérieurs, qui doivent à la fois s'adapter à la couleur
intérieure et à l'ombrage de la surface.


Nb: Cela ne s'applique bien sûr pas à tous les styles graphiques.



Pillow shading

Le pillow shading est l'effet désagréable obtenu quand la source de lumière vient de face.


Évitez autant que possible les sources lumineuses de face, sauf si vous savez vraiment
ce que vous faites.



Lignes et courbes

Ligne parfaite: une ligne dont le pas vertical pour un pas horizontal est toujours le même.


Courbe parfaite: une courbe constituée de lignes parfaites dont le pas dépend toujours des parties voisines.


Ligne sale: ligne donc au moins un sous-segment à plus d'un pixel adjacent a une extrémité.

Comme vous pourrez vous en douter en voyant les images ci-dessus, les lignes sales sont à proscrire.
Il faudra aussi faire usage le plus possible de lignes et courbes parfaites.



Clusters

Un cluster est un groupe de pixels de même couleur, collés entre eux.
La forme des clusters va grandement influencer le rendu final de l'image.
Des clusters bruts et anguleux donneront généralement un résultat assez brouillon.
On préférera souvent utiliser des clusters arrondis ou bien droits pour avoir une image finale
assez douce, précise et agréable a l'œil.


Il faut aussi éviter à tout prix les pixels solitaires.
Si un pixel se retrouve au milieu d'un cluster d'une autre couleur sans qu'il
n'y ait aucun pixel adjacent de la même couleur que celui-ci, supprimez-le.







Dithering et texturing

Contrairement à l'idée répandue, le dithering n'est pas une technique aussi
magique qu'elle ne pourrait le laisser croire. Beaucoup de dithering entre des couleurs
contrastées va généralement donner un résultat sale et granuleux.
C'est d'ailleurs à proscrire totalement si vous souhaitez animer un sprite, car maintenir
une cohérence de dithering entre les frames sera un vrai calvaire.

Utilisez plutôt du texturing si votre style l'exige (la différence fondamentale avec le
dithering est qu'une texture n'a pas de limite de couleurs).
Mais n'oubliez pas, qui dit texture dit difficultés supplémentaires pour l'animation,
et la lisibilité sera généralement amoindrie.
Bref, encore une fois c'est une histoire de style.
Pour un style cartoon n'utilisez ni dithering, ni texturing.


Antialiasing

L'antialiasing est une technique qui consiste à réduire l'effet d'escalier (aliasing)
présent sur les lignes ou courbes entre deux surfaces de couleurs contrastées.


Antialiasing interne

Il y a deux cas d'utilisation de l'antialiasing interne.
La séparation simple entre deux surfaces, et le cas de lignes ou courbes qui coupent
une surface de couleurs différentes.

Dans le premier cas il suffit d'utiliser une couleur intermédiaire là où l'aliasing
est présent pour le réduire (généralement lorsqu'il y a une variation soudaine de la courbure).



Dans le second cas il suffit généralement de faire passer un petit cluster de couleur
intermédiaire entre chaque sous-segment horizontal ou vertical de la ligne.
La taille de ce cluster dépendant directement de la taille du sous-segment.




Antialiasing externe

L'antialiasing externe, doit faire face à une restriction supplémentaire face à l'antialiasing
interne: le fond d'un jeu varie constamment, ainsi on doit avoir un effet qui s'adapte aux
fonds sombres comme aux fonds clairs.
La règle est donc simple, on applique l'effet uniquement à l'intérieur du sprite.
L'extrémité d'un segment extérieur qui touche le fond ne devra jamais être modifiée.


Ici l'on voit bien que l'antialiasing interne appliqué sur les parties externes du sprite
donne de sales artefacts, alors que l'antialiasing externe, bien que moins efficace, donne
un résultat tout à fait convaincant sur n'importe quel type de fond.


The end.

English translation :

---

Introduction

In this tutorial, I will explain you how to use a couple techniques I used to improve
planet centauri's sprites before implementing them into the game (or before animating them).
Some of the rules shown here are very easy to use, and/or are purely methodical;
so even if you aren't very skilled, follow those simple guidelines to make your sprites cleaner.


Colors

A lot of basic mistakes will ruin the quality of your art.
Thankfully, they're also generally quite easy to fix with some experience, and
by paying attention.

Too many colors

Pixel art is all about constraints. When two colors are very close, merge them into
an intermediate one, so you see if it improves the result.
Using a small palette will help you improving your skills much more easily, and will make
creating sprites also easier.
It also will make it easier to identify unwanted artifacts (i.e. misplaced pixels).

Gradients

If you are constructing a palette with gradients, avoid at any cost independent gradients
(i.e. only dimmed/lighted base colors). Use gradients that depends on each other.

You can also try to use yellow-ish or cyan-ish saturated light colors, and blue-ish and purple-ish
desaturated dark colors. However, avoid using an over-saturated or an under-saturated palette.
This usually ends up bad and breaks contrasts.
You should also use gradients with outspread tints to avoid washy color contrasts.

Remember never to use more colors than necessary, and use gradients with contrasted brightness.
Feel free to try using other generic palettes on your sprite to compare it with your palette so you can improve it.


Neighbor colors

Avoid as much as you can excessive contrasts between neighboring pixels.
For example, a black line over a white background usually won't look natural.
A line that fits the background color well gives a realistic volume effect.


This is as true for outlines, which has to fit with both the inner color and the umbrage
of the surface.


NB: Obviously, this doesn't work with any graphic style.



Pillow shading

Pillow shading is a nasty effect that occurs when the light source comes from the front.


Avoid pillow shading, unless you really know what you're doing.



Lines and curves

Perfect line: A line that has a constant vertical and horizontal step.


Perfect curve: A curve made of perfect lines which step always depends on the other parts of the curve.


Dirty line: A line that has at least one sub-segment with more than one adjacent pixel on one end.

As you may have noticed on the pictures above, dirty lines should be avoided.
You should use as much perfect lines and curves as possible.



Clusters

A cluster is a group, a pack of connected pixels with the same color.
Cluster shapes will greatly affect the final image.
Bony and crude clusters will give a sketchy aspect.
Round and straight lines are preferred so you get a precise, smooth and nice image.


Avoid lonely pixels. If one pixel is inside of a different color cluster without
any adjacent pixel with the same color, remove it.







Dithering et texturing

Contrary to popular belief, dithering isn't as great as it seems. A lot of dithering between
heavily contrasted colors will often give a dirty and noisy image.
It is also a very bad idea to use dithering when animating a sprite, because keeping coherent
dithering will be awfully hard.

If you art style lets you do it, use texturing instead (the difference is that texturing does not
induce color limitations).
But don't forget, texturing means harder animation and worse clarity.
Again, it's a matter of style.
If you want a cartoon-ish look, do not use dithering nor texturing.


Antialiasing

Antialiasing a technique that reduces the staircase effect (aliasing) which is clearly
visible on two lines between two contrasted surfaces.


Internal AA

There are two use-cases for internal AA :
Simply separating two surfaces, and using lines or curves cutting through two different surfaces.

In the first case, you may just need to insert an intermediate color where aliasing is visible
to reduce it (generally, when the curve abruptly changes).



In the second case, you may just need to add a small intermediate color cluster
between every horizontal or vertical sub-segment.
Its size directly depends on the sub-segment size.




External AA

External AA suffers from an important restriction, unlike internal AA: The background color
in a game will constantly change, so you need to have an effect that looks good on both
dark and light backgrounds.
This rule is quite easy: You only apply the effect inside of the sprite.
The end of an outline that neighbors with the background should never be modified.


In this image, the internal AA effect applied on the outer part of the sprite unveils some
nasty artifacts, while external AA, even if it isn't as efficient, gives a great effect on any
background type.


The end.

Tutoriel informatif et de qualité digne de Les Forges, bravo !
Et excellente traduction Asu !

C'est chouette, on voit la maturité dans votre style graphique c'est vraiment sympa

Merci :p

Et merci Asu pour la traduction!