In einem anderen Artikel der SVG-Filterserie zeigt Sara Soueidan, wie Text mithilfe des Grundelements feDisplacementMap an die Oberflächentextur angepasst wird .

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. Teil 5. Text mit feDisplacementMap an die Oberflächentextur anpassen

Das Anwenden von Texturen auf Text ist einer der beliebtesten Texteffekte im Grafikdesign. Da der größte Teil des Druck- und Grafikdesigns in die Webplattform eingedrungen ist, wurden diese Effekte auch im Internet mithilfe von CSS sowie mithilfe von SVG-Funktionen wie Vorlagen, Masken und Zuschneidepfaden neu erstellt. Ich habe hier einen Artikel über Codrops , der Ihnen einen vollständigen Überblick über die verschiedenen Möglichkeiten gibt, strukturierten Text im Web mit CSS und SVG zu erstellen, an denen Sie heute interessiert sein könnten. Yoksel ging auf einen anderen Bereich dieses Themas ein und schrieb einen Artikel über das Animieren von Fülltext.

Einer der unberührten Effekte ist jedoch Text, der der Oberflächentextur entspricht. Wenn Text mit einer Oberfläche übereinstimmt, hat er die Form dieser Oberfläche. Abhängig von der verwendeten Oberfläche und Textur erhalten Sie möglicherweise einige wirklich attraktive Ergebnisse. Dies werde ich in diesem Artikel behandeln. Und das Interessanteste ist, dass all diese Effekte auf echten, durchsuchbaren und auswählbaren Text angewendet werden.

Anpassen des Texts an die Oberflächentextur: Der Pfad von Photoshop

Wie beim Duotone- Effekt habe ich gelernt, wie Text in Photoshop an die Oberflächentextur angepasst wird, und versucht, diesen Effekt mithilfe von SVG-Filtern zu reproduzieren. Ich habe dieses Schritt-für-Schritt-Tutorial auf YouTube gefunden.

Im Photoshop-Tutorial hat der Designer diesen Effekt mithilfe der sogenannten Verschiebungskarte erstellt. Eine versetzte Karte ist ein Bild, dessen Farbinformationen verwendet werden, um den Inhalt eines anderen Elements zu verzerren. Um einen Texteffekt zu erstellen, wird die Bildtextur verwendet, um den Text so zu verzerren, dass er der Form der Textur entspricht.

In Photoshop führte der Designer die folgenden Aktionen aus, um den Oberflächentext abzugleichen:

• Verfärbt das Bild.
• Die Detailgenauigkeit des Bildes wurde reduziert, und die Unschärfe wurde um 1 Pixel angewendet.
• Das Bild wurde als Verschiebungskarte gespeichert.
• Ich habe den Text erstellt und einen Verzerrungsfilter darauf angewendet, wobei ich das Bild als Verschiebungskarte verwendet habe.
• Das Originalbild wurde als Hintergrund für den Text wiederverwendet.
• Dann verbesserte er den Effekt, indem er dem Text ein wenig Deckkraft hinzufügte und ihn mit dem Hintergrundbild mischte.

Das Bild der Verschiebungskarte wird im zweiten Schritt unscharf, bevor der Text versetzt wird. Wenn das Bild zu viele oder zu wenig Details enthält, wirkt der resultierende Effekt weniger realistisch. Normalerweise reicht eine 2-Pixel-Bildunschärfe aus, um eine durchschnittliche Detailgenauigkeit zu erzielen, was definitiv ausreicht.

Wenn Sie die vorherigen Artikel in dieser Reihe lesen, wissen Sie, dass schrittweises Denken wichtig ist, um Effekte mithilfe von SVG-Filterprimitiven zu erstellen oder neu zu erstellen. Möglicherweise haben Sie bereits herausgefunden, wie einige dieser Schritte mithilfe von SVG-Filterprimitiven reproduziert werden können, von denen einige in früheren Artikeln behandelt wurden.

Der wichtigste Schritt bei diesem Effekt ist jedoch das Erstellen und Anwenden einer Verschiebungskarte. Wie können wir es in SVG erstellen?

