AccueilAccueil  PortailPortail  CalendrierCalendrier  TutorielsTutoriels  FAQFAQ  RechercherRechercher  S'enregistrerS'enregistrer  MembresMembres  GroupesGroupes  ConnexionConnexion  

Partagez | 
 

 [PA] - Spriter en Pokemon Style

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
GTK
Painteur GTK
Painteur GTK
avatar

Masculin
Nombre de messages : 3597
Age : 28
Humeur/Caractère : Fatigué
Date d'inscription : 29/04/2006

Statut
Expérience:
100/100  (100/100)
Pixel Point Pixel Point: ---

MessageSujet: [PA] - Spriter en Pokemon Style   Mar 21 Juil - 22:14

Bonjour bonjour !
Et un tutoriel, un ! =D



La Théorie


Aujourd'hui, nous allons voir comment spriter un Pokemon tout en respectant le style des sprite de Pokemon officiels, ce qui n'est pas chose aisé.

La clef de tout, c'est l'observation. Il faut regarder comment chaque chose est traiter : le nombre de couleur, l'anti-alliasing, la forme générale, l'ombrage, ect...
Cette observation permet d'avoir les connaissances nécessaire en théorie. En théorie, je dis, car elles peuvent s'acquérir aussi à force de la pratique, et même en les connaissant sur le bout des doigts, elles peuvent s'avérer difficile à appliquer si vous n'en avez pas l'habitude.
Sans plus attendre, attaquons ce chapitre théorique et voyons point par point les choses importantes qu'il faut connaitre:


* La ligne en Pixel-Art

Commençons avec le plus simple, la ligne !
Si vous avez déjà fait du Pixel-Art au par avant et que vous avez déjà une certaine maitrise, la ligne ne devrait normalement plus vous poser de problème. Pour les autres, suivez attentivement ce qui est dit.

A savoir d'emblée, un sprite Pokemon s'inscrit dans un cadre de 80x80 pixel. S'il est plus grand, il n'est pas "valide" en quelque sorte.

Tout d'abord, regardons ces exemples de sprite :




Vous ne remarquez rien ?
Hé bien voila, il y a très peu de "patté de pixel" et les lignes sont propres, elles sont correctes.
Voyons voir ce que cela veut dire exactement :

- Un patté de pixel, c'est un groupe de pixel d'une même couleur qui sont collé les uns aux autres.
Cela à pour effet de donner une impression d'irrégularité dans les contours du dessin.
Regardez ces deux lignes :



La première est l'exemple à suivre, la ligne est constante (chaque fois par ensemble de 2pixel de large).
La deuxième ligne présente plein de patté de pixel, elle n'est plus constante, elle est difforme.
Vous devez éviter au maximum ce genre de patté de pixel. Dans certain cas, ils sont néanmoins tolérable, nous verrons ça plus tard.

- Maintenant, les courbes !
Observons la ligne de Persian :




Remarquez comment les courbes de la queue, de l'arrière-train et des cuisses sont travaillées.
Une courbe, en Pixel Art, se travaille de la sorte :




La surface plane est une longue ligne de pixel, puis, plus la courbe se plie, plus on descend dans le nombre de pixel.
Ensuite, quand la courbe se déplie, on remonte en nombre de pixel.
Dans cette exemple, on part d'une ligne de 12 pixel, puis de 4, puis 3 lignes de 2, puis 5 pixel seul pour ensuite revenir à des lignes de 2 pixel, de 4 et ensuite de retour sur une surface plane.

Essayer d'être harmonieux dans vos courbe, éviter les nombres impaire car ils passe en général moins bien (bien que s'ils sont bien placé, ça ne pose pas de problème).
Evitez aussi de faire vis courbe avec l'outil courbe de Paint par exemple, le résultat ets souvent étrange. Faites vos courbes à la main, pixel par pixel (comme un vrai Pixel Artiste quoi Smile ).

Remarquons tout de même une chose :



La ligne de Persian présente des paté de pixel, mais ceux-ci sont justifié.

Pour les pattes, il s'agit simplement du faite qu'il s'agit d'une griffe, et pour les oreilles, c'est simplement une ligne qui est trop proche de l'autre (de plus, une fois en couleur, ça ne se remarque pas).
Bref, vous pouvez vous permettre un écart de temps à autre, mais pas n'importe où.
L'important, c'est que ce ne soit pas flagrant.

