Dalam artikel lain dalam seri filter SVG, Sara Soueidan akan menunjukkan cara membuat teks cocok dengan tekstur permukaan menggunakan primitif feDisplacementMap .

Rangkaian artikel yang diusulkan, "Efek Penyaringan SVG," oleh Sara Soueidan, pengembang antarmuka UI / UX lepas dan penulis banyak artikel teknis yang berbasis di Lebanon, berfokus pada karya filter SVG dan terdiri dari artikel-artikel berikut:

Efek Penyaringan SVG

1. Efek penyaringan SVG. Bagian 1. Filter SVG 101
2. Efek penyaringan SVG. Bagian 2. Garis besar teks dengan feMorphology
3. Efek penyaringan SVG. Bagian 3. Efek posterisasi gambar menggunakan feComponentTransfer
4. Efek penyaringan SVG. Bagian 4. Gambar dua warna dengan feComponentTransfer .
5. Efek penyaringan SVG. Bagian 5. Mencocokkan teks dengan tekstur permukaan dengan feDisplacementMap

Menerapkan tekstur ke teks adalah salah satu efek teks paling populer dalam desain grafis. Karena sebagian besar desain cetak dan grafis telah menyusup ke platform web, efek seperti itu juga telah diciptakan kembali di Internet menggunakan CSS, serta menggunakan fitur SVG seperti templat, masker, dan jalur tanam. Saya memiliki artikel di sini di Codrops yang memberi Anda tinjauan lengkap tentang berbagai cara untuk membuat teks bertekstur di web menggunakan CSS dan SVG yang mungkin Anda minati hari ini. Yoksel menyentuh area lain dari topik ini dan menulis sebuah artikel tentang menjiwai teks isi .

Namun, salah satu efek yang tidak tersentuh adalah teks yang cocok dengan tekstur permukaan. Ketika teks cocok dengan permukaan, itu mengambil bentuk permukaan itu. Tergantung pada permukaan dan tekstur yang digunakan, Anda mungkin mendapatkan beberapa hasil yang sangat menarik. Inilah yang akan saya bahas dalam artikel ini. Dan hal yang paling menarik adalah bahwa semua efek ini akan diterapkan pada teks nyata, dapat dicari dan dipilih.

Mencocokkan teks dengan tekstur permukaan: jalur Photoshop

Seperti halnya efek duotone , saya belajar cara membuat teks di Photoshop cocok dengan tekstur permukaan, mencoba mereproduksi efek ini menggunakan filter SVG. Saya menemukan tutorial ini selangkah demi selangkah di YouTube.

Dalam tutorial Photoshop, perancang menciptakan efek ini menggunakan apa yang disebut peta perpindahan. Peta offset adalah gambar yang informasi warnanya digunakan untuk mengubah konten elemen lain. Untuk membuat efek teks, tekstur gambar akan digunakan untuk membengkokkan teks sehingga cocok dengan bentuk tekstur.

Di Photoshop, untuk mencocokkan teks permukaan, perancang melakukan tindakan berikut:

• Memudarkan gambar.
• Mengurangi jumlah detail pada gambar, menerapkan kekaburannya sebesar 1px.
• Menyimpan gambar sebagai peta perpindahan.
• Saya membuat teks dan menerapkan filter distorsi padanya, menggunakan gambar sebagai peta perpindahan.
• Menggunakan kembali gambar asli sebagai latar belakang teks.
• Kemudian ia meningkatkan efek dengan menambahkan sedikit opacity ke teks dan memadukannya dengan gambar latar belakang.

Gambar peta perpindahan kabur pada langkah kedua sebelum menggunakannya untuk mengimbangi teks, karena jika gambar berisi terlalu banyak atau terlalu sedikit detail, efek yang dihasilkan akan terlihat kurang realistis. Biasanya gambar blur 2px sudah cukup untuk mendapatkan jumlah detail rata-rata, yang tentunya cukup.

Jika Anda membaca artikel sebelumnya dalam seri ini, Anda tahu bahwa berpikir selangkah demi selangkah adalah penting untuk membuat atau menciptakan kembali efek menggunakan SVG filtering primitif. Dan Anda mungkin sudah menemukan cara mereproduksi beberapa langkah ini menggunakan primitif filter SVG, beberapa di antaranya kami bahas dalam artikel sebelumnya.

Tetapi langkah paling penting dalam efek ini adalah membuat dan menerapkan peta perpindahan. Bagaimana kita bisa membuatnya di SVG?

Cocokkan teks dengan tekstur permukaan dalam SVG

Untuk membuat ulang efek dari tutorial Photoshop di atas, pertama-tama kita perlu membuat peta perpindahan. Dalam SVG, primitif feDisplacementMap digunakan untuk mengimbangi konten menggunakan peta perpindahan.

feDisplacementMap membutuhkan dua input untuk mendapatkan satu hasil. Gambar yang ingin Anda gunakan untuk mengimbangi konten ditentukan dalam atribut in2 . Atribut in dicadangkan untuk input yang ingin Anda terapkan efek ofset.

