Clikmag>Dossiers >Pixel-art: Annexe 1

Pixel art
Annexe 1: Scan et Retouches

Après avoir passé en revue le spritage "à la click" et les décors avec Photoshop, on va aujourd'hui s'interesser à cet outil formidable et indispensable qu'est le scanner. Aucun rapport avec le pixel-art à priori, pourtant on va le voir, rien n'est plus facile que de spriter avec un scanner ^^
Ce cours vous apprendra comment, à partir d'un dessin réalisé sur papier, le scanner puis travailler par dessus sur Photoshop pour obtenir un sprite. Du dessin en niveaux de gris au sprite colorisé en passant par ses contours, tout est expliqué clairement à grands renforts d'mages exclusives :)
*Note: ce cours s'inspire fortement de celui de Tsugumo, en anglais mais que tout bon pixel-artiste se doit d'avoir lu au moins une fois dans sa vie. Courrez le visiter !

1: Scanner

Tout d'abord, il va falloir dessiner ! Bon rassurez vous, pas la peine d'avoir fais les beaux-arts: vu que le dessin sera destiné à un sprite de petite taille (pixel-art oblige), la précision n'est pas de mise. Dessinez une forme simple, avec les elements importants: tête, bras et jambes, buste, mains et pieds. les vetements ne sont même pas obligatoires, mais il est plutôt conseillé d'en faire une esquisse pour bien cerner le personnage. Aidez vous de mon autre cours pour les proportions.
Lorsque vous etes satisfait, scannez votre dessin. Une résolution de 72 ppp est conseillée (encore une fois, c'est destiné à être retreci). Surtout, scannez en mode "niveaux de gris" (dans les options de votre logiciel de scanner, cherchez "greyscale").

2: Retoucher

Passons maintenant aux réglages. On va d'abord rendre le sprite plus "visible", pour ainsi pouvoir plus facilement travailler les contours. Plusieurs possibilités existent:
- Dans le menu Image, selectionnez "réglages" puis "luminosité/contraste". Augmentez le contraste jusqu'à avoir des traits bien nets.
- Toujours dans le menu Image - réglages, sélectionner "Seuil". Cet outil regle le niveau de noir de votre image. Cette fonction est interessante si vous avez scanné assez gros.

Pour ne pas que le dessin soit génant lors du spritage, il vaut mieux changer sa couleur. Dans le menu image, choisissez "Mode" et "Couleurs RVB". Puis, toujours dans Image, allez dans "Reglages" et "Balance des couleurs". Faites glisser les curseur à "cyan" et "bleu", au maximum. La teinte devrait correspondre à celle du dessin ci contre.
J'utilise le bleu car je le trouve adapté: ce n'est pas une couleur aggressive et elle est suffisament voyante pour permettre un travail facile. Vous pouvez evidemment choisir la couleur que vous voulez.
Reglez maintenant la taille que vous voulez donner à votre sprite. Ca ne dépend que de vous :) Dans le menu Image, selectionnez "Taille de l'image"
J'ai ici choisi une hauteur proche de 100 pixels. Privilegiez un rééchantillonage Bicubique (ou Bilinéaire), car le si vous rééchantillonez "au plus proche", vous obtiendrez un résultat plus proche de la bouillie de pixel que d'un sprite adouci.
Une dernière étape importante avant le spritage: d'abord, créez un nouveau calque, au dessus du calque contenant le dessin. Il servira à dessiner votre sprite. Puis réglez l'opacité du calque contenant votre dessin à une valeur comprise entre 20 et 30 %, ceci afin d'éviter de confondre votre sprite et votre dessin. Cette valeur peut varier selon la couleur du dessin, mais faites en sorte qu'il soit très clair.
Vous etes maintenant prets et parés au spritage :)

3: Spriter

Lors de mon cours précédent, je rappellais que Photoshop n'était pas fait pour le pixel-art. Aujourd'hui je nuancerais cette remarque, car ce logiciel est non seulement puissant, mais il est aussi formidablement polyvalent. La preuve, je n'utilise presque plus le logiciel de dessin de TGF pour mes sprites :)

- les contours

Contrairement à mes autres cours qui traitaient d'un personnage non détouré, on va ici s'interesser à un personnage avec des contours noirs. Qui dit pixel-art dit donc contours impeccables, il est alors impossible de travailler avec autre chose que le crayon. Suivez les réglages ci contre, et n'oubliez pas de choisir la couleur noire :)
Reglez aussi la gomme avec un diamètre de 1 et une opacité de 100 %. On se retrouve avec les réglages du logiciel de dessin de TGF, en quelque sorte.


