Salut à tous !
Aujourd'hui, et pour longtemps je l'espère, le groupe des graphistes officiels va tenter de vous enseigner du mieux qu'il pourra l'art du Pixel-art, du franken spriting et bien plus encore selon ses membres.
Ainsi donc je vais ouvrir le bal avec ce premier cours qui aura pour but de vous apprendre les bases du pixel-art.

Tout d'abord, je vous conseille de vous munir de paint.net, le logiciel que nous utilisons tous dans le groupe actuel (Thérapie, Xavioo, zouzaka, moi-même et lightnox qui passe de temps en temps), si ce n'est déja fait.

Sommaire :

• Les outils de PAINT.net
• Vocabulaire et abrevations
• Les palettes de couleurs
• Le pixel-art
• Exercice pratique en pixel-art
• Annexes



Les outils de PAINT.net
A l'instant je vous ai parlé de paint.net. C'est un logiciel relativement simple mais avec lequel il faut se familiariser pour rentabiliser ses fonctionnalités.
Mais cela n'est pas d'actualité pour le moment et je vais donc seulement vous faire un rappel des fonctionnalités de base du logiciel :

• Le crayon (p) : Il vous permet de dessinner pixel par pixel sur le calque sélectionné et est donc votre outil principal.
• La pipette (k) : Elle vous permet de selectionner une couleur sur le calque selectionné.
• Le pot de peinture (f) : en tolérence 0% il vous permet de remplir un élément d'une couleur de manière contigue sur votre travail sur le calque sélectionné.
• La gomme (e) : Avec 1px de large et en anti-alliasing désactivé vous permet de gommer pixel par pixel sur le calque sélectionné.
• La sélection (s) : Vous permet de sélectionner des éléments sur le calque sélectionné.
• Le déplacement : Vous permet de déplacer un élément sélectionné sur le calque sélectionné.



Vocabulaire et abrevations
Voici un rappel de quelques notions :
• PA, pixel-art : L'art de dessinner pixel par pixel
• Anti-alliasing : Lorsque l'on gomme avec l'anti-alliasing activé, certains pixels ne sont pas entièrement éffacé. Ils apparitiennent à la couche alpha et leur opacité est donc réduite. L'anti-alliasing devra toujours être désactivé lorsque l'on fera du pixel art.
• Contigue : Quand on parle de remplir de façon contigue, on remplie tous les pixels adjacents appartenant à la même couleur



Les palettes de couleur
Passons maintenant dans le vif du sujet avec les palettes de couleurs. Il faut savoir que sur les charas de RMvx et RMvx.ace les charas se dinstiguent par leurs palettes composées essentiellement de 5 tons par teintes. Je m'explique en image :

Sur cette palette, les teintes sont les colonnes et les tons sont les lignes. Vous y voyez clair ?
Donc de haut en bas, voila à quoi les tons correspondent :

• Couleur de contour
• 2nd ombrage
• 1er ombrage
• Couleur intermédiaire
• Reflet

Remarquez que la 4ème teintes en partant de la gauche est celle utilisée pour la peau des templates.

Pour les cheveux, les 5 teintes sont souvent utilisées et je vous conseille de le faire également pour plus de réalisme.

En ce qui concerne les habits, c'est différent. En effet, si vous faites un habit en matière réfléchissante comme du métal par exemple, il faudra utiliser les 5 tons pour imiter le reflet du soleil sur la surface polie ; pour les autres armures, en cuir par exemple, 4 suffiront.

Pour les vêtements simples en tissus c'est encore différent. Vous pouvez aussi bien utiliser 3 tons pour un vêtement pas trop près du corps, que 4 si c'est un vêtement serré ou si la personne est en embonpoint. Tout dépend des couches d'ombres utilisées. En effet, dans le premier cas, la couleur de contour et intermédiaire ainsi que le 1er ombrage seront utilisés alors que dans le second cas, le second ombrage viendra s'ajouter au reste pour accentuer le relief.

