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

17

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à: entrez la description de l'image ici

à 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: image de résultat

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 entrez la description de l'image ici

couche remplie de noir placée sous la couche de chemise transparente entrez la description de l'image ici

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: entrez la description de l'image ici

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: entrez la description de l'image ici

aMMT
la source
2
Pourquoi ne pas faire un Layer Blend avec un mode de Multiply? On dirait que votre forme a des bords assez bien définis, vous pourrez donc la masquer assez facilement.
ckpepper02
1
Parce que OP veut exporter l'image au format PNG transparent. Multiplier repose sur une couleur pour être derrière.
Hanna
Multiplier + masque est la voie à suivre.
John
Pourriez-vous développer cela, John?
Hanna

Réponses:

13

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

    entrez la description de l'image ici

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

entrez la description de l'image ici

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.

entrez la description de l'image ici

Takkat
la source
Je suis novice dans ce domaine et j'ai des problèmes avec le canal alpha. Ma méthode pour obtenir l'effet de transparence jusqu'à présent a été d'aller dans l'onglet des canaux et de contrôler + cliquer sur le canal RVB. J'utilise ensuite un masque rapide et ajuste les niveaux, mais je n'arrive pas à en arriver là où vous êtes dans la première image que vous avez publiée. Comment attribuez-vous un canal alpha au gris?
aMMT
@Phonetic: Je l'ai fait rapidement avec Gimp (il y a une entrée de menu pour sélectionner n'importe quelle couleur pour la transparence). Cela me fait croire qu'il existe (ou devrait) également une telle option dans PS ou dans n'importe quelle application que vous utilisez. Une bien meilleure approche est cependant donnée par la très belle réponse de Peter , à savoir séparer les hautes lumières et les ombres. Cela permettra des ajustements beaucoup plus fins.
Takkat
Je l'ai maintenant. J'ai réalisé exactement ce dont j'ai besoin en suivant ces instructions. Merci beaucoup
aMMT
Puis-je avoir le psd pour ce tutoriel, j'ai du mal à obtenir la transparence.
@Takkat pouvez-vous s'il vous plaît mentionner les étapes pour le deuxième point - "Alors j'ai assigné un canal alpha à une couleur" grise "(plutôt que blanche)"?
Vishal
13

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:

entrez la description de l'image ici

Images résultantes:

entrez la description de l'image ici

Peter Walser
la source
C'est bien. Existe-t-il un moyen d'obtenir l'image finale au format PNG transparent? L'objectif final ici est d'utiliser une seule image png sur un site Web, et en changeant la couleur d'arrière-plan de la div html qui contient l'image, la couleur de la chemise changera effectivement.
aMMT du
J'ai du mal à obtenir les faits saillants. Je pense que je manque une étape car après avoir appliqué un filtre passe-haut, la chemise du calque auquel j'ai appliqué le filtre passe-haut est très grise (il n'y a pas beaucoup de contraste comme je le vois dans votre calque Highlights) . J'ai d'abord utilisé un rayon de 20 pixels sur le filtre passe-haut, puis j'ai essayé quelques valeurs de rayon différentes, mais je ne me rapproche pas de ce qui est vu dans votre couche de hautes lumières. Que puis-je manquer?
aMMT
Utilisez la même méthode, remplissez l'arrière-plan / extérieur de votre image en blanc et laissez votre CSS agir comme calque inférieur. La chemise serait une fenêtre semi-transparente.
John
Je souhaite avoir mieux compris cette réponse car elle semble vraiment cool.
Hanna
Cet effet nécessite des modes de fusion (multiplier, éclaircir), tandis que HTML utilise uniquement le mélange normal (peindre des images transparentes les unes sur les autres). HTML5 + SVG serait une option, mais les modes de fusion SVG ne semblent pas encore pris en charge par les navigateurs. Voir dev.w3.org/SVG/modules/compositing/master/… . Un moyen efficace de faire cet effet dans un navigateur serait d'utiliser un petit programme java (modes de mélange Java2d) intégré dans la page.
Peter Walser
1

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.

Valentina Yototva
la source
1

Utilisez des filtres CSS plutôt que plusieurs images

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

entrez la description de l'image ici

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);
}
Changement invariant
la source