[Débutant] Créez vos vêtements - Partie III - Créez avec Photoshop

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

------------------------------------------------------------------------------------------------------------------------

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
A) A partir d'un nouveau fichier
B) A partir de votre psd
------------------------------------------------------------------------------------------------------------------------

I) Pré-requis

Pour suivre ce tutoriel, vous avez besoin de :

Adobe Photoshop

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 Photoshop pour PC
ici
Note sur le format .dds :
Le plug-in DDS ne s'installe pas au même endroit suivant la version de photoshop qu'on possède.
Pour en savoir, vous pouvez faire un tour à ces adresses:

Spoiler:

et

Spoiler:

Il est probable qu'en ouvrant un dds, vous deviez répondre à un pop up qui demande si vous voulez afficher les mipmap , répondez non.

Spoiler:

Voici les cases à vérifier lors de la configuration de l'enregistrement :

Spoiler:

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.

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. A noter tout de même que la création de vêtements requiert de la patience

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


À 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.

>ICI<

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 Photoshop.
Sélectionnez la baguette magique :



Puis cliquez sur le blanc autour du débardeur et appuyez sur "Retour arrière ».



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 Retour arrière lorsque vous avez fermé la sélection. Répétez autant de fois que nécessaire pour vous débarrasser des choses inutiles.

Pour vérifier qu’il ne reste rien, vous pouvez ouvrir un calque d’une autre couleur en arrière-plan. Pour changer toute la couleur d’un calque, utilisez l’outil pot de peinture, la couleur sélectionnée est celle du petit carré en haut, le premier plan. Avec l’outil pipette, vous pouvez choisir votre couleur dans le nuancier.



Pour ouvrir un nouveau calque, cliquez sur la petite flèche à droite en haut de la fenêtre calques et choisissez nouveau calque :




N’oubliez pas que le calque de fond doit être sous l’autre calque. Les parties à supprimer se remarquent tout de suite. Utilisez l’outil gomme dans le calque 0 pour les supprimer.


Une fois le nettoyage fini, supprimez le calque de fond bleu en cliquant droit sur ce calque, choisir supprimer.
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 Photoshop.
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 (ctrl V). Un nouveau calque s’ouvre avec le débardeur dedans.
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 "propriétés 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 :

Le débardeur est trop grand. Sélectionnez le calque du débardeur. Redimensionnez-le en utilisant l’option homothétie qui se situe dans Edition>transformation, en gardant la touche shift appuyée (cela permet un redimensionnement proportionnel)

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 apparaître.
Comme cela, c'est pas mal. En général, je me cale par rapport à la position de la poitrine, c'est un bon point de repère. On peut jouer sur l’opacité du calque pour mieux caler la poitrine. N’oubliez pas de reprendre une opacité 100%. N'utilisez plus l'outil redimensionner, 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 polygonal:

Faites réapparaître 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, la seule différence avec Gimp est qu'il faut appuyer sur la touche alt pour prendre la peinture de la source), sélectionnez un pinceau rond, taille 15, et cliquez sur le milieu du débardeur tout en appuyant sur alt. 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, n’hésitez pas à réduire la taille du pinceau si des zones plus foncées apparaissent en barbouillant :

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 l’outil rectangle de sélection (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, valable aussi avec photoshop).

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 en faisant un clic droit sur le calque et appelez le nouveau "débardeur arrière".

Sélectionnez votre calque "débardeur arrière", puis cliquez sur Edition>transformation>symétrie axe 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>Enregistrer sous… choisir le format png.
Enregistrer votre fichier .png (ou.dds) dans votre dossier "projet vêtement". Moi, j'appelle mon fichier "multiplier1.png"

Une fenêtre s’affiche pour l’option d’entrelacement, faites non et OK.

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. Si les aisselles ne sont pas bien raccordées, aidez-vous des guides horizontaux et verticaux, n’oubliez pas les zones de coutures qu’on ne voit pas sur le vêtement.
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 photoshop et TSRW jusqu'à ce que les épaules et les aisselles 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 faites un vêtement, il y a normalement une couture à cet endroit-là.
Si la démarcation vous paraît 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 faisant un clique gauche maintenu sur le calque de la jupe et en le plaçant au-dessus du calque du débardeur.


