[Tuto] Sprite, technique d'epimannn

Peut-être à cause de la gestion de la palette - on peut pas faire un beau vaisseau.png 16 couleurs avec paint ...

ben mon paint il veut pas du PNG !
Tout simplement parce que vous etes avec XP ou vista et que je tourne avec un windows 2000 pro

Oui, c'est vrai que win2k ne gère pas nativement le .png sous paint.

Nostalgie ...

désolé mais la fin est raté

faut faire une autre partie pour la colo, c'est pas du gâteau...

faut voir que le tuto n'est pas terminé maintenant que j'ai récupéré gimp, je vais pouvoir continuer...

windows 2000 pro, tout s'explique ...

ah tien
changement de programme

petite mise à jour rapide !

très sympa ton tuto, ça me donne envie de faire un tuto pour créer son premier schmup ^^

dis, dis, je peux le faire? hein? hein?
chuis un pro pour faire des shmup sous gm

nouvelle mise à jour !

par contre vous allez devoir attendre pour les images, mon hébergeur est actuellement HS

essaye archive host c'est gratos

j'ai un hébergeur gratos d'image, et celui que j'utilise est très bien hormis qu'il est down en ce moment ^^

oais mais archive host herberge tout et pas que les images

en attendant, avec ce tutorial, je continue d'améliorer ma technique
la pratique fait beaucoup une fois qu'on a comprit ^^

bon... j'ai changé d'hébergeur d'image en espérant que celui la tienne mieux la route ^^

MMmmh...
franchement c' est pas mal, mais on peut ameliorer...
Déja il faut homogénéiser les styles, tu applique un dégradé trés fort pour bien signifier le cylindre centrale (le cokpit + réacteur en gros) et tu n' applique quasiment pas de dégradés sur les ailes, il faut choisir (perso je choisi la seconde option, je trouve subjectivement parlant le dégradé du mileu pas trés beau (les dégradés cylindrique de ce type ne sont en général pas réussis) mais toi ça va tu réussi manifestement a te débrouiller avec les dégradés a bcps de nuances)
Sinon faudrait aussi repasser les contours en une nuance de bleu + foncée, etc...

Evidemment, ça n' est que mon analyse a partir donc de mon syle et de mes habitudes de spriting ^^
En tout cas tu pratique, donc la technique suivra

petite update en suivant quelques conseils ^^
Se sera surement sujet à modifications...

epimannn a écrit:

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 !)

Beau boulot

c'est vrai que c'est du bon travail
et puis il faut avoir envie de faire des tutos :sourire:

Magma_GoGo a écrit:

epimannn a écrit:

[quote énorme]

Beau boulot

Quand tu cites un post aussi long, évites de le laisser en entier dans la quote, ça prend de la place inutilement.