Dan seperti semua primitif lainnya, input ke feDisplacementMap dapat berupa apa saja, mulai dari sumber grafis Anda sendiri ( SourceGraphic ), hingga hasil operasi penyaringan lainnya. Karena kami ingin menerapkan peta perpindahan ke sumber teks kami, ini berarti bahwa atribut in akan memiliki SourceGraphic sebagai nilainya.

Jadi, mari kita buat kembali langkah-langkah manual untuk Photoshop dengan SVG filter primitif. Proses pencocokan teks dengan tekstur dalam SVG sangat mirip dengan yang kita lihat di Photoshop. Saya akan membahas setiap langkah secara terperinci.

• Kami mendapatkan gambar yang akan digunakan sebagai tekstur menggunakan feImage .
• Desaturate gambar dengan feColorMatrix .
• Menerapkan blur Gaussian 0,5px ke gambar menggunakan feGaussianBlur .
• Gunakan gambar untuk membengkokkan teks menggunakan feDisplacementMap .
• Campur teks dengan gambar latar belakang menggunakan feBlend dan terapkan efek transparansi padanya (kami akan mengurangi opacity dengan feComponentTransfer ).
• Tampilkan teks dan gambar di belakangnya, gabungkan dua layer menggunakan feMerge .

Filter primitif penyaringan adalah versi filter dari elemen gambar dan memiliki atribut yang sama seperti itu. Oleh karena itu, untuk merender gambar di area filter, kami akan menggunakan fitur . Setelah menerima gambar, kita dapat menggunakannya sebagai input untuk operasi penyaringan lainnya. Ini akan digunakan untuk memuat ke dalam operasi feColorMatrix untuk menghitamkannya.

Kami telah menjelaskan primitif feColorMatrix sebelumnya, tetapi tidak menyebutkan bahwa ia datang dengan beberapa kata kunci yang merupakan jalan pintas ke matriks yang telah ditentukan. Alih-alih selalu memberikan matriks sebagai input, Anda dapat mengubah atribut tipe menggunakan salah satu kunci yang mungkin:

matrix | saturate | hueRotate | luminanceToAlpha 

Jenis matriks digunakan ketika Anda ingin memberikan matriks Anda sendiri sebagai nilai untuk operasi matriks. Tombol lain menambah fitur.

Untuk memutihkan gambar, digunakan tipe saturate . Atribut values menunjukkan ukuran perubahan warna gambar. Karena kami ingin benar-benar mengubah warna gambar kami, kami menetapkannya ke 0. Perhatikan bahwa nilai-nilai tersebut diwakili sebagai fraksi, dengan 1 (nilai default) berarti saturasi penuh, dan 0 berarti perubahan warna total (nuansa abu-abu).

Jadi, mari mulai menerjemahkan langkah-langkah kita ke dalam kode:

 <!-- 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"/> <!-- ... --> 

Saat ini, area filter kami adalah sebagai berikut:

Fig_1. Gambar asli setelah perubahan warna.

Sekarang kita akan mengaburkan gambar sedikit untuk sedikit mengurangi jumlah detail tanpa kehilangan kualitas keseluruhan. Untuk efek khusus ini, saya memutuskan untuk mengaburkannya hanya dengan 0,25px. Anda mungkin perlu bereksperimen dengan nilai-nilai untuk mendapatkan apa yang Anda butuhkan, tergantung pada gambar yang digunakan dan efek yang Anda butuhkan.

 <!-- 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> <!-- ... --> 

Dan peta perpindahan kami sekarang terlihat seperti ini:

Fig_2. Lihat peta perpindahan.

Menggunakan feDisplacementMap , kami sekarang dapat mengubah teks menggunakan peta perpindahan kami:

 <!-- 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> <!-- ... --> 

Pada titik ini, gambar yang kami gunakan untuk mengubah teks tidak lagi ditampilkan, karena digunakan untuk membuat teks yang terdistorsi. Jadi, area pemfilteran saat ini hanya berisi teks yang sekarang cocok dengan bentuk dan tekstur bahan peta pemindahan kami:

Fig_3. Tampilkan teks yang terdistorsi.

Anda sudah dapat melihat bagaimana tekstur kain terbentuk di sekitar tepi teks. Ini bagus.

Seperti dalam manual untuk Photoshop, kami akan menampilkan kembali gambar dengan teks menggunakan feImage lagi:

 <!-- 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> <!-- ... --> 

Akhirnya, kami ingin mencampur teks dengan latar belakang untuk meningkatkan efek. Kami akan mengurangi opacity teks menjadi 0,9 dengan feColorMatrix , dan kemudian menerapkan primitif feBlend ke teks untuk menyatu dengan latar belakang.

Seperti CSS Blend Mode , kami memiliki 16 pilihan mode blending . Mode multiply cocok untuk efek kita. Dalam manual untuk Photoshop, desainer menggunakan rekaman linier, yang tidak tersedia dalam SVG / CSS.

