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

Ich versuche das jetzt seit ein paar Tagen und habe nicht die Ergebnisse bekommen, die ich brauche. Ich bin mir nicht sicher, ob ich die richtige Terminologie im Titel verwende, wenn nicht, können Sie mich gerne korrigieren, und ich werde sie aktualisieren.

Davon möchte ich ausgehen:Geben Sie hier die Bildbeschreibung ein

dazu (ich habe einen Bereich der Transparenz abgetastet, um den k-Wert anzuzeigen, falls das hilft). Beachten Sie, dass die Schatten/Lichter da sind, aber sonst nichts:Ergebnisbild

Dadurch kann ich eine mit einer Volltonfarbe gefüllte Ebene unter dem transparenten Bild platzieren. Das Ergebnis ist ein Hemd in einer anderen Farbe, und Schatten/Lichter sind zu sehen:

mit Blau gefüllte Schicht unter der transparenten Hemdschicht platziertGeben Sie hier die Bildbeschreibung ein

mit Schwarz gefüllte Schicht unter der transparenten Hemdschicht platziertGeben Sie hier die Bildbeschreibung ein

Hat jemand eine Idee, wie ich das bewerkstelligen könnte? Ich konnte mich dem Ergebnis annähern, aber meine Transparenz ist entweder nicht genug oder zu viel. Ich verliere viel von den Details der Schatten/Lichter. Das Startbild ist vom Dateityp JPG.

AKTUALISIEREN:

Ich brauche das Endergebnis, um ein PNG wie dieses zu sein:Geben Sie hier die Bildbeschreibung ein

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

Das Interessante an dem obigen PNG ist, dass die Schatten, Lichter und Mitteltöne im transparenten Teil des Bildes alle einzeln ausgewählt werden können. Photoshop: Wählen Sie -> Farbbereich -> Schatten, Lichter oder Mitteltöne. Bild unten, um zu zeigen, was ich meine:Geben Sie hier die Bildbeschreibung ein

Warum nicht eine Ebenenmischung mit einem Multiplikationsmodus durchführen? Sieht so aus, als hätte Ihre Form ziemlich gut definierte Kanten, sodass Sie sie ziemlich leicht abdecken können.
Weil OP das Bild als transparentes PNG exportieren möchte. Multiplizieren ist darauf angewiesen, dass eine Farbe dahinter steckt.
Multiplizieren + Maske ist dann der richtige Weg.
Könntest du das weiter ausführen, John?
@Johannes Ich bin mir nicht sicher, ob dies eine doppelte Frage ist. Ich habe versucht, was in diesem Thread vorgeschlagen wurde, aber es kam nicht annähernd an das heran, was ich als Ergebnis erwartet hatte. (habe gerade deinen Kommentar gesehen, mir ging es bei der Anleitung genauso)
Es ist eine doppelte Frage. Aber ja, die Antworten auf die andere Frage waren weniger als wünschenswert. Der Vorteil des Schließens aufgrund von Duplizierung besteht darin, dass es eine Verbindung zum Original herstellt, was bedeutet, dass ein Teil des Datenverkehrs auf andere mögliche Antworten umgeleitet wird.

Antworten (4)

Wenn Sie Weiß als Alphakanal für Transparenz zuweisen, können wir keine undurchsichtigen Hervorhebungen haben, da diese per Definition weiß und daher vollständig transparent sind.

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

  • Um den Effekt deutlicher zu zeigen, habe ich zuerst Ihr Originalbild dunkler gemacht und den Kontrast erhöht. Sie müssen beides tun, den Kontrast der Quelle anpassen und eine Graustufe auswählen, die Ihren Anforderungen am besten entspricht, um bessere Ergebnisse zu erzielen.

  • Dann habe ich einen Alphakanal einer 'grauen' Farbe (anstelle von Weiß) zugewiesen:

    Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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

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

Geben Sie hier die Bildbeschreibung ein