Passen Sie Text an die Oberflächentextur in SVG an

Um den Effekt aus dem obigen Photoshop-Tutorial wiederherzustellen, müssen wir zuerst eine Verschiebungskarte erstellen. In SVG wird das Grundelement feDisplacementMap verwendet, um Inhalte mithilfe einer Verschiebungskarte zu versetzen.

feDisplacementMap benötigt zwei Eingaben, um ein Ergebnis zu erhalten. Das Bild, mit dem Sie den Inhalt versetzen möchten, wird im Attribut in2 angegeben. Das Attribut in ist für Eingaben reserviert, auf die Sie den Offset-Effekt anwenden möchten.

Und wie bei allen anderen Grundelementen kann die Eingabe in feDisplacementMap alles sein, von Ihrer eigenen Grafikquelle ( SourceGraphic ) bis zum Ergebnis einer anderen Filteroperation . Da wir die Verschiebungskarte auf unsere Textquelle anwenden möchten, bedeutet dies, dass das Attribut in SourceGraphic als Wert hat.

Erstellen wir also die manuellen Schritte für Photoshop mit SVG-Filterprimitiven neu. Das Anpassen von Text an die Textur in SVG ist dem in Photoshop sehr ähnlich. Ich werde auf jeden Schritt im Detail eingehen.

• Wir erhalten ein Bild, das mit feImage als Textur verwendet wird .
• Entsättigen Sie das Bild mit feColorMatrix .
• Wenden Sie mit feGaussianBlur eine 0,5-Pixel-Gauß-Unschärfe auf das Bild an .
• Verwenden Sie ein Bild, um Text mit feDisplacementMap zu verzerren.
• Wir mischen den Text mit dem Hintergrundbild mit feBlend und wenden den Transparenzeffekt darauf an (wir reduzieren die Deckkraft mit feComponentTransfer ).
• Zeigen Sie den Text und das Bild dahinter an und kombinieren Sie die beiden Ebenen mit feMerge .

Das Filterprimitiv feImage ist eine Filterversion des Bildelements und hat dieselben Attribute wie es. Um das Bild im Filterbereich zu rendern, verwenden wir daher feImage . Nachdem wir das Bild erhalten haben, können wir es als Eingabe für andere Filtervorgänge verwenden. Es wird zum Laden in die feColorMatrix- Operation verwendet, um sie zu verfärben.

Wir haben das Grundelement feColorMatrix bereits zuvor beschrieben, jedoch nicht erwähnt, dass es mehrere Schlüsselwörter enthält, die Verknüpfungen zu vordefinierten Matrizen darstellen. Anstatt die Matrix immer als Eingabe bereitzustellen, können Sie das Typattribut mit einem der möglichen Schlüssel ändern:

matrix | saturate | hueRotate | luminanceToAlpha 

Der Matrixtyp wird verwendet, wenn Sie Ihre eigene Matrix als Wert für Matrixoperationen bereitstellen möchten. Andere Tasten fügen Funktionen hinzu.

Zum Bleichen des Bildes wird der gesättigte Typ verwendet . Das Attribut values gibt die Größe der Verfärbung des Bildes an. Da wir unser Bild vollständig verfärben möchten, setzen wir es auf 0. Beachten Sie, dass die Werte als Brüche dargestellt werden, wobei 1 (der Standardwert) die vollständige Sättigung und 0 die vollständige Verfärbung (Graustufen) bedeutet.

Beginnen wir also damit, unsere Schritte in Code zu übersetzen:

 <!-- I'm extending the filter region just to increase its area for visual purposes. This is not required or needed for the effect to work.--> <filter id="conform" x="-50%" y="-50%" width="200%" height="200%"> <!-- Get the image. --> <feImage xlink:href="..." x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage> <!-- Desaturate the image. --> <feColorMatrix type="saturate" values="0" result="IMAGE"/> <!-- ... --> 

Im Moment ist unser Filterbereich wie folgt:

Abb_1. Das Originalbild nach Verfärbung.

