Dies ist der vierte Artikel in der SVG-Filterserie, in dem Sara Soueidan Ihnen zeigt, wie Sie mit feComponentTransfer einen zweifarbigen Filtereffekt erstellen.

Die vorgeschlagene Artikelserie "SVG Filtering Effects" von Sara Soueidan, freiberufliche UI / UX-Schnittstellenentwicklerin und Autorin vieler im Libanon ansässiger technischer Artikel, konzentriert sich auf die Arbeit von SVG-Filtern und besteht aus folgenden Artikeln:

SVG-Filtereffekte

1. SVG-Filtereffekte. Teil 1. SVG-Filter 101
2. SVG-Filtereffekte. Teil 2. Gliederungstext mit feMorphology
3. SVG-Filtereffekte. Teil 3. Bildposterisierungseffekt mit feComponentTransfer
4. SVG-Filtereffekte. Teil 4. Zweifarbige Bilder mit feComponentTransfer .
5. SVG-Filtereffekte: Anpassen von Text an Oberflächentextur mit feDisplacementMap

In einem früheren Artikel in dieser Reihe habe ich Ihnen das Grundelement feComponentTransfer vorgestellt. Wir haben es verwendet, um die Anzahl der Farben in einem Bild zu begrenzen und einen Posterisierungseffekt zu erzielen. In diesem Artikel werden wir uns ansehen, wie dieses Grundelement verwendet werden kann, um einen Duotoneffekt wie Photoshop zu erzeugen. Wir werden auch lernen, wie man damit die Intensität und den Kontrast von Bildfarben steuert.

Kurzer Überblick

Wiederholen Sie ein bisschen.

Mit dem Grundelement feComponentTransfer können Sie jede der im Pixel vorhandenen Komponenten R, G, B und A ändern. Mit anderen Worten, feComponentTransfer bietet eine unabhängige Manipulation jedes Farbkanals sowie des Alphakanals im Eingabeelement .

RGBA- Komponenten werden geändert, indem verschiedene Arten von Funktionen für diese Komponenten ausgeführt werden. Hierzu hat jede Komponente ein eigenes Element. Diese Komponentenelemente sind in feComponentTransfer verschachtelt. Für RGBA sind dies die Komponentenelemente feFuncR , feFuncG , feFuncB und feFuncA .

Das type- Attribut wird in einem Komponentenelement verwendet, um den Funktionstyp zu bestimmen, mit dem Sie diese Komponente ändern möchten. Derzeit sind fünf Arten von Funktionen verfügbar: Identität , Tabelle , diskret , linear und Gamma . Diese Arten von Funktionen werden verwendet, um die RGBA-Komponenten (Farbe und Alphakanal) einer Grafikquelle zu ändern. Wir haben erwähnt, dass eine oder mehrere Komponenten gleichzeitig geändert werden können und dass Kanäle unabhängig voneinander geändert werden können, indem auf jedes Komponentenelement unterschiedliche Funktionen angewendet werden.

<feComponentTransfer> <!-- The RED component --> <feFuncR type="identity | table | discrete | linear | gamma"></feFuncR> <!-- The GREEN component --> <feFuncG type="identity | table | discrete | linear | gamma"></feFuncG> <!-- The BLUE component --> <feFuncB type="identity | table | discrete | linear | gamma"></feFuncB> <!-- The ALPHA component --> <feFuncA type="identity | table | discrete | linear | gamma"></feFuncA> </feComponentTransfer>"> 

In einem früheren Artikel haben wir die diskrete Funktion erläutert und gesehen, wie sie zum Posterisieren von Bildern verwendet werden kann. In diesem Artikel verwenden wir zunächst die Tabellenfunktion , um den Duotone-Effekt zu erstellen, ähnlich wie Sie ihn in Photoshop erstellen können.

Erstellen Sie in Photoshop einen Zweifarbeneffekt

Ich bin kein Designer und verstehe Grafikeditoren wie Photoshop nicht . Als ich in SVG einen Zweifarbeneffekt erstellen wollte, suchte ich zunächst nach einer Möglichkeit, diesen Effekt in einem Grafikeditor zu erstellen, um festzustellen, ob ich ihn mithilfe der in SVG verfügbaren Filteroperationen replizieren kann. Wie sich herausstellte, sind die Schritte zum Erstellen von Zweifarbenbildern in SVG genau die gleichen wie in Photoshop.

Das folgende Video ist eine beschleunigte Version dieses Tutorials , das ich auf YouTube gefunden habe.

In diesem Video erstellt der Designer einen Zweifarbeneffekt, indem er die folgenden Schritte ausführt:

• Entsättigen Sie das Bild, indem Sie es grau machen.
• Vergleichen Sie die Graustufen mit der neuen Reihe, die anstelle von Schwarz und Weiß an beiden Enden zwei verschiedene Farben aufweist, die Sie für einen Zweifarbeneffekt verwenden möchten. Mit anderen Worten, Sie müssen eine Verlaufskarte erstellen und verwenden, mit der Graustufen übereinstimmen.

Mal sehen, wie diese Schritte in SVG reproduziert werden können.

Erstellen Sie in SVG einen Zweifarbeneffekt

Um diesen Effekt in SVG wiederherzustellen, müssen wir zuerst das Bild bleichen. Dies kann mit dem Filterprimitiv feColorMatrix erfolgen.

Dann müssen wir in der Lage sein, die Verlaufskarte zu erstellen und an den Browser zu übergeben, um das neue Bild in Graustufen anzuzeigen.

Konvertieren Sie Graustufenbilder mit feColorMatrix

Mit feColorMatrix können Sie eine Farbmatrix definieren, die die Menge an Rot, Grün und Blau in Ihrem Bild bestimmt. Wenn wir die gleiche Menge dieser drei Komponenten bereitstellen, erstellen wir eine Matrix, die unser Bild in eine Version von uns selbst in Graustufen umwandelt:

 <svg viewBox="0 0 266 400"> <filter id="duotone"> <feColorMatrix type="matrix" values=".33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 1 0"> </feColorMatrix> <!-- ... --> </filter> <image xlink:href="..." width="100%" x="0" y="0" height="100%" filter="url(#duotone)"></image> </svg> 

In der folgenden Abbildung ist das Bild rechts das Ergebnis der Anwendung des obigen Filters auf das Bild links:

Abb_1. Das Ergebnis (rechts) der Konvertierung des Bilds links in Graustufen mithilfe der Filteroperation feColorMatrix .

In diesem Artikel von Una Kravets erfahren Sie alles über feColorMatrix und dessen Verwendung.

Da unser Bild im Wesentlichen aus einem Grauverlauf besteht, müssen wir eine zweifarbige Verlaufskarte erstellen, um den Grauverlauf anzuzeigen.

Erstellen einer Verlaufskarte mit der Übertragungsfunktion für Tabellenkomponenten

In SVG können Sie das Grundelement feComponentTransfer mit einer Typentabelle verwenden, um eine Verlaufskarte zu erstellen.

Im vorherigen Artikel haben wir gesehen, wie Sie die Farben eines Bildes mithilfe der diskreten Funktion mit der Liste der Farben im Attribut tableValues ​​abgleichen können. Der Browser verwendet unsere Liste von tableValues , um Bereiche zu erstellen, die dann verwendet werden, um die Farben mit den von uns angegebenen Werten abzugleichen .

Bei Verwendung der Tabellenfunktion werden auch Farbwerte im Attribut tableValues ​​angegeben . Auch hier verwendet der Browser diese Werte, um die Farben des Bildes abzugleichen. Die Art und Weise, wie der Browser diese Farben anzeigt, ist jedoch unterschiedlich. Anstatt Farbbereiche mit einem diskreten Farbwert abzugleichen, wird aus den angegebenen Werten ein Farbbereich erstellt und der Eingabebereich dann diesem neuen Bereich zugeordnet.

Angenommen, wir möchten zwei Farben für unseren zweifarbigen Effekt verwenden:

Abb_2. Die ursprünglichen zwei Farben.

Diese beiden Farben werden verwendet, um die Verlaufsanzeige zu erstellen:

Abb_3. Ein Verlauf, der durch zwei Farbwerte erstellt wird.

... zu dem wir unsere Graustufenkarte passen werden.

Abb_4. Zeigen Sie eine zweifarbige Karte mit einem zweifarbigen Farbverlauf an.

Um diese Farben in feComponentTransfer zu verwenden , müssen die Werte der Kanäle R, G und B jeder Farbe abgerufen werden . Da tableValues ​​Bruchwerte enthält, müssen wir die RGB-Werte in Brüche konvertieren. Farbwerte liegen normalerweise im Bereich [0,255]. Um sie in Brüche umzuwandeln, teilen Sie sie durch 255.

Zum Beispiel hat Pink die folgenden RGB-Werte:

 R: 254 G: 32 B: 141 

Wenn wir sie in einen Bruchteil umrechnen, erhalten wir:

 R: 254/255 = .996078431 G: 32/255 = .125490196 B: 141/255 = .552941176 

Ähnliches gilt für die Gelbwerte:

 R: .984313725 G: .941176471 B: .478431373 

