Rendre une image désaturée transparente en ne gardant que les ombres et les hautes lumières

J'essaie de le faire depuis quelques jours maintenant et je n'ai pas obtenu les résultats dont j'ai besoin. Je ne suis pas sûr d'utiliser la bonne terminologie dans le titre, sinon, n'hésitez pas à me corriger, et je le mettrai à jour.

Je veux partir de là:

à cela (j'ai échantillonné une zone de transparence pour montrer la valeur k au cas où cela aiderait). Notez que les ombres / reflets sont là, mais rien d'autre:

Cela me permet de placer un calque rempli d'une couleur unie sous l'image transparente. Le résultat est une chemise de couleur différente, et les ombres / reflets sont visibles:

couche remplie de bleu placée sous la couche de chemise transparente

couche remplie de noir placée sous la couche de chemise transparente

Quelqu'un a-t-il des idées sur la façon dont je pourrais y parvenir? J'ai pu me rapprocher du résultat, mais ma transparence n'est pas suffisante ou trop. Je perds une grande partie du détail des ombres / hautes lumières. L'image de départ est du type de fichier JPG.

MISE À JOUR:

J'ai besoin que le résultat final soit un PNG comme celui-ci:

Ce PNG semble avoir un fond blanc, mais en le prenant dans Photoshop ou GIMP, vous verrez que la chemise est transparente. Je dois inverser la façon dont cela a été fait pour pouvoir le faire avec d'autres vêtements.

Ce qui est intéressant à propos du PNG ci-dessus, c'est que les ombres, les hautes lumières et les demi-tons dans la partie transparente de l'image peuvent tous être sélectionnés individuellement. Photoshop: Sélectionnez-> Gamme de couleurs-> Ombres, reflets ou tons moyens. Image ci-dessous pour montrer ce que je veux dire:

Lors de l'attribution du blanc comme canal alpha pour la transparence, nous ne pourrons pas avoir de reflets opaques, car ceux-ci par définition seront blancs, donc entièrement transparents.

Pour avoir un canal alpha épargnant à la fois les zones blanches surlignées et les ombres noires, il vaut mieux choisir une couleur grise pour affecter l'alpha.

• Pour montrer l'effet plus clairement, j'ai d'abord assombri votre image d'origine et augmenté le contraste. Vous devrez à la fois régler le contraste de la source et choisir un niveau de gris qui convient le mieux à vos besoins pour de meilleurs résultats.

• Ensuite, j'ai attribué un canal alpha à une couleur `` grise '' (plutôt que blanche):

  

Maintenant, lorsque nous superposons cette image avec, par exemple, un fond vert, nous pouvons voir que les reflets et les ombres sont conservés.

Nous pouvons voir que, lorsqu'il est utilisé sur des couleurs sombres, les zones blanches de l'image d'origine peuvent toujours être trop lumineuses pour l'effet souhaité. Cela peut être surmonté lorsque nous choisissons une source grise plutôt que blanche pour créer notre modèle de canal alpha.

Ci-dessous (en haut à gauche), j'ai utilisé un remplissage de seau gris avec une opacité de 20% sur l'original blanc. Après avoir assigné un canal alpha de transparence au gris (en haut à droite), nous pouvons superposer un arrière-plan coloré (gauche noir, rouge foncé moyen, blanc ivoire droit) pour obtenir les effets de ligne de fond.

Pour cela, vous créez au mieux des canaux séparés pour les ombres et les hautes lumières .

Les ombres peuvent être directement prises à partir du T-shirt blanc et être utilisées comme multiplicateur (0-100%) pour la couleur de la chemise (mode de calque: multiplier)

Quant aux points forts , cela dépend vraiment du matériau. Le tissu ne réfléchit pas beaucoup la lumière sur la surface, donc la plupart de sa couleur provient de la lumière diffuse (la couleur de la chemise). Pour extraire la lumière spéculaire, j'utiliserais un filtre passe-haut (adaptation de l'histogramme: uniquement les couleurs vives et aucune des couleurs sombres) sur l'image de la chemise blanche et l'utiliser pour éclaircir la chemise, mais seulement avec peut-être 20% (faible réflexion).

Couches:

Images résultantes:

Il existe un moyen plus simple - sélectionnez le fond blanc, inversez-le, définissez le préréglage du pinceau, créez un nouveau fichier basé sur des transparents, des niveaux de gris - et c'est le cas. Sélectionnez le pinceau, qui est le dernier de la liste et cliquez une fois avec un échantillon noir à quatre terrains. Voila! Que vous pouvez enregistrer en tant que web - png.

Utilisez des filtres CSS plutôt que plusieurs images

Vous devez utiliser des filtres CSS pour colorer l'image d'un site Web.

Les avantages sont les suivants.

1. Une seule image requise.
2. Taille du fichier image plus petite.
3. Plus de contrôle sur vos couleurs sans avoir à utiliser un éditeur d'images.
4. Adapté aux mobiles.
5. Temps de chargement plus rapides.
6. Meilleur référencement.

Pour Hue, utilisez ce filtre CSS:

img {
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}

Pour l' utilisation de la luminosité :

img {
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}

Pour une utilisation de saturation :

img {
  -webkit-filter: saturate(8);
  filter: saturate(8);
}

Pour une utilisation en niveaux de gris :

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}