Bild in Maske umwandeln

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 Pink) auf einen Hintergrund legen und denselben Schattenstil erhalten kann.

Ich habe versucht, es in Graustufen umzuwandeln und die Deckkraft auf 20 % zu ändern, aber das 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.

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

Antworten (5)

Sie können das Bild mit entsättigen Colors > Desaturate.... Entfernen Sie als Nächstes Colors > Color to Alpha...mit das Grau, 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

Sie können das Bild nicht exakt replizieren, indem Sie nur eine maskierte Graustufenebene auf einem einfarbigen Hintergrund verwenden, da der Farbton der grünen Farbe auch entlang des vertikalen Farbverlaufs variiert.

Sie könnten dem ziemlich nahe kommen, indem Sie einfach mit der Pipette einen der mittelgrünen Farbtöne aus der Mitte des Bildes auswählen, seine Sättigung und seinen Wert maximieren und diese Farbe mit dem Werkzeug Ebene → Transparenz → Farbe zu Alpha ... transparent machen . Dadurch würde Ihre Ebene jedoch oben und unten Farbstiche aufweisen, 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 Wertkanäle in einer Graustufenmaske zu rekonstruieren, die auf jede reine gesättigte Farbe gelegt werden kann, um die Sättigung zu replizieren und Wert des Originalbildes mit dem neuen Farbton.

Eine Möglichkeit dazu 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 verwenden.

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

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

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

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

  7. Optional können Sie die Ebenen 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 zum Herunterladen / Anzeigen in voller Größe.

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

  • Die „Sättigungs“-Ebene ist reinweiß, wenn die ursprüngliche Farbe zu 0 % gesättigt war, und transparent, wenn sie zu 100 % gesättigt war, und
  • Die "Wert"-Ebene ist rein schwarz, wenn die ursprüngliche Farbe einen Wert von 0 % hatte, und transparent, wenn sie einen Wert von 100 % hatte.

Das Platzieren dieser beiden Ebenen (oder ihrer zusammengeführten Kombination) auf einem rein gesättigten Farbhintergrund repliziert dann den Prozess der Konvertierung einer HSV-Farbe in RGB: Sie beginnen mit der reinen gesättigten Farbe des richtigen Farbtons und mischen genug Weiß hinein, um den gewünschten zu erhalten Sättigung und mischen Sie dann genug Schwarz hinzu, um den gewünschten Wert zu erhalten.

So sieht das resultierende Bild auf verschiedenfarbigen Hintergründen aus:

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

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

  1. Entsättigen Sie das Bild , sodass Sie ein Graustufenbild erhalten
  2. Setzen Sie Weiß (Sie können #FFFFFF für Weiß in die Farbauswahl eingeben) auf Alpha
  3. Als PNG speichern, damit die Transparenz erhalten bleibt
Beachten Sie, dass das Konvertieren in Graustufen im Gegensatz zum Entsättigen zu einem Bild ohne Alphakanal führen kann und Sie diesen mithilfe des Ebenendialogs wieder hinzufügen können . Möglicherweise müssen Sie dies auch tun, wenn die von Ihnen geöffnete Originaldatei keinen Alphakanal hat.
  • Ö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 > Calculationsund verwenden Sie den ausgewählten Kanal als Quelle 1, den gleichen 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 das Miniaturbild des ausgewählten Kanals.

  • Edit > Copyoder Strg/Befehl-C

  • File > New, akzeptieren Sie die Abmessungen Edit > Pasteoder Strg/Befehl-V

  • Löschen Sie die Hintergrundebene.

  • Image > Mode > RGB

  • Als 24-Bit-PNG mit Transparenz speichern.

Sie können jedes der resultierenden Bilder bei Bedarf als Überlagerung oder als Alphakanal verwenden.

Dies scheint Photoshop zu sein, OP hat nach einer GIMP-Lösung gefragt.

Doppelklicken Sie auf Ebene, ein Ebenenstilfeld wird angezeigt. Suchen und wählen Sie auf der linken Seite Verlaufsüberlagerung aus und ändern Sie die Farbe des Verlaufs nach Bedarf. Klicken Sie auf OK. Ändern Sie dann im Verlaufsüberlagerungsfeld den Stil in linear und ändern Sie Winkel und Skalierung entsprechend deine Bedürfnisse.

Beim zweiten Mal haben Sie Ihren Firmenlink hinzugefügt. Das riecht nicht nach Spam, das ist Spam!