Jazzeux et maker... Ca existe ça? | Domaine concerné: Pixel Art
Logiciel utilisé: Aseprite/PyxelEdit/Paint.net/...
Salut a tous, je viens ici essayer de vous transmettre le savoir-faire que j'ai tant bien que mal réussi a accumuler au fil des années sur les internets a propos du pixel art.
J'ai choisit la forme de post dans cette section, et non de tuto directement uploadé sur le site pour pouvoir étoffer les tutos au fur et à mesure en ajoutant des images d'illustration,
des références et des liens vers des tutos que je trouve bien.
Préambule:
Avant toute choses, je pense qu'il est intéressant de dire que le Pixel Art bien qu'étant une forme d'art assez difficile a maîtriser, est, pour autant, accessible a ceux qui ne dessinent pas bien voir pas du tout.
Bien sur si vous dessinez déjà vous retrouverez une bonne dose de théorie en commun entre le Pixel Art, et les autres formes d'art pictural. Donc c'est toujours un plus, mais c'est pas du tout obligatoire.
Les particularités propres au Pixel Art: Très petit canevas, nombres de couleurs limités et possibilité de recommencer et de revenir sur ses erreurs à loisir en font un medium accessible même aux manches du crayon. (Oui c'est a toi que je parle)
Pour autant, il ne faut pas prendre cette pratique a la légère: apprendre le Pixel Art est fastidieux (ou fastueux pour certains) et long, aussi, je vous conseille avant toute choses de vous armer d'une bonne dose de motivation, de persévérance et de patience.
Ça vient clairement pas en claquant des doigts et il vous faudra pas mal de pratique pour progressez, donc évitez le tilt autant que possible, faites des pauses quand votre sprite vous sort par les trous de nez, faite une pause et pétez un coup. 
Maintenant que ça c'est fait; je vais essayer de définir ce que j'appelle Pixel Art, et que je désignerais comme tel dans les tutos qui suivront.
En effet le Pixel Art a pas a proprement parler de définition précise, et tout le monde n'est pas toujours d'accord sur ce qu'il convient de désigner comme tel.
Donc ce que j'appelle Pixel Art, a titre personnel, c'est une pratique qui vise a créer des visuels dans des canevas de petite taille et avec un nombre de couleurs limité.
Pour donner un peu de contexte: le Pixel Art a été inventé pour répondre aux contraintes techniques qu'imposaient les premières consoles de jeux vidéos:
celle-ci n'étaient capable d'afficher que peu de couleurs a l'écran, et dans de très petites résolutions.
Bien sur de nos jours, les machines n'ont aucun mal a afficher une quantité de couleurs différentes difficilement concevables par l'esprit humain et ce, dans de très grandes résolutions, alors pourquoi continuer a faire du Pixel Art?
Déjà par-ce que si vous êtes un petit développeur indé, ou même un gars qui trifouille sur RM dans sa caverne sombre comme on en trouve quelques spécimens par ici, 
le Pixel Art peut être une solution pour faire les graphismes de votre jeu vous même, sans avoir a passer un mois entier sur chaque textures.
Mais aussi et surtout par-ce que le Pixel Art quand c'est bien maîtrisé, CA PETE LA CLASSE. Non?
Allez un petit exemple trouvé sur Twouitère pour vous mettre l'eau a la bouche:
Spoiler (cliquez pour afficher) 
Quelques mots sur la méthode: Je vous délivre ici la méthode que j'ai mise au point en combinant les infos que j'ai trouvé sur le net, et à force de faire moi même du Pixel Art.
C'est loin d'être la seule méthode possible, et je vous invite a l'adapter a vos besoins, vos forces et vos faiblesses perso.
Cela dit, je trouve important d'avoir une méthode qui divise les taches autant que possible, de sorte a gagner en efficacité, mais surtout a identifier quels sont les étapes qui vous posent le plus problème pour pouvoir travailler sur ces étapes spécifiquement si vous souhaitez vous améliorer.
A propos des références; n'hésitez pas a chercher longuement des références de Pixel Artists que vous aimez bien, quitte a reproduire leurs techniques dans un premier temps.
Vous développerez de toute manière votre propre technique et votre propre style a force d'en faire. Voyez ça comme de l'étude des maîtres, comme on fait en peinture ou en composition musicale.
Bon, assez blablaté et place a nos pixels.
Premier tuto: Faire un arbre, en vue top-down (La vue des RPG 2D classique - mais le tuto fonctionne aussi pour une vue de profil)
A propos des couleurs et des palettes:
Comme j'ai pu le mentionner plus haut, l'une des contraintes qu'impose le pixel art c'est le nombre de couleurs utilisées.
Il n'existe pas de règle, chacun fait un peu ce qu'il veut en terme de nombre de couleurs qu'il place en limite, selon le style général qu'il souhaite donner à son œuvre.
Certain se donnent comme contrainte de reproduire les limitations techniques des machines d'époques, d'autres appliquent des contraintes plus souples, au grès de leurs envies...
Pour l'ensemble de ces tutos on restera dans des palettes de 8, 16 ou 24 couleurs maximum. Déjà par-ce que c'est le style que je maîtrise le mieux, mais aussi par-ce que c'est assez idéal pour apprendre.
Pi de toute manière c'est moi qui décide, et puis c'est marre. 
Avoir une palette assez réduite vous oblige a travailler votre technique, mais les très petites palettes ne sont pas forcement facile a utiliser, et demandent un niveau déjà assez élevé. Donc on reste sur une palette intermédiaire pour le moment.
Comment choisir ses couleurs?
C'est la première chose a faire avant de placer ses premiers pixels, et c'est aussi une tache qui peut apparaître difficile pour toute personne qui commence le Pixel Art, sans quelques notions théoriques.
Essayons d'illustrer ces principes avec un cas concret: la palette qui servira a faire notre arbre.
Pour ce premier tuto on fera une palette de 8 couleurs; et c'est bien suffisant, vous allez voir.
Commençons en prenant les deux couleurs de bases qui servirons a faire les deux principaux éléments de notre arbre: son tronc, et son feuillage.
On cherche a avoir nos couleur de base, il faut donc qu'elles soient ni trop sombres ni trop claires, d'une saturation intermédiaire.
Une fois ceci fait, on va pouvoir ajouter les couleurs qui correspondent aux ombres et aux points éclairés de notre futur sprite (shades & highlights pour les anglophiles).
On va ainsi crée ce qu'on appelle des rampes, c'est a dire une série de couleurs utilisables ensemble dans un élément d'une même couleur.
On va donc créer deux rampes: une pour le tronc, et une pour le feuillage.
Ici on utilise trois principes, que vous pouvez ne pas appliquer systématiquement, mais si vous respectez ces 3 règles vous ne pouvez pas vous tromper (on viendra peut-être dans d'autres tutos a des situations ou il est préférable de procéder autrement).
1) Plus une couleur est lumineuse, moins elle est saturé (et donc inversement, plus elle est sombre, plus elle est saturée)
2) Je cite le tutos des forges, qui expliquera le principe de Xenodrogen bien mieux que moi:
Citation: La méthode de Xenodrogen, du nom de son inventeur, est une méthode permettant de choisir avec exactitude les couleurs de votre rampe et sans (trop de) risque vous tromper.
Cette méthode n'est pas une règle absolue a respecter mais si vous avez des "gouts de toilettes" en matière de couleur, elle vous permettra de faire de jolies rampes.
Cette méthode repose sur une règle compliquée à formuler mais simple à respecter
« Au sein d'une rampe, la teinte, la saturation et la luminosité varient en sens unique. Leurs variations (dérivée seconde, pour les matheux) varient elles aussi en sens unique. »
[...] dans une rampe, chacune des composantes (teinte, saturation et luminosité) doit varier soit de plus en plus, soit de moins en moins d'un bout à l'autre de la rampe.
Imaginons une rampe de 5 couleurs que l'on va appeler A,B,C,D et E. Je peux par exemple faire +1 en saturation entre A et B, puis +5 entre B et C, encore +5 entre C et D et enfin +12 entre D et E.
Ce serait par contre incorrect de faire quelque chose comme +2 +3 +2 +1 +4. Pour résumer, on augmente ou diminue la composante de plus en plus ou de moins en moins mais sans faire de "yoyo". |
3) Le Color Shift, ou glissé de teinte: plus on va vers le clair, plus la teinte de la couleur tend vers le jaune, et a l'inverse, plus on va vers le sombre, plus la teinte de la couleur tend vers le violet.
On utilise donc ces trois règles pour compléter nos deux rampes.
Dernière étape: on peut utiliser la même couleur comme deuxième couleur d'ombrage pour les deux rampe: un violet sombre, ce qui nous permet d'économiser une couleur
et enfin on ajoute une dernière couleur pour le feuillage qui a besoin de plus de variations de volume que le tronc.
Le Pixel Art a proprement parlé:
1ere Étape : Dessiner la silhouette
Vous trouverez surement sur internet des tas de tutos qui utilisent une autre méthode que moi: celle du line art,
ou il s'agit d'avoir un contour le plus réussit possible, et de colorier l’intérieur ensuite. Pour moi cette méthode, qui s'adresse plutôt aux gens habitués a dessiner ne me convient pas.
Je vais donc vous donner la mienne, qui est aussi assez répandue: la technique des silhouettes.
Il va donc s'agir de dessiner des silhouettes de nos éléments, dans la couleur de base de chaque rampe (vous vous souvenez, c'est les premières qu'on a choisit), en forme pleine.
Je dessine des formes pleine, par-ce que ça m'aide a visualiser l'objet en relief, ce qu'il faut essayer de faire autant que possible pour ensuite placer les ombres et les lumières aux bons endroits.
Je dessine donc des formes grossières qui correspondent au tronc et au feuillage. Pas la peine de s'attarder mille ans, sur cette étape, on va de toute manière modifier la silhouette au fur et a mesure de notre progression.
2eme Étape : Dégager les premières formes
Pour pouvoir faire cette étape et les suivantes correctement, il faut déterminer d’où viens la lumière. Ou est la source lumineuse? Ici on est en plein air, puisque on dessine un arbre,
on va donc prendre le soleil comme source de lumière. Je choisis de le placer en haut a gauche de notre image, vous pouvez aussi choisir en haut a droite si ça vous chante.
Évitez simplement de choisir une source pile au dessus de ce qu'on dessine, par-ce que c'est beaucoup plus dur à ombrer.
Une fois que vous avez choisit une position de votre source lumineuse, soyez cohérents.
Les autres éléments que vous destinez a être placé dans une même map doivent avoir la même source lumineuse. Quand on prend le soleil comme source, celui-ci se situe tellement loin, que l'on peut dessiner tous nos éléments en prenant en haut a gauche point de lumière.
Dans cette étape, on ne va utiliser que la 1er couleur d'ombrage de chacune de nos rampes.
Ici l'idée, c'est d'essayer de dégager des formes claires, et d'imaginer l'ombre qu'elle projettent. J'aime bien voir ça comme de la sculpture.
Vous avez votre forme, il s'agit d'y creuser avec les ombres pour en faire ressortir du volume.
On peut aussi aller creuser dans la silhouette de l'arbre pour accentuer les volumes de nos formes.
N'hésitez pas a passer du temps a peaufiner cette étape, c'est important de bien la maîtrisser avant de passer a la suite.
3eme Étape: Texturer
Je garde toujours mes deux couleurs, et je commence a texturer.
Ici l'astuce c'est de pas dessiner chaque feuilles, mais plus de suggérer les feuilles.
Donc ça veut dire créer des groupes de feuilles, on sait pas vraiment ou elles commence ou finissent, c'est pas grave. L'important c'est la suggestion.
Autre astuce, servez vous du contour l'arbre pour souligner la texture.
Faire certaines feuilles qui dépassent du bord, permet d'accentuer l'effet de la texture.
Je fais une texture a base de feuille assez pointues pour l'exemple de ce tuto, mais il existe de nombreux moyen de faire des texture de feuilles différemment.
N'hésitez pas a fouiller sur le net pour trouver des références d'arbres et de feuillage qui vous plaisent et de chercher a les reproduire et les adapter a votre goût et a votre palette.
4eme Étape: Highlights et ombres profondes
Maintenant qu'on a commencé a texturer et qu'on a une forme assez satisfaisante, voici venu le moment de mettre en valeur ce texturing.
Il va s'agir d'accentuer les points ou les feuilles prennent la lumière, donc principalement le bout des feuilles.
Je le fait dans un premier temps avec ma couleur de highlight intermédiaire, et un fois que j'ai fini pour le sprite entier, je passe a la couleur la plus claire.
Gardez en mémoire que la lumière viens de en haut a gauche, qui sera donc la mieux éclairée et la partie en bas a droite de l'arbre reçoit moins de lumière, donc moins de highlights et plus de zones sombres.
C'est important de bien rendre cet aspect là pour faire ressortir le volume global de l'arbre.
De la même manière on applique aussi la couleur a l’extrémité de notre palette, le violet sombre dans les zones de creux, et pour créer une ombre portée sur certaines feuilles.
Même méthode sur le tronc, on cherche a crée une texture d’écorce, donc, des creux et des bosses.
Gardez a l'esprit que l’écorce c'est loin d'être lisse, donc dans l'exemple, j'essaye de pas juste faire des lignes, mais de casser un peu pour suggérer la nature chaotique de la texture.
Et même chose que pour le feuillage: la partie la plus a droite du tronc doit être moins éclairer pour suggérer le volume du tronc puisque la source de lumière est en haut a gauche.
Notez que j'ai aussi ajouté a l'aide de violet foncé, l'ombre porté du feuillage sur le haut de tronc.
5e et dernière étape: Le contour
Cette étape n'est pas forcement obligatoire, vous pouvez opter pour un style sans aucun contour,
mais il faudra alors faire attention a bien doser le contraste avec les tiles de sols que vous allez utilisez, de sorte que l'on distingue bien les éléments de décors du sol lui même.
Ici on va utiliser un style avec un contour. J'aurais pu utiliser un contour entièrement noir, avec un noir pur, ce qui est tout a fait correct, mais je préfère garder ce genre de contour pour mes personnages,
par-ce que ça permet de les faire mieux ressortir puisque c'est le seul contexte dans lequel j'utilise le noir pur, et aussi, qu'il y ait toujours un contraste assez fort entre le contour des personnages et leur environnement.
L'une des manière de faire le contour, c'est de prendre la couleur la plus sombre des rampes de chaque éléments et de tracer le contour a l'aide de ces couleurs.
Ici je vais utiliser une technique qui consiste a ombrer le contour comme si il s'agissait d'un élément de notre arbre a part entière.
Je part donc de la partie en bas a droite de l'arbre, le plus a l'ombre, avec la couleur la plus sombre de ma palette: ici le violet sombre.
A mesure que j'avance dans le contour de mon objet, lorsque je tombe sur une zone plus éclairée, j'utilise la couleur supérieure de ma rampe.
En utilisant cette technique, vous accentuez encore l'effet de volume de votre objet, tout en le dotant d'un contour qui aidera a la lisibilité de celui-ci dans le contexte de votre jeu.
 
Voilà donc le résultat final.
J'espère que le tuto vous aura plus, n’hésitez pas a poser des questions si vous en ressentez le besoin.
Je ferais d'autres tutos a l'avenir en tachant d'aborder certaines notions qu'on a laissé de coté dans celui-ci:
Faire des courbes de qualité, l'anti-alsiasing, la perspective, le dithering, l'ambiant lighting et pourquoi pas un peu d'animation.
Je vous laisse des liens vers deux très bons tutos, si vous voulez approfondir certaines choses:
Un excellent tuto en français:
http://www.lesforges.org/article/cours-pixel-art-preface?scroll_to=article
Un tuto très bon aussi, qui rentre bien dans le détail technique; mais en anglais:
http://pixeljoint.com/forum/forum_posts.asp?TID=11299
|
Chat
- 
