Vordergrundmotiv in Transparenzgrade umwandeln?

Ich habe ein 24-Bit-PNG, bei dem das Motiv ein subtiles Muster ist. Das Muster selbst ist in hellen Grautönen, dh die Hintergrundfarbe des PNG ist #eeeund das Muster liegt in einer Reihe von etwas dunkleren Grautönen.

Ich möchte das Vordergrundmotiv in verschiedene Transparenzstufen umwandeln. Mit anderen Worten, mein Plan ist es, eine Webseite mit Volltonfarben zu haben, die über CSS definiert sind, und das Bild über diese Farben zu legen, um mit nur einem Bild ein sich wiederholendes Muster für mehrere Farben bereitzustellen.

Ich kann viele Tutorials finden, um nur den Hintergrund transparent zu machen, aber wie konvertiere ich das Vordergrundmotiv in Transparenzgrade?

Ich bin ein absoluter Neuling in Sachen Grafikdesign-Software. Adobe Photoshop 5 ist verfügbar, und ich könnte auch Freeware-Software für Windows (wie Windows Gimp) installieren.

(Ich habe dies gegoogelt, und es gibt mehrere verwandte Fragen auf dieser Website - z . B. " Transparenz zu einem vorhandenen PNG hinzufügen ". Bisher habe ich im Allgemeinen festgestellt, dass eine durchgehende Hintergrundfarbe in transparent geändert wird, was ich nicht möchte suche.)

Update: Hier ist das Original-PNG, das ich zu konvertieren versuche:

Das Muster

(Hinweis: Dieses Bild ist lizenziert, die Verwendung oder Weitergabe durch andere ist nicht gestattet):

Es wäre viel einfacher zu helfen, wenn Sie uns das Bild zeigen würden, von dem Sie sprechen.

Antworten (5)

Sie können Color to Alpha aus dem Menü Colors in GIMP ausprobieren und dann die dunkelste Farbe in diesem Bild auswählen, um es auf Alpha zu setzen. Hier ist das Ergebnis, das ich habe (Bild ist hier kaum sichtbar, Rechtsklick, um Bild anzuzeigen oder herunterzuladen):

Transparentes Bild

Und wenn ich es als Hintergrund für eine HTML-Seite verwende, bei der die Hintergrundfarbe auf eingestellt ist, #aa00cchabe ich dieses Ergebnis:

Hintergrund

Im Photoshop:

  1. Bild → Modus → Graustufen.

  2. Öffnen Sie das Kanalbedienfeld und halten Sie die Befehlstaste gedrückt, während Sie auf die Miniaturansicht des Kanals klicken. Dadurch wird eine Auswahl aus dem Kanal getroffen.

  3. Wählen Sie → Invers.

  4. Öffnen Sie das Ebenenbedienfeld und erstellen Sie eine neue Bitmap-Ebene.

  5. Drücken Sie D, um die Vorder- und Hintergrundfarben auf Weiß und Schwarz zurückzusetzen.

  6. Drücken Sie X, um Vorder- und Hintergrundfarbe zu vertauschen. Dies bedeutet, dass Schwarz die Vordergrundfarbe ist.

  7. Drücken Sie die Option Löschen, um die Auswahl mit Schwarz zu füllen.

  8. Deaktivieren Sie die Ebene für das Originalbild (es sollte die unterste Ebene sein).

Sie haben jetzt eine Ebene, die ganz schwarz ist, mit den Bilddaten im Alphakanal.

Wenn ich Ihre Frage richtig verstehe, müssen Sie ein PNG mit einem Muster (z. B. 50% Transparenz) und ohne Hintergrund (100% Transparenz) erstellen.

So was:Geben Sie hier die Bildbeschreibung ein

Die dunklen und hellen Teile überlagern den Hintergrund, da sie halbtransparent sind (die Verwendung eines Farbverlaufs zur Darstellung des Hintergrunds ist austauschbar):

Geben Sie hier die Bildbeschreibung ein

Auf diese Weise können Sie die Hintergrundfarbe, den Farbverlauf oder das Bild ändern, auch wenn die Muster gleich bleiben.

