Les développeurs indépendants doivent souvent combiner plusieurs rôles à la fois : concepteur de jeux, programmeur, compositeur, artiste. Et lorsqu’il s’agit de visuels, de nombreuses personnes choisissent le pixel art – à première vue, cela semble simple. Mais pour le rendre beau, il faut beaucoup d'expérience et certaines compétences. J'ai trouvé un tutoriel pour ceux qui viennent de commencer à comprendre les bases de ce style : avec une description de logiciels spéciaux et de techniques de dessin en utilisant deux sprites comme exemple.
fond
Le pixel art est une forme d'art numérique dans laquelle des modifications sont apportées au niveau des pixels. Il est principalement associé aux graphismes de jeux vidéo des années 80 et 90. Les artistes ont ensuite dû tenir compte des limitations de mémoire et de faible résolution. Aujourd'hui, le pixel art est toujours populaire dans les jeux et en tant que style artistique en général, malgré la possibilité de créer des graphiques 3D réalistes. Pourquoi? Même au-delà de la nostalgie, créer un travail sympa dans un cadre aussi rigide est un défi agréable et enrichissant.
La barrière à l’entrée dans le pixel art est relativement faible par rapport à l’art traditionnel et au graphisme 3D, ce qui attire les développeurs indépendants. Mais cela ne veut pas dire que ce sera facile terminer jeu dans ce style. J'ai vu de nombreux développeurs indépendants avec des metroidvanias pixel art sur des plateformes de financement participatif. Ils pensaient pouvoir tout terminer en un an, mais en réalité, il leur fallait encore six ans.
Metal Slug 3 (Arcade). SNK, année 2000
Le pixel art au niveau que la plupart des gens souhaitent créer prend du temps, et les courts didacticiels sont rares. Lorsque vous travaillez avec un modèle 3D, vous pouvez le faire pivoter, le déformer, déplacer ses différentes parties, copier des animations d'un modèle à un autre, etc. Le pixel art de haut niveau demande presque toujours beaucoup d’efforts pour placer méticuleusement les pixels sur chaque image.
En général, j'ai prévenu.
Et maintenant un peu de mon style : je dessine principalement du pixel art pour les jeux vidéo et j'y trouve mon inspiration. Je suis particulièrement fan de la 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 l’époque peut être décrit comme brillant, confiant et propre (mais pas trop), il n’est ni dur ni minimaliste. Je travaille moi-même dans ce style, mais vous pouvez facilement appliquer les idées et techniques de ce tutoriel pour créer des choses complètement différentes. Explorez le travail de différents artistes et créez le pixel art que vous aimez !
Logiciel
Outils numériques de base pour le pixel art - Zoom (Zoom) et Crayon (Pencil) pour placer les pixels. Vous aurez également besoin de Ligne (Ligne), Figure (Forme), Sélection (Sélection), Déplacement (Déplacement) et Remplissage (Seau de peinture). Il existe de nombreux logiciels gratuits et payants dotés d’un tel ensemble d’outils. Je parlerai des plus populaires et de ceux que j'utilise moi-même.
Peinture (Gratuit)
Si vous avez Windows, Paint est intégré - un programme primitif, mais il possède tous les outils pour le pixel art.
(est libre)
Un éditeur de pixel art étonnamment fonctionnel qui s'exécute via le navigateur. Vous pouvez exporter votre travail au format PNG ou GIF animé. Excellente option pour les débutants.
(est libre)
GraphicsGale est le seul éditeur dont j'ai entendu parler spécialement conçu pour le pixel art et qui inclut des outils d'animation. Il a été créé par la société japonaise HUMANBALANCE. Depuis 2017, il est distribué gratuitement et est toujours demandé, malgré la popularité croissante d'Aseprite. Malheureusement, cela ne fonctionne que sous Windows.
($)
Peut-être l'éditeur le plus populaire du moment. , des tonnes de fonctionnalités, un support actif, des versions pour Windows, Mac et Linux. Si vous êtes sérieux au sujet du pixel art et que vous n'avez toujours pas trouvé le bon éditeur, celui-ci pourrait être fait pour vous.
($$+)
GameMaker Studio 2 est un excellent outil 2D doté d'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. Maintenant, j'utilise ce logiciel dans mon travail sur , une collection de 50 jeux rétro : je crée des sprites et des animations dans GameMaker, et des jeux de tuiles dans Photoshop.
($$$+)
Photoshop est un logiciel coûteux, distribué par abonnement, non conçu pour le pixel art. Je ne recommande pas de l'acheter, sauf si vous aimez les illustrations haute résolution ou si vous n'avez pas besoin de procéder à des manipulations d'images complexes comme je le fais. Vous pouvez y créer des sprites statiques et du pixel art, mais c'est assez complexe par rapport aux logiciels spécialisés (comme GraphicsGale ou Aseprite).
autre
Mon kit de pixel art. Tout est noir, je viens de le remarquer.
Tablette graphique ($$+)
Je recommande les tablettes graphiques pour tout travail d'illustration numérique afin d'éviter le syndrome du canal carpien. Il est bien plus facile de prévenir que de guérir. Un jour, vous ressentirez la douleur et elle ne fera qu'empirer : prenez soin de vous dès le début. Étant donné que je dessinais avec une souris, j'ai maintenant du mal à jouer à des jeux qui nécessitent d'appuyer sur des touches. J'utilise actuellement Wacom Intuos Pro S.
Support de poignet ($)
Si vous ne pouvez pas vous procurer une tablette, achetez au moins un pied à coulisse. Mon préféré est l’orthèse de poignet ajustée verte Mueller. Les autres sont soit trop serrés, soit offrent un soutien insuffisant. Les étriers peuvent être commandés en ligne sans aucun problème.
96 × 96 pixels
combat final. Capcom, 1989
Commençons! Commençons par un sprite de personnage de 96 x 96 px. A titre d'exemple, j'ai dessiné un orc et je l'ai mis sur la capture d'écran de Final Fight (photo ci-dessus) pour que vous obteniez l'échelle. Ce grand sprite pour la plupart des jeux rétro, taille de la capture d'écran : 384 × 224 pixels.
Sur un sprite aussi grand, il sera plus facile de montrer la technique dont je veux parler. De plus, le rendu pixel par pixel s'apparente davantage à des formes d'art traditionnelles (comme le dessin ou la peinture) que vous connaissez peut-être mieux. Après avoir 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 tout autre domaine numérique. Le pixel art est défini par ses limites, comme les couleurs. Il est important de choisir la bonne palette, elle vous aidera à définir votre style. Mais au début, je suggère de ne pas penser aux palettes et d'en choisir une parmi celles existantes (ou juste quelques couleurs aléatoires) - vous pouvez facilement la changer à tout moment.
Pour ce tutoriel, j'utiliserai la 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. Le nôtre est conçu pour une console fictive qui pourrait apparaître quelque part entre la Famicom et le PC Engine. Vous pouvez le prendre ou n'importe quel autre - le tutoriel ne dépend pas du tout de la palette choisie.
2. Contours bruts
Commençons à dessiner avec l'outil Crayon. Dessinons le croquis de la même manière qu'avec un stylo et du papier ordinaires. Bien sûr, le pixel art et l’art traditionnel se chevauchent, surtout lorsqu’il s’agit de sprites aussi grands. Mes observations montrent que les artistes de pixel art forts sont au moins bons en dessin à main levée et vice versa. Il est donc toujours utile de développer ses compétences en dessin.
3. Contournage
Nous finalisons les contours : supprimons les pixels supplémentaires et réduisons l'épaisseur de chaque ligne à un pixel. Mais qu’est-ce qui est redondant exactement ? Pour répondre à cette question, vous devez comprendre les lignes et les bosses des pixels.
bosses
Vous devez apprendre à dessiner deux lignes de base en pixel art : les lignes droites et les courbes. Avec un stylo et du papier, tout est question de contrôle musculaire, mais nous travaillons avec de minuscules blocs de couleur.
La clé pour tracer des lignes de pixels appropriées est la rugosité. Ce sont des pixels uniques ou de petits segments qui détruisent la douceur de la ligne. Comme je l'ai déjà dit, un seul pixel est d'une grande importance dans le pixel art, donc les irrégularités peuvent gâcher toute l'esthétique. Imaginez que vous dessinez une ligne droite sur du papier et que soudain quelqu'un frappe la table : les bosses du pixel art ressemblent à un gribouillis aléatoire.
Exemples:
Direct
Les courbes
Des irrégularités apparaissent sur les courbes lorsque la longueur des segments de ligne n'augmente pas ou ne diminue pas progressivement.
Il est impossible d’éviter complètement les bosses : tous vos jeux rétro préférés en ont (à moins, bien sûr, que le pixel art soit entièrement composé de formes simples). Objectif : minimiser les irrégularités, tout en montrant tout ce dont vous avez besoin.
4. Application des premières couleurs
Colorez votre personnage avec un remplissage ou un autre outil approprié. La palette simplifiera cette partie du travail. Si le logiciel ne prévoit pas l'utilisation de palettes, vous pouvez le mettre directement dans l'image, comme dans l'exemple ci-dessus, et sélectionner les couleurs avec une pipette.
Dans le coin inférieur gauche, j'ai dessiné notre ami, faites connaissance, c'est Shar. Avec cela, il sera plus facile de comprendre ce qui se passe exactement à chaque étape.
5. Ombrage
Il est temps de restituer les ombres : ajoutez simplement des couleurs plus sombres au sprite. L'image aura donc un aspect tridimensionnel. Supposons que nous ayons une source de lumière située au-dessus de l'orc, à sa gauche. Cela signifie que tout ce qui se trouve au-dessus et devant notre personnage sera illuminé. Ajoutez des ombres en bas à droite.
Forme et volume
Si cette étape est difficile pour vous, imaginez votre dessin sous forme de formes tridimensionnelles, et pas seulement de lignes et de couleurs. Les formes existent dans l'espace XNUMXD et peuvent avoir un volume que nous construisons avec des ombres. Cela aidera à visualiser le personnage sans détails et à donner l'impression qu'il est fait d'argile au lieu de pixels. L'ombrage ne consiste pas seulement à ajouter de nouvelles couleurs, il s'agit également de créer une forme. Sur un personnage bien détaillé, les détails n'obscurcissent pas les formes de base : si vous plissez les yeux, vous verrez plusieurs grands amas de lumière et d'ombre.
Lissage (anti-aliasing, anti-aliasing)
Chaque fois que j'utilise une nouvelle couleur, j'applique un anti-aliasing (AA). Il permet de lisser les pixels en ajoutant des couleurs intermédiaires aux coins où se rencontrent deux segments de ligne :
Les pixels gris atténuent les « cassures » de la ligne. Plus le segment de ligne est long, plus le segment AA est long.
Voilà à quoi ressemble AA sur l'épaule de l'orc. Il est nécessaire de lisser les lignes qui représentent la courbe de ses muscles.
L'anti-aliasing ne doit pas aller au-delà du sprite qui sera utilisé dans le jeu ou sur un fond dont la couleur est inconnue. Par exemple, si vous appliquez AA sur un fond clair, l’anticrénelage aura l’air moche sur un fond sombre.
6. Contour sélectif
Auparavant, les contours étaient complètement noirs, ce qui donnait au sprite un aspect très caricatural. L’image semblait divisée en segments. Par exemple, les lignes noires sur le bras montrent la musculature de manière trop contrastée et le personnage paraît moins solide.
Si le sprite devient plus naturel et que la segmentation n'est pas si évidente, alors les formes de base du personnage seront plus faciles à lire. Pour ce faire, vous pouvez utiliser un contour sélectif - remplacez partiellement le contour noir par un plus clair. Sur la partie éclairée du sprite, vous pouvez utiliser les couleurs les plus claires ou, là où le sprite touche un espace négatif, vous pouvez supprimer complètement le contour. Au lieu du noir, vous devez utiliser la couleur choisie pour l'ombre - de cette façon, la segmentation sera préservée (pour distinguer les muscles, la fourrure, etc.).
À ce stade également, j'ai ajouté des ombres plus sombres. Il s'est avéré que trois dégradés de vert étaient présents sur la peau d'un orc. La couleur vert la plus foncée peut être utilisée pour le contour sélectif et l'AA.
7. Touches finales
À la fin, cela vaut la peine d'ajouter des reflets (les points les plus clairs sur le sprite), des détails (boucles d'oreilles, clous, cicatrices) et d'autres améliorations jusqu'à ce que le personnage soit prêt ou jusqu'à ce que vous deviez passer au suivant.
Plusieurs astuces utiles peuvent être appliquées à ce stade. Faites pivoter le dessin horizontalement, cela permet souvent de révéler des erreurs de proportions et d'ombrage. Vous pouvez également supprimer la couleur - définissez la saturation sur zéro pour comprendre où vous devez modifier les ombres.
Création de bruit (tramage, tramage)
Jusqu’à présent, nous avons principalement utilisé de grandes zones d’ombres solides. Mais il existe une autre technique : le tramage, qui permet de passer d'une couleur à une autre sans en ajouter une troisième. Regardez l'exemple ci-dessous.
Le dégradé supérieur sombre à clair utilise des centaines de nuances de bleu différentes.
Le dégradé du milieu n'utilise que neuf couleurs, mais il comporte encore trop de nuances de la même couleur. Il existe ce qu'on appelle le banding (de l'anglais band - a strip), dans lequel, en raison d'épaisses rayures uniformes, 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é un tramage qui évite les bandes et n'utilise que deux couleurs. Nous créons du bruit d'intensité variable pour simuler la gradation des couleurs. Cette technique est très similaire aux demi-teintes utilisées en impression ; ainsi que le pointillé (pointillé - image granuleuse) - dans l'illustration et la bande dessinée.
Sur l'orc, j'ai pas mal tergiversé pour transmettre la texture. Certains artistes pixel ne l'utilisent pas du tout, tandis que d'autres n'hésitent pas et le font très habilement. Je trouve que le tramage convient mieux aux grandes zones remplies d'une seule couleur (regardez le ciel dans la capture d'écran de Metal Slug ci-dessus) ou aux zones qui devraient paraître rugueuses et inégales (comme la saleté). Décidez vous-même comment l'utiliser.
Si vous souhaitez voir un exemple de tramage à grande échelle et de haute qualité, regardez les jeux de The Bitmap Brothers, un studio britannique des années 80, ou les jeux sur l'ordinateur PC-98. Gardez simplement à l’esprit qu’ils sont tous NSFW.
Kakyusei (PC-98). Elfe, 1996
Il n’y a que 16 couleurs dans cette image !
8. Dernier regard
L’un des dangers du pixel art est qu’il semble léger et simple (en raison des limites de sa structure et de son style). Mais au final, vous passerez énormément de temps à peaufiner vos sprites. C’est comme un puzzle qu’il faut résoudre, c’est pourquoi le pixel art séduit les perfectionnistes. N'oubliez pas qu'un sprite ne devrait pas prendre trop de temps : ce n'est qu'un petit morceau d'un ensemble de pièces extrêmement complexe. Il est important de ne pas perdre de vue la situation dans son ensemble.
Même si votre pixel art n'est pas destiné aux jeux, il est parfois utile de se dire : « C'est déjà assez bien ! Et avance. La meilleure façon de développer des compétences est de répéter l’ensemble du processus du début à la fin autant de fois que possible, en utilisant autant de sujets que possible.
Et parfois, il est utile de laisser un sprite pendant un moment pour pouvoir le regarder avec un œil neuf un peu plus tard.
32 × 32 pixels
Nous avons d'abord créé le grand sprite de 96 x 96 pixels, car à cette taille, cela ressemble plus à un dessin ou à une peinture, mais pixelisé. Plus le sprite est petit, moins il ressemble à ce qu’il devrait afficher et plus chaque pixel est important.
Dans Super Mario Bros. L'œil de Mario n'est constitué que de deux pixels empilés l'un au-dessus de l'autre. Et son oreille aussi. Le créateur du personnage, Shigeru Miyamoto, a déclaré que la moustache était nécessaire pour séparer le nez du reste du visage. Ainsi, l'une des principales caractéristiques du visage de Mario n'est pas seulement la conception du personnage, mais aussi une astuce pragmatique. Ce qui confirme la vieille sagesse : « le besoin est la mère de l'ingéniosité ».
Nous connaissons déjà les principales étapes de création d'un sprite de 32×32 pixels : croquis, couleur, ombres, raffinement supplémentaire. Mais dans de telles conditions, comme premier croquis, je sélectionne 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 des personnages que les contours. Regardez encore Mario, il n'a aucun contour. Les moustaches ne sont pas les seules à être intéressantes. Ses favoris définissent la forme de ses oreilles, les manches montrent ses bras et la forme générale reflète plus ou moins clairement l'ensemble de son corps.
Créer de petits sprites est un compromis constant. Si vous ajoutez un trait, vous risquez de perdre de l'espace pour l'ombre. Si votre personnage a des bras et des jambes clairement définis, la tête ne sera probablement pas très grosse. L'utilisation efficace de la couleur, des traits sélectifs et de l'anticrénelage fera paraître l'objet rendu plus grand qu'il ne l'est réellement.
Pour les petits sprites, j'aime le style chibi : les personnages sont très mignons, ils ont de grosses têtes et de gros yeux. Une belle manière de créer un caractère lumineux dans un espace restreint, et en général, un style très agréable. Mais peut-être avez-vous besoin de montrer la mobilité ou la force du personnage, vous pouvez alors donner moins d'espace à la tête pour donner au corps un aspect plus puissant. Tout dépend de vos préférences et de vos objectifs.
Toute l'équipe est là !
Formats de fichiers
Un tel résultat peut rendre nerveux n'importe quel artiste pixel
L'image que vous voyez est le résultat de l'enregistrement de l'image au format JPG. Une partie des données a été perdue à cause des algorithmes de compression de fichiers. Un pixel art de haute qualité finira par paraître mauvais et il ne sera pas facile de le ramener à sa palette d'origine.
Pour enregistrer une image statique sans perte de qualité, utilisez le format PNG. Pour les animations - GIF.
Comment partager correctement le pixel art
Partager du pixel art sur les réseaux sociaux est un excellent moyen d'obtenir des commentaires et de rencontrer d'autres artistes qui travaillent 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 rien demander, ce qui aggrave votre travail. Et la raison pour laquelle votre image a été convertie n'est pas toujours claire.
Il existe quelques conseils pour enregistrer le pixel art avec la bonne qualité pour différents réseaux sociaux.
Pour conserver le fichier PNG inchangé sur Twitter, utilisez moins de 256 couleurs, ou que votre fichier fait moins de 900 pixels de long. J'augmenterais la taille du fichier à au moins 512 x 512 pixels. Et pour que la mise à l'échelle soit un multiple de 100 (200 %, et non 250 %) et que les bords nets soient préservés (Nearest Neighbor dans Photoshop).
GIF animés pour les publications Twitter ne pèsent pas plus de 15 Mo. L'image doit mesurer au moins 800 x 800 pixels, l'animation en boucle doit être répétée trois fois et la dernière image doit être la moitié du temps de toutes les autres - la théorie la plus populaire. Cependant, il n’est pas clair dans quelle mesure ces exigences doivent être remplies, étant donné que Twitter modifie constamment ses algorithmes d’affichage des images.
Pour autant que je sache, il n’est pas possible de publier une photo sur Instagram sans perte de qualité. Mais cela sera certainement meilleur si vous l'augmentez à au moins 512 x 512 pixels.
Source: habr.com