Maintenant, c'est à vous de jouer. Suivez le principe: du "contour en une ligne": pas de "paté", ou plus généralement pas plus de 2 pixels collés ensemble. Vous pouvez corriger les erreurs de votre dessin (sur ce sprite par exemple, la jambe droite). Vous pouvez aussi completement revoir une partie si elle vous semble incorrecte. Sur mon dessin, le personnage possedait des tresses, mais considérant que ce serait fatiguant à animer (^^), j'ai préferé détacher ses cheveux et ajouter un bandeau. Lorsque vous etes satisfaits, prenez un peu de recul (allez dessiner autre chose une demi heure), puis reprenez les détails qui vous gènent.
Pas de solution miracle ici, tout dépend du spriteur !

- Les couleurs

Vous avez votre sprite ? Bravo ! Maintenant c'est vous qui décidez: soit vous coloriez avec le logiciel de dessin de TGF/MMF (et dans ce cas, vous copiez/collez votre dessin directement), soit vous faites les couleurs avec photoshop. Les avantages de ce dernier choix sont multiples: vous pourrez selectionner une partie du personnage pour ne pas dépasser avec la couleur par exemple. Le cours continue donc avec photoshop :)

Commencez d'abord à travailler avec des aplats. Inutile de détailler pour l'instant: il faut d'abord que vous choisissiez la dominante des vêtements ainsi que de la peau et des cheveux. Essayez de limiter le nombre de couleurs : d'une part c'est plus agréable à voir et d'autre part, et cela vaut surtout pour un jeu 256 couleurs, une surchage de couleurs entrainerait une perte de qualité lors du passage Photoshop -> TGF/MMF
Ne vous occupez pas encore de la tête, celle-ci viendra à la fin.

Note: n'oubliez pas que dans Photoshop, il faut d'abord selectionner avant de colorier. Utilisez la baguette magique avec une tolérance de zéro, sinon vous vous retrouveriez avec des pixels non coloriés.


Maintenant passons aux ombres: le mieux est de débuter par les vetements, pour pouvoir ainsi regler optimalement la peau et les cheveux, par rapport à ces vetements. Comme montré sur le dessin, selectionnez un aplat (baguette magique ou menu Selection - Plage de couleurs), puis travaillez au crayon, en essayant d'être le plus réaliste possible, tout en gardant un coté simplifié et clair, pour ne pas encore une fois aggresser le joueur.
Faites en sorte que les ombres s'adaptent aux deux directions (gauche et droite) de votre personnage.
Vous eviterez ainsi un travail long et fastidieux (et pas forcément utile)


Le travail de la tête est toujours un moment délicat: peu de place alors qu'il faut detailler. Commencez par bien placer les yeux, puis mettez votre ombrage. Pour la bouche, choisissez une couleur plus sombre que l'ombrage mais pas noire (apres tout les levres ne sont pas noires ^^). Pour le nez, un trait d'ombre suffit. N'oubliez pas que la tête est le point le plus important d'un être vivant: c'est lui qui fait passer les émotions et qui rend le personnage charismatique. Alors passez du temps dessus !


Un bon sprite en pixel art est un sprite qui, tout en accentuant le côté pixellisé, fait ressortir une sensation de propreté et de réalisme. C'est pour cela qu'il faut être soigneux et surtout rigoureux: ne vous contentez pas d'à-peu-près, la taille des sprites ne le permet pas.

Si le sprite réalisé est un sprite pour un jeu vidéo, il est important d'optimiser le temps de création. Vous n'etes pas une boite professionnelle: si votre sprite fait 300 pixels de haut, avec plein de détails partout et 50 couleurs différentes, vous allez très vite être découragé par l'amplitude de la tâche (il faut aussi l'animer ce sprite !).
Simplicité, originalité et propreté, voila ce qui définit un bon dessin en pixel art.


Voila ! La première annexe est terminée. Il y en aura d'autres, mais il va falloir attendre un peu ^^ J'espere vous avoir aidés à comprendre les bases (on va dire ça) du pixel art. Si vous avez des questions, pas de problèmes, c'est par ici

EssaimE

Pixel art et réalisme: première partie
Pixel art et réalisme: deuxieme partie
Annexe 2: Une histoire de palettes