Le plus important à savoir sur un dessin en Pixel Art, quand il n'est encore qu'à l'étape de ligne, c'est qu'il soit agréable à l'œil, que la ligne soit propre.
Si vous faite du Pixel Art, travailler sur une image zoomer au maximum doit faire partie de vos habitude. N'oubliez pas de dézoomer de temps en temps pour voir en 1x1 s'il n'y a rien qui cloche, car certains défauts sont difficilement visible avec un zoom x8 Wink


Passons à la deuxième partie :


* La palette

En Pixel-Art, avant tout mise en couleur, il vous faut une palette.
Cette palette est composé de plusieurs échelon d'une même couleur, mais avec des variations.
Bon, je ne vais pas vous faire un cours sur "Comment avoir une bonne palette" (moi, personnellement, je le fait au felling, en changeant des couleurs si je vois que ça ne va pas, ou en changeant carrément de palette si le résultat ne me plait pas).

Étudions la composition d'une palette avec comme exemple des sprites officiels :

Regardons ce cher Metamorph :



Ce petit bonhomme tout souriant possède 6 échelons pour sa couleur + une couleur noir pour le contour.
Attention, je dis "noir pour le contour", mais pas exactement. Le noir pure (celui qu'on a d'office dans la palette de Paint) comme on l'imagine, c'est un noir exempt de tout autre couleur, il correspond à 0% de rouge de vert et de bleu. Il faut savoir que la plupart des sprites Pokemon on des contours noir, mais dont le noir n'est pas pure (pour Metamorphe, si, il est pur, donc, ne croyez pas ceux qui vous dises que c'est une erreur si vous avez utilisé du noir pur comme contour).
On peut voir qu'il y a une couleur de remplissage, plus deux couleur pour les reflets plus deux couleurs pour l'ombrage.
Les couleurs pour l'ombrage sont aussi utilisé pour les contours.
Il faut donc retenir que les sprites Pokemon n'ont pas des contours ni entièrement noir ni entièrement en couleur foncé, c'est un mixe des deux.
Les couleurs foncées sont en faite utilisé dans les contours là où il y a de la lumière pour donner un semblant d'impression de volume, et à certain endroit stratégique pour casser le coté pixelisé de la ligne.
Elles sont parfois utilisé à d'autres endroits, mais cela dépend beaucoup du Pokemon, et je ne peux que vous conseiller d'y aller au felling, de voir si ça fonctionne, et si ça fait moche, d'essayer autre chose.

Maintenant, observons Porygon qui possède deux couleurs tout en restant assez simple dans la répartition.