Voici donc l'application des deux derniers cas (les précédents étant plus complexes, ils seront certainement abordés dans un cours suivant)


Le pixel-art
Voici donc comment créer les deux derniers cas de figure pris en exemple plus haut. Je précise également que les deux charas sont de moi, fait spécialement dans le cadre de ce cours.

1er cas : Etape 1

J'ouvre mon template l'observe et fait le premier ombrage. Pour cela, rien de compliqué, il suffit en premier lieu de faire une recolo du second ombrage de la peau et d'ajuster le tout selon la provenance de la lumière et des ombres possibles. Il faut savoir que sous RMvx, la lumière vient toujours d'en haut à gauche. Cela n'est pas toujours perceptible sur les charas mais il faut s'en souvenir.
Je vais vous expliqué pourquoi cette technique est correcte : ici, en bas à droit du buste du chara j'ai arrangé mon premier ombrage en escalier pour montrer qu'ici le ventre s'arrondi. A gauche par contre, j'ai représenté l'ombre faites par le bras à la place du creux car si le bras n'était pas là, cette zone serait exposé à la lumière venant de gauche. Enfin, j'ai représenté le col par l'ombre du visage qui se présente plus en avant que le col du vêtement. Ainsi, on remarque que les zones ombrées corrrespondent au second ombrage de la peau légèrement modifié. Le seul élément qui échape à cette règle est l'ajout d'une ligne par dessus le pentalon. Cette ligne signifie que le vêtement passe par dessus ce dernier.

1er cas : Etape 2

Ensuite, il suffit de remplir le reste du torse avec la couleur intermédiaire.

1er cas : Etape 3

Nous passons maintenant aux bras. Recolorons donc la couleur de contour de la peau avec celle du vêtement.

1er cas : Etape 4

Faites votre premier ombrage de la même manière que pour le buste en marquant le bout des manches avec cette même couleur.

1er cas : Etape 5

Remplissez l'espace vide avec la couleur intermédiaire.

1er cas : Etape 6

Enfin, ajouter les détails. Ici, j'ai fais ce "T" pour marquer la présence de relief.

Voila le rendu final ne notre character C'est relativement basique pour l'instant mais vous êtes sur la bonne voie.

Passons maintenant au second cas :

2nd cas : Etape 1

Même chose que pour le premier cas. Simplement cette fois, creuser le relief avec la couleur de contour et le second ombrage.

2nd cas : Etape 2

Remplissez avec la couleur intermédiaire.

2nd cas : Etape 3

Ajoutez les détails.

Voila le rendu final de ce second character Vous remarquerez sûrement que ce chara est plus sympa que celui d'au dessus. C'est simplement une question de détail et de personnalisation.

Maintenant voyons le pantalon. En effet vous avez du remarquer que les pantalons étaient déja sur chaque première étape alors que votre template n'est doté que d'un piètre caleçon cachant ses parties intimes. C'est relativement simple pour faire une base mais le shading va beaucoup changer selon le reste des vêtements.
Je me passerais d'explications à ce niveau là, il vous suffira d'observer le shading des pantalons selon le haut utilisé sur différents charas pour affiner vos techniques.
Sur ceux là par exemple, je me suis contenté de prolonger le caleçon



Exercice pratique en pixel-art
Maintenant que vous avez la technique, il vous faut pratiquer. Faites plusieurs vêtements de différentes formes (T-shirts, pull, chemises, etc) avec différentes teintes et différents détails.

N'oubliez pas que l'observation des autres charas est la clef de l'inspiration et de l'aprentissage de techniques. En effet, essayez de reproduire certains vêtements et vous verrez que cela deviendra naturel pour vous de les représenter par la suite.
Vous pouvez vous exercer seul ou via le PPP ou encore m'envoyer vos résultats. Je me ferais une joie de vous aider à vous améliorer dans la limite de mes capacités.



