{"id":54617,"date":"2019-12-30T00:00:00","date_gmt":"2019-12-29T21:00:00","guid":{"rendered":"https:\/\/prohoster.info\/blog\/blog_prohoster\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu"},"modified":"2020-02-18T14:02:39","modified_gmt":"2020-02-18T11:02:39","slug":"piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","status":"publish","type":"post","link":"https:\/\/prohoster.info\/fr\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","title":{"rendered":"Pixel art pour d\u00e9butants : guide d'utilisation","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Pixel
\n
\nLes d\u00e9veloppeurs ind\u00e9pendants doivent souvent assumer plusieurs r\u00f4les : game designer, programmeur, compositeur, artiste. Et lorsqu'il s'agit de visuels, beaucoup choisissent le pixel art \u2014 qui semble, \u00e0 premi\u00e8re vue, simple. Mais pour faire quelque chose de beau, il faut beaucoup d'exp\u00e9rience et des comp\u00e9tences sp\u00e9cifiques. J'ai trouv\u00e9 un tutoriel pour ceux qui commencent \u00e0 saisir les bases de ce style : avec une description des logiciels sp\u00e9ciaux et des techniques de dessin, \u00e0 travers l'exemple de deux sprites.<\/a><\/noindex><\/p>\n

Fond<\/h2>\n

\nLe pixel art est une forme d'art num\u00e9rique o\u00f9 les modifications sont apport\u00e9es au niveau des pixels. Il est principalement associ\u00e9 aux graphismes de jeux vid\u00e9o des ann\u00e9es 80 et 90. \u00c0 l'\u00e9poque, les artistes devaient tenir compte des limites de m\u00e9moire et de la faible r\u00e9solution. Aujourd'hui, le pixel art reste populaire dans les jeux et comme style artistique en g\u00e9n\u00e9ral, malgr\u00e9 la possibilit\u00e9 de cr\u00e9er des graphismes 3D r\u00e9alistes. Pourquoi ? M\u00eame en laissant de c\u00f4t\u00e9 la nostalgie, cr\u00e9er une \u0153uvre impressionnante dans de tels cadres stricts est un d\u00e9fi agr\u00e9able et enrichissant.<\/p>\n

La barri\u00e8re \u00e0 l'entr\u00e9e dans le pixel art est relativement basse par rapport \u00e0 l'art traditionnel et \u00e0 la graphie 3D, ce qui attire les d\u00e9veloppeurs ind\u00e9pendants. Mais cela ne signifie pas que ce sera facile de finir<\/b> un jeu dans ce style. J'ai vu beaucoup de d\u00e9veloppeurs ind\u00e9pendants avec des metroidvanias en pixel art sur des plateformes de crowdfunding. Ils pensaient que tout serait termin\u00e9 en un an, mais en r\u00e9alit\u00e9, il leur faudrait encore six ans. <\/p>\n

\"Pixel
\nMetal Slug 3 (Arcade). SNK, 2000<\/i><\/p>\n

Le pixel art au niveau auquel la plupart des gens veulent le cr\u00e9er prend beaucoup de temps, et il y a tr\u00e8s peu de tutoriels succincts. En travaillant avec un mod\u00e8le 3D, vous pouvez le faire tourner, le d\u00e9former, d\u00e9placer des parties individuelles, copier des animations d'un mod\u00e8le \u00e0 un autre, et ainsi de suite. Le pixel art de haut niveau demande presque toujours un \u00e9norme effort pour placer minutieusement les pixels sur chaque image.<\/p>\n

En gros, je vous ai pr\u00e9venu.<\/p>\n

Maintenant, un peu sur mon style : je dessine principalement des pixel arts pour les jeux vid\u00e9o, qui m'inspirent \u00e9galement. Je suis particuli\u00e8rement fan de Famicom\/NES, des consoles 16 bits et des jeux d'arcade des ann\u00e9es 90. Le pixel art de mes jeux pr\u00e9f\u00e9r\u00e9s de cette \u00e9poque peut \u00eatre d\u00e9crit comme color\u00e9, audacieux et propre (mais pas trop), sans \u00eatre dur ou minimaliste. C'est le style que j'utilise moi-m\u00eame, mais vous pouvez facilement appliquer les id\u00e9es et techniques de ce tutoriel pour cr\u00e9er des choses compl\u00e8tement diff\u00e9rentes. Explorez les \u0153uvres d'autres artistes et cr\u00e9ez le pixel art qui vous pla\u00eet !<\/p>\n

Logiciel<\/h2>\n

\n\"Pixel
\n
\nOutils num\u00e9riques de base pour le pixel art - Zoom et Crayon, pour placer les pixels. Vous aurez \u00e9galement besoin de Ligne, Forme, S\u00e9lection, D\u00e9placer 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\u00eame.<\/p>\n

Paint (gratuit)<\/h3>\n

\nSi vous utilisez Windows, le Paint int\u00e9gr\u00e9 est un programme primitif, mais il dispose de tous les outils n\u00e9cessaires au pixel art.<\/p>\n

Piskel<\/a><\/noindex> (gratuit)<\/h3>\n

\nUn \u00e9diteur de pixel art \u00e9tonnamment fonctionnel qui s'ex\u00e9cute via un navigateur. Vous pouvez exporter votre travail au format PNG ou GIF anim\u00e9. Une excellente option pour les d\u00e9butants.<\/p>\n

GraphicsGale<\/a><\/noindex> (gratuit)<\/h3>\n

\nGraphicsGale est l'unique \u00e9diteur parmi ceux que j'ai entendus, con\u00e7u sp\u00e9cifiquement pour le pixel art et comprenant des outils d'animation. Il a \u00e9t\u00e9 cr\u00e9\u00e9 par la soci\u00e9t\u00e9 japonaise HUMANBALANCE. Depuis 2017, il est distribu\u00e9 gratuitement et reste populaire, malgr\u00e9 la mont\u00e9e en popularit\u00e9 d'Aseprite. Malheureusement, il ne fonctionne que sur Windows.<\/p>\n

Aseprite<\/a><\/noindex> ($)<\/h3>\n

\nProbablement l'\u00e9diteur le plus populaire \u00e0 l'heure actuelle. Code source ouvert<\/a><\/noindex>, de nombreuses fonctionnalit\u00e9s, un support actif, des versions pour Windows, Mac et Linux. Si vous vous engagez s\u00e9rieusement dans le pixel art et que vous n'avez toujours pas trouv\u00e9 l'\u00e9diteur qu'il vous faut, c'est peut-\u00eatre celui-l\u00e0.<\/p>\n

GameMaker Studio 2<\/a><\/noindex> ($$+)<\/h3>\n

\nGameMaker Studio 2 est un excellent outil 2D avec un bon \u00e9diteur de sprites. Si vous souhaitez cr\u00e9er du pixel art pour vos propres jeux, il est tr\u00e8s pratique de tout faire dans un seul programme. En ce moment, j'utilise ce logiciel pour travailler sur UFO 50<\/a><\/noindex>, une collection de 50 jeux r\u00e9tro : je cr\u00e9e les sprites et les animations dans GameMaker, et les tilesets dans Photoshop.<\/p>\n

Photoshop<\/a><\/noindex> ($$$+)<\/h3>\n

\nPhotoshop \u2014 un logiciel co\u00fbteux, distribu\u00e9 par abonnement, qui n'est pas adapt\u00e9 pour le pixel art. Je ne le recommande pas si vous ne faites pas d'illustrations haute r\u00e9solution, ou si vous n'avez pas besoin de manipulations complexes d'images, comme moi. Il est possible de cr\u00e9er des sprites statiques et des \u0153uvres pixelis\u00e9es, mais il est assez complexe par rapport \u00e0 des logiciels sp\u00e9cialis\u00e9s (comme GraphicsGale ou Aseprite).<\/p>\n

Autre<\/h2>\n

\n\"Pixel
\nMon kit pour le pixel art. Tout est noir, je viens de le remarquer.<\/i><\/p>\n

Tablette graphique ($$+)<\/h3>\n

\nJe recommande des tablettes graphiques pour tout travail avec des illustrations num\u00e9riques, afin d'\u00e9viter le syndrome du tunnel carpien. Il est beaucoup plus facile de le pr\u00e9venir que de le gu\u00e9rir. Un jour, vous ressentirez de la douleur, et elle ne fera que s'intensifier \u2014 prenez soin de vous d\u00e8s le d\u00e9part. \u00c9tant donn\u00e9 que j'ai dessin\u00e9 avec une souris \u00e0 un moment donn\u00e9, il m'est maintenant difficile de jouer \u00e0 des jeux o\u00f9 il faut appuyer sur les touches. J'utilise maintenant une Wacom Intuos Pro S.<\/p>\n

Maintien du poignet ($)<\/h3>\n

\nSi vous ne pouvez pas acheter de tablette, achetez au moins un maintien du poignet. Je pr\u00e9f\u00e8re de loin le Mueller Green Fitted Wrist Brace. Les autres sont soit trop serr\u00e9s, soit offrent un soutien insuffisant. Les supports peuvent \u00eatre command\u00e9s facilement en ligne.<\/p>\n

96\u00d796 pixels<\/h2>\n

\n\"Pixel
\nFinal Fight. Capcom, 1989<\/i><\/p>\n

Allons-y ! Commen\u00e7ons par le sprite du personnage de 96\u00d796 pixels. Pour l'exemple, j'ai dessin\u00e9 un orc et l'ai plac\u00e9 sur une capture d'\u00e9cran de Final Fight (image ci-dessus) pour que vous compreniez l'\u00e9chelle. C'est un gros<\/b> sprite pour la plupart des jeux r\u00e9tro, taille de la capture d'\u00e9cran : 384\u00d7224 pixels.<\/p>\n

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 \u00eates peut-\u00eatre plus familier. Une fois que vous aurez ma\u00eetris\u00e9 les techniques de base, nous passerons \u00e0 des sprites plus petits.<\/p>\n

1. Choisissez une palette<\/h2>\n

\n\"Pixel
\n
\nLe pixel est un concept beaucoup plus profond dans le pixel art que dans d'autres domaines num\u00e9riques. Le pixel art est d\u00e9fini par ses limitations, par exemple, les couleurs. Il est important de choisir la bonne palette, elle aidera \u00e0 d\u00e9finir votre style. Mais au d\u00e9part, je propose de ne pas penser aux palettes et de choisir l'une des existantes (ou simplement quelques couleurs al\u00e9atoires) \u2014 vous pouvez facilement la changer \u00e0 n'importe quel moment.<\/p>\n

Pour ce tutoriel, je vais utiliser une palette de 32 couleurs que nous avons cr\u00e9\u00e9e pour UFO 50<\/a><\/noindex>. Pour le pixel art, ils sont souvent assembl\u00e9s \u00e0 partir de 32 ou 16 couleurs. Notre palette a \u00e9t\u00e9 d\u00e9velopp\u00e9e pour une console imaginaire qui aurait pu appara\u00eetre 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\u00e9pendant de la palette choisie.<\/p>\n

2. Contours grossiers<\/h2>\n

\n\"Pixel
\n
\nCommen\u00e7ons \u00e0 dessiner avec l'outil Crayon. Dessinons un croquis comme nous le ferions avec un stylo et du papier traditionnels. Bien s\u00fbr, 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\u00eetrise du dessin manuel, et vice versa. Il est donc toujours utile de d\u00e9velopper ses comp\u00e9tences en dessin.<\/p>\n

3. Travailler les contours<\/h2>\n

\n\"Pixel
\n
\nAffinons les contours : supprimons les pixels superflus et r\u00e9duisons l'\u00e9paisseur de chaque ligne \u00e0 un pixel. Mais qu'est-ce qu'on consid\u00e8re comme superflu ? Pour r\u00e9pondre \u00e0 cette question, il faut se pencher sur les lignes pixelis\u00e9es et les irr\u00e9gularit\u00e9s.<\/p>\n

Irr\u00e9gularit\u00e9s<\/h3>\n

\nIl faut apprendre \u00e0 dessiner deux lignes de base en pixel art : droites et courbes. Avec un stylo et du papier, tout repose sur le contr\u00f4le musculaire, mais nous travaillons avec de minuscules blocs color\u00e9s.<\/p>\n

La cl\u00e9 pour dessiner des lignes pixelis\u00e9es correctes est les irr\u00e9gularit\u00e9s. Ce sont des pixels individuels ou de petits segments qui perturbent la douceur de la ligne. Comme je l'ai mentionn\u00e9, un seul pixel a une \u00e9norme importance dans le pixel art, donc les irr\u00e9gularit\u00e9s peuvent ruiner toute l'esth\u00e9tique. Imaginez que vous tracez une ligne droite sur du papier et que soudain, quelqu'un frappe la table : les irr\u00e9gularit\u00e9s en pixel art ressemblent \u00e0 un gribouillis accidentel.<\/p>\n

Exemples :<\/p>\n

\"Pixel
\nLignes droites<\/i><\/p>\n

\"Pixel
\nCourbes<\/i><\/p>\n

Les irr\u00e9gularit\u00e9s apparaissent sur les courbes lorsque la longueur des segments de la ligne augmente ou diminue de mani\u00e8re abrupte.<\/p>\n

Il est impossible d'\u00e9viter compl\u00e8tement les irr\u00e9gularit\u00e9s : elles existent dans tous vos jeux r\u00e9tro pr\u00e9f\u00e9r\u00e9s (sauf si, bien s\u00fbr, le pixel art se compose uniquement de formes simples). L'objectif : r\u00e9duire les irr\u00e9gularit\u00e9s au minimum, tout en montrant tout ce qui est n\u00e9cessaire.<\/p>\n

4. Application des premi\u00e8res couleurs<\/h2>\n

\n\"Pixel
\n
\nColoriez votre personnage \u00e0 l'aide d'un remplissage ou d'un autre outil appropri\u00e9. La palette simplifiera cette partie du travail. Si le logiciel ne permet pas l'utilisation de palettes, vous pouvez l'int\u00e9grer directement dans l'image, comme sur l'exemple ci-dessus, et choisir les couleurs avec la pipette.<\/p>\n

Dans le coin inf\u00e9rieur gauche, j'ai dessin\u00e9 notre ami, voici \u2014 Char. Cela facilitera la compr\u00e9hension de ce qui se passe \u00e0 chaque \u00e9tape.<\/p>\n

5. Ombres<\/h2>\n

\n\"Pixel
\n
\nIl est temps d'ajouter des ombres \u2014 il suffit d'ajouter des couleurs plus sombres sur le sprite. Cela donnera du volume \u00e0 l'image. Supposons que nous avons une source de lumi\u00e8re, situ\u00e9e au-dessus de l'orc, l\u00e9g\u00e8rement sur le c\u00f4t\u00e9. Ainsi, tout ce qui se trouve au-dessus et devant notre personnage sera \u00e9clair\u00e9. Ajoutons des ombres en bas \u00e0 droite.<\/p>\n

Forme et volume<\/h3>\n

\n\"Pixel
\n
\nSi cette \u00e9tape vous pose des difficult\u00e9s, imaginez votre dessin comme des formes volum\u00e9triques, et non comme de simples lignes et couleurs. Les formes existent dans un espace tridimensionnel et peuvent avoir du volume, que nous construisons gr\u00e2ce aux ombres. Cela aidera \u00e0 visualiser le personnage sans les d\u00e9tails et \u00e0 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\u00e7u, les d\u00e9tails ne cachent pas les formes de base : si vous plissez les yeux, vous verrez plusieurs grands clusters de lumi\u00e8re et d'ombre. <\/p>\n

Antialiasing<\/h3>\n

\nChaque fois que j'utilise une nouvelle couleur, j'applique de l'antialiasing (AA). Cela aide \u00e0 adoucir les pixels en ajoutant des couleurs interm\u00e9diaires aux coins, l\u00e0 o\u00f9 deux segments de ligne se touchent :<\/p>\n

\"Pixel
\n
\nLes pixels gris adoucissent les \"coupures\" dans la ligne. Plus le segment de ligne est long, plus le segment d'AA sera long.<\/p>\n

\"Pixel
\nVoici \u00e0 quoi ressemble l'AA sur l'\u00e9paule de l'orc. Il est n\u00e9cessaire pour lisser les lignes qui montrent les courbes de ses muscles.<\/i><\/p>\n

L'antialiasing ne doit pas d\u00e9passer les limites du sprite, qui sera utilis\u00e9 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\u00e9, l'antialiasing ne sera pas esth\u00e9tique.<\/p>\n

6. Contour s\u00e9lectif<\/h2>\n

\n\"Pixel
\n
\nAuparavant, les contours \u00e9taient compl\u00e8tement noirs, ce qui donnait un aspect tr\u00e8s cartoonesque au sprite. L'image semblait \u00eatre divis\u00e9e en segments. Par exemple, les lignes noires sur le bras contrastent trop avec la musculature, et le personnage semble moins coh\u00e9rent.<\/p>\n

Si le sprite devient plus naturel et que la segmentation est moins \u00e9vidente, les formes de base du personnage seront plus faciles \u00e0 lire. Pour cela, on peut utiliser un contour s\u00e9lectif \u2014 remplacer partiellement le contour noir par une teinte plus claire. Sur la partie \u00e9clair\u00e9e du sprite, des couleurs tr\u00e8s claires peuvent \u00eatre utilis\u00e9es ou, l\u00e0 o\u00f9 le sprite touche l'espace n\u00e9gatif, le contour peut \u00eatre compl\u00e8tement supprim\u00e9. Au lieu de noir, on doit utiliser la couleur choisie pour l'ombre \u2014 cela permettra de maintenir la segmentation (pour d\u00e9limiter les muscles, la fourrure, etc.).<\/p>\n

\u00c0 ce stade, j'ai \u00e9galement ajout\u00e9 des ombres plus sombres. Trois nuances de vert ont \u00e9t\u00e9 appliqu\u00e9es sur la peau de l'orc. La couleur vert fonc\u00e9 peut \u00eatre utilis\u00e9e pour le contour s\u00e9lectif et l'AA.<\/p>\n

7. Touches finales<\/h2>\n

\n\"Pixel
\n
\n\u00c0 la fin, il convient d'ajouter des reflets (les endroits les plus clairs sur le sprite), des d\u00e9tails (boucles d'oreilles, rivets, cicatrices) et d'autres am\u00e9liorations, jusqu'\u00e0 ce que le personnage soit pr\u00eat ou qu'il faille passer \u00e0 autre chose.<\/p>\n

Il existe plusieurs techniques utiles que l'on peut appliquer \u00e0 ce stade. Retournez le dessin horizontalement, cela aide souvent \u00e0 rep\u00e9rer les erreurs de proportions et d'ombrage. Vous pouvez \u00e9galement supprimer la couleur \u2014 r\u00e9gler la saturation \u00e0 z\u00e9ro pour comprendre o\u00f9 il faut changer les ombres.<\/p>\n

Cr\u00e9ation de bruit (dithering)<\/h3>\n

\nJusqu'\u00e0 pr\u00e9sent, nous avons principalement utilis\u00e9 de grandes zones de teintes unies. Mais il existe une autre technique \u2014 le dithering, qui permet de passer d'une couleur \u00e0 une autre sans ajouter de troisi\u00e8me couleur. Regardez l'exemple ci-dessous.<\/p>\n

\"Pixel
\n
\nLe d\u00e9grad\u00e9 sup\u00e9rieur allant du sombre au clair utilise des centaines de nuances diff\u00e9rentes de bleu. <\/p>\n

Le d\u00e9grad\u00e9 moyen utilise seulement neuf couleurs, mais il contient encore trop de nuances d'une seule couleur. Cela cr\u00e9e ce qu'on appelle le banding, o\u00f9 \u00e0 cause de larges bandes homog\u00e8nes, l'\u0153il se concentre sur les points de contact des couleurs, plut\u00f4t que sur les couleurs elles-m\u00eames.<\/p>\n

Sur le d\u00e9grad\u00e9 inf\u00e9rieur, nous avons appliqu\u00e9 le dithering, qui permet d'\u00e9viter le banding et n'emploie que deux couleurs. Nous cr\u00e9ons du bruit de diff\u00e9rentes intensit\u00e9s pour imiter la graduation des couleurs. Cette technique est tr\u00e8s similaire au halftone, utilis\u00e9 en impression, ainsi qu'au stippling, utilis\u00e9 dans l'illustration et les bandes dessin\u00e9es.<\/p>\n

Dans le pixel art, j'ai utilis\u00e9 un peu de d\u00e9s\u00e9risation pour transmettre la texture. Certains artistes pixelis\u00e9s ne l'utilisent pas du tout, d'autres, au contraire, n'h\u00e9sitent pas \u00e0 le faire et le ma\u00eetrisent tr\u00e8s bien. Je pense que la d\u00e9s\u00e9risation rend le mieux sur de grandes zones remplies d'une seule couleur (regardez le ciel sur la capture d'\u00e9cran de Metal Slug, qui \u00e9tait au-dessus) ou sur les zones qui doivent para\u00eetre rugueuses et in\u00e9gales (comme la boue). D\u00e9cidez vous-m\u00eame comment l'utiliser.<\/p>\n

