[Tuto] Sprite, technique d'epimannn

Bonjour !
Apparement mes sprites plaisent donc je vais expliquer comment je les fais pas à pas...

J'ai vu beaucoup de tutorial sur lesquels il manque des choses très importantes...

Je vais donc découper pas à pas ma manière de faire et les outils que j'utilise.

I] Outils utilisés :

GIMP 2.0 : il possède des outils très intéressant et puissant !
les fonctions que j'utilise le plus sont :

le crayon avec un scale à 0,10
le path, en désactivant l'antialiasing et avec une largeur d'1 px pour la ligne
la grille, qui est par défaut à 10pixel de coté. Je l'ai configurée en 1px de coté.
l'outil de dégradé.

Paint : je l'utilise pour des création isométrique, je le trouve plus pratique pour faire les plans que gimp... une fois que j'ai mon plan, je passe à gimp pour la coloration.

II] Nécessaire avant de commencer :

Le croquis sur papier ! Il a pas besoin d'être super précis... il nous faut juste les traits principaux...

La couleur principale de l'objet. Pour ma part, je vais choisir du bleu dans mon exemple.

III] Tracer le croquis dans le logiciel

Maintenant qu'on à la forme sur le papier, et la couleur principale de l'objet, on peut prendre notre logiciel pour créer les contours de notre objet.

Premières choses que je fais, repérer le centre de mon image et afficher la grille et je zoom a 800% minimum... Je prends l'outil path de gimp, et je fais les diagonales... Ensuite, je note les coordonnées qui s'affichent en bas à gauche... Je prends le crayon et je repasse en noir le ou les carrés désignant le centre.

Dans mon exemple, j'ai une image de 80 pixel de haut et 80 pixel de large... Je tombe donc sur une ligne du repère et je n'ai pas de pixel central. je prends donc les 4 pixels autour du point d'intersection de mes path qui vont représenter mon centre.



Ensuite, je prends mon croquis... Et j'entame les formes extérieur...
Là, j'entame un nouvel avion. Je commence donc par la carlingue et le cockpit.

Je ne fais que la première moitié pour gagner du temps.

Comme vous le voyez, les traits sont irréguliers pour du pixel art, il va donc falloir régler cela.

Je prends donc le crayon réglé à 0,10 au scale, et la couleur blanche. Je me lance dans la correction des traits. J'enlève aussi les angles pointus.
Regardez attentivement les deux sprite en zoomant pour que le contour prenne tout votre écran pour bien visualiser !



Maintenant, je fais la symétrie... je prend donc l'outil baguette magique et je sélectionne le fond blanc... Ca va sélectionner toute la partie blanche... Ensuite je vais dans Select et je fais invert. Et ca me sélectionne tous mes traits noir plus le point centrale !

Je fais un copié, je désélectionne en passant par le menu Select et en prenant None, et je colle ( past into en anglais ). Ensuite, je vais dans Layer, transform et enfin flip horizontaly et mon collage se retrouve dans le bon sens, y a plus qu'a positionner le point centrale sur lui-meme et nous avons notre forme bien symétrique ! On retourne dans layer et on fait anchor layer.



Ca nous permet de voir si l'ont à pas vu trop gros ou trop mince...
Pour ma part, je le trouve légèrement trop gros le fuselage de base, mais on verra plus tard avec les ailes ce que ca va donner ^^

Bon maintenant, on met les ailes ! on prend l'outil path et on dessine les aile comme on les a fait sur le dessin... Et on utilise la technique utilisée pour le fuselage pour faire les ailes symétriques !



Voilà... bon il y a plusieurs problèmes...
Fuselage trop large de quelques pixels, et trop long en hauteur... qu'a cela ne tienne ! On va retravailler tout ca maintenant que nous avons la forme extérieur !

On utilise les outils de sélection, et on remodèle tout ca par étape de 2 pixels par cotés... Toujours en gardant le point de symétrie !

Maintenant qu'il est redimensionné correctement, on va pouvoir travailler d'autres détails...