Annexes
Pour compléter ce cours, je vous coneille de lire le tuto de xav sur le shading si vous avez du mal pour shader.


Sommaire :

• Les outils de PAINT.net
• Vocabulaire et abrevations
• Les palettes de couleurs
• Le pixel-art
• Exercice pratique en pixel-art
• Annexes

Revenir en haut de la page


Merci de m'avoir lu et bonne chance dans votre apprentissage.

Bonsoir Ice Monkey !

Très bon tutoriel ! Bon je n'ai jamais pratiqué le pixel art, et le truc des ombres et tout, c'est pas mon truc xD Mais je vais m'y essayer ^^ Merci pour ce tuto !

Peut on faire suivre les couleurs le long de la bases? car c'est le plus simple a faire.

Hô Gosh, très bon tuto.
Tu as eu de l'aide du groupe des graphistes, de quelqu'un en particulier ou tu l'as fait tout seul ?

Quoi quil en soit...

Spoiler:

Petite question, vue que mes deux autres question sont sans reponses je vais en tenter une autre^^


Es ce que recolorier le line est une bonne solution ou es ce qu'a l'inverse cela fait pas mauvais et rend donc le travail effectuer moins bon, ou le fait parêtre?
Un line noir et uni ca fait certe propres mais mauvais? enfin c'est déconseiller de le faire sur certain tutos (3/4 de ce que j'ai lu) mais bon.

Testa a écrit:

Peut on faire suivre les couleurs le long de la bases?

Tu as un exemple ? J'ai peur de ne pas avoir bien compris.

testa a écrit:

Es ce que recolorier le line est une bonne solution ou es ce qu'a l'inverse cela fait pas mauvais et rend donc le travail effectuer moins bon, ou le fait parêtre?

Ce n'est en effet pas accadémique comme technique et je ne t'enlève pas le fait que ça peut ne pas être correct.
En ce qui concerne le line noir, il n'y en qu'à certains endroits pour renforcer l'ombrage ou créer un contour nécéssaire à l'intégration dans un décor.

Pour la premiere non j'ai pas eu le temps d'en faire un.

Pour la seconde question en foncant la couleur sans allez dans le noir est la solution la plus réaliste a faire? car le line noir ne fait 'il pas l'inverse en faisant ressortir justement la couleur la plus clair par opposition?

testament a écrit:

Pour la seconde question en foncant la couleur sans allez dans le noir est la solution la plus réaliste a faire? car le line noir ne fait 'il pas l'inverse en faisant ressortir justement la couleur la plus clair par opposition?