Nachdem wir die Farbwerte haben, ist es Zeit, unsere Verlaufskarte zu erstellen. Wir haben bereits erwähnt, dass der Browser bei der Bereitstellung von tableValues zur Verwendung in der Tabellenfunktion tableValues ​​verwendet , um den Bereich zu erstellen. Daher werden wir zunächst RGB-Werte in zwei Farben als RGB-Werte für Komponentenelemente bereitstellen:

 <feComponentTransfer color-interpolation-filters="sRGB"> <feFuncR type="table" tableValues=".996078431 .984313725"></feFuncR> <feFuncG type="table" tableValues=".125490196 .941176471"></feFuncG> <feFuncB type="table" tableValues=".552941176 .478431373"></feFuncB> </feComponentTransfer> 

In einem früheren Artikel haben wir gesehen, dass der Browser bei Verwendung der diskreten Funktion n Bereiche für n Werte in tableValues ​​erstellt . Wenn wir die Tabellenfunktion verwenden, erstellt der Browser einen n-1- Bereich für n Werte. Weil Wir haben zwei tableValues für jede Komponente bereitgestellt, was bedeutet, dass wir für jede Komponente einen Bereich ([pink, gelb]) erhalten.

Jetzt erledigt feComponentTransfer seine Aufgabe: Der Browser scannt nacheinander jedes Pixel der Bildquelle. Für jedes Pixel erhält es den Wert der roten, grünen und blauen Komponenten. Da unser Bild Graustufen aufweist, liegen die R / G / B-Werte im Bereich [0, 1] = [Schwarz, Weiß] (0 - vollständig schwarz, 1 - vollständig weiß und Graustufen dazwischen). Anschließend wird der Wert jeder Komponente dem in tableValues angegebenen neuen Bereich zugeordnet .

Also:

• Der Wert der roten Komponente wird dem Bereich [.996078431, .984313725] zugeordnet.
• Der blaue Wert der Komponente wird dem Bereich [.125490196, .941176471] zugeordnet.
• Der Grünwert der Komponente wird dem Bereich [.552941176, .478431373] zugeordnet.

Wenn der Browser alle Pixel des Bildes durchläuft, ersetzen Sie alle RGB-Werte im Graustufenverlauf durch die RGB-Werte der Zweifarbenverlaufsanzeige. Infolgedessen wird das Bild zweifarbig.

Abb_6. Das Ergebnis (rechts) der Anzeige eines Graustufenbildes (links) in unserer Verlaufskarte.

Unser vollständiger Code sieht jetzt so aus:

 <svg viewBox="0 0 266 400"> <filter id="duotone"> <!-- Grab the SourceGraphic (implicit) and convert it to grayscale --> <feColorMatrix type="matrix" values=".33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 1 0"> </feColorMatrix> <!-- Map the grayscale result to the gradient map provided in tableValues --> <feComponentTransfer color-interpolation-filters="sRGB"> <feFuncR type="table" tableValues=".996078431 .984313725"></feFuncR> <feFuncG type="table" tableValues=".125490196 .941176471"></feFuncG> <feFuncB type="table" tableValues=".552941176 .478431373"></feFuncB> </feComponentTransfer> </filter> <image xlink:href=".." width="100%" x="0" y="0" height="100%" filter="url(#duotone)"></image> </svg> 

Sie können mit der Demo hier spielen:

Sie können noch weiter gehen und statt nur zwei Farbwerte für die Verlaufskarte drei Farbwerte in tableValues ​​angeben , um eine Verlaufskarte mit drei statt zwei Farben zu erstellen.

Kontrast- und Farbintensitätskontrolle mit Gamma-Übertragungsfunktion

Mit der Gammakomponenten- Übertragungsfunktion können wir eine Gammakorrektur unserer Grafikquelle durchführen. Die Gammakorrektur ist eine Funktion zur Steuerung der Lichtpegel eines Bildes.

Die Gammafunktion verfügt über drei Attribute, mit denen Sie die Gammakorrekturfunktion steuern können, mit der die Beleuchtung gesteuert wird: Amplitude, Exponent und Offset. Zusammen bilden sie folgende Übertragungsfunktion:

 C' = amplitude * pow(C, exponent) + offset 

Gamma kann verwendet werden, um den Gesamtkontrast des Bildes zu steuern. Durch Erhöhen des Exponentenattributs werden dunkle Bereiche dunkler, während durch Erhöhen des Amplitudenattributs helle Bereiche stärker leuchten. Dies erhöht wiederum den Gesamtkontrast des Bildes. Das Offset- Attribut wird verwendet, um die Intensität jeder Komponente zu erhöhen, und wirkt sich auch auf das Gesamtbild aus: sowohl helle als auch dunkle Bereiche.