Ich bin ein Anfänger und habe Probleme mit dem Alphakanal. Meine bisherige Methode, um den Transparenzeffekt zu erzielen, bestand darin, zur Registerkarte Kanäle zu gehen und bei gedrückter Strg-Taste auf den RGB-Kanal zu klicken. Ich verwende dann eine schnelle Maske und passe die Ebenen an, aber ich kann anscheinend nicht dorthin gelangen, wo Sie sich auf dem ersten Bild befinden, das Sie gepostet haben. Wie weisen Sie Grau einen Alphakanal zu?
@Phonetic: Ich habe das schnell mit Gimp gemacht (es gibt einen Menüeintrag zum Auswählen einer beliebigen Farbe für Transparenz). Dies lässt mich glauben, dass es eine solche Option auch in PS oder einer anderen von Ihnen verwendeten Anwendung gibt (oder geben sollte). Einen viel besseren Ansatz bietet jedoch Peters sehr nette Antwort , dh das Trennen von Lichtern und Schatten. Dies ermöglicht viel feinere Anpassungen.
Ich hab es jetzt. Habe nach dieser Anleitung genau das erreicht, was ich brauche. Vielen Dank
Könnte ich die PSD für dieses Tutorial haben, ich habe Probleme, die Transparenz zu bekommen.
@Takkat kannst du bitte die Schritte für den zweiten Punkt erwähnen - "Dann habe ich einen Alphakanal einer 'grauen' Farbe (anstelle von Weiß) zugewiesen"?
@Vishal: in Gimp (das habe ich verwendet): Ebene> Transparenz> Farbe zu Alpha ...> Von [Farbe auswählen] zu Alpha .

Dazu erstellen Sie am besten getrennte Kanäle für Schatten und Lichter .

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

Was die Highlights betrifft , das hängt wirklich vom Material ab. Stoff reflektiert nicht viel Licht auf der Oberfläche, daher kommt der größte Teil seiner Farbe von diffusem Licht (der Farbe des Hemdes). Um das Spiegellicht zu extrahieren, würde ich einen Hochpassfilter (Histogrammanpassung: nur die hellen Farben und keine der dunklen Farben) auf das Bild des weißen Hemdes anwenden und damit das Hemd aufhellen, aber nur mit vielleicht 20 % (geringe Reflexion).

Schichten:

Geben Sie hier die Bildbeschreibung ein

Ergebnisbilder:

Geben Sie hier die Bildbeschreibung ein

Das ist toll. Gibt es eine Möglichkeit, das endgültige Bild als transparentes PNG zu erhalten? Das Endziel hier ist, 1 einzelnes PNG-Bild auf einer Website zu verwenden, und durch Ändern der Hintergrundfarbe des HTML-Div, das das Bild enthält, ändert sich die Shirt-Farbe effektiv.
Ich habe Probleme, die Highlights zu bekommen. Ich glaube, mir fehlt ein Schritt, denn nach dem Anwenden eines Hochpassfilters sieht das Hemd in der Ebene, auf die ich den Hochpassfilter angewendet habe, sehr grau aus (es gibt nicht viel Kontrast, wie ich es in Ihrer Highlights-Ebene sehe). . Ich habe zuerst einen 20-Pixel-Radius für den Hochpassfilter verwendet und dann ein paar verschiedene Radiuswerte ausprobiert, aber ich komme dem, was in Ihrer Hervorhebungsebene zu sehen ist, nicht nahe. Was kann mir fehlen?
Verwenden Sie die gleiche Methode, füllen Sie den Hintergrund / die Außenseite Ihres Bildes in Weiß und lassen Sie Ihr CSS als untere Ebene fungieren. Das Hemd wäre ein halbtransparentes Fenster.
Ich wünschte, ich hätte diese Antwort besser verstanden, weil sie wirklich cool klingt.
Dieser Effekt benötigt Mischmodi (multiplizieren, aufhellen), während HTML nur normales Mischen verwendet (transparente Bilder übereinander malen). HTML5+SVG wäre eine Option, aber die SVG-Mischmodi scheinen noch nicht von Browsern unterstützt zu werden. Siehe dev.w3.org/SVG/modules/compositing/master/… . Eine effektive Möglichkeit, diesen Effekt in einem Browser zu erzielen, wäre ein kleines Java-Programm (Java2d-Mischmodi), das in die Seite eingebettet ist.

Es gibt einen einfacheren Weg - wählen Sie den weißen Hintergrund aus, invertieren Sie ihn, definieren Sie die Pinselvoreinstellung, erstellen Sie eine neue Datei basierend auf transparenten Graustufen - und das ist es. Wählen Sie den Pinsel aus, der der letzte in der Liste ist, und klicken Sie einmal mit einem schwarzen Viergrundmuster. Voila! Dann können Sie als Web-PNG speichern.

Verwenden Sie lieber CSS-Filter als mehrere Bilder

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

Geben Sie hier die Bildbeschreibung ein

Die Vorteile sind wie folgt.

  1. Nur ein Bild erforderlich.
  2. Kleinere Bilddateigröße.
  3. Mehr Kontrolle über Ihre Farben, ohne einen Bildeditor verwenden zu müssen.
  4. Mobilfreundlich.
  5. Schnellere Ladezeiten.
  6. Besseres 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 Sättigung verwenden:

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

Für die Verwendung in Graustufen :

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
Machen Sie ein entsättigtes Bild transparent und behalten Sie nur Schatten und Lichter bei
AntwortenHierDatenschutz-Bestimmungen1y, 0v