Night.png);">
Apprendre


Vous êtes
nouveau sur
Oniromancie?

Visite guidée
du site


Découvrir
RPG Maker


Apprendre
RPG Maker

Tutoriels
Guides
Making-of

Dans le
Forum

Section Entraide

Jeux: puie z / Jeux: Citymaime - Chapitre 1 / Jeux: Mer, îles et fous / News: Du neuf dans le making / News: Muma|Rope est disponible en (...) / Chat

Bienvenue
visiteur !




publicité RPG Maker!

Statistiques

Liste des
membres


Contact

Mentions légales

260 connectés actuellement

30734741 visiteurs
depuis l'ouverture

1706 visiteurs
aujourd'hui



Barre de séparation

Partenaires

Indiexpo

Akademiya RPG Maker

Blog Alioune Fall

Fairy Tail Constellations

Le Comptoir Du clickeur

Lumen

Guelnika & E-magination

Level Up!

Zarok

Tous nos partenaires

Devenir
partenaire



Editer ses graphismes Partie 1 : Colorer un sprite

Permet d'éditer une image pour changer ses couleurs, en obtenant un résultat plus crédible que la fonction teinte de RPG Maker.

Ecrit par canar le 22/07/2015


❤ 0

Varier ses Graphismes pour les nuls - 15 min chrono






Bonjour à toi,

Sans doute amateur au mieux dans ce vaste domaine qu'est l'art graphique !
Heureusement pour toi et moi, le pixel art c'est comme la cuisine, il y a des recettes et on peut sans sortir honnêtement en les suivant consciencieusement.
Celle-ci ne comporte que 5 étapes, expliquées en détail, avec une longue FAQ pour répondre aux problèmes fréquemment rencontré et aux approfondissements.

Aujourd'hui nous allons voir en détail comment varier rapidement et joliment les couleurs de nos charset - applicable également aux battler mais c'est plus long. Je m'en sers sans modération pour donner un peu plus de variété à mes PnJ sans trop utiliser l'outil de RPG Maker XP qui fait varier les teintes de façon tout à fait... laide. En fait, nous allons utiliser quasiment le même outil mais en l'appliquant seulement à des zones précises de nos personnages.

Sans plus attendre, il faudra te munir :
- de GIMP, cela marche également sur Photoshop mais je ne connais pas les équivalents
- d'un minimum de goût en matière de couleur (mes conseils persos plus bas)



Etape n°1 : Choix de l'Image Initiale

Choisir le charset de base et l'ouvrir sur GIMP, nous allons immédiatement en créer une copie de la façon suivante :

- Cliquer sur Fichier - Nouvelle Image (raccourci Ctrl-N)

- Options Avancées : Remplir avec "Transparence"
Si vous ignorez cette étape, votre personnage aura un fond blanc au lieu d'être sur un fond à damier gris. Cela peut poser problème lors de l'importation de votre image sur RPG Maker !

- Copier le Charset original sur la nouvelle image.



Etape n°2 : Préparation des Calques

On va maintenant identifier le nombre de couleurs de notre Charset, et créer autant de calque. Si vous n'y connaissez rien à Gimp, suivez les instructions.

- Ouvrir l'onglet "Calque" dans Fenêtres - Fenêtres Ancrables - Calques (raccourci Ctrl-L)

- Comptez le nombre de teinte du Charset : dans l'exemple on a le Vert des cheveux, le bleu de la chemise, le marron du pantalon et le gris des chaussures. Je vais donc créer 4 nouveaux Calques (petit bouton en bas à gauche de l'onglet, voir image), mieux vaut bien les nommer.
NB : J'aurai également pu faire varier les yeux mais je suis fainéant.
image



Etape n°3 : Sélection des Couleurs

Nous voilà à l'étape la plus fastidieuse, mais je vous rassure, elle n'est pas compliquée.

- Dans la boite à outils (Fenêtre - Boîte à Outils ou Ctrl-B) on va prendre l'outil Sélection par Couleur (voir image)

- Vérifiez les propriétés de l'outil (Fenêtre - Fenêtres Ancrables - Options de l'Outil), le Seuil doit être positionné à 0 (il doit être à 15 à l'origine)

- En maintenant la touche Maj appuyée, cliquez sur tous les pixels d'une couleur semblable afin d'obtenir une sélection semblable à la mienne (indiquée par les "fourmis"). N'hésitez pas à zoomer au maximum pour cette opération, il faut impérativement que vous ayez tout sélectionné ! Si la sélection n'opère pas, vérifiez que vous êtes bien sur le calque où se trouve votre image de départ (Arrière plan par défaut)
image

- Il vous faudra peut-être corriger votre sélection, si vous "attrapez" des pixels qui ne sont pas sensés y être. Dans l'image qui suit, j'ai involontairement sélectionné des pixels du bras car ils sont de la même couleur que le pantalon. Pour les retirez, maintenez Ctrl et faites une sélection rectangulaire (dans la boîte à outil, raccourci R). C'est la partie la plus longue et la plus ennuyante.
image

- Copiez votre image (Ctrl-C) puis sélectionnez le calque correspondant (pour moi le calque "Cheveux") et collez là. Attention, si vous n'étiez pas sur le bon calque, vous n'aurez probablement rien copié. Pas de soucis, la fonction Retour (Ctrl-Z) vous permet de récupérer facilement votre sélection.

- Revenez sur le calque initial (Arrière plan), Sélectionnez les autres couleurs de la même façon et placez les chacune sur un calque séparé.

- A ce stade, une petite vérification s'impose - vous pourrez l'omettre quand vous aurez l'habitude. Sélectionnez le calque Arrière Plan et cliquez sur l'oeil à gauche. Normalement, vous devriez voir apparaître quel que chose comme ça.
image

- Réaffichez l'arrière plan

- Pensez à enregistrer votre travail, on ne sait jamais. Si vous sauvegardez maintenant, vous pourrez facilement recommencer la colorisation (évitez simplement de sauvegarder par la suite).



Etape n°4 : Colorisation

Nous voilà à l'étape que je trouve personnellement la plus amusante, et qui a pour avantage d'être très rapide (beaucoup plus que si vous essayez de changer les couleurs pixel par pixel).

- Sélectionnez l'un de vos calques, je commence généralement par la couleur dominante (Couleur 1)

- Allez dans Couleurs - Colorier, un petit écran va s'afficher. Et là, magie !
L'onglet Teinte permet de déterminer la couleur
L'onglet Saturation permet de déterminer son intensité, diminuez le à 0 pour obtenir du gris. Attention, n'abusez pas de cet onglet si vous voulez gardez des couleurs naturelles !
L'onglet luminosité fait varier la luminosité, le 0 donne du Noir.

- NB : Le noir n'est pas une couleur naturelle ! Si vous voulez un personnage sombre, réglez la Saturation à 0 et la Luminosité à -40 -60 (selon vos goûts).

- Modifiez de même tous vos calques.

- Allez dans Fichier - Exporter votre image en PNG (le format de base). Attention, le JPEG ne conserve pas la transparence !
Mon travail terminé, avec juste une modification des cheveux :
image

- Important (Surtout si vous utilisez la Saturation et la Luminosité)
Annulez toutes vos modifications avec Edition - Retour (Ctrl-Z) pour revenir à l'image initiale.



Etape n°5 : Choix des Couleurs

Mon point de vue personnel, mais si vous n'avez vraiment pas d'idée...
Un Charset est généralement constitué de 5 couleurs distinctes : la peau, les cheveux, la couleur principale du vêtement (souvent la veste), la couleur secondaire du vêtement (souvent le pantalon) et les bijoux / accessoires (il vaut mieux modifier leur couleur prudemment).

Règle 1 : Evitez les vêtements/cheveux/autres qui ont des couleurs plus claires que le visage, sinon le regard s'en détournera rapidement. Or c'est généralement le visage qui nous renseigne sur l'identité du personnage.

Règle 2 : Pour qu'un Charset soit "lisible", il va lui falloir une teinte dominante et une teinte de contraste. La couleur de contraste va souvent être une couleur froide (rouge/bleu/violet) si la couleur primaire est chaude (cyan, vert, jaune, orange) et inversement.
Je choisis généralement la teinte primaire et secondaire pour ces rôles. Vous pouvez avoir la même couleur primaire et secondaire, mais il faudra alors que vos accessoires ou les cheveux fassent ressortir un peu votre personnage, à moins qu'il ne soit destiné à rester dans l'ombre évidemment.

Règle 3 : Les accessoires doivent être nettement visible, ils accentuent l'impression de détail du personnage. Cependant, visible ne signifie pas flashy au contraire : à moins que votre personnage n'ait le look adéquat, des accessoires flashy attireront le regard et créeront une impression d'inhomogénéité de l'ensemble.



FAQ

- "J'ai quelques pixels qui n'ont pas changé de couleur ! Dois-je reprendre du début ?"
Non pas besoin, il suffit de rajouter un calque (tu peux l'appeler Correction), de sélectionner l'outil Pipette (Raccourci O) et de cocher l'option "Echantillonner sur tous les calques".
Prend ensuite l'outil Crayon (Raccourci N) et diminue sa taille à 1
Sélectionne maintenant le calque Correction et remplis les pixels de la mauvaise couleur au crayon, en ayant au préalable sélectionné la couleur voulue à côté avec un Ctrl + Clic
Attention : cela ne fonctionne sur tous les calques que si la fonction Pipette à été modifiée ! Si tu ne l'as pas fait, tu auras du noir.

- "Je ne peux pas modifier le blanc/gris/noir ! Que faire ?" Pas d'inquiétude c'est normal, c'est dû au fonctionnement de la fonction Colorier. Sans entrer dans les détails, voilà la solution.
Créez un nouveau calque, son nom importe peu.
Choisissez la couleur (en cliquant sur le carré Noir) que vous voulez obtenir à la fin (Indice, mieux vaut préférer une couleur claire), et déplacez la sur l'écran (en ayant sélectionné le nouveau calque, cela va sans dire)
Déplacez le calque au dessus du calque qui pose problème.
Cachez tous les calques en cliquant sur l'oeil, sauf la couleur et le calque à problème.
Normalement vous devriez avoir un écran très laid et monochrome.
Au dessus de la liste des calques, il y a un onglet "Mode". Cliquez dessus et sélectionnez "Multiplier".
Et là magie ! Votre zone gênante à pris la couleur que vous vouliez en conservant les ombres !
Dites moi dans les commentaires s'il vous faut absolument des Screenshot, je n'avais pas ce problème dans mon exemple.

- "Est-il possible de donner une teinte particulière à un calque, sans passer par l'outil Colorier que je trouve imprécis ?"
Remarque très pertinente en ce qui concerne les couleurs claires, dont le rendu est difficile à trouver (un bon équilibre Luminosité/Saturation est nécessaire). Une autre méthode parfois plus efficace consiste à utiliser l'étape expliquer ci-dessus à propos des gris/blancs/noirs.
Prenez le calque concerné et appliquer lui la fonction Couleur - Désaturer, choisissez le rendu qui vous paraîtra le meilleur.
Sélectionnez la couleur qu'il vous faut avec la pipette ou l'outil de couleur, puis suivez les étapes ci-dessus.

- "J'aimerai changer le bronzage de mon personnage, mais je trouve cela difficile avec la méthode des couleurs !"
Pas de panique, si tu as essayé alors tu dois avoir un calque Peau quelque part. A partir de là, on va appliquer la méthode ci dessus en choisissant une couleur marron, jaune, blanche ou marron très foncé (le noir est à proscrire !)

- "J'aimerai ajouter/ôter une partie du personnage, est-ce possible ?"
Tout à fait, mais c'est plus long et un peu plus difficile.
Il va vous falloir deux images : celle que vous voulez modifier et une image "de base" où vous allez chercher ce qu'il vous faut.
Par exemple, pour ajouter une moustache à mon personnage (Génial un enfant à moustache !), je pourrai ouvrir également le Charset Civilian09 qui en a une belle. Si je voulais au contraire enlever la moustache de ce dernier, je vais chercher un personnage avec un visage semblable qui n'a pas de moustache.
Créez un nouveau calque sur votre Charset à modifier
Copiez y les différents moustaches/bijoux/peau nue (de face, de profil...) en veillant à bien les aligner sur votre personnage (Prenez un point de repère comme l'oeil)
Avec l'onglet sélection, sélectionnez et supprimez tous les pixels inutiles. Pensez à conserver le tour de la moustache qui doit être plus ombré !
Pensez à modifier la couleur de votre moustache pour homogénéiser votre Charset
Si vous avez le courage, vous pouvez aussi modifier les cheveux de votre Charset mais attention : comme tous les éléments qui dépassent, il vous faudra sans doute faire des retouches à la main. Essayez de trouver une référence et de respecter l'alternance des ombrages dans vos pixels, ce n'est pas très compliqué mais il faut prendre le coup de main.

- "Les couleurs que j'ai sont trop sombres/flashy, comment cela se fait-il ?"
J'avais dit de ne pas abuser de la luminosité, et d'annuler les changements à chaque nouvelle image ! N'essayez pas "d'améliorer" ça avec les onglets de luminosité, vous ne ferez qu'obtenir un résultat pire encore. Il y a trois méthodes possibles :
Soit tu reviens en arrière jusqu'à retrouver l'image initial
Soit tu recommences depuis le début (d'où l'intérêt de sauvegarder avant la première transformation)
Soit tu vas dans Couleurs - Luminosité/Contraste et tu essaie de t'en sortir en variant doucement la luminosité et plus largement le contraste. Méthode déconseillée pour les débutants.


Voilà, vous n'avez plus de raison de ne pas varier vos RTP ! Avec un peu d'entraînement, il faut moins de 15min pour créer la base de travail et 2min pour faire et exporter chaque variante.

A vos pinceaux !

Comme toujours je suis ouvert aux critiques constructives, ainsi qu'aux appréciations.


Mis à jour le 12 février 2021.
Images restaurées.





verehn - posté le 22/07/2015 à 18:28:44 (9058 messages postés) - honor

❤ 0

Vhehrhehn

La plupart des makers devraient faire ça.


Bravo pour l'article sinon, bien complet avec la FAQ, je me servirai du lien dans les messages d'entraide.

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


Criket - posté le 22/07/2015 à 19:39:59 (1389 messages postés)

❤ 0

LesFiersAuxCrabes ftw

Très bon tuto :sourire2

Que fera le passé ? Rien. Que fera le futur ? Tout. Rejoignez le parti du futur !


canar - posté le 25/07/2015 à 04:44:25 (64 messages postés)

❤ 0

Ceci est un canar. Sans d. Il paraît.

Merci verehn, c'est un peu le but : je vois que pas mal de gens râlent après les RTP déjà vu, moi même qui en suis à mon x-ième projet ça me donne la flemme de débugger mes propres trucs tellement c'est répétitif.
Du coup j'ai mis au point une petite technique assez rapide, j'en ai fait plus de 100 en une journée comme ça (3 variations de chaque perso de RMXP), je voulais l'upload mais j'arrive pas à faire un pack (sauf si on peut directement upload un zip ?), je vais donc enlever ma dernière note :s

Et puis corriger deux-trois détail, j'ai écrit en le faisant en même temps, je suis passé au dessus de deux trois trucs (comment on edit un tuto ?) :

Ligne 3 : "s'en sortir"
Etape n°3 troisième - : il ne s'agit pas de Ctrl mais de Maj pour faire des multi sélection
Je me souviens qu'il y a une autre faute mais je ne la retrouve plus.
Et j'aurai pu mettre quelques titres intermédiaires en gras, ça aurait amélioré le confort de lecture...

La vie est un éternel apprentissage, ça tombe bien j'adore apprendre ! Projet en cours (40%) 1/3 du jeu réalisé, grosse phase de test avant la prochaine démo


verehn - posté le 28/07/2015 à 13:14:45 (9058 messages postés) - honor

❤ 0

Vhehrhehn

J'ai modifié l'article en conséquence de ce que tu as dit. ;)

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

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/Plugins | Ressources graphiques / sonores | 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