Je prend donc une autre couleur qui va bien jurer avec le bleu pour bien voir les différents niveaux.

J'ai prit vert fluo ! J'ai entamer les ailerons arrière !



Comme c'est sur un niveau supérieur, je vais effacer les lignes noires qui n'ont rien à faire dans mes ailerons...
Je ne fais qu'un coté, comme j'ai plus mon centre de symétrie, je vais utiliser les coordonnées, rien ne vous empèche de refaire votre centre de symétrie s'il disparait pendant vos manipulations... J'en profite aussi pour corriger les défaut du path.

Je fais donc la technique de la moitiée que je copie/colle/retourne !

Et voilà ^^


Bon maintenant je m'apercoit que je nez de l'avion n'est pas assez effilé... Je verrais plus tard pour faire quelque chose de plus propre...

Donc j'ai retravaillé le nez... J'ai utiliser l'outil path et j'ai légèrement courbé la droite, puis j'ai fait la technique du copié/collé/pivoté.
J'en profite par la meme occasion pour faire le cockpit.

Voilà, nous avons maintenant la forme globale de l'avions.



IV] Faire les détails

Maintenant on va s'attaquer aux petits détails... Tout ce qui concerne les canons, les plaques et tout ça. J'utilise pour ca, je crayon !

Je fais donc les tuyères en premières. C'est le plus simple et ca va donner du volume à l'avion.

J'ai ensuite fait des sortes de petits canon au bout des ailes... ca lui donne un air un peu plus agressif ^^ Et j'ai fait 2 missiles pour qu'il soit complet au niveau de l'armement !



Voila ! Bon... il va falloir faire les détails de carosserie... Je suis pas super bon la dedans, mais on va essayer quand meme !

Alors... les ailes en premier....



Reste plus qu'a passer à la colorisation !

V] Début de la colorisation

Alors, si on se souvient du début, j'ai dit qu'on allait le faire en bleu...
Le truc, c'est qu'il faut se limiter au nombres de couleurs... J'essaie de ne pas dépasser les 24 nuances de couleurs lors de mes conceptions...

Voilà comment je procède ! Je me créer ma palette de bleu ^^
Je prend donc un bleu pur, 0000FF en html ( ou valeur hexadécimale ).
Et je créer mes nuances en jouant sur le noir et le blanc pour obtenir des bleus claires et sombres... Il ne me restera plus qu'à choisir le bleu qui me convient !



J'ai actuellement 11 nuances... Ce qui s'avère généralement suffisant...
Mais parfois, on a besoin de nuances supplémentaires intermédiaires pour faire des dégradés plus "fluides".

Maintenant, pour savoir quel bleu va être notre couleur principale, on prend la pipette, on prend un couleur de notre palette que nous avons prit le temps de créer, et nous faisons des tests sur la carlingue !

Il faut que la couleur retenu soit celle qui nous plaise ! Pas forcément une couleur réaliste... Sinon on va perdre du temps à jouer avec les réglages... Et il sera très dur d'obtenir un résultat photo réaliste au début de l'apprentissage...

Voila un premier essai...


Je le trouve pas trop mal comme ca ^^ Il est très plat, mais il commence à avoir de a gueule !

Amusez vous à créer des palettes différentes et à les tester... Sachant que la première couleur que vous choisirez sera la couleur de base ! Et vous n'êtes pas obligé de prendre une couleur pure comme base ^^

N'hésitez pas non plus à changer la couleur de fond... Je passe souvent du blanc au noir pour voir si mes couleurs vont bien ensemble... Ca permet de "faire les contrastes" avec un fond d'une couleur plus sombre, j'utilise souvent le noir et le blanc pour bien voir les différences ^^

Une fois la palette construite, n'oubliez SURTOUT pa de définir votre source lumineuse et sa direction...
Pour ma part, je la prendrai perpendiculaire à l'avion, c'est à dire que la source de lumière sera au dessus de l'avion hors de l'écran ^^

Cette source de lumière va définir les points clair et sombre et permettre de faire les dégradés qui donneront du volume à vos créations !