Il y a deux couleurs différentes (le rose et le bleu), 5 échelons par couleurs plus du noir (contour), du blanc (l'œil et le reflet) et du gris (pour ombrer les zones blanches).
5 échelons par couleurs alors que Metamorphe à 6 échelons par couleur, pourquoi ?
Regardons encore un autre exemple, vous trouverez peut être la solution tout seul Wink



Pijako possède beaucoup de couleur mais la majorité de ces couleurs ont peu de nuance : 3 pour le bleu, deux pour le jaune et le rose, une pour le vert, trois nuances de gris plus le noir et le blanc.
Voila, vous l'avez sans doute deviner, en général, plus un Pokemon à de couleurs différentes, moins il y a de nuance par couleur.

Il faut savoir qu'en Pixel-Art, moins il y a de couleur, mieux c'est.
En général, un Pokemon a 4 nuances par couleurs et deux ou trois couleurs différentes.
Si vous faites une pupille coloré à votre Pokemon, essayez si c'est possible de prendre une couleur déjà existante sur votre Pokemon pour la pupille (de ce faite, vous évitez de créer une nouvelle couleur pour pas grand chose).
Voyons un exemple qui illustre ce propos :



Regardez bien, Herbizarre est composé de trois couleurs (un "vert crapaud" pour la peau, un autre vert pour les feuilles et un rose pour la fleur).
Que voyons nous ? 4 nuances par couleur.
Quoi d'autre ? Le rose des yeux est celui utilisé pour la fleur.
L'économie de couleur est très importante, surtout qu'un sprite Pokemon ne dépasse jamais les 16 couleurs, c'est aussi important que le faite qu'il ne peut pas sortir d'un cadre de 80x80 pixel (si un jour, vous venez à travailler sur un réel projet de jeux-vidéo, surtout si c'est sur console portable, vous comprendrez l'importance de ces limitations).
Vous remarquez aussi que le noir du Herbizarre n'est pas un noir pure, c'est plutôt un gris extrêmement foncé.

Je pense que tout est dit pour la palette.
Surtout, n'hésitez pas à tester plusieurs palette différentes pour voir quel résultat vous plait le plus.
Si deux résultats différents vous plaise et que vous ne savez pas lequel choisir, n'oubliez pas qu'un Pokemon possède toujours deux palettes de couleur : l'une pour sa forme normal, l'autre pour sa forme shiney Wink
L'exemple avec le populaire Leviator Rouge :



Maintenant, voyons comment appliquer cette palette de couleur :


* Appliquer la couleur

Nous allons voir pas à pas comment appliquer la couleur à un dessin en Pixel-Art.
Pour cette démonstration, nous avons demandé à notre top-modèle, Psykokwak, de poser pour nous (courage Psykokwak, fait le pour l'amour de l'art !).

Voici le modèle fini, avec sa palette et sa ligne :



Psykokwak a deux couleurs (un "beige œuf" pour le bec et un jaune canard pour la peau) ainsi que du blanc, du noir et deux nuance de gris.
La première chose à faire, c'est de poser les couleurs. En gros, on remplit chaque zone avec sa couleur de remplissage (pour le bec et les pattes, c'est la couleur la plus clair de la première colonne, pour le reste, c'est la deuxième couleur de la deuxième colonne).



Ensuite, on choisit une source de lumière (dans Pokemon, la lumière proviens toujours d'en haut à gauche):



En fonction de ça, on place les ombres :



Pour placer les ombres, pensez bien qu'un membre qui cache le soleil provoque de l'ombre.
Aussi, la lumière venant de gauche, le coté droit est forcément plus ombré.
Quand vous ombrez, visualisez le Pokemon en 3 dimensions et imaginez la source de lumière et son impacte.
N'oubliez pas non plus d'ombrer les yeux ainsi que d'ajouter le reflet de lumière s'il y en a.
Psykokwak est facile à placer les ombres, car en plus d'avoir des formes simples et bien arrondi (mais quel beau gosse ce Psykokwak !), il a un peau lisse.
Un Pokemon avec un large plumage ou tout poilu est plus dure car il faut rendre la matière (Psykokwak a une matière presque similaire à du plastique).

Maintenant, il ne reste plus qu'à colorier les contours et à jouer un peu sur l'anti-alliasing.
Les sprites de Pokemon ont un anti-alliasing pas très travailler, donc ça ne devrait pas poser de problème pour la technique, la principale difficulté réside encore et toujours dans le faite que ça doit être agréable à l'œil.

Faire cette exercice sur Psykokwak ne présenterait pas énormément d'intérêt (d'autant plus que ça se fait en générale au felling pour cette partie, sauf pour certain contour qu'on doit éclaircir du fait de la lumière), mais on va quand même observer les points important :



On adoucit le contour des yeux, un contour noir, c'est fait pour marquer la séparation entre deux choses. Les yeux de Psykokwak font parti intégrante de sa tête, donc, on les mets en couleur les contours des yeux (à l'aide de la couleur de peau la plus foncée) afin qu'ils se démarquent tout de même mais sans choquer. On rajoute d'ailleurs une nuance un peu moins sombre autour des yeux pour adoucir encore plus.
Pour le bec et les pattes, on remarque qu'on ajoute une nuance intermédiaire entre le ton clair et le sombre. Ceci sert à adoucir (encore) le passage de l'un à l'autre, ça sert aussi à ce que l'ombre paraisse moins pixelisé (un petit anti-alliasing donc).
Les narines ne sont plus en noir car en noir, elles sont trop marqués.
Anti-alliasing aussi dans ses cheveux (si on peut appeler ça des cheveux) grâce au gris sombre.
Le contour du sommet du crâne est mis en couleur aussi. La lumière frappe directement dessus aussi, donc c'est logique de l'éclaircir en remplaçant le noir par une couleur foncé.
Il y a encore de l'anti-alliasing un peu partout, sur les contours de même, et on peut voir que sur la queue, il y a un patté de pixel mais il est colorié avec la nuance la plus foncé de la peau afin qu'il apparaisse moins.

Voilà, c'est tout pour la théorie.
Sachez donc qu'on en apprend beaucoup en observant et en analysant les sprites d'un jeu.
L'observation est une étape d'une importance capitale, c'est la chose primordiale si vous voulez faire des sprites dans un style de jeux existant (donc, cette leçon n'est pas à retenir que pour Pokemon, mais pour tout ! Si un jour, vous vous lancez dans un fan game de Megaman X ou Mario & Luigi par exemple, et que vous voulez ajouter des monstres inédits dessiné par vous même, la première étape consistera à observer longuement les sprites déjà existant afin d'en tirer les caractéristiques qui font que le style de ce jeu ce démarque des autres jeux).

Aussi, surtout lorsque vous débutez mais c'est valable pour n'importe qui, n'hésitez pas à avoir des sprites Pokemon officiels sous la main pour vous inspiré (je ne dis pas recopier ni découper carrément, il ne s'agit pas de faire de la fusion).
Si vous spritez un Pokemon oiseau par exemple, copier-coller les sprites de Roucool, Piafabec et Cornèbre par exemple à coté de votre plan de travail afin de voir comment les graphistes officiels ont travaillé le bec et le plumage des Pokemon.
Pareil si vous voulez spriter un Pokemon constituez de roche, prenez près de vous les sprites de Grolem, Onyx et Regirock pour voir comment la roche est travaillée.