Jetzt verwischen wir das Bild ein wenig, um die Anzahl der Details geringfügig zu verringern, ohne die Gesamtqualität zu verlieren. Für diesen speziellen Effekt habe ich beschlossen, ihn nur um 0,25 Pixel zu verwischen. Abhängig vom verwendeten Bild und dem gewünschten Effekt müssen Sie möglicherweise mit den Werten experimentieren, um das zu erhalten, was Sie benötigen.

 <!-- I'm extending the filter region just to increase its area for visual purposes. This is not required or needed for the effect to work.--> <filter id="conform" x="-50%" y="-50%" width="200%" height="200%"> <!-- Get the image. --> <feImage xlink:href="..." x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage> <!-- Desaturate the image. --> <feColorMatrix type="saturate" values="0" result="IMAGE"/> <!-- decrease level of details so the effect on text is more realistic --> <feGaussianBlur in="IMAGE" stdDeviation="0.25" result="MAP"></feGaussianBlur> <!-- ... --> 

Und unsere Verschiebungskarte sieht jetzt so aus:

Abb_2. Ansicht der Verschiebungskarte.

Mit feDisplacementMap können wir jetzt den Text mithilfe unserer Verschiebungskarte verzerren:

 <!-- I'm extending the filter region just to increase its area for visual purposes. This is not required or needed for the effect to work.--> <filter id="conform" x="-50%" y="-50%" width="200%" height="200%"> <!-- Get the image. --> <feImage xlink:href="..." x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage> <!-- Desaturate the image. --> <feColorMatrix type="saturate" values="0" result="IMAGE"/> <!-- decrease level of details so the effect on text is more realistic --> <feGaussianBlur in="IMAGE" stdDeviation="0.25" result="MAP"></feGaussianBlur> <!-- Use the displacement map to distort the source text --> <feDisplacementMap in="SourceGraphic" in2="MAP" scale="15" xChannelSelector="R" yChannelSelector="R" result="TEXTURED_TEXT"></feDisplacementMap> <!-- ... --> 

Zu diesem Zeitpunkt wird das Bild, mit dem wir den Text verzerrt haben, nicht mehr angezeigt, da es zum Erstellen von verzerrtem Text verwendet wurde. Der Filterbereich enthält derzeit nur Text, der jetzt der Form und Textur des Gewebes unserer Verschiebungskarte entspricht:

Abb_3. Verzerrten Text anzeigen.

Sie können bereits sehen, wie die Stoffstruktur an den Rändern des Textes Gestalt annimmt. Das ist großartig.

Wie im Handbuch für Photoshop werden wir das Bild mit feImage erneut per Text anzeigen :

 <!-- I'm extending the filter region just to increase its area for visual purposes. This is not required or needed for the effect to work.--> <filter id="conform" x="-50%" y="-50%" width="200%" height="200%"> <!-- Get the image. --> <feImage xlink:href="..." x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage> <!-- Desaturate the image. --> <feColorMatrix type="saturate" values="0" result="IMAGE"/> <!-- decrease level of details so the effect on text is more realistic --> <feGaussianBlur in="IMAGE" stdDeviation="0.25" result="MAP"></feGaussianBlur> <!-- Use the displacement map to distort the source text --> <feDisplacementMap in="SourceGraphic" in2="MAP" scale="15" xChannelSelector="R" yChannelSelector="R" result="TEXTURED_TEXT"></feDisplacementMap> <!-- Re-display the image as a background image --> <feImage xlink:href="..." x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="BG"></feImage> <!-- ... --> 

Schließlich möchten wir den Text mit dem Hintergrund mischen, um den Effekt zu verbessern. Wir werden die Deckkraft des Textes mit feColorMatrix auf 0,9 reduzieren und dann das Grundelement feBlend auf den Text anwenden, um ihn mit dem Hintergrund zu verschmelzen.

Wie bei den CSS-Mischmodi haben wir die Wahl zwischen 16 Mischmodi . Der Multiplikationsmodus ist für unseren Effekt geeignet. Im Handbuch für Photoshop verwendete der Designer eine lineare Aufzeichnung, die in SVG / CSS nicht verfügbar ist.