Si vous voulez voir un exemple de d\u00e9s\u00e9risation \u00e0 grande \u00e9chelle et de qualit\u00e9, \u00e9tudiez les jeux de The Bitmap Brothers, un studio britannique des ann\u00e9es 80, ou les jeux sur PC-98. N'oubliez pas que tous sont NSFW.<\/p>\n

\"Pixel
\nKakyusei (PC-98). Elf, 1996
\nCette image ne compte que 16 couleurs !<\/i><\/p>\n

8. Dernier regard<\/h2>\n

\n\"Pixel
\n
\nUn des dangers du pixel art est qu'il semble facile et simple (\u00e0 cause de sa structure et des limitations du style). Mais en fin de compte, vous passerez beaucoup de temps \u00e0 peaufiner vos sprites. C'est comme un puzzle \u00e0 r\u00e9soudre \u2014 c'est pourquoi le pixel art attire les perfectionnistes. Rappelez-vous qu'un sprite ne doit pas prendre trop de temps \u2014 c'est juste un petit morceau d'un ensemble extr\u00eamement complexe de morceaux. Il est important de ne pas perdre de vue l'image globale.<\/p>\n

M\u00eame si votre pixel art n'est pas destin\u00e9 aux jeux, il vaut parfois la peine de se dire : \u00ab Tout est d\u00e9j\u00e0 assez bien ! \u00bb et de passer \u00e0 autre chose. Le meilleur moyen de d\u00e9velopper ses comp\u00e9tences est de passer par l'ensemble du processus de A \u00e0 Z le plus souvent possible, en utilisant le plus de th\u00e8mes possibles. <\/p>\n

