Machen Sie ein entsättigtes Bild transparent und behalten Sie nur Schatten und Lichter bei

Ich habe versucht, dies für einige Tage jetzt zu tun und habe nicht die Ergebnisse erhalten, die ich benötige. Ich bin nicht sicher, ob ich die richtige Terminologie im Titel verwende. Wenn nicht, können Sie mich gerne korrigieren und ich aktualisiere sie.

Ich möchte davon ausgehen:

zu diesem (ich habe einen Bereich der Transparenz abgetastet, um den k-Wert zu zeigen, falls das hilft). Beachten Sie, dass die Schatten / Lichter vorhanden sind, aber sonst nichts:

Auf diese Weise kann ich eine mit einer Volltonfarbe gefüllte Ebene unter dem transparenten Bild platzieren. Das Ergebnis ist ein Hemd mit einer anderen Farbe und Schatten / Glanzlichter sind zu sehen:

Unterhalb der transparenten Hemdschicht befindet sich eine mit Blau gefüllte Schicht

Unter der transparenten Hemdschicht befindet sich eine schwarze Schicht

Hat jemand eine Idee, wie ich das erreichen könnte? Ich habe es geschafft, dem Ergebnis nahe zu kommen, aber meine Transparenz ist entweder nicht genug oder zu viel. Ich verliere viel von den Schatten- / Lichtdetails. Das Startbild ist vom Dateityp JPG.

AKTUALISIEREN:

Ich brauche das Endergebnis, um eine PNG wie diese zu sein:

Dieses PNG sieht aus wie es einen weißen Hintergrund hat, aber wenn Sie es in Photoshop oder GIMP aufnehmen, werden Sie sehen, dass das Shirt transparent ist. Ich muss rückentwickeln, wie das gemacht wurde, damit es mit anderen Kleidungsstücken gemacht werden kann.

Das Interessante am obigen PNG sind die Schatten, Lichter und Mitteltöne im transparenten Teil des Bildes, die alle einzeln ausgewählt werden können. Photoshop: Wählen Sie-> Farbbereich-> Schatten, Glanzlichter oder Mitteltöne. Bild unten, um zu zeigen, was ich meine:

Wenn wir Weiß als Alphakanal für die Transparenz zuweisen, können wir keine undurchsichtigen Glanzlichter erzielen, da diese per Definition weiß und somit vollständig transparent sind.

Um einen Alpha-Kanal zu haben, der sowohl hervorgehobene weiße Bereiche als auch schwarze Schatten spart, sollten Sie eine graue Farbe für die Zuweisung von Alpha wählen.

• Um den Effekt klarer darzustellen, habe ich zuerst Ihr Originalbild dunkler und den Kontrast erhöht. Sie müssen beides tun, den Quellkontrast anpassen und einen Graustufen auswählen, der Ihren Anforderungen am besten entspricht, um bessere Ergebnisse zu erzielen.

• Dann habe ich einen Alpha-Kanal einer 'grauen' Farbe zugewiesen (anstatt Weiß):

  

Wenn wir nun dieses Bild mit zB einem grünen Hintergrund überlagern, können wir sehen, dass sowohl Lichter als auch Schatten erhalten bleiben.

Wir können sehen, dass bei dunklen Farben die weißen Bereiche des Originalbildes möglicherweise immer noch zu hell für den gewünschten Effekt sind. Dies kann überwunden werden, wenn wir für die Erstellung unserer Alphakanalvorlage eine graue anstelle einer weißen Quelle auswählen.

Unten (oben links) habe ich eine graue Eimerfüllung mit 20% Deckkraft auf dem weißen Original verwendet. Nachdem Sie Grau (oben rechts) einen Transparenz-Alpha-Kanal zugewiesen haben, können Sie einen farbigen Hintergrund (links schwarz, Mitte dunkelrot, rechts elfenbeinweiß) überlagern, um die Endeffekte zu erzielen.

Dazu legen Sie am besten separate Kanäle für die Schatten und Lichter an .

Die Schatten können direkt vom weißen T-Shirt genommen und als Multiplikator (0-100%) für die Farbe des Shirts verwendet werden (Ebenenmodus: Multiplizieren).

Bei den Highlights kommt es wirklich auf das Material an. Stoff reflektiert nicht viel Licht auf die Oberfläche, daher kommt der größte Teil seiner Farbe aus diffusem Licht (der Farbe des Hemdes). Um das spiegelnde Licht zu extrahieren, würde ich ein Hochpassfilter (Histogrammanpassung: nur die hellen Farben und keine der dunklen Farben) auf das Bild des weißen Hemdes anwenden und dieses verwenden, um das Hemd aufzuhellen, aber nur mit vielleicht 20%. (geringe Reflexion).

Schichten:

Resultierende Bilder:

Es gibt einen einfacheren Weg - wähle den weißen Hintergrund aus, invertiere ihn, definiere die Pinselvorgabe, erstelle eine neue dateibasierte transparente Graustufe - und das ist. Wählen Sie den Pinsel aus, der als letzter in der Liste aufgeführt ist, und klicken Sie einmal mit dem schwarzen vierstelligen Farbfeld. Voila! Dann können Sie als Web - PNG speichern.

Verwenden Sie CSS-Filter statt mehrerer Bilder

Sie sollten CSS-Filter verwenden , um das Bild für eine Website einzufärben.

Die Vorteile sind wie folgt.

1. Nur ein Bild erforderlich.
2. Kleinere Bilddateigröße.
3. Mehr Kontrolle über Ihre Farben ohne Verwendung eines Bildeditors.
4. Handyfreundlich.
5. Schnellere Ladezeiten.
6. Besser SEO.

Verwenden Sie für Hue diesen CSS-Filter:

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

Für Helligkeit verwenden:

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

Für die Sättigung verwenden:

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

Bei Verwendung von Graustufen :

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