feBlend akzeptiert zwei Eingaben zum Mischen: Text und Hintergrundbild:

 <!-- I'm extending the filter region just to increase its area for visual purposes. This is not required or needed for the effect to work.--> <filter id="conform" x="-50%" y="-50%" width="200%" height="200%"> <!-- Get the image. --> <feImage xlink:href="..." x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage> <!-- Desaturate the image. --> <feColorMatrix type="saturate" values="0" result="IMAGE"/> <feGaussianBlur in="IMAGE" stdDeviation="0.25" result="MAP"></feGaussianBlur> <!-- Use the displacement map to distort the source text --> <feDisplacementMap in="SourceGraphic" in2="MAP" scale="15" xChannelSelector="R" yChannelSelector="R" result="TEXTURED_TEXT"></feDisplacementMap> <!----> <feImage xlink:href="..." x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="BG"></feImage> <!-- Reduce the opacity of the text --> <feColorMatrix in="Textured_Text" result="Textured_Text_2" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .9 0" /> <!-- Blend the text with the background --> <feBlend in="BG" in2="Textured_Text_2" mode="multiply" result="BLENDED_TEXT"></feBlend> <!-- ... --> 

Und am Ende, aber nicht nach Wert, werden wir mit feMerge eine neue Ebene mit gemischtem Text über die Hintergrundbildebene legen :

 <!-- I'm extending the filter region just to increase its area for visual purposes. This is not required or needed for the effect to work.--> <filter id="conform" x="-50%" y="-50%" width="200%" height="200%"> <!-- Get the image. --> <feImage xlink:href="..." x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></feImage> <!-- Desaturate the image. --> <feColorMatrix type="saturate" values="0" result="IMAGE"/> <!-- decrease level of details so the effect on text is more realistic --> <feGaussianBlur in="IMAGE" stdDeviation="0.25" result="MAP"></feGaussianBlur> <!-- Use the displacement map to distort the source text --> <feDisplacementMap in="SourceGraphic" in2="MAP" scale="15" xChannelSelector="R" yChannelSelector="R" result="TEXTURED_TEXT"></feDisplacementMap> <!----> <feImage xlink:href="..." x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="BG"></feImage> <!-- Reduce the opacity of the text --> <feColorMatrix in="Textured_Text" result="Textured_Text_2" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .9 0" /> <!-- Blend the text with the background --> <feBlend in="BG" in2="Textured_Text_2" mode="multiply" result="BLENDED_TEXT"></feBlend> <!-- Layer the text on top of the background image --> <feMerge> <feMergeNode in="BG"></feMergeNode> <feMergeNode in="BLENDED_TEXT"></feMergeNode> </feMerge> </filter> <text dx="60" dy="200" font-size="10em" font-weight="bold" filter="url(#conform)" fill="#00826C"> organic </text> 

Und hier ist unser Endergebnis:

Abb_4. Das Endergebnis.

Hinweise zur Verwendung von Versatzkarten in SVG

Das feDisplacementMap- Element verfügt über drei Attribute, die bestimmen, wie sich die Verschiebungskarte auf die Originalgrafiken auswirkt:

• xChannelSelector : Gibt an, welcher Farbkanal (R / G / B / A) von in2 für den horizontalen Versatz verwendet werden soll.
• yChannelSelector : Gibt an, welcher Farbkanal (R / G / B / A) von in2 für den vertikalen Versatz verwendet werden soll.
• Maßstab : Bestimmt das Ausmaß der Bildverzerrung. Je höher die Skala , desto stärker ist der Verzerrungseffekt. Sie werden wahrscheinlich mit diesem Wert experimentieren, um das gewünschte Ergebnis zu erhalten.

Das Wichtigste bei der Verwendung von Bildern zum Versetzen von Inhalten in SVG-Filtern ist möglicherweise, dass das Bild und der Inhalt den CORS- Regeln unterliegen. Stellen Sie sicher, dass Sie das Bild und den Inhalt aus derselben Quelle bereitstellen, damit der Browser den Versatzvorgang nicht überspringt.