Et il est parfois utile de laisser le sprite de c\u00f4t\u00e9 un moment pour le revoir plus tard avec un regard frais. <\/p>\n

32\u00d732 pixels<\/h2>\n

\n\"Pixel
\n
\nNous avons d'abord cr\u00e9\u00e9 un grand sprite de 96\u00d796 pixels, car \u00e0 cette taille, cela ressemble davantage \u00e0 du dessin ou \u00e0 de la peinture, mais uniquement avec des pixels. Plus le sprite est petit, moins il ressemble \u00e0 ce qu'il est cens\u00e9 afficher, et plus chaque pixel devient important.<\/p>\n

\"Pixel
\n
\nDans Super Mario Bros., l'\u0153il de Mario n'est que deux pixels, l'un au-dessus de l'autre. Son oreille aussi. Le cr\u00e9ateur du personnage, Shigeru Miyamoto, a dit que la moustache \u00e9tait n\u00e9cessaire pour s\u00e9parer le nez du reste du visage. Ainsi, une des caract\u00e9ristiques majeures du visage de Mario est non seulement le design du personnage, mais aussi une astuce pragmatique. Ce qui confirme le vieux proverbe \u2014 \u00ab Le besoin est la m\u00e8re de l'invention \u00bb.<\/p>\n

Les \u00e9tapes principales pour cr\u00e9er un sprite de 32\u00d732 pixels nous sont d\u00e9j\u00e0 famili\u00e8res : croquis, couleur, ombres, retouches ult\u00e9rieures. Cependant, dans ces conditions, en tant que croquis initial, je choisis des formes color\u00e9es au lieu de dessiner des contours en raison de leur petite taille. La couleur joue un r\u00f4le plus important dans la d\u00e9finition 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\u00e9ressantes. Ses favoris d\u00e9terminent la forme de ses oreilles, les manches montrent ses bras, et la forme g\u00e9n\u00e9rale rend assez clairement l'ensemble de son corps.<\/p>\n

