Les développeurs indépendants doivent souvent assumer plusieurs rôles : game designer, programmeur, compositeur, artiste. Et lorsqu'il s'agit de visuels, beaucoup choisissent le pixel art — qui semble, à première vue, simple. Mais pour faire quelque chose de beau, il faut beaucoup d'expérience et des compétences spécifiques. J'ai trouvé un tutoriel pour ceux qui commencent à saisir les bases de ce style : avec une description des logiciels spéciaux et des techniques de dessin, à travers l'exemple de deux sprites.
Fond
Le pixel art est une forme d'art numérique où les modifications sont apportées au niveau des pixels. Il est principalement associé aux graphismes de jeux vidéo des années 80 et 90. À l'époque, les artistes devaient tenir compte des limites de mémoire et de la faible résolution. Aujourd'hui, le pixel art reste populaire dans les jeux et comme style artistique en général, malgré la possibilité de créer des graphismes 3D réalistes. Pourquoi ? Même en laissant de côté la nostalgie, créer une œuvre impressionnante dans de tels cadres stricts est un défi agréable et enrichissant.
La barrière à l'entrée dans le pixel art est relativement basse par rapport à l'art traditionnel et à la graphie 3D, ce qui attire les développeurs indépendants. Mais cela ne signifie pas que ce sera facile de finir un jeu dans ce style. J'ai vu beaucoup de développeurs indépendants avec des metroidvanias en pixel art sur des plateformes de crowdfunding. Ils pensaient que tout serait terminé en un an, mais en réalité, il leur faudrait encore six ans.
Metal Slug 3 (Arcade). SNK, 2000
Le pixel art au niveau auquel la plupart des gens veulent le créer prend beaucoup de temps, et il y a très peu de tutoriels succincts. En travaillant avec un modèle 3D, vous pouvez le faire tourner, le déformer, déplacer des parties individuelles, copier des animations d'un modèle à un autre, et ainsi de suite. Le pixel art de haut niveau demande presque toujours un énorme effort pour placer minutieusement les pixels sur chaque image.
En gros, je vous ai prévenu.
Maintenant, un peu sur mon style : je dessine principalement des pixel arts pour les jeux vidéo, qui m'inspirent également. Je suis particulièrement fan de Famicom/NES, des consoles 16 bits et des jeux d'arcade des années 90. Le pixel art de mes jeux préférés de cette époque peut être décrit comme coloré, audacieux et propre (mais pas trop), sans être dur ou minimaliste. C'est le style que j'utilise moi-même, mais vous pouvez facilement appliquer les idées et techniques de ce tutoriel pour créer des choses complètement différentes. Explorez les œuvres d'autres artistes et créez le pixel art qui vous plaît !
Logiciel
Outils numériques de base pour le pixel art - Zoom et Crayon, pour placer les pixels. Vous aurez également besoin de Ligne, Forme, Sélection, Déplacer et Pot de peinture. Il existe de nombreux logiciels gratuits et payants avec cet ensemble d'outils. Je vais parler des plus populaires et de ceux que j'utilise moi-même.
Paint (gratuit)
Si vous utilisez Windows, le Paint intégré est un programme primitif, mais il dispose de tous les outils nécessaires au pixel art.
(gratuit)
Un éditeur de pixel art étonnamment fonctionnel qui s'exécute via un navigateur. Vous pouvez exporter votre travail au format PNG ou GIF animé. Une excellente option pour les débutants.
(gratuit)
GraphicsGale est l'unique éditeur parmi ceux que j'ai entendus, conçu spécifiquement pour le pixel art et comprenant des outils d'animation. Il a été créé par la société japonaise HUMANBALANCE. Depuis 2017, il est distribué gratuitement et reste populaire, malgré la montée en popularité d'Aseprite. Malheureusement, il ne fonctionne que sur Windows.
($)
Probablement l'éditeur le plus populaire à l'heure actuelle. , de nombreuses fonctionnalités, un support actif, des versions pour Windows, Mac et Linux. Si vous vous engagez sérieusement dans le pixel art et que vous n'avez toujours pas trouvé l'éditeur qu'il vous faut, c'est peut-être celui-là.
($$+)
GameMaker Studio 2 est un excellent outil 2D avec un bon éditeur de sprites. Si vous souhaitez créer du pixel art pour vos propres jeux, il est très pratique de tout faire dans un seul programme. En ce moment, j'utilise ce logiciel pour travailler sur , une collection de 50 jeux rétro : je crée les sprites et les animations dans GameMaker, et les tilesets dans Photoshop.
($$$+)
Photoshop — un logiciel coûteux, distribué par abonnement, qui n'est pas adapté pour le pixel art. Je ne le recommande pas si vous ne faites pas d'illustrations haute résolution, ou si vous n'avez pas besoin de manipulations complexes d'images, comme moi. Il est possible de créer des sprites statiques et des œuvres pixelisées, mais il est assez complexe par rapport à des logiciels spécialisés (comme GraphicsGale ou Aseprite).
Autre
Mon kit pour le pixel art. Tout est noir, je viens de le remarquer.
Tablette graphique ($$+)
Je recommande des tablettes graphiques pour tout travail avec des illustrations numériques, afin d'éviter le syndrome du tunnel carpien. Il est beaucoup plus facile de le prévenir que de le guérir. Un jour, vous ressentirez de la douleur, et elle ne fera que s'intensifier — prenez soin de vous dès le départ. Étant donné que j'ai dessiné avec une souris à un moment donné, il m'est maintenant difficile de jouer à des jeux où il faut appuyer sur les touches. J'utilise maintenant une Wacom Intuos Pro S.
Maintien du poignet ($)
Si vous ne pouvez pas acheter de tablette, achetez au moins un maintien du poignet. Je préfère de loin le Mueller Green Fitted Wrist Brace. Les autres sont soit trop serrés, soit offrent un soutien insuffisant. Les supports peuvent être commandés facilement en ligne.
96×96 pixels
Final Fight. Capcom, 1989
Allons-y ! Commençons par le sprite du personnage de 96×96 pixels. Pour l'exemple, j'ai dessiné un orc et l'ai placé sur une capture d'écran de Final Fight (image ci-dessus) pour que vous compreniez l'échelle. C'est un gros sprite pour la plupart des jeux rétro, taille de la capture d'écran : 384×224 pixels.
Avec un sprite aussi grand, il est plus facile de montrer la technique dont je veux parler. De plus, le dessin pixel par pixel ressemble davantage aux formes d'art traditionnelles (comme le dessin ou la peinture) avec lesquelles vous êtes peut-être plus familier. Une fois que vous aurez maîtrisé les techniques de base, nous passerons à des sprites plus petits.
1. Choisissez une palette
Le pixel est un concept beaucoup plus profond dans le pixel art que dans d'autres domaines numériques. Le pixel art est défini par ses limitations, par exemple, les couleurs. Il est important de choisir la bonne palette, elle aidera à définir votre style. Mais au départ, je propose de ne pas penser aux palettes et de choisir l'une des existantes (ou simplement quelques couleurs aléatoires) — vous pouvez facilement la changer à n'importe quel moment.
Pour ce tutoriel, je vais utiliser une palette de 32 couleurs que nous avons créée pour . Pour le pixel art, ils sont souvent assemblés à partir de 32 ou 16 couleurs. Notre palette a été développée pour une console imaginaire qui aurait pu apparaître quelque part entre le Famicom et le PC Engine. Vous pouvez l'utiliser ou en choisir une autre : le tutoriel n'est pas du tout dépendant de la palette choisie.
2. Contours grossiers
Commençons à dessiner avec l'outil Crayon. Dessinons un croquis comme nous le ferions avec un stylo et du papier traditionnels. Bien sûr, le pixel art et l'art traditionnel se croisent, surtout lorsqu'il s'agit de sprites de grande taille. Mes observations montrent que les artistes du pixel art qui excellent ont au moins une bonne maîtrise du dessin manuel, et vice versa. Il est donc toujours utile de développer ses compétences en dessin.
3. Travailler les contours
Affinons les contours : supprimons les pixels superflus et réduisons l'épaisseur de chaque ligne à un pixel. Mais qu'est-ce qu'on considère comme superflu ? Pour répondre à cette question, il faut se pencher sur les lignes pixelisées et les irrégularités.
Irrégularités
Il faut apprendre à dessiner deux lignes de base en pixel art : droites et courbes. Avec un stylo et du papier, tout repose sur le contrôle musculaire, mais nous travaillons avec de minuscules blocs colorés.
La clé pour dessiner des lignes pixelisées correctes est les irrégularités. Ce sont des pixels individuels ou de petits segments qui perturbent la douceur de la ligne. Comme je l'ai mentionné, un seul pixel a une énorme importance dans le pixel art, donc les irrégularités peuvent ruiner toute l'esthétique. Imaginez que vous tracez une ligne droite sur du papier et que soudain, quelqu'un frappe la table : les irrégularités en pixel art ressemblent à un gribouillis accidentel.
Exemples :
Lignes droites
Courbes
Les irrégularités apparaissent sur les courbes lorsque la longueur des segments de la ligne augmente ou diminue de manière abrupte.
Il est impossible d'éviter complètement les irrégularités : elles existent dans tous vos jeux rétro préférés (sauf si, bien sûr, le pixel art se compose uniquement de formes simples). L'objectif : réduire les irrégularités au minimum, tout en montrant tout ce qui est nécessaire.
4. Application des premières couleurs
Coloriez votre personnage à l'aide d'un remplissage ou d'un autre outil approprié. La palette simplifiera cette partie du travail. Si le logiciel ne permet pas l'utilisation de palettes, vous pouvez l'intégrer directement dans l'image, comme sur l'exemple ci-dessus, et choisir les couleurs avec la pipette.
Dans le coin inférieur gauche, j'ai dessiné notre ami, voici — Char. Cela facilitera la compréhension de ce qui se passe à chaque étape.
5. Ombres
Il est temps d'ajouter des ombres — il suffit d'ajouter des couleurs plus sombres sur le sprite. Cela donnera du volume à l'image. Supposons que nous avons une source de lumière, située au-dessus de l'orc, légèrement sur le côté. Ainsi, tout ce qui se trouve au-dessus et devant notre personnage sera éclairé. Ajoutons des ombres en bas à droite.
Forme et volume
Si cette étape vous pose des difficultés, imaginez votre dessin comme des formes volumétriques, et non comme de simples lignes et couleurs. Les formes existent dans un espace tridimensionnel et peuvent avoir du volume, que nous construisons grâce aux ombres. Cela aidera à visualiser le personnage sans les détails et à imaginer qu'il est fait d'argile, et non de pixels. Le shading n'est pas simplement l'ajout de nouvelles couleurs, c'est un processus de construction de la forme. Sur un personnage bien conçu, les détails ne cachent pas les formes de base : si vous plissez les yeux, vous verrez plusieurs grands clusters de lumière et d'ombre.
Antialiasing
Chaque fois que j'utilise une nouvelle couleur, j'applique de l'antialiasing (AA). Cela aide à adoucir les pixels en ajoutant des couleurs intermédiaires aux coins, là où deux segments de ligne se touchent :
Les pixels gris adoucissent les "coupures" dans la ligne. Plus le segment de ligne est long, plus le segment d'AA sera long.
Voici à quoi ressemble l'AA sur l'épaule de l'orc. Il est nécessaire pour lisser les lignes qui montrent les courbes de ses muscles.
L'antialiasing ne doit pas dépasser les limites du sprite, qui sera utilisé dans le jeu ou sur un fond dont la couleur est inconnue. Par exemple, si vous appliquez un AA sur un fond clair, sur un fond foncé, l'antialiasing ne sera pas esthétique.
6. Contour sélectif
Auparavant, les contours étaient complètement noirs, ce qui donnait un aspect très cartoonesque au sprite. L'image semblait être divisée en segments. Par exemple, les lignes noires sur le bras contrastent trop avec la musculature, et le personnage semble moins cohérent.
Si le sprite devient plus naturel et que la segmentation est moins évidente, les formes de base du personnage seront plus faciles à lire. Pour cela, on peut utiliser un contour sélectif — remplacer partiellement le contour noir par une teinte plus claire. Sur la partie éclairée du sprite, des couleurs très claires peuvent être utilisées ou, là où le sprite touche l'espace négatif, le contour peut être complètement supprimé. Au lieu de noir, on doit utiliser la couleur choisie pour l'ombre — cela permettra de maintenir la segmentation (pour délimiter les muscles, la fourrure, etc.).
À ce stade, j'ai également ajouté des ombres plus sombres. Trois nuances de vert ont été appliquées sur la peau de l'orc. La couleur vert foncé peut être utilisée pour le contour sélectif et l'AA.
7. Touches finales
À la fin, il convient d'ajouter des reflets (les endroits les plus clairs sur le sprite), des détails (boucles d'oreilles, rivets, cicatrices) et d'autres améliorations, jusqu'à ce que le personnage soit prêt ou qu'il faille passer à autre chose.
Il existe plusieurs techniques utiles que l'on peut appliquer à ce stade. Retournez le dessin horizontalement, cela aide souvent à repérer les erreurs de proportions et d'ombrage. Vous pouvez également supprimer la couleur — régler la saturation à zéro pour comprendre où il faut changer les ombres.
Création de bruit (dithering)
Jusqu'à présent, nous avons principalement utilisé de grandes zones de teintes unies. Mais il existe une autre technique — le dithering, qui permet de passer d'une couleur à une autre sans ajouter de troisième couleur. Regardez l'exemple ci-dessous.
Le dégradé supérieur allant du sombre au clair utilise des centaines de nuances différentes de bleu.
Le dégradé moyen utilise seulement neuf couleurs, mais il contient encore trop de nuances d'une seule couleur. Cela crée ce qu'on appelle le banding, où à cause de larges bandes homogènes, l'œil se concentre sur les points de contact des couleurs, plutôt que sur les couleurs elles-mêmes.
Sur le dégradé inférieur, nous avons appliqué le dithering, qui permet d'éviter le banding et n'emploie que deux couleurs. Nous créons du bruit de différentes intensités pour imiter la graduation des couleurs. Cette technique est très similaire au halftone, utilisé en impression, ainsi qu'au stippling, utilisé dans l'illustration et les bandes dessinées.
Dans le pixel art, j'ai utilisé un peu de désérisation pour transmettre la texture. Certains artistes pixelisés ne l'utilisent pas du tout, d'autres, au contraire, n'hésitent pas à le faire et le maîtrisent très bien. Je pense que la désérisation rend le mieux sur de grandes zones remplies d'une seule couleur (regardez le ciel sur la capture d'écran de Metal Slug, qui était au-dessus) ou sur les zones qui doivent paraître rugueuses et inégales (comme la boue). Décidez vous-même comment l'utiliser.
Si vous voulez voir un exemple de désérisation à grande échelle et de qualité, étudiez les jeux de The Bitmap Brothers, un studio britannique des années 80, ou les jeux sur PC-98. N'oubliez pas que tous sont NSFW.
Kakyusei (PC-98). Elf, 1996
Cette image ne compte que 16 couleurs !
8. Dernier regard
Un des dangers du pixel art est qu'il semble facile et simple (à cause de sa structure et des limitations du style). Mais en fin de compte, vous passerez beaucoup de temps à peaufiner vos sprites. C'est comme un puzzle à résoudre — c'est pourquoi le pixel art attire les perfectionnistes. Rappelez-vous qu'un sprite ne doit pas prendre trop de temps — c'est juste un petit morceau d'un ensemble extrêmement complexe de morceaux. Il est important de ne pas perdre de vue l'image globale.
Même si votre pixel art n'est pas destiné aux jeux, il vaut parfois la peine de se dire : « Tout est déjà assez bien ! » et de passer à autre chose. Le meilleur moyen de développer ses compétences est de passer par l'ensemble du processus de A à Z le plus souvent possible, en utilisant le plus de thèmes possibles.
Et il est parfois utile de laisser le sprite de côté un moment pour le revoir plus tard avec un regard frais.
32×32 pixels
Nous avons d'abord créé un grand sprite de 96×96 pixels, car à cette taille, cela ressemble davantage à du dessin ou à de la peinture, mais uniquement avec des pixels. Plus le sprite est petit, moins il ressemble à ce qu'il est censé afficher, et plus chaque pixel devient important.
Dans Super Mario Bros., l'œil de Mario n'est que deux pixels, l'un au-dessus de l'autre. Son oreille aussi. Le créateur du personnage, Shigeru Miyamoto, a dit que la moustache était nécessaire pour séparer le nez du reste du visage. Ainsi, une des caractéristiques majeures du visage de Mario est non seulement le design du personnage, mais aussi une astuce pragmatique. Ce qui confirme le vieux proverbe — « Le besoin est la mère de l'invention ».
Les étapes principales pour créer un sprite de 32×32 pixels nous sont déjà familières : croquis, couleur, ombres, retouches ultérieures. Cependant, dans ces conditions, en tant que croquis initial, je choisis des formes colorées au lieu de dessiner des contours en raison de leur petite taille. La couleur joue un rôle plus important dans la définition du personnage que les contours. Regardez Mario encore une fois, il n'a pas de contours du tout. Ses moustaches ne sont pas les seules intéressantes. Ses favoris déterminent la forme de ses oreilles, les manches montrent ses bras, et la forme générale rend assez clairement l'ensemble de son corps.
Créer de petits sprites implique constamment des compromis. Si vous ajoutez un contour, vous risquez de perdre de l'espace pour l'ombre. Si les bras et les jambes de votre personnage sont clairement visibles, sa tête ne doit probablement pas être trop grande. Si vous utilisez efficacement la couleur, le contour sélectif et le lissage, l'objet dessiné semblera plus grand qu'il ne l'est réellement.
Pour les petits sprites, j'aime le style chibi : les personnages ont un aspect très mignon, avec de grandes têtes et de grands yeux. C'est un excellent moyen de créer un héros lumineux dans un espace limité, et c'est un style très agréable en général. Mais si vous devez montrer la mobilité ou la force du personnage, vous pouvez accorder moins d'espace à la tête pour que le corps ait l'air plus puissant. Tout dépend de vos préférences et de vos objectifs.
L'équipe est au complet !
Formats de fichiers
Un tel résultat peut rendre nerveux n'importe quel pixel artist.
L'image que vous voyez est le résultat de l'enregistrement du dessin au format JPG. Une partie des données a été perdue à cause des algorithmes de compression. Un pixel art de qualité finira par avoir une mauvaise apparence, et il ne sera pas facile de retrouver sa palette d'origine.
Pour enregistrer une image statique sans perte de qualité, utilisez le format PNG. Pour les animations, utilisez le GIF.
Comment bien partager du pixel art
Partager du pixel art sur les réseaux sociaux est un excellent moyen d'obtenir des retours et de rencontrer d'autres artistes travaillant dans le même style. N'oubliez pas d'utiliser le hashtag #pixelart. Malheureusement, les réseaux sociaux convertissent souvent les PNG en JPG sans autorisation, dégradant ainsi votre travail. Et il n'est pas toujours clair pourquoi votre image a été convertie.
Il existe quelques conseils pour conserver le pixel art dans la qualité requise pour divers réseaux sociaux.
Pour que le fichier PNG ne soit pas modifié sur Twitter, utilisez moins de 256 couleurs ou , que votre fichier mesure moins de 900 pixels sur le côté le plus long. Je recommanderais d'augmenter la taille du fichier à au moins 512×512 pixels. De plus, veillez à ce que le redimensionnement soit un multiple de 100 (200 %, et non 250 %) et que les bords restent nets (Voisin le plus proche dans Photoshop).
Les fichiers GIF animés pour les publications sur Twitter avoir une taille maximale de 15 Mo. L'image doit mesurer au moins 800×800 pixels, l'animation en boucle doit se répéter trois fois, et la dernière image doit durer la moitié du temps par rapport aux autres—c'est la théorie la plus populaire. Cependant, il est difficile de savoir dans quelle mesure il est nécessaire de respecter ces exigences, étant donné que Twitter modifie constamment ses algorithmes d'affichage des images.
À ma connaissance, il est impossible de publier une image sur Instagram sans perte de qualité. Mais elle aura sûrement meilleur aspect si vous l'augmentez à au moins 512×512 pixels.
Source : habr.com