Sie können das Bild auch in einen Filter (in feImage ) einbetten und als Verschiebungskarte verwenden. Dieser Stift von Gabi ist ein großartiges Beispiel, das das integrierte SVG-Muster verwendet, um das Originalbild zu verzerren. Dieses kreisförmige Muster, das einen Effekt wie Wellen erzeugt, ist mein Favorit.

Anwenden einer Konvertierung auf die Quelle

In dem für diesen Effekt verwendeten Photoshop-Tutorial wendet der Designer eine Rotationstransformation auf Text an, die dem Gesamteffekt eine nette Note verleiht.

Wenn Sie eine Rotationstransformation auf den <Text> anwenden, auf den der Filter angewendet wird, wird der gesamte Filterbereich einschließlich des Hintergrundbilds gedreht:

Abb_5. Ansicht des Bildes nach dem Anwenden der Drehung, während sich der Hintergrund drehte.

Dies geschieht auch, wenn andere Stile auf den Quelltext angewendet werden. Wenn Sie beispielsweise den Deckkraftparameter <text> auf 0,5 setzen, wirkt sich dies auch auf den Text und das Hintergrundbild aus.

Um den Text, aber nicht den Rest des Filterbereichs, zu drehen, können wir den Text in eine Gruppe ( <g> ) einschließen, einen Filter auf diese Gruppe anwenden und dann die Rotationstransformation auf den Text anwenden. Dadurch wird sichergestellt, dass nur der Text gedreht wird, während der Rest des Filterbereichs, der jetzt von der umschlossenen Gruppe definiert wird, von der Transformation nicht betroffen ist. Diese Methode wird freundlicherweise von Amelia Bellamy-Royds zur Verfügung gestellt .

 <g filter="url(#conform)"> <text dx="60" dy="200" font-size="10em" transform="translate(-20 30) rotate(-7)" fill="#00826C">organic</text> </g> 

Ich habe die Transformation ein wenig geändert, indem ich Nachzählungen hinzugefügt habe, um sicherzustellen, dass der Text im Filterbereich zentriert bleibt. Das Ergebnis dieser Transformation sieht nun folgendermaßen aus:

Abb_6. Konvertieren Sie zusammen mit der Nachzählung, um den Text zu zentrieren.

Bitte beachten Sie, dass ich die Rotationstransformation mit dem SVG-Transformationsattribut und nicht mit CSS auf den Text anwende, da Internet Explorer und MSEdge zum Zeitpunkt dieses Schreibens keine CSS-Transformationen in SVG-Elementen unterstützen.

Echte Demo

Dieser Textverzerrungseffekt funktioniert derzeit in allen gängigen Browsern, einschließlich MSEdge. Unten sehen Sie einen Screenshot des Effekts in MSEdge:

Abb_7. Wie sieht die Textverarbeitung in MSEdge aus?

Chrome hat jedoch kürzlich die Anwendung des Verzerrungseffekts auf Text eingestellt. Dieser Thread enthält zusätzliche Informationen zu diesem Problem. Die anderen Filtervorgänge funktionieren jedoch und werden problemlos angewendet. Bis Chrome dieses Problem behebt, können Sie den mit dem Hintergrund vermischten Text nur ohne Verzerrung an den Rändern sehen. Unten sehen Sie einen Screenshot, wie die Demo in Chrome aussieht:

Abb_8. Wie der aktuelle Textverzerrungseffekt in Chrome aussieht.

Sie können die Demo hier ansehen.

Fazit

Ich hoffe, dass Sie bereits anfangen, die Leistung von SVG-Filtern zu genießen, und über viele Funktionen und Effekte nachdenken, die Sie mit ihnen erstellen können.

Wenn Ihnen die Idee gefallen hat, Text mit einer Oberflächentextur abzugleichen, möchten Sie natürlich lernen, wie Sie Ihre eigene Textur in SVG erstellen. Ja, du hast es richtig gelesen. SVG kann Texturen erstellen .

Im nächsten Artikel erfahren Sie, wie Sie eine einfache Textur mit einer Kombination aus Rauschen und Lichteffekten erstellen, die von SVG generiert werden. Bleib bei uns.