C'est aussi l'étape la plus compliquée... Car il faut imaginer notre création dans un environnement lumineux... on peut s'aider de photos !

Petites astuce, pour un avions, j'ai prit une maquette d'avion, un endroit peu lumineux presque noir... Mon appareil photo avec le flash et pouf une photo !

Comme ca, les ombres sont bien présentes et on les voit bien ! On peut aussi extraire une palette de couleur de ce genre de photo...

VI] Début du shading

Bon, au fur et à mesure que je travaille sur le sprite, j'essaie de corriger mes erreurs de débutant ^^

Par exemple, le bleu qui me plaisait et avec lequel je voulais travailler, pose des problèmes par rapport à la palette définie... Je vais donc devoir la retravailler au fur et à mesure... En essayant de pas dépasser les 16 couleurs...

alors... ma source lumineuse et sa direction :



La source lumineuse c'est le point jaune, la fleche, sa direction ^^
Elle sera aussi en hauteur !

Première chose que je vais faire, donner un peu de volume avec les contours extérieurs, pour cela, je prend une couleur plus claire ^^

Je la met sur le devant des ailes.
Je prend une autre couleur entre le bleu des ailes et le bleu clair sur le devant des ailes.
Et enfin, je prend un bleu un peu plus foncé que les ailes pour l'arrière des ailes.



J'ai changé le fond pour que ca ressorte mieux pour vous et pour moi...

Comme l'arrière des ailes possède des volets, je vais donc faire un petit dégradé... Je prends un bleu un peu plus clair que celui que j'ai prit juste avant...

Pour le moment, je suis resté dans la palette choisie...



Je vais m'attaquer maintenant aux ailerons arrières :
Même procédure ! Sauf que comme j'ai envie qu'elles soit plus haute que les ailes, on va les faire plus claire !

Et c'est là, que je dois rajouter une couleur intermédiaire...



Vous aurez remarquez que je repasse les lignes noires et vertes pour faire mes volumes

Bon... On va commencer à donner une forme avec la carlingue...
C'est là où j'ai vraiment retravailler la palette définie pour être plus précis... Je suis actuellement à 12 couleurs...

J'en ai profiter pour modifier légèrement la forme du cockpit et de l'arrière du fuselage et les tuyères.

Mon truc, je prend un bleu plus foncé que la couleur de base, pas trop quand meme... Et je trace la première ligne tout le long à l'intérieur du trait noir... ensuite, je prends des bleus légèrement plus clairs au fur et à mesure... la troisième couleur étant celle de base...

C'est un peu confus, mais en faisant plusieurs essai, on obtient quelque chose de correct, puis après en remontant, on prend des bleu un peu plus clair au fur et à mesure !

Pour l'armature du cockpit, j'ai prit le bleu le plus foncé !



On va lui donner maintenant un aspect moins plastique ! On prend le bleu un peu plus foncé et on repasse les lignes noires du fuselage !

Et pour ne pas avoir un effet bizarre avec les tuyères, on va s'en occuper maintenant !

On va donc prendre un bleu légèrement plus clair que la couleur de base et repasser les contours latéraux des tuyères et prendre un des deux bleus les plus claires de notre palette pour l'arrête avant des tuyères !
Ensuite, on fera attention a prendre un bleu légèrement moins clair que celui des ailerons arrières pour le dessus des tuyères !

Pour ce qui est de l'entrée des tuyères, on va les faire entre le bleu très foncé, et le bleu le plus foncé du dégradé !



Interessons nous au cockpit... Il est de la couleur la plus claire !
Les armatures avec le bleu le plus foncé vont me permettre de définir le dégradé ! la partie la plus éclairée sera l'avant du cockpit, le bleu de base le milieu, et un bleu plus foncé sera l'arrière !

J'ai repassé les contours derrières l'armature arrière avec un bleu plutot foncé pour montré une sorte d'ombrage et ca amplifie l'effet de profondeur.

J'en ai profiter pour repasser les trait noir de l'avant avec les couleurs du dégradé ! On commence à avir un zoli n'avion maintenant !