feBlend akan menerima dua input untuk pencampuran: teks dan gambar latar:

 <!-- 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> <!-- ... --> 

Dan pada akhirnya, tetapi tidak berdasarkan nilai, kami akan overlay layer teks campuran baru di atas layer gambar latar belakang menggunakan feMerge :

 <!-- 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> 

Dan inilah hasil akhir kita:

Fig_4. Hasil akhirnya.

Catatan tentang Menggunakan Peta Offset di SVG

Elemen feDisplacementMap memiliki tiga atribut yang menentukan bagaimana peta perpindahan mempengaruhi grafis asli:

• xChannelSelector : menunjukkan saluran warna mana (R / G / B / A) dari in2 yang akan digunakan untuk offset horizontal;
• yChannelSelector : menunjukkan saluran warna mana (R / G / B / A) dari in2 yang akan digunakan untuk offset vertikal;
• skala : menentukan jumlah distorsi gambar. Semakin tinggi skalanya , semakin kuat efek distorsi. Anda mungkin akan bereksperimen dengan nilai ini untuk mendapatkan hasil yang diinginkan.

Mungkin hal yang paling penting untuk diingat ketika menggunakan gambar untuk mengimbangi konten dalam filter SVG adalah bahwa gambar dan konten tunduk pada aturan CORS . Pastikan Anda menyajikan gambar dan konten dari sumber yang sama sehingga browser tidak melewati operasi offset.

Anda juga dapat menanamkan gambar dalam filter (dalam fitur ) dan menggunakannya sebagai peta perpindahan. Pena dari Gabi ini adalah contoh bagus yang menggunakan pola SVG bawaan untuk mengubah gambar asli. Pola melingkar ini, membentuk efek seperti riak, adalah favorit saya.

Menerapkan Konversi ke Sumber

Dalam tutorial Photoshop yang kami gunakan untuk efek ini, perancang menerapkan transformasi rotasi ke teks, yang menambahkan sentuhan yang bagus untuk efek keseluruhan.

Jika Anda menerapkan transformasi rotasi ke <teks> tempat filter diterapkan, seluruh area pemfilteran akan diputar, termasuk gambar latar belakang:

Fig_5. Tampilan gambar setelah menerapkan rotasi, sementara latar belakangnya berubah.

Ini juga terjadi jika gaya lain diterapkan ke teks sumber. Misalnya, jika Anda mengatur parameter opacity <text> ke 0,5, ini juga akan mempengaruhi teks dan gambar latar belakang.

Untuk memutar teks, tetapi tidak pada bagian filter lainnya, kami dapat membungkus teks dalam grup ( <g> ) dan menerapkan filter ke grup ini, lalu menerapkan transformasi rotasi pada teks. Ini memastikan bahwa hanya teks yang akan dirotasi, sedangkan area filter lainnya, yang sekarang ditentukan oleh grup yang dibungkus, tetap tidak terpengaruh oleh transformasi. Metode ini disediakan oleh Amelia Bellamy-Royds .

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

Saya mengubah sedikit transformasi dengan menambahkan penghitungan ulang untuk memastikan teks tetap berpusat pada area penyaringan. Hasil transformasi ini sekarang terlihat seperti ini:

Fig_6. Konversikan bersama dengan penghitungan ulang untuk menempatkan teks di tengah.

Harap dicatat bahwa saya menerapkan transformasi rotasi ke teks menggunakan atribut transformasi SVG, bukan CSS, karena pada saat penulisan ini, Internet Explorer dan MSEdge tidak mendukung transformasi CSS dalam elemen SVG.

Demo nyata

Efek biasing teks ini saat ini berfungsi di semua browser utama, termasuk MSEdge. Di bawah ini adalah tangkapan layar efek di MSEdge:

Fig_7. Seperti apakah pemrosesan teks di MSEdge.

Namun, Chrome baru-baru ini berhenti menerapkan efek distorsi pada teks. Utas ini berisi informasi tambahan tentang masalah ini. Namun, operasi pemfilteran lain berfungsi dan diterapkan dengan baik, jadi hingga Chrome memperbaiki masalah ini, Anda dapat melihat teks bercampur dengan latar belakang, hanya tanpa distorsi di tepinya. Di bawah ini adalah tangkapan layar bagaimana tampilan demo di Chrome:

Fig_8. Seperti apa efek distorsi teks saat ini di Chrome.

Anda dapat menonton demo di sini .

Kesimpulan

Saya harap Anda sudah mulai menikmati kekuatan filter SVG dan sedang memikirkan banyak fitur dan efek yang dapat Anda buat bersama mereka.

Jika Anda menyukai gagasan mencocokkan teks dengan tekstur permukaan, maka tentu saja Anda ingin mempelajari cara membuat tekstur sendiri di SVG. Ya, Anda membacanya dengan benar. SVG dapat membuat tekstur .

Pada artikel selanjutnya, kita akan belajar cara membuat tekstur sederhana menggunakan kombinasi efek noise dan cahaya yang dihasilkan oleh SVG. Tetap bersama kami.