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

17

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: Bildbeschreibung hier eingeben

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

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 Bildbeschreibung hier eingeben

Unter der transparenten Hemdschicht befindet sich eine schwarze Schicht Bildbeschreibung hier eingeben

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: Bildbeschreibung hier eingeben

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: Bildbeschreibung hier eingeben

aMMT
quelle
2
Warum nicht eine Ebenenmischung mit einem Multiplikationsmodus durchführen? Sieht so aus, als ob Ihre Form ziemlich gut definierte Kanten hat, sodass Sie sie ziemlich leicht maskieren können.
ckpepper02
1
Weil OP das Bild als transparentes PNG exportieren will. Multiplizieren hängt von einer Farbe ab, die dahintersteckt.
Hanna
Dann ist Multiplizieren + Maske der richtige Weg.
John
Könnten Sie das näher erläutern, John?
Hanna

Antworten:

13

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

    Bildbeschreibung hier eingeben

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

Bildbeschreibung hier eingeben

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.

Bildbeschreibung hier eingeben

Takkat
quelle
Ich bin ein Anfänger und habe Probleme mit dem Alphakanal. Meine bisherige Methode zum Erzielen des Transparenzeffekts bestand darin, die Registerkarte "Kanäle" aufzurufen und mit gedrückter Strg-Taste auf den RGB-Kanal zu klicken. Ich benutze dann eine Schnellmaske und passe die Ebenen an, aber ich komme nicht an die Stelle, an der Sie sich im ersten Bild befinden, das Sie gepostet haben. Wie ordnen Sie Grau einen Alpha-Kanal zu?
AMMT
@Phonetic: Ich habe das schnell mit Gimp gemacht (es gibt einen Menüeintrag zum Auswählen einer beliebigen Farbe für die Transparenz). Dies lässt mich glauben, dass es eine solche Option in PS oder einer anderen von Ihnen verwendeten Anwendung gibt (oder geben sollte). Ein viel besserer Ansatz ist jedoch die sehr nette Antwort von Peter , dh das Trennen von Lichtern und Schatten. Dies ermöglicht feinere Einstellungen.
Takkat
Ich hab es jetzt. Habe genau das erreicht, was ich nach dieser Anleitung brauche. Vielen Dank
aMMT
Könnte ich die PSD für dieses Tutorial haben, ich habe troble bekommen die Transparenz.
@Takkat Kannst du bitte die Schritte für den zweiten Punkt erwähnen - "Dann habe ich einen Alphakanal einer 'grauen' Farbe zugewiesen (anstatt weiß)"?
Vishal
13

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:

Bildbeschreibung hier eingeben

Resultierende Bilder:

Bildbeschreibung hier eingeben

Peter Walser
quelle
Das ist toll. Gibt es eine Möglichkeit, das endgültige Bild als transparentes PNG zu erhalten? Das Endziel hier ist es, ein einzelnes PNG-Bild auf einer Website zu verwenden. Durch Ändern der Hintergrundfarbe des HTML-Bereichs, der das Bild enthält, wird die Shirt-Farbe effektiv geändert.
AMMT 23.09.13
Ich habe Probleme, die Höhepunkte herauszufinden. Ich denke, ich vermisse einen Schritt, weil nach dem Anwenden eines Hochpassfilters das Shirt in der Ebene, auf die ich den Hochpassfilter angewendet habe, sehr grau aussieht (es gibt nicht viel Kontrast, wie ich ihn in der Ebene "Highlights" sehe). . Ich habe zuerst einen Radius von 20 Pixel für den Hochpassfilter verwendet und dann ein paar andere Radiuswerte ausprobiert, komme aber nicht an das heran, was in Ihrer Hervorhebungsebene zu sehen ist. Was kann ich vermissen?
AMMT
Verwenden Sie die gleiche Methode, füllen Sie den Hintergrund / die Außenseite Ihres Bildes mit Weiß und lassen Sie Ihr CSS als unterste Ebene fungieren. Das Hemd wäre ein halbtransparentes Fenster.
John
Ich wünschte, ich hätte diese Antwort besser verstanden, weil sie sich wirklich cool anhört.
Hanna
Für diesen Effekt sind Mischmodi (Multiplizieren, Aufhellen) erforderlich, während HTML nur das normale Mischen (Übermalen transparenter Bilder) verwendet. HTML5 + SVG wäre eine Option, aber die SVG-Mischmodi scheinen von Browsern noch nicht 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.
Peter Walser
1

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.

Valentina Yototva
quelle
1

Verwenden Sie CSS-Filter statt mehrerer Bilder

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

Bildbeschreibung hier eingeben

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);
}
Invariante Veränderung
quelle