Das Anpassen des Kontrasts von dunklen und hellen Bereichen des Bildes kann manchmal nützlich sein, wenn Sie nicht die Helligkeit erhalten, die Sie im Bild sehen möchten.

Wenn Sie beispielsweise den Duotone- Filter aus dem vorherigen Abschnitt auf das nächste Bild anwenden, ist das Ergebnis nicht so "live", wie wir es möchten:

Abb_7. Das Ergebnis des Duotone-Filters.

Das zweifarbige Bild rechts sieht etwas blass aus und die Farben sind leicht verschwommen. Ich möchte Kontrast hinzufügen, damit es lebendiger aussieht. Erhöhen wir die Amplitude und den Exponenten ein wenig:

 <feComponentTransfer color-interpolation-filters="sRGB"> <feFuncR type="gamma" exponent="1.5" amplitude="1.3" offset="0"></feFuncR> <feFuncG type="gamma" exponent="1.5" amplitude="1.3" offset="0"></feFuncG> <feFuncB type="gamma" exponent="1.5" amplitude="1.3" offset="0"></feFuncB> </feComponentTransfer> 

Ich konnte die hellen Bereiche leuchtender und die dunklen intensiver machen:

Abb_8. Das Ergebnis der Gammakorrektur.

Dies ist natürlich nur ein Beispiel. Möglicherweise bevorzugen Sie eine blassere Version des Bildes, insbesondere, damit es mit dem Text oben besser aussieht. Ich denke, die Gammakorrektur ist am nützlichsten, um den Kontrast von Schwarzweißbildern zu steuern. Wenn ich dieselbe Gammakorrekturoperation auf die Graustufenversion des Bildes anwende, erhalte ich ein günstigeres Bild:

Abb_9. Das Ergebnis der Gammakorrektur für ein Graustufenbild.

Natürlich können Sie das Gegenteil tun und anstatt den Kontrast zu erhöhen, können Sie die dunklen Bereiche etwas aufhellen. In diesem Fall sollten Sie die Werte der Amplituden- und / oder Exponentenattribute verringern und nicht erhöhen. Der Standardwert für beide ist 1. Der Standardwert des Offset- Attributs ist 0.

Spielen Sie in der folgenden Demo mit den Gammawerten , um besser zu verstehen, wie sie sich auf die Helligkeit und den Kontrast des Bildes auswirken:

SVG-Tool für Verlaufskarten

Yoksel spielt seit einiger Zeit mit SVG-Filtern und hat kürzlich ein fantastisches visuelles Tool erstellt , mit dem Sie ein Bild hochladen und verschiedene Zwei- oder sogar Dreifarbeneffekte anwenden können. Außerdem wird ein SVG- Filtercode für Sie generiert, der kopiert und an einen beliebigen Ort eingefügt werden kann. Dies ist ein großartiges Tool, um feComponentTransfer weiter zu erkunden.

Abb_10. Yoksel Gradient Map SVG-Filter-Tool.

Mit dem Tool können Sie sogar den mit feColorMatrix erstellten Graustufeneffekt anpassen . In unserem Code haben wir eine gleiche Anzahl von R-, G- und B-Kanälen verwendet, um einen Graustufeneffekt zu erzielen. Dies ist eine Möglichkeit, ein Graustufenbild zu erstellen. Es gibt aber auch andere Möglichkeiten. Sie können beispielsweise für jeden Kanal einen Graustufeneffekt erstellen, der für jeden Kanal zu unterschiedlichen Graustufenergebnissen führt:

Abb_11. Das Ergebnis der Erstellung eines Graustufenbilds auf andere Weise.

Ich empfehle, ein wenig mit dem Tool herumzuspielen und zu überprüfen, wie Ihre Effektauswahl den zugrunde liegenden Code ändert, da dies eine der besten Möglichkeiten ist, mehr über SVG-Filter zu erfahren.

Fazit

Mit dem Grundelement feComponentTransfer haben wir eine hervorragende Kontrolle über die Farb- und Alphakomponenten von Bildern und können mithilfe unserer Code-Editoren Effekte der Photoshop-Klasse erstellen.

Im nächsten Artikel dieser Reihe werden wir uns einige weitere Grundelemente ansehen, mit denen wir einen weiteren Photoshop-Effekt mit fast denselben Schritten wie in Photoshop reproduzieren können, und erneut zeigen, wie SVG die Leistung von Grafikeditoren auf die Webplattform bringen kann. Wir werden lernen, wie man Text mit der Farbe und Textur eines Hintergrundbildes mischt, um attraktiv aussehende Ergebnisse zu erzielen. Bleib bei uns.