Clikmag>Dossiers >Pixel-art: Annexe 1 |
Pixel art 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 ^^ |
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: |
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 :) |
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 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. |
![]() |
![]() |
|
|
![]() |
![]() |
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 !). |
![]() |
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