Bild in Maske konvertieren

9

Ich habe ein grünes Hintergrundbild mit einigen Schatten. Ich möchte es als Maske verwenden, damit ich es mit einer beliebigen Farbe (z. B. Rot oder Rosa) auf den Hintergrund legen und den gleichen Schattenstil erhalten kann.

Ich habe versucht, es in Graustufen umzuwandeln und die Deckkraft auf 20% zu ändern, aber dies führte zu einem viel dunkleren Bild.

Ich verwende dies auf einer Webseite, auf der der Administrator die Vorlagenfarbe festlegen kann. Dann verwende ich so etwas in CSS:

background: #557d0d url("img/background.png") center center;

Geben Sie hier die Bildbeschreibung ein

Verwenden von Gimp 2.8.6 unter Ubuntu.

Tomas Greif
quelle
Angenommen, ein CSS3- hue-rotateFilter zum Ändern der Farbe ist keine Option? Siehe stackoverflow.com/questions/17721960/… oder stackoverflow.com/questions/12546499/…
Takkat

Antworten:

5

Sie können das Bild mit entsättigen Colors > Desaturate.... Verwenden Sie als Nächstes, Colors > Color to Alpha...um das Grau zu entfernen, das es dunkler macht ( #808080).

Stellen Sie die Deckkraft auf 40% ein und es sollte reichen.

Ich habe gerade einen kleinen Test mit einer von mir erstellten Website durchgeführt: Geben Sie hier die Bildbeschreibung ein

Kelunik
quelle
3

Sie können das Bild nicht exakt mit nur einer maskierten Graustufenebene auf einfarbigem Hintergrund replizieren, da der Farbton der grünen Farbe auch entlang des vertikalen Verlaufs variiert.

Sie können ziemlich nah dran sein, indem Sie mit der Pipette einen der mittelgrünen Farbtöne aus der Bildmitte auswählen, die Sättigung und den Wert maximieren und diese Farbe mit dem Werkzeug Ebene → Transparenz → Farbe in Alpha ... transparent machen . Dies würde jedoch dazu führen, dass Ihre Ebene oben und unten Farbstiche aufweist, die Sie möglicherweise nicht möchten.

Eine bessere Lösung könnte darin bestehen, das Bild in Farbton, Sättigung und Wert (HSV) zu zerlegen, den Farbtonkanal zu verwerfen und die Sättigungs- und Wertekanäle in eine Graustufenmaske zu rekonstruieren, die auf jede reine gesättigte Farbe gelegt werden kann, um die Sättigung und zu replizieren Wert des Originalbildes mit dem neuen Farbton.

Ein Weg, dies zu tun, wäre:

  1. Verwenden Sie das Werkzeug Farben → Komponenten → Zerlegen ... , um das Bild im HSV-Modus in Ebenen zu zerlegen.

  2. Löschen Sie die Farbtonebene. Wir werden es nicht benutzen.

  3. Wählen Sie die Sättigungsebene aus, öffnen Sie das Dialogfeld Ebene → Maske → Ebenenmaske hinzufügen ... , aktivieren Sie den Modus "Graustufenkopie der Ebene" und aktivieren Sie das Kontrollkästchen "Maske umkehren".

  4. Wiederholen Sie Schritt 3 auch für die Wertebene.

  5. Füllen Sie mit dem Eimerfüllwerkzeug (im Modus "Ganze Auswahl füllen") die Wertebene ( nicht die Maske!) Mit Schwarz und die Sättigungsebene mit Weiß.

  6. Verschieben Sie die Wertebene über die Sättigungsebene im Stapel.

  7. Optional können Sie die Ebenen zusammen mit Bild → Sichtbare Ebenen zusammenführen ... oder mit Ebenen → Nach unten zusammenführen zusammenführen .

Das resultierende halbtransparente Graustufenbild sollte folgendermaßen aussehen:

Halbtransparentes PNG-Bild
Klicken Sie hier, um es in voller Größe herunterzuladen / anzuzeigen.

Der Trick ist, dass nach den Schritten 3–5:

  • Die "Sättigungs" -Schicht ist reines Weiß, wenn die ursprüngliche Farbe 0% gesättigt war, und transparent, wenn sie 100% gesättigt war, und
  • Die Ebene "Wert" ist reines Schwarz, wenn die ursprüngliche Farbe einen Wert von 0% hatte, und transparent, wenn sie einen Wert von 100% hatte.

Wenn Sie diese beiden Ebenen (oder ihre zusammengeführte Kombination) auf einen reinen Hintergrund mit gesättigten Farben legen, wird der Vorgang der Konvertierung einer HSV-Farbe in RGB wiederholt: Sie beginnen mit der reinen gesättigten Farbe mit dem richtigen Farbton und mischen genügend Weiß ein, um den gewünschten Farbton zu erhalten Sättigung und mischen Sie dann genug Schwarz ein, um den gewünschten Wert zu erhalten.

So sieht das resultierende Bild auf verschiedenen farbigen Hintergründen aus:

Grüner Hintergrund (# 83ff00) Blauer Hintergrund (# 00aeff) Orange Hintergrund (# ffa200) Roter Hintergrund (# ff002a)
Farben: grün ( #83ff00), blau ( #00aeff), orange ( #ffa200), rot ( #ff002a).

Ilmari Karonen
quelle
2

In The Gimp können Sie im Wesentlichen dasselbe tun wie in der Photoshop-Antwort, indem Sie Farbe zu Alpha verwenden . Ich würde empfehlen, immer noch zu entsättigen und dann Weiß auf Alpha zu setzen, falls Sie mehr als eine Farbe haben. Es sieht so aus, als gäbe es eine blau / gelbe Variation. Die wichtigsten Schritte sind:

  1. Entsättigen Sie das Bild, sodass Sie ein Graustufenbild erhalten
  2. Setzen Sie Weiß (Sie können im Farbwähler #FFFFFF für Weiß eingeben) auf Alpha
  3. Speichern Sie als PNG, damit Sie die Transparenz behalten
Hurtstotouchfire
quelle
Beachten Sie, dass das Konvertieren in Graustufen im Gegensatz zum Entsättigen zu einem Bild ohne Alphakanal führen kann. Sie können dieses Bild mithilfe des Ebenendialogs wieder hinzufügen . Möglicherweise müssen Sie dies auch tun, wenn die von Ihnen geöffnete Originaldatei keinen Alphakanal hat.
Hurtstotouchfire
1
  • Öffnen Sie das Kanalfenster.

Geben Sie hier die Bildbeschreibung ein

  • Entscheiden Sie, welcher Kanal Ihnen den gewünschten Kontrastgrad bietet.

Methode 1:

  • Wählen Image > CalculationsSie den Kanal aus, den Sie als Quelle 1 ausgewählt haben, denselben Kanal oder "Grau" als Quelle 2 und "Normal" als Mischmodus. Wählen Sie als Ziel "Neues Dokument".

Geben Sie hier die Bildbeschreibung ein

  • Ändern Sie den Modus des neuen Dokuments in RGB oder Graustufen und speichern Sie es als PNG oder JPEG.

Methode 2:

  • Klicken Sie bei gedrückter Strg- / Befehlstaste auf die Miniaturansicht des von Ihnen ausgewählten Kanals.

  • Edit > Copy oder Ctl / Cmd-C

  • File > NewAkzeptieren Sie die Abmessungen Edit > Pasteoder Ctl / Cmd-V

  • Löschen Sie die Hintergrundebene.

  • Image > Mode > RGB

  • Als 24-Bit-PNG mit Transparenz speichern.

Sie können die resultierenden Bilder bei Bedarf entweder als Überlagerung oder als Alpha-Kanal verwenden.

Alan Gilbertson
quelle
Dies scheint Photoshop zu sein, OP hat nach einer GIMP-Lösung gefragt.
Kelunik
-2

Doppelklicken Sie auf Ebene. Auf der linken Seite wird ein Feld für den Ebenenstil angezeigt. Suchen und wählen Sie Verlaufsüberlagerung. Ändern Sie die Farbe des Verlaufs entsprechend Ihren Anforderungen. Klicken Sie auf OK. Ändern Sie dann im Feld Verlaufsüberlagerung den Stil in linear und ändern Sie den Winkel und die Skalierung entsprechend deine Bedürfnisse.

Der Clipping Path Indien
quelle
Zum zweiten Mal haben Sie Ihren Firmenlink hinzugefügt. Das riecht nicht nach Spam, das ist Spam!
Mensch