Update: Dies ist einfach das Muster invertiert und als Ebenenmaske verwendet:

Geben Sie hier die Bildbeschreibung ein

Vielen Dank. Soweit ich weiß, gilt dies beim Erstellen eines neuen Bildes. Ich versuche eher, ein vorhandenes PNG von Farben in Transparenz umzuwandeln. :-)
Aha. Da das Muster sehr subtil ist, funktioniert dies wahrscheinlich nur bei hellen Farben. Ich werde ein Bild aktualisieren.

Das erste, was Sie beachten müssen, ist, dass Ihre Musterfarbe, so subtil sie auch sein mag, neutral gehalten werden sollte (vorzugsweise Grautöne), um sicherzustellen, dass sie zu so vielen „Hintergrund“-Farben wie möglich passt.

Abgesehen davon gibt es eine Fülle von Möglichkeiten, das zu erreichen, was Sie tun möchten. In diesem Fall wäre meiner Meinung nach die einfachste Methode (und gleichzeitig die beste):

  1. Kopieren Sie Ihr Bild auf eine neue Ebene (es funktioniert nicht, wenn es eine „Hintergrund“-Ebene bleibt, da „Hintergrund“ in Ps immer vollständig undurchsichtig ist). Das geht zB mit Ctrl+ J( Cmd+ Jif that's your boat ;))
  2. Doppelklicken Sie auf die Ebene, um zum Fenster „Ebenenstil“ zu gelangen. Standardmäßig sollten Sie im Abschnitt „Mischoptionen“ landen. Dort sollten Sie unten zwei Schieberegler sehen, die standardmäßig mit einem Schwarz-Weiß-Verlauf gefüllt sind. Obere sollte als „Diese Schicht“ markiert sein. Wenn Sie weiße Teile Ihres Bildes transparent machen möchten, bewegen Sie den rechten Schieberegler. Sie sollten „Schachbrett“ an den hellsten Stellen Ihres Musters sehen. Im Moment ist alles vollständig transparent oder undurchsichtig, aber Sie können „Zwischen“-Transparenzstufen hinzufügen, indem AltSie auf den Schieberegler klicken. Es wird dann in zwei Teile geteilt, wodurch die Farben zwischen den Schiebereglerteilen „halbtransparent“ werden. Sie können mehr in diesem Tutorial lesen .
  3. Das wars so ziemlich! Wenn Sie sehen möchten, wie Ihr neues transparentes Muster mit verschiedenen Hintergrundfarben aussehen wird, fügen Sie eine farbige Ebene unter Ihrem Muster hinzu (ich empfehle die Einstellungsebene „Vollfarbe“, da das Ändern der Füllfarbe zum Kinderspiel wird).
  4. Stellen Sie sicher, dass nur Ihr transparentes Muster sichtbar ist, und exportieren Sie es in transparentes PNG. Sie können dies auf verschiedene Arten tun, aber mein Rat ist, die Funktion „Für Web speichern“ zu verwenden, da Sie sehen können, wie Ihr PNG in Abhängigkeit von den angegebenen Parametern aussehen wird, bevor es exportiert wird.
Freut mich! :)

wie wandle ich das vordergrundmotiv in transparenzgrade um?

Um diese Frage zu beantworten (da Sie gesagt haben, dass Sie ein absoluter Neuling sind), wählen Sie einfach (zum Beispiel) die Ebene mit dem Muster aus und drücken Sie 5 und 0 auf Ihrem Nummernblock, um die Deckkraft auf 50% einzustellen. Stellen Sie sicher, dass die Musterebene die einzige Ebene ist.

Transparenz in Photoshop sieht so aus (falls Sie es nicht wissen):Geben Sie hier die Bildbeschreibung ein

Tut mir leid, wenn ich dir Dinge erzähle, die du bereits weißt, ich möchte nur sichergehen, dass es keine Missverständnisse gibt. Ich habe viele Leute gesehen, die sich gefragt haben, warum es dieses Muster gibt, obwohl etwas gelöscht wurde;)