A la suite des conseils que j'ai recu, j'ai tenté d'améliorer mon sprite...



J'ai tenté d'utiliser une feinte pour les détails des ailes et des ailerons...
A savoir, faire des lignes en pointillés...

Sur mon LCD ca donne à peut près ce que je veux... Mais le LCD manque de précision pour que je puisse vraiment juger... Ca vaut pas un bon vieux CRT sur lequel, je suis presque sur qu'on voit bien les pointillés... LCD de m**** avec leur flou et leur technique sans précision...

Et pourtant celui que j'utilise est plutot bon... Mais ca vaut pas le CRT

Enfin voilà dites moi ce que vous voyez...

( A suivre ! Quoi toujours pas fini ? Et non !)

ca marche aussi avec paint ???

oui, meme si les outils sont légèrement différents...
Pour la colorisation, j'essaierai d'utiliser une technique adaptée pour paint ^^

ok

Petite mise à jour !

Wahou cool

Nice !

je viens de m'appercevoir d'une erreur de conception au niveau des tuyères

je sais je suis un perfectionniste dans l'ame

c quoi les tuyères ?

les trucs entre les ailes et la carlingue... je les ai mal faites

ah ok

sinon est-ce qu'il y en a qui s'y sont essayé jusqu'à maintenant ?
Les résultats sont-il meilleur qu'avant en ce qui vous concerne ?

Je suis curieux et ca m'intéresse
Car je ferai surement un tutorial sur la 3D isométrique ^^
Et si vous êtes gentils, avec les points de fuites pour faire de beaux écran de présentation en perspective

j'ai pas encore pu essayer

J'ai arrêté de spriter mais quand je m'y remets, j'essaie !

je sprite comme de la *****. de toute facon, j'utiilise toshop pour spriter et là j'ai pas toshop. mon ami doit me le refiler un de ses 4.

pour spriter, t'as vu que j'utilise des outils que meme paint possède à part la grille et le path... grille dont on peut se passer grace aux coordonnées et on peut le faire à la main les lignes droites... pour ce qui est des courbes, tu fais des cercles que tu efface après...

Tout peut etre fait avec paint en pixel art...

Prends gimp, tu seras pas dépaysé de toshop...

Euh perso je dirais que GIMP est très dépaysant quand on est habitué à Photoshop mais entk, ouin, aussi bien utiliser Paint ou un programme fait exprès pour spriter genre GraphicsGale. Il est bien et complet comme tutoriel pour les bases, mais comme t'as dit le résultat final est pas mal (trop) plat.
Mais en fait, ta technique est assez semblable a la mienne et probablement à plein d'autres "spriters" (bien que je ne me considère pas du tout bon en pixel-art), surtout dans le fait de beaucoup copier/coller pour sauver du temps et que tout soit symétrique.

heu... t'as déjà vu un avion sans symétrie toi ?

Non... Et j'ai jamais dit ça non plus. Bon j'ai dû mal m'exprimer mais tant pis.

epimann, quand je dis que je sprite avec toshop, c'est que je sprite avec toshop. je connais gimp.

Moi, jle trouve pas mal e mien =D

morgan a écrit:

Moi, jle trouve pas mal e mien =D

c'est vrai qu'il est pas mal

C'est mieux avec du shading quand même...

Bon j'ai cramé mon disque dur je dois retélécharger et réinstaller gimp...
Le format PNG n'étant pas supporté par paint...

Je continuerai le tuto sur les ombres

Sur l'avion gris, il y a des incohérence par rapport à ta source de lumière que j'estime dans le coin haut gauche c'est ca ?

j'expliquerais en détail étape par étape comment je fais ^^

epimannn a écrit:

Bon j'ai cramé mon disque dur

Ouch, ça faut le faire quand même...

epimannn a écrit:

Bon j'ai cramé mon disque dur

:p_lol: comment t'as fait ???

epimannn a écrit:

Le format PNG n'étant pas supporté par paint...

? ah bon ?

Pourtant, j'ouvre, j'édite, et j'enregistre des images au format PNG avec Paint.

Euh ouais pareil...