En fait non, le line noir peux faire paraître les vêtements trops petits pour la personnage. Je cepedant le line noir n'est pas mauvais non plus, je le conseille pour le contour propre du chara mais pour un vêtement, il est toujours mieux d'utiliser un line foncé (pas trop non plus, tu devrais le voir si c'est trop foncé ou trop pâle) et de même couleur que le vêtement.

J'ai déjà dit ce que je pensais de ce tuto sur la chatbox mais je me permet de remettre mon avis ici.

Deux gros problème. Il s'agit d'un tuto trop basique d'une part et trop fouillis d'une autre part. Je présume qu'il n'a pas réellement reçu d'avis réaliste. Qu'il a souffert de cette maladie peu commune que l'on nomme le manque de commentaires. Voici donc le mien.

Tout d'abord, je tiens à parler d'une chose. N'est pas professeur un initié. Pour donner des cours il faut commencer à avoir un bon niveau voir très bon niveau. Désolé de te dire ça Ice mais non, tu n'as pas le niveau nécessaire selon moi pour donner des cours.
Mais je tiens quand même à saluer tes efforts. Tu tentes réellement de créer une dynamique dans le groupe des graphistes qui actuellement est à l'agonie et surtout ne sert à rien. Malheureusement, il ne faut pas essayer de faire ce dont on est incapable !


Ce que je pense de ce tuto ? Assez mauvais dans l'ensemble. Tout d'abord il est trop simpliste. Sérieusement, utiliser une palette de couleur pour faire un pull et un pantalon. Je pense qu'il n'est pas réellement utile de faire un tuto pour ça. Ce ne sont pas des bases, c'est juste expliquer l'évident. Pour faire le parallèle avec RPG maker, on pourrait dire que c'est comme si on indiquait comment appliquer un autotile sur une map. C'est pas réellement utile tellement c'est évident comme manipulation.
Ensuite, tu explique tout et n'importe quoi dans ton tuto. Tu parles de termes techniques, tu parle de Paint.NET tu parle de palette. Sauf que certaines informations n'ont pas besoin d'être là. Par exemple pas besoin de présenter les outils Paint.NET, c'est pas un tuto pour ça. Parler de couche alpha en Pixel-Art, d'après ce qu'on m'a dit, l'alpha n'existe pas en vrai pixel art. Donc il est assez inconvenu d'en parler.

Voila mon avis. Tiens en compte. N'abandonne pas le groupe des graphiste sans toi, autant le supprimer. Juste, ne fais pas de cours pour le moment. Va plutôt t'entrainer et recevoir les conseils de gens calés qui vont t'aider à t'améliorer. N'hésites pas à leur demander de venir poster leurs cours ici, en plus de contribuer au forum par cet acte tu pourras surement en profiter pour apprendre de ce cours et ainsi devenir meilleur.

Zangther a écrit:

J'ai déjà dit ce que je pensais de ce tuto sur la chatbox mais je me permet de remettre mon avis ici.

Deux gros problème. Il s'agit d'un tuto trop basique d'une part et trop fouillis d'une autre part. Je présume qu'il n'a pas réellement reçu d'avis réaliste. Qu'il a souffert de cette maladie peu commune que l'on nomme le manque de commentaires. Voici donc le mien.

Tout d'abord, je tiens à parler d'une chose. N'est pas professeur un initié. Pour donner des cours il faut commencer à avoir un bon niveau voir très bon niveau. Désolé de te dire ça Ice mais non, tu n'as pas le niveau nécessaire selon moi pour donner des cours.
Mais je tiens quand même à saluer tes efforts. Tu tentes réellement de créer une dynamique dans le groupe des graphistes qui actuellement est à l'agonie et surtout ne sert à rien. Malheureusement, il ne faut pas essayer de faire ce dont on est incapable !


Ce que je pense de ce tuto ? Assez mauvais dans l'ensemble. Tout d'abord il est trop simpliste. Sérieusement, utiliser une palette de couleur pour faire un pull et un pantalon. Je pense qu'il n'est pas réellement utile de faire un tuto pour ça. Ce ne sont pas des bases, c'est juste expliquer l'évident. Pour faire le parallèle avec RPG maker, on pourrait dire que c'est comme si on indiquait comment appliquer un autotile sur une map. C'est pas réellement utile tellement c'est évident comme manipulation.
Ensuite, tu explique tout et n'importe quoi dans ton tuto. Tu parles de termes techniques, tu parle de Paint.NET tu parle de palette. Sauf que certaines informations n'ont pas besoin d'être là. Par exemple pas besoin de présenter les outils Paint.NET, c'est pas un tuto pour ça. Parler de couche alpha en Pixel-Art, d'après ce qu'on m'a dit, l'alpha n'existe pas en vrai pixel art. Donc il est assez inconvenu d'en parler.

Voila mon avis. Tiens en compte. N'abandonne pas le groupe des graphiste sans toi, autant le supprimer. Juste, ne fais pas de cours pour le moment. Va plutôt t'entrainer et recevoir les conseils de gens calés qui vont t'aider à t'améliorer. N'hésites pas à leur demander de venir poster leurs cours ici, en plus de contribuer au forum par cet acte tu pourras surement en profiter pour apprendre de ce cours et ainsi devenir meilleur.

Faut pas s'attendre à du grand art de la part d'un Singe, non?