[Débutant] Créez vos vêtements - Partie III - The Gimp

Pour rappel, la création de vêtements sous Sims 3 fait l'objet de plusieurs tutoriels, tous créés en collaboration dont voici la liste :

Partie I : Créez vos vêtements - Créer un nouveau projet de vêtement sous TSRW

Partie II : Créez vos vêtements - les différents outils du TSRW

Partie III : Créez vos vêtements - Avec Gimp
Créer vos vêtements - Avec Photoshop
Créez vos vêtements - Avec Paint.net
Créez vos vêtements - Avec Photofiltre

Partie IV : Créez vos vêtements - Onglet mesh du TSRW, particularités du clothing specular et du normalmap

Partie V : Créez vos vêtements - Création du Clothing specular et du normalmap - Avec Gimp
Créez vos vêtements - Création du Clothing specular et du normalmap - Avec Photoshop
Créez vos vêtements - Création du Clothing specular et du normalmap - Avec Paint.net
Créez vos vêtements - Création du Clothing specular et du normalmap - Avec Photofiltre

Partie VI : Créez vos vêtements - Finalisation et exportation du vêtement en fichier jouable


Si vous désirez rajouter une 4e zone recolorable avec Gimp, c'est là
------------------------------------------------------------------------------------------------------------------------
Plan

I) Pré-requis
II) Préparation des photos
III) Modification du multiplier
A) "Reconstruction" des habits
Le débardeur
La jupe
La ceinture
B) Désaturation
C) Les ombres
IV) L'overlay
V) Le mask
------------------------------------------------------------------------------------------------------------------------

Bonjour et bienvenue dans la partie du tutoriel vous montrant les opérations à effectuer avec The Gimp pour créer vos propres vêtements en suivant la méthode de photoskinnig.

I) Pré-requis

Pour suivre ce tutoriel, vous avez besoin de :

• The Gimp
  
• Vos fichiers exportés du TSRW correctement renommés et rangés dans leur dossier "Projet vêtement". Vous verrez que je ne me sers que de multiplier.png, tous les autres se construisent à partir de lui.
  
• Accessoirement, le plug-in dds de The Gimp ici : http://registry.gimp.org/node/70
  

Note sur les plug in :
Pour en savoir plus sur les plug-in de The Gimp (notamment leur installation) : c'est ici

Note sur le format .dds :
Comme vous le lirez dans cette discussion, le plug-in DDS fonctionne de façon aléatoire.
S’il fonctionne chez vous, parfait, exportez depuis TSRW en .dds, enregistrez vos fichiers en .dds (n'oubliez pas de cliquer sur "Generate mipmap" !)et importez en .dds
Sur mon installation, il ne fonctionne pas. Personnellement, je prépare donc mes .png sous Gimp, et une fois complètement achevés, je les convertis en .dds sous Paint.net.
Dans la suite de ce tuto, je ne vous parlerai plus des formats après cette remarque. A vous de voir dans quel format vous souhaitez travailler.

Préambule
Ce tutoriel est long car j'ai beaucoup détaillé un certain nombre d'opérations de base pour que les débutants puissent suivre. Que vous soyez donc débutant ou expert, ne vous laissez donc pas rebuter par la longueur.
Pour ce tutoriel, je vais me placer dans des conditions non optimales afin de voir l’ensemble des modifications que l’on peut rajouter : j’ai donc cherché sur internet des photos de vêtements dont je n’ai que l’avant (nous devrons re-créer l’arrière) et dont la luminosité varie.
Je n’ai pas poussé le vice jusqu’à aller chercher des photos de vêtement floues, il faut savoir s’arrêter et choisir les meilleures photos. Si vous ne trouvez pas de photo idéale du vêtement que vous désirez re-créer dans les Sims, aguerrissez-vous un peu à la technique, vous pourrez bientôt le recréer de A à Z (ou presque   )
Nous allons  donc dans ce tutoriel réaliser un ensemble débardeur/jupe/ceinture, voilà les éléments que j’ai préparés. Avis aux fashionistas, on n'est pas forcément là pour faire du joli, mais pour apprendre


A ce stade, je réfléchis déjà à la recoloration : je veux que tout soit recolorable à part le col en dentelle du débardeur et la partie noire de la ceinture.

Vous pouvez télécharger les 3 images de base, si vous désirez vous entraîner en suivant ce tuto.


On va tenter de mettre tout ça sur un petit ensemble, j’ai choisi ce mesh comme départ, issu du jeu de base, qui présente l’intérêt d’être complètement « peint » sur le mannequin pour le torse.



II) Préparation des photos

Les photos sont toutes sur un fond blanc dont il va falloir se débarrasser.
Ouvrez le débardeur avec Gimp.
Sélectionnez la baguette magique :

Puis cliquez sur le blanc autour du débardeur et appuyer sur "Suppr"

Vous pouvez voir que ce n'est pas parfait sur les bords, il reste un peu de blanc (cela se voit mieux sur un fond sombre). De plus, on n'a pas besoin de la partie de l'arrière que l'on voit en haut.
Entourez les parties que vous ne voulez plus voir au lasso, en zoomant autant que nécessaire.
Appuyez sur Suppr lorsque vous avez fermé la sélection. Répétez autant de fois que nécessaire pour vous débarrasser des choses inutiles.
Vous devez obtenir ceci :
Gardez votre fichier ouvert.
Répétez l'opération pour la jupe et la ceinture. Vous obtenez :

III) Modification du multiplier

A)"Reconstruction" des habits

♦ Le débardeur
Ouvrez votre fichier "multiplier" dans Gimp.
Allez sur la photo du débardeur détouré puis sélectionnez tout (ctrl A) et copiez (ctrl C).
Retournez sur le multiplier et cliquez sur Edition>coller comme> nouveau calque
Répétez l'opération avec la jupe et la ceinture de façon à avoir 4 calques dans votre document.
Nommez vos calques ! (clic droit sur le calque copié puis "modifier les attributs du calque")
Rappelez-vous pour la suite : utilisez le plus possible de calques et enregistrez régulièrement.
On va commencer par travailler le débardeur.
Cachez la jupe et la ceinture en cliquant sur l'œil à côté des calques :


Ici, le débardeur est très long, donc lorsque l'on redimensionnera, on peut lui donner la taille de la robe, en longueur. On enlèvera plus tard ce qu'on ne veut pas voir apparaitre.


Comme cela, c'est pas mal.
Remarque : N'hésitez pas à modifier temporairement l'opacité de votre calque débardeur afin de le placer correctement :

Spoiler:

En général, je me cale par rapport à la position de la poitrine, c'est un bon point de repère. N'utilisez plus l'outil redimmensionner, cela déformerait la maille du débardeur. On va plutôt re-créer les parties qui manquent sur les côtés, mais seulement sur l'avant du vêtement.
Cachez votre calque débardeur et sélectionnez le bas de la robe grâce au lasso :


Faites réapparaitre le débardeur et créez un nouveau calque, fond transparent, nommé "débardeur complété". Si vous êtes à l'aise avec l'outil tampon, ne créez pas ce calque et travaillez directement sur le calque "débardeur". Moi, je continue avec mon calque "débardeur complété".
Sélectionnez l'outil tampon (pour en savoir plus sur l'outil tampon : c'est ici), sélectionnez un pinceau rond, taille 15, et cliquez sur le milieu du débardeur tout en appuyant sur ctrl :

Placez-vous ensuite sur le calque "débardeur complété" et cliquez pour passer votre tampon. Allez-y sans crainte, la sélection que l'on a faite vous empêche de déborder.
Replacez la position originale du tampon autant que nécessaire et poursuivez jusqu'à obtenir un travail homogène :


Soyez délicat sur le travail de la poitrine, il faut conserver les ombres, sinon, cela manquera de réalisme. Utilisez un autre pinceau si nécessaire, et choisissez bien où cloner. Faites bien attention de cloner sur votre calque "débardeur complété" et de ne pas toucher au calque débardeur.
En jouant avec l'outil doigt (avec modération) et avec la gomme sur le calque "débardeur complété" (n'hésitez pas à baisser l'opacité de la gomme), on obtient ceci :


Une fois arrivé à ceci, clic droit sur le calque "débardeur complété" puis, fusionnez vers le bas.


On va fignoler un peu et supprimer la partie du dessous avec la sélection rectangulaire (ou le lasso). Pour cela, je cache le calque débardeur et je fais la sélection sur le calque "multiplier". Remettez-vous bien sur le calque "débardeur" lorsqu'il s'agit de supprimer. Vous n'avez pas besoin d'une grande précision, on supprimera le bas du débardeur quand on saura précisément où se placent jupe et ceinture.


Bon, maintenant, il nous faut fignoler un peu les aisselles, c'est pas encore très beau.
Placez-vous sur le calque du débardeur et utilisez le lasso pour faire une sélection qui aura la forme du morceau que l'on veut modifier :


Avec l'outil tampon, remplissez cette zone avec la texture du débardeur.

Faites pareil pour l'aisselle droite, aidez vous d'un guide si nécessaire (la ligne bleue), le point le plus bas des deux aisselles doit être au même niveau ! (pour en savoir plus sur les guides, c'est dans ce tuto)


Enlevez votre sélection, enlevez le repère, et fignolez au doigt et au tampon si nécessaire.
Votre face avant est terminée. Renommez votre calque en "débardeur avant".
Dupliquez votre calque et appelez le nouveau "débardeur arrière".


Sélectionnez votre calque "débardeur arrière", puis cliquez sur Calque>transformer>miroir horizontal.


Déplacez votre calque "débardeur arrière" avec l'outil déplacement de façon à ce que les bords coïncident :


C'est bizarre, mais c'est pas grave, on va corriger ça après pour l'instant, on va vérifier que le dos est bien placé et que les bretelles raccordent.
Enregistrez votre travail, puis cliquez sur fichier>exporter…
Enregistrer votre fichier .png (ou.dds) dans votre dossier "projet vêtement". Moi, j'appelle mon fichier "multiplier1.png"

Importez votre multiplier1 dans TSRW et vérifiez les points de raccord.


C'est pas très beau, mais c'est pas le problème ! Je constate que les aisselles sont raccords, mais pas les bretelles.
Vient donc une étape fastidieuse dans laquelle vous allez modifier légèrement l'emplacement et les proportions du dos du débardeur, et faire des allers-retours entre gimp et TSRW jusqu'à ce que les épaules concordent. Et oui, ça peut prendre du temps, mais vous devez arriver à cela :


Maintenant que le raccord est bon, on peut un peu arranger le dos de ce débardeur qui n'est pas top.
Normalement, vous me voyez venir, on va utiliser le lasso et le tampon. Ici, pas besoin d'un deuxième calque, c'est facile à faire, enlevez moi les marques de la poitrine comme ceci :
C'est mieux comme ceci, non ?


Pour terminer ce débardeur, il ne vous reste plus qu'à fusionner les deux calques "débardeur avant" et débardeur arrière" et à travailler la délimitation entre les 2. Pour cela, j'ai simplement utilisé l'outil netteté, il n'est pas nécessaire que la délimitation entre les 2 parties soit complètement effacée. Pensez toujours au réalisme quand vous faîtes un vêtement, il y a normalement une couture à cet endroit là


Si la démarcation vous parait encore trop marquée, un petit coup de tampon, et hop, on ne voit plus rien.

♦ La jupe

Voilà, terminé (pour l'instant) avec le débardeur, passons à la jupe.
Si vous désirez être sûr du placement de la jupe par rapport au débardeur, laissez celui-ci apparent. Dans ce cas, il vous faudra passer le calque de la jupe par-dessus celui du débardeur en cliquant sur cette flèche :


Sinon, cachez le calque débardeur et laissez apparaitre le calque jupe.
Je ne vais pas redétailler toutes les étapes, elles sont identiques : mettez votre jupe à la bonne taille, et reconstruisez avec le tampon les parties manquantes.
A vous de voir si vous voulez le froufrou sur l'avant et l'arrière, dans ce cas, refaites exactement ce qu'on a fait avec le débardeur, moi je ne veux le froufrou que sur l'avant donc je vais reconstruire tout l'arrière.
On commence par un petit coup de tampon :

Je minimise les petits défauts du tampon avec l'outil doigt :


Et je fais le côté gauche de l'avant, là, je manquais de matière pour cloner, j'ai tout fait au doigt :


Après un petit dupliquer/miroir horizontal/coup de tampon (vous pouvez voir que j'ai à nouveau utilisé un repère – le trait bleu - pour aligner les éléments) :

♦ La ceinture
La jupe est prête, passons à la ceinture.
La ceinture présente un petit problème, elle est incurvée.
Cette partie est un peu compliquée. Ne vous laissez pas rebuter, si ça vous parait trop compliqué, et téléchargez >ici< la ceinture que j'ai redressée. Vous essaierez de le faire vous-même quand vous serez plus aguerri.
Si vous vous attaquez à la ceinture incurvée :
Placez un repère aligné sur les points les plus hauts de la partie noire de la ceinture.
Puis, sélectionnez l'outil "Déformation par cage" (seulement disponible sous Gimp 2.8 ) et entourez la ceinture comme vous le feriez avec le lasso magnétique mais en plaçant bien les poignées comme moi :


Ces points sont des poignées qui vont vous permettre de déformer la ceinture. Cliquez sur les poignées du haut et tirez-les vers le haut jusqu'à ce que la partie noire de la ceinture soit alignée sur le repère.


Une fois satisfait, appuyez sur ENTREE.
La partie supérieur n'est pas très jolie, faite une sélection rectangulaire et supprimez.


Je vérifie avec mon repère que la partie inférieure va raccorder sans problème, je la garde donc comme ça.
La partie compliquée est terminée. Maintenant, il vous faut faire l'arrière de la ceinture, et ça vous savez faire ! Vous devez obtenir ceci :


Avant d'aller plus loin, on exporte (re-écrivez sur multiplier1.png) et on va vérifier sur TSRW que tout raccorde bien.


Parfait, tout concorde, continuons. Si ce n'était pas le cas, procédez aux modifications sous Gimp.

Il est maintenant temps de se débarrasser des morceaux de multiplier de notre robe de base qui dépassent. Sélectionnez-les grossièrement avec le lasso, placez vous sur le calque "multiplier de base" et appuyez sur la touche Suppr. (Je n'enlève jamais tout car l'ombre sous la robe est déjà faite, comme ceci )


B) Désaturation

On va maintenant tout désaturer car rappelons nous que le multiplier doit l'être (cette étape pourrait se faire dès le début, mais par préférence personnelle, je travaille avec la couleur le plus longtemps possible).
Dupliquez vos 3 calques, et appelez les "jupe désaturée", "débardeur désaturé" et "ceinture désaturée". Cliquez sur l'œil en face de chacun des calques initiaux pour ne plus les voir, et rassemblez les calques par type.


Cette étape n'est pas forcément indispensable, mais vous pourriez toujours avoir besoin des éléments en couleur, alors autant les garder
Sélectionnez chacun des calques et cliquez sur Couleur>désaturer :


Votre image est maintenant en niveau de gris… à part les dentelles du col et la partie blanche de la ceinture. Les dentelle, rappellez-vous, c'est pas grave, elles ne seront pas recolorables, on n'y touche pas. De même la partie noire de la ceinture ne sera pas recolorable non plus, on n'y touche pas (ou plutôt, c'est pas grave si on y touche).
Par contre, la partie blanche de la ceinture doit être dans les mêmes tonalités de gris que le reste. Sélectionnez votre calque "ceinture désaturée" et cliquez sur Couleur>luminosité et contraste. Baissez la luminosité jusqu'à obtention du gris souhaité.

C) Les ombres

Votre multiplier est presque terminé. Il ne nous reste plus qu'à ajouter des ombres pour le réalisme et on aura fini.
Les ombres en-dessous de la jupe sont déjà là, fournies par le multiplier de base, c'est pour ça qu'on l'a gardé .
Il nous manque des ombres autour de la ceinture et vers le col du débardeur.
Les ombres de la ceinture : Dupliquez votre calque "ceinture désaturée", nommez le "ombre ceinture" et faite le passer en dessous du calque "ceinture désaturée".
Puis cliquez avec la baguette magique sur une partie vide du calque "ombre ceinture" et inversez la sélection (ctrl I).


Appuyez sur Suppr et sélectionnez le pot de peinture. Vérifiez que votre couleur de premier plan est le noir (encadré en bleu sur la photo) et cliquez à l'intérieur de la sélection.


Notez que j'ai rendu le calque "ceinture desaturée" invisible temporairement sinon, on n'aurait rien vu.
Cliquez sur Sélection>Aucune. Sélectionnez votre calque "ombre ceinture" et cliquez sur filtre>flou>flou gaussien. Réglez le flou entre 10 et 25 selon le rendu désiré et validez (merci Caco pour l'astuce)


Hop, vous avez votre ombre :


Répétons toute l'opération avec le débardeur. Gommez si nécessaire l'ombre excédentaire. Pour le débardeur, baissez un peu l'opacité du calque, cette ombre-là n'est pas aussi intense que celle de la ceinture.


Et voilà, votre multiplier est terminé ! Conservez bien tous vos calques, nous en aurons besoin pour la suite !
Vous désirez comparer votre multiplier au mien ?

IV) L'overlay

Votre document multiplier.xcf est ouvert. Cliquez sur Image>dupliquer. Fermez multiplier.xcf (enregistrez!) et enregistrez sous votre nouveau document : overlay.xcf.
Supprimons tous les calques inutiles, c'est-à-dire tous sauf 2 !


Sur le calque débardeur, il ne doit plus rester que la dentelle blanche. Utilisez pour cela le lasso magnétique et la touche suppr. S'il reste des traces de rouge, cliquez sur couleur>teinte et saturation et effectuez ces réglages sur le rouge :


Sur le calque ceinture, il ne doit plus rester que la partie noire. La méthode est identique, et, au final, vous obtenez :


Votre overlay est terminé, vous pouvez l'importer dans TSRW. Ajustez les couleurs si nécessaire avec couleur>luminosité et contraste.
Vous désirez comparer votre overlay au mien ?

V) Le mask

Au début, c'est pareil. Ouvrez votre fichier multiplier.xcf et faite image>dupliquer. Fermer "multiplier.xcf" et enregistrez-sous "mask.xcf".
Rappelons-nous que l'on veut pouvoir recolorer le débardeur, la partie blanche de la ceinture et la jupe. Supprimons les calques qui ne serviront pas :


Et oui, j'ai aussi enlevé la jupe, sa forme ne me servira pas, je vais peindre tout le fond en rouge et ce sera pour elle. Créez donc un nouveau calque (clic droit sur le calque "ceinture">Nouveau calque" ) :


Assurez vous que ce nouveau calque fait bien 1024x1024 pixels (très important, les dimensions ne votre image ne doivent jamais changer !) et que le fond est transparent. Vous pouvez lui donner son nom ici, il sera pour la couche rouge donc très originalement, je l'ai appelé "Rouge".


Ce calque- là sera tout rouge, on rajoutera les autres couleurs par-dessus. Sélectionnez le calque rouge et cliquez sur l'outil "pot de peinture". Cliquez ensuite sur la couleur de premier plan :


Maintenant, regardez l'encadré vert. Les lignes H, S et V ne doivent être modifiées. Mais vous devez mettre la ligne R (red) à 255, et les lignes G (green) et B (blue) à 0.
Cliquez ensuite sur le calque : il devient tout rouge.

Passons à la couleur du débardeur. Créez un nouveau calque appelé "jaune".
Sur le calque débardeur, sélectionnez ce dernier avec la baguette magique comme on l'a  fait auparavant. Puis, cliquez sur le calque "jaune", et répétez les opérations précédentes : pot de peinture et couleur de premier plan, que vous réglez ainsi :


Cliquez à l'intérieur de la sélection dans le calque "jaune". Cela doit maintenant ressembler à ceci :


Répétez toute cette dernière opération avec la ceinture dans un nouveau calque appelé violet et avec ces réglages de couleur de premier plan :


Vous obtenez ceci :


Note : on n'a pas distingué les partie noires et blanches de la ceinture, pas de panique, l'overlay passe au dessus de tout ça donc la partie noire restera noire.

Pensez, sur le calque "jaune", à supprimer la partie du débardeur qui dépasse en dessous de la ceinture, avec la sélection rectangulaire et la touche Suppr :


Votre mask est terminé, exportez-le en mask.png et testez sous TSRW. Jouez un peu avec les pattern pour voir le rendu !


C'est également le moment de l'explorer sous toutes les coutures pour repérer les défauts. Pensez néanmoins que sous TSRW, les ombres sont transparentes, c'est normal, et qu'elles peuvent parfois se colorer. Cela ne ressort généralement pas en jeu, si c'était le cas, reprenez votre mask.

Vous désirez comparer votre mask au mien ?

Cette première partie est terminée. Votre vêtement n'est pas tout à fait terminé, il conserve des marques de l'ancien habit qui peuvent ressortir.

Ce tutoriel est terminé, passons donc à la suite :

Merci beaucoup pour ce tutoriel!
Par contre, je le verrais beaucoup mieux dans la section Gimp, non?

De rien

Je viens de soulever la question avec les filles dans la salle de tuto collectif (un peu tard certes, mais j'avais bougé pas mal de choses avant de percuter qu'on avait pas parlé de ça )
Vu que c'est pour Gimp, oui, on pourrait l'envoyer dans cette salle, mais c'est très appliqué création de vêtement, et ça présentait en plus l'avantage d'aller regrouper tous les tutos dans la même sous-salle.
M'enfin, ayant déjà pas mal douté là-dessus, je le changerais sans problème de salle

Mis à part les tutoriels outils, tous les tutos Gimp sont orientés vers quelque chose, retouche d'image, dessin, création de vêtements sims... On verra ce qu'en pensent les autres, je suis peut-être pas logique sur ce coup mais pour moi ça fait aucun doute que ça doit aller dans la section Gimp.

Encore merci à vous !

Je serais d'avis de le lancer avec les autres parties. Même s'il est spécifique d'un logiciel de graphisme, cela évitera de chercher les suites dans toutes les salles.
D'un autre côté, il est vrai qu'il y a un sommaire et il suffit de suivre les liens...

C'est clair que les sommaires devraient éviter à tout le monde de se perdre. Je mets salle à définir sur celui-là et l'autre en attendant que tout le monde ait donné son avis

Perso, si je devais faire des vêtements, j'aurai tendance à aller regarder dans cette salle (vêtements ...). Après, c'est vrai que les tutos s'appellent les uns les autres donc, pour ceux qui ne penseraient pas forcement à aller dans la salle Vêtements, etc..., c'est p'être mieux dans la salle graphisme. Mais, je confirme, c'est très appliqué et ce n'est pas vraiment du graphisme.

edit : pour trancher et ne pas faire une réponse de normand, je dirai en salle graphisme, pour les têtes en l'air.

Merci pour le tuto !

Merci beaucoup pour le tuto !

SUPER TUTO! Merci beaucoup

Merci beaucoup pour le tuto !

très bien expliqué