Cr\u00e9er 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\u00eate ne doit probablement pas \u00eatre trop grande. Si vous utilisez efficacement la couleur, le contour s\u00e9lectif et le lissage, l'objet dessin\u00e9 semblera plus grand qu'il ne l'est r\u00e9ellement.<\/p>\n

Pour les petits sprites, j'aime le style chibi : les personnages ont un aspect tr\u00e8s mignon, avec de grandes t\u00eates et de grands yeux. C'est un excellent moyen de cr\u00e9er un h\u00e9ros lumineux dans un espace limit\u00e9, et c'est un style tr\u00e8s agr\u00e9able en g\u00e9n\u00e9ral. Mais si vous devez montrer la mobilit\u00e9 ou la force du personnage, vous pouvez accorder moins d'espace \u00e0 la t\u00eate pour que le corps ait l'air plus puissant. Tout d\u00e9pend de vos pr\u00e9f\u00e9rences et de vos objectifs.<\/p>\n

\"Pixel
\nL'\u00e9quipe est au complet !<\/i><\/p>\n

Formats de fichiers<\/h2>\n

\n\"Pixel
\nUn tel r\u00e9sultat peut rendre nerveux n'importe quel pixel artist.<\/i><\/p>\n

L'image que vous voyez est le r\u00e9sultat de l'enregistrement du dessin au format JPG. Une partie des donn\u00e9es a \u00e9t\u00e9 perdue \u00e0 cause des algorithmes de compression. Un pixel art de qualit\u00e9 finira par avoir une mauvaise apparence, et il ne sera pas facile de retrouver sa palette d'origine.<\/p>\n

Pour enregistrer une image statique sans perte de qualit\u00e9, utilisez le format PNG. Pour les animations, utilisez le GIF.<\/p>\n

Comment bien partager du pixel art<\/h2>\n

\nPartager du pixel art sur les r\u00e9seaux sociaux est un excellent moyen d'obtenir des retours et de rencontrer d'autres artistes travaillant dans le m\u00eame style. N'oubliez pas d'utiliser le hashtag #pixelart. Malheureusement, les r\u00e9seaux sociaux convertissent souvent les PNG en JPG sans autorisation, d\u00e9gradant ainsi votre travail. Et il n'est pas toujours clair pourquoi votre image a \u00e9t\u00e9 convertie.<\/p>\n

Il existe quelques conseils pour conserver le pixel art dans la qualit\u00e9 requise pour divers r\u00e9seaux sociaux.<\/p>\n

Twitter<\/h3>\n

\nPour que le fichier PNG ne soit pas modifi\u00e9 sur Twitter, utilisez moins de 256 couleurs ou assurez-vous<\/a><\/noindex>, que votre fichier mesure moins de 900 pixels sur le c\u00f4t\u00e9 le plus long. Je recommanderais d'augmenter la taille du fichier \u00e0 au moins 512\u00d7512 pixels. De plus, veillez \u00e0 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).<\/p>\n

Les fichiers GIF anim\u00e9s pour les publications sur Twitter doivent<\/a><\/noindex> avoir une taille maximale de 15 Mo. L'image doit mesurer au moins 800\u00d7800 pixels, l'animation en boucle doit se r\u00e9p\u00e9ter trois fois, et la derni\u00e8re image doit durer la moiti\u00e9 du temps par rapport aux autres\u2014c'est la th\u00e9orie la plus populaire. Cependant, il est difficile de savoir dans quelle mesure il est n\u00e9cessaire de respecter ces exigences, \u00e9tant donn\u00e9 que Twitter modifie constamment ses algorithmes d'affichage des images.<\/p>\n

Instagram<\/h3>\n

\n\u00c0 ma connaissance, il est impossible de publier une image sur Instagram sans perte de qualit\u00e9. Mais elle aura s\u00fbrement meilleur aspect si vous l'augmentez \u00e0 au moins 512\u00d7512 pixels.
\n
Source : habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"

\u0418\u043d\u0434\u0438-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043e\u0432\u043c\u0435\u0449\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u043e\u043b\u0435\u0439: \u0433\u0435\u0439\u043c\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430, \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430, \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0430, \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u0430. \u0418, \u043a\u043e\u0433\u0434\u0430 \u0434\u0435\u043b\u043e \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u0430, \u043c\u043d\u043e\u0433\u0438\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u044e\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u044c-\u0430\u0440\u0442 \u2014 \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043e\u043d \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c. \u041d\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u043d\u0443\u0436\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u0432\u044b\u043a\u0438. \u041d\u0430\u0448\u0435\u043b \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0430\u043b \u043f\u043e\u0441\u0442\u0438\u0433\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u044b \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u044f: \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0444\u0442\u0430 \u0438 \u0442\u0435\u0445\u043d\u0438\u043a \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f […]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[702],"tags":[],"class_list":["post-54617","post","type-post","status-publish","format-standard","hentry","category-news"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\n","aioseo_head_json":{"title":"\ud83e\udd47Pixel art pour d\u00e9butants : guide d'utilisation | ProHoster","description":"Les d\u00e9veloppeurs ind\u00e9pendants doivent souvent.","canonical_url":"https:\/\/prohoster.info\/fr\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"fr_FR","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47\u041f\u0438\u043a\u0441\u0435\u043b\u044c-\u0430\u0440\u0442 \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445: \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043f\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044e | ProHoster","og:description":"\u0418\u043d\u0434\u0438-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f.","og:url":"https:\/\/prohoster.info\/fr\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2019-12-29T21:00:00+00:00","article:modified_time":"2020-02-18T11:02:39+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"54617","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":"2026-01-24 12:06:19","breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-02-28 20:01:33","updated":"2026-01-24 12:06:19","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/posts\/54617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/comments?post=54617"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/posts\/54617\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/media?parent=54617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/categories?post=54617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/fr\/wp-json\/wp\/v2\/tags?post=54617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}