Sinon, cachez le calque débardeur et laissez apparaître 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 :

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 paraît 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, allez dans Edition>Transformation>Déformation. Dans la barre de l’outil, sélectionnez un type de déformation. J’ai choisi arche :

Par défaut, photoshop applique une inflexion de 50% :

Baissez l’inflexion. Voici ce que ça donne pour 5% :



Si aucun type ne vous convient, vous pouvez choisir une déformation personnalisée. Il faut agir sur les points et les lignes pour obtenir la déformation souhaitée. Cliquez à différents endroits de la ligne au-dessus de la partie noire de la ceinture, et tirez vers le haut jusqu'à ce que la partie noire de la ceinture soit alignée sur le repère.

Une fois satisfait, acceptez la déformation.

Je préfère la déformation Arche qui est moins floue.

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 photoshop.
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 « retour arrière ». (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 Image>Réglages>Désaturation :

Votre image est maintenant en niveau de gris… à part les dentelles du col et la partie blanche de la ceinture. Les dentelles, 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 Image>Réglages>Luminosité/Contraste. Baissez la luminosité jusqu'à obtention du gris souhaité.


Remarque ajoutée :

Spoiler:

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 sur Image>Réglages>Luminosité/Contraste. Choisir -100% pour les 2, faire Ok.

Notez que j'ai rendu le calque "ceinture desaturée" invisible temporairement sinon, on n'aurait rien vu.
Appliquez un filtre flou gaussien à votre calque "ombre ceinture" en cliquant sur Filtre>Atténuation>flou gaussien. Choisissez le diamètre entre 2 et 5 pixels 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.psd est ouvert. Cliquez sur Image>dupliquer. Fermez multiplier.psd (enregistrez!) et enregistrez sous votre nouveau document : overlay.psd.
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 « retour arrière ». S'il reste des traces de rouge, cliquez sur Image>Réglages>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.psd et faite image>dupliquer. Fermer "multiplier.psd" et enregistrez-sous "mask.psd".
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 en cliquant sur la petite flèche en haut à droite, cliquez sur nouveau calque.
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.
Si vous êtes parti du multiplier, ce calque est aux mêmes dimensions que l'image de départ, soit 1024x1024. Sinon voici comment définir les dimensions de votre image :
1) à partir d'un nouveau fichier
Cliquez sur Fichier>Nouveau, cette fenêtre apparaît.

Spoiler:

Choisissez 1024x1024, c'est très important, les dimensions de votre image ne doivent jamais changer! Assurez-vous que le fond est transparent. Nommez le fichier.

2) à partir d'un fichier déjà ouvert
pour connaître la taille de l'image, cliquez sur Image>Taille de l'image. Cette fenêtre apparaît:

Spoiler:

Choisissez 1024x1024.

Revenons au mask, sélectionnez le calque rouge, choisissez le rouge RVB dans le nuancier avec la pipette (passer la pipette sur une couleur, son nom s'affiche), mettez le rouge en couleur de premier plan et cliquez sur l'outil "pot de peinture".


Cliquez ensuite sur le calque : il devient tout rouge.

Remarque :
Voici une autre méthode, celle utilisée dans le tutoriel pour Gimp, pour trouver le rouge, le jaune et le violet :
Pour sélectionner le rouge :
Sélectionnez le calque rouge et cliquez sur l'outil "pot de peinture". Cliquez ensuite sur la couleur de premier plan :

Spoiler:

Maintenant, regardez l'encadré rouge. Les lignes T, S et L ne doivent être modifiées. Mais vous devez mettre la ligne R (rouge) à 255, et les lignes V (vert) et B (bleu) à 0.
Pour sélectionner le jaune, réglez ainsi :

Spoiler:

Pour sélectionner le violet, réglez ainsi :

Spoiler:

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, cliquer sur le fond transparent et intervertir. 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 choisissez en jaune RVB dans le nuancier (ou utilisez l'autre méthode) :
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 en prenant le magenta RVB comme 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 Retour arrière :


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.



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

Merci !

Merci pour le tuto !

Merci beaucoup pour le tuto !

merci, c'est très éclairant pour ceux qui veulent faire quelque chose d'un peu compliqué!

Merci beaucoup pour ce tuto!