[Apprenti] Recolorer un vêtement du jeu les Sims 4 avec une texture

Après avoir compris le principe de la recoloration simple de vêtements Sims 4 avec Gimp, je vous partage mon maigre savoir en la matière ! N'étant pas une grande graphiste, j'ai développé une petite technique personnelle basée sur la découpe d'images glanées sur internet et appliquées en pattern sur les vêtements! Cette technique donne la sensation d'être un vrai couturier découpant ses bandes de tissus à partir du patron de son vêtement ^^ !

A l'heure à laquelle j'écris ce tuto, il n'est pas encore possible d'avoir accès à certains fichiers qui contribuent à la retexture d'un vêtement, je pense à la normal map ou au specular que nous avions dans les Sims3.
Je vais me concentrer ici sur la recoloration à partir d'une image personnalisée et plus particulièrement ici à partir d'un tissu de vêtements réels. Gardez à l'esprit que le relief du vêtement de référence, les boutons, les ceintures, les cols etc ... resteront après la recoloration. C'est à vous d'adapter votre nouveau vêtement à ces éléments de relief. Je vous montre d'ailleurs comment faire une bonne intégration d'une ceinture.

Pour réussir votre recoloration sans difficulté, il vous faut de petites bases sur le fonctionnement de Gimp (calques, outil plume).
Mais il vous faudra aussi réaliser les étapes du tuto de Fuyaya La recoloration avec Color Magic & S4PE. Le tuto que je vous propose se glisse dans la partie 5 de celui de Fuyaya: "côté graphisme". Il vous faudra en amont et en aval réaliser toutes les étapes qu'elle détaille!

Comme beaucoup d'utilisateurs de Gimp, le pluggin DDS ne fonctionne pas chez moi, je dois donc jongler avec Paint.net pour pouvoir enregistrer en format DDS. Je vous expliquerai donc les allers retours entre Paint.net et Gimp. Pour les petits chanceux qui n'ont pas de soucis avec leur plug in, vous pourrez sauter les étapes de sauvegarde en dds sur Paint.net et les réaliser avec Gimp directement.

1- Les premières étapes

Fuyaya nous explique tous les fichiers à récupérer dans son tuto, si vous êtes organisés comme il faut, vous avez créer un dossier pour votre vêtement dans lequel se trouve la référence dds et le package à modifier. + la miniature mais ça ne nous intéresse pas dans ce tuto, Fuyaya explique très bien comment la modifier. Il suffit de faire un fichier dds de 32X32 px, de le sauvegarder en DXT1 et de remplacer l'image de la miniature par votre image à vous!

Voici les fichiers dont vous avez besoin!:

Gimp ne voulant pas lire les fichiers .dds chez moi, il me faut passer par Paint.net. Ouvrez donc votre fichier reference.dds.dds avec Paint.net. Si Gimp prend en charge les .dds, sautez cette étape et ouvrez directement votre fichier avec Gimp!

Voici ce que vous obtenez:

Il va falloir enregistrer le fichier en .png et travailler le nouveau fichier .png sous Gimp. Donc, faites "fichier", puis "enregistrer sous". Le fichier .png gère la transparence sur une image, et c'est ce dont nous avons besoin.


Choisissez d'enregistrer votre image en .png, je l'ai appelé référence png pour ne pas m'éparpiller dans mes fichiers et me rappeler que ce png correspond au dds nommé référence.


Maintenant, vous pouvez ouvrir votre fichier .png dans Gimp!

Voici ce que vous obtenez:

Pour les petits chanceux qui sont déjà dans Gimp avec leur fichier .dds, on se raccroche au tuto maintenant!

Le fichier .dds, transformé en .png pour certains, contient l'image du vêtement à plat, comme un patron de vêtement dans la vraie vie pour comparer un peu. Ce fichier correspond à l'overlay. Il ne contient pas toutes les informations du vêtement et vous ne pourrez pas gommer les informations comme le relief par exemple qui sont inscrites dans d'autres fichiers. Je vous conseille la lecture de cette fiche Analyse du contenu d'un package pour en savoir plus. Nous cherchons ici à modifier uniquement le motif, donc mettre autre chose que les petites fleurs et le bleu du nœud-nœud! Nous n'allons pas modifier les informations comme les boutons, les plis, la forme du noeud. Par exemple, j'ai tenté l'expérience avec une robe ayant une grosse ceinture. J'ai collé un image personnalisée par dessus, sans tenir compte de la ceinture, et celle-ci est ressortie par dessus mon image personnalisée en brillant, c'était moche ^^ !  !

L'espèce d'ovale gris que vous voyez est en fait le dessous de la robe, il faut le modifier en fonction de la couleur de la robe, si vous le souhaitez!

2- On commence à recolorer

Si vous ne l'avez pas déjà fait, partez en quête de ZE image personnalisée sur internet. Vous pouvez en combiner plusieurs, laissez libre cours à votre imagination! Je vais vous montrer la fabrication d'une des robes que j'ai réalisée pour une collection inspirée de la marque Desigual. C'est une robe pour fillette.

J'ouvre mon image avec l'image personnalisée que je souhaite appliquer sur la robe, dans un nouveau calque. Pour cela, je vais dans l'onglet "Fichier", puis "ouvrir en tant que calque". Je vais cherche mon image dans mon ordinateur.

Comme ceci:

Sur votre calque d'image personnalisée, cliquez droit et choisissez l'option "ajouter un canal alpha" s’il n’y en a pas encore.. Ceci permettra de gérer la transparence de votre calque.


Maintenant, amusez vous avec les options de modification du calque de l'image personnalisée, agrandissez, rétrécissez, déplacez, retournez, bref préparez votre image personnalisée en fonction de vos envies!


Et voilà mon résultat, j'ai rétréci, retourné et placé l'image personnalisée comme je le voulais. Si vous avez plusieurs images personnalisées à placer, vous pouvez tout importer de la même façon, avec différents calques, et les placer à votre guise.


Faites enfin passer votre calque d'image personnalisée au-dessus de votre image de base.

3- On découpe

Maintenant que votre image personnalisée est bien placée, il va falloir le découper en fonction de votre robe de base. Pensez patron et tissus, le tissus est découpé en fonction de la forme du patron!
Pour commencer, cliquez droit sur le calque de la robe, et choisissez l'option "alpha vers selection". Cette sélection va faire automatiquement le contours de votre image.


Vous vous retrouvez comme ceci, votre robe apparaît en pointillé sur votre image personnalisée. Je n'ai pas pris en compte les bretelles et le rond de dessous tout de suite, j'ai préféré faire les choses une par une pour vous montrer, mais vous pouvez avoir toutes vos images personnalisées apposées en différents calques, prêtes à être découpées.


Il vous faut ensuite inverser la sélection, puisque si vous supprimez sur votre image personnalisée ce qui est sélectionné, vous allez vous retrouver à enlever la partie qui recouvre la robe! Faites donc "Sélection", puis "inverser"


Mettez-vous sur votre calque d'image personnalisée (il faut qu'il soit surligné en bleu dans la fenêtre des calques) et appuyer sur la touche "suppr" de votre clavier. L'image autour de la robe disparaît, et celui sur la robe correspond pile poil à cette dernière!


Enlevez ensuite votre sélection, en faisant "sélection", "aucune"


J'ai recommencé cette manipulation plusieurs fois, afin de recouvrir les bretelles et l'ovale de dessous de la robe. J'ai donc réimporté mon image personnalisée dans un nouveau calque, ajouté un canal alpha, placé mon image personnalisée sur les bretelles et sur l'ovale. Puis j'ai fait encore "alpha vers sélection", inversé la sélection et supprimé la partie de l'image qui ne m'intéressait pas!

Voici le résultat:

4- Prendre en compte un élément particulier du vêtement

Intéressons-nous maintenant à la ceinture-noeud qui comme vous pouvez le voir ressort par son relief. Il faut traiter cet élément à part pour que le vêtement soit joli. Placez vous sur le calque de la robe de base, et masquez les autres calques afin de voir la robe.


Il va falloir détourer ce nœud à l'aide de l'outil plume.


Sélectionnez donc l'outil plume, je vous renvoie au tuto de Maripiou sur les Techniques de détourage pour bien détourer l'élément que vous souhaitez.

L'outil plume en image:

Vous vous retrouvez avec une sélection de votre élément, voici pour mon nœud (l'impression écran a mal fonctionné, mais la sélection englobe bien tout le nœud)


Faites "copier" (ou ctrl C sur le clavier), puis "coller" (ctrl V). Un nouveau calque apparait tout en haut de la fenêtre des calques, avec votre nœud. Ce calque est en sélection flottante, il vous faut le transformer en calque. Pour cela, cliquez droit sur la sélection flottante et choisissez l'option "Vers nouveau calque". L'image ci dessous vous montre comment faire, mais n'a rien à voir avec les calques de la robe, c'est juste pour détailler la manipulation!

Option "Vers nouveau calque":

Et voici le résultat, le nœud est apparu par dessus votre image personnalisée, prêt à être recoloré selon vos souhaits! Vous pouvez par exemple aller dans l'onglet "couleurs", choisir l'option "colorier", et modifier ainsi la couleur. Vous pouvez aussi appliquer un nouveau motif, ou tout ce qui vous vient à l'idée!


Et voici le résultat sur une modèle !

5- Sauvegarde du fichier

Maintenant, la recoloration est terminée! Il va falloir sauvegarder votre image.

Pour commencer, rendez tous vos calques visibles (les différents calques de motif, le nœud et la robe), puis allez dans "image" et "fusionner les calques visibles".


Vous vous retrouvez comme ceci du côté de la fenêtre des calques.


Si votre plug in DDS fonctionne, il vous faudra faire "fichier", puis "exporter". Une fois la fenêtre d'exportation ouverte, il faut simplement changer l'extension .png en .dds!

Et en image, ça donne ceci! Merci Katnat !:

Pour les autres, il faut sauvegarder votre nouvelle robe. Faites "fichier" puis "exporter", exportez votre image en .png, en la renommant pour la distinguer de la robe de base.


Ouvrez votre robe modifiée en .png dans Paint.net, le but est de transformer la robe modifiée en fichier .dds. Faites donc ensuite "fichier", puis "enregistrer sous". Choisissez dans les différents types de fichiers, les dds.


Vous allez voir apparaitre cette fenêtre, configurez exactement comme ceci: DXT5 et cochez bien la case "générer les images MIP".
Voici une explication de Katnat sur les MIP, pour les curieux :
Lorsque l'on ouvre un dds avec les mipmaps, il y a plusieurs niveau de la même image 32x32, 64x64, 128x128, 256x256, etc (il y en a 4 à priori mais pas sûr). Le format le plus petit dépend du niveau maximum que l'on veut ... Logiquement, mais c'est à confirmer si un pro passe pas ici, cela permet de choisir l'image que l'on souhaite, sachant qu'une image 32x32 est moins gourmande qu'une image 512x512 par exemple. Tout cela est en fonction de la carte graphique et de la demande graphique aussi. Par exemple dans les sims lorsqu'un objet est loin, il n'est pas nécessaire de le voir autant détaillé que de près.


Et voilà! Votre robe est modifiée, le fichier DDS est prêt à être implanté avec l'aide de S4PE. Vous pouvez maintenant reprendre le tuto de Fuyaya, au paragraphe 6 (Modification du package pour y intégrer votre création).

Merci Bloup ! tu fais donc partie des chanceuses chez qui le plugin dds de gimp fonctionne

Merci Bloup!

Delise, chez qui ça ne fonctionne pas tu veux dire !

Merci Bloup pour ce tuto!

Pour moi le dds dans gimp marche ... parfois

merci pour ce tutoriel!

Merci Bloup pour ce super tuto !! c'est magique

Merci pour le tuto Bloup