Apprendre


Vous êtes
nouveau sur
Oniromancie?

Visite guidée
du site


Découvrir
RPG Maker

RM 95
RM 2000/2003
RM XP
RM VX/VX Ace
RM MV/MZ

Apprendre
RPG Maker

Tutoriels
Guides
Making-of

Dans le
Forum

Section Entraide

Interviews: Ephy / Tutos: Godot : Premier Contact -Partie (...) / Tutos: Godot : Premier Contact -Partie (...) / Making-of: Ma première game jam classée / Jeux: Oracle of Tao / Chat

Bienvenue
visiteur !




publicité RPG Maker!

Statistiques

Liste des
membres


Contact

Mentions légales

84 connectés actuellement

11011199 visiteurs
depuis l'ouverture

1309 visiteurs
aujourd'hui



Barre de séparation

Partenaires

Indiexpo

Akademiya RPG Maker

Hellsoft

Planète Glutko

Le Comptoir Du clickeur

Zarok

RPG Maker VX

Eclipso

Tous nos partenaires

Devenir
partenaire



forums

Index du forum > Entraide > [RESOLU] [Aseprite/PyxelEdit/Paint.net/...] Les tutos Pixel Art du Baba


Mr Baba - posté le 17/07/2019 à 16:24:08 (433 messages postés)

❤ 0

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. :rit2

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, :flaco
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. :feu
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.

image

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.

image

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.

image

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.

image

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.

image

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.

image

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.

image

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.

imageimage

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:
https://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:
https://pixeljoint.com/forum/forum_posts.asp?TID=11299

Unbelivabledaze! Mon Touitère || Mes mousiques || Ma chaine Twitch (live gamedev/pixel art tous les aprem de semaine a 14h) || Mon sitoueb


Qb!k - posté le 17/07/2019 à 16:33:25 (809 messages postés)

❤ 0

Je hais les principes de la thermodynamique

Super tuto ! Merci.

La tour planaire ~ Helen Action Shooter ~ The Jack-O-Lantern Quest ~


Nemau - posté le 17/07/2019 à 17:12:18 (45593 messages postés) - admin -

❤ 0

The inconstant gardener

Super tuto, merci ! Si tu le souhaites, n'hésite pas à le mettre sur le site, on en sera ravi !



Proposez vos news !TrombinoscopePolaris 03Planète Glutko • Doom Doom Doom Doom! I want you in my tomb!


MGbar - posté le 18/07/2019 à 17:54:50 (12 messages postés)

❤ 0

Quo dulda ert quiem

Yes, moi qui voulais vraiment me mettre au PA, ce tuto me donne une solide base. Merci à toi !

Al mar ert ad am ispa, quo al sol tar dé xal.


Romi V2 - posté le 18/07/2019 à 18:00:32 (139 messages postés)

❤ 0

Dessin en cours...

c'est super cool ! la verdure en PA, c'est galère quand on commence mais tu explique bien, merci à toi.

Du pixel art


Verehn - posté le 18/07/2019 à 23:59:27 (8878 messages postés) - honor

❤ 0

vhehrhehn

Chouette tuto. :sourit

Eldrao ~ PakuPaku ~ Winged Light ~ Ruin ~ Ma galerie ~ LTDAD ~ Don de graphismes plateforme 2D


sriden - posté le 23/07/2019 à 00:31:13 (16053 messages postés) -

❤ 0

Pourquoi c'est toujours des arbres dans ce genre de tutos ? Vous faites tous des jeux sur la vie des piverts ou quoi ? :fou3

Pourquoi c'est jamais une tente, ou un sanglier rôti sur un feu de camp ? Non, encore des arbres, toujours des arbres. Fuck les arbres !!§ :feu =>[]

 

Escapade | La 7e porte | Vader Ou La Fin des Haricots | Polaris 03 | Forum Famas (archive) | Blog ciné/jv | Mes albums de zyk : Diaphanous Horizons & Retranchements


Mr Baba - posté le 26/07/2019 à 15:26:36 (433 messages postés)

❤ 0

Jazzeux et maker... Ca existe ça?

Merci a tous!
J'espère que ce sera utile a certain.

Je ferais le prochain sur la création de tiles. Sujet assez difficile quand on commence, et très important quand on fait un jeu custom.
Je prendrais deux exemple: herbe et sable, pour diversifier un peu tout ca, mais que ca reste utile au plus grand nombre.

@Sriden: Juste pck c'est très utile a savoir faire, dans a peu près n'importe quel jeu, et que ça permet d'aborder pas mal de sujets, le volume, la texture, etc :rit2

Unbelivabledaze! Mon Touitère || Mes mousiques || Ma chaine Twitch (live gamedev/pixel art tous les aprem de semaine a 14h) || Mon sitoueb


Falco - posté le 26/07/2019 à 16:26:46 (17679 messages postés)

❤ 0

Indie game Developer

Vraiment très très bon ce tuto, bravo pour ta contribution ! :)

Inexistence Rebirth - Inexistence - Portfolio


Imtf - posté le 27/07/2019 à 22:13:50 (6 messages postés)

❤ 0

oui

Merci pour le tuto =)

Index du forum > Entraide > [RESOLU] [Aseprite/PyxelEdit/Paint.net/...] Les tutos Pixel Art du Baba

repondre up

Suite à de nombreux abus, le post en invités a été désactivé. Veuillez vous inscrire si vous souhaitez participer à la conversation.

Haut de page

Merci de ne pas reproduire le contenu de ce site sans autorisation.
Contacter l'équipe - Mentions légales

Plan du site

Communauté: Accueil | Forum | Chat | Commentaires | News | Flash-news | Screen de la semaine | Sorties | Tests | Gaming-Live | Interviews | Galerie | OST | Blogs | Recherche
Apprendre: Visite guidée | RPG Maker 95 | RPG Maker 2003 | RPG Maker XP | RPG Maker VX | RPG Maker MV | Tutoriels | Guides | Making-of
Télécharger: Programmes | Scripts | Packs de ressources | Midis | Eléments séparés | Sprites
Jeux: Au hasard | Notre sélection | Sélection des membres | Tous les jeux | Jeux complets | Le cimetière | RPG Maker 95 | RPG Maker 2000 | RPG Maker 2003 | RPG Maker XP | RPG Maker VX | RPG Maker VX Ace | RPG Maker MV | Autres | Proposer
Ressources RPG Maker 2000/2003: Chipsets | Charsets | Panoramas | Backdrops | Facesets | Battle anims | Battle charsets | Monstres | Systems | Templates
Ressources RPG Maker XP: Tilesets | Autotiles | Characters | Battlers | Window skins | Icônes | Transitions | Fogs | Templates
Ressources RPG Maker VX: Tilesets | Charsets | Facesets | Systèmes
Ressources RPG Maker MV: Tilesets | Characters | Faces | Systèmes | Title | Battlebacks | Animations | SV/Ennemis
Archives: Palmarès | L'Annuaire | Livre d'or | Le Wiki | Divers