Allé, maintenant que vous avez étudiez les sprites officiels avec attention, vous êtes prêt pour la pratique, alors lancez vous et n'oubliez pas que le meilleur moyen de progresser reste l'entrainement (vous verrez, quand vous aurez un ans de pratique, vous pourrez comparé vos premiers sprites à vos derniers, vous verrez la différence, je vous le promet Wink ), donc, prenez votre mal en patience si vos débuts ne sont pas transcendant.

_________________
-- Peuple d'Ultima Graphisme, je m'adresse à vous --
-- Prenez les armes et assomez la racaille ! --
-- Vous aussi, devenez une Brute --

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://ultimagraphisme.actifforum.com
GTK
Painteur GTK
Painteur GTK
avatar

Masculin
Nombre de messages : 3597
Age : 28
Humeur/Caractère : Fatigué
Date d'inscription : 29/04/2006

Statut
Expérience:
100/100  (100/100)
Pixel Point Pixel Point: ---

MessageSujet: Re: [PA] - Spriter en Pokemon Style   Mar 21 Juil - 22:15

Like a Star @ heaven Post réservé pour le tutoriel pratique Like a Star @ heaven

_________________
-- Peuple d'Ultima Graphisme, je m'adresse à vous --
-- Prenez les armes et assomez la racaille ! --
-- Vous aussi, devenez une Brute --

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://ultimagraphisme.actifforum.com
sabib el mamoud
Blob Jaune
Blob Jaune
avatar

Masculin
Nombre de messages : 911
Age : 27
Localisation : changeante...on cherchant le Gold Bird
Humeur/Caractère : deconera bien qui deconera le premier
Date d'inscription : 13/05/2006

Statut
Expérience:
0/25  (0/25)
Pixel Point Pixel Point: 10

MessageSujet: Re: [PA] - Spriter en Pokemon Style   Sam 24 Oct - 7:42

alors vraiment bravo, c'est un super bon tuto (rhaa c'est vraiment enervant de remarqué que tu la posté depuis un bout de temps déja sans que je le remarques D: )
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://rpgconcours.free.fr/
Contenu sponsorisé




MessageSujet: Re: [PA] - Spriter en Pokemon Style   

Revenir en haut Aller en bas
 
[PA] - Spriter en Pokemon Style
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Quel est votre style de musique???
» Style de police
» Fashion Style [Accepté]
» Design-Style, Forum de graphisme
» Image en fond de page d'accueil ( Feuille de style CSS )

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Ultima Graphisme :: Aide, Tuto, Script & Recrutement :: Tuto-
Sauter vers: