Ini adalah artikel keempat dalam seri filter SVG di mana Sara Soueidan akan menunjukkan kepada Anda cara menggunakan feComponentTransfer untuk membuat efek filter dua nada.
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
- Efek penyaringan SVG. Bagian 1. Filter SVG 101
- Efek penyaringan SVG. Bagian 2. Garis besar teks dengan feMorphology
- Efek penyaringan SVG. Bagian 3. Efek posterisasi gambar menggunakan feComponentTransfer
- Efek penyaringan SVG. Bagian 4. Gambar dua warna dengan feComponentTransfer .
- Efek Filter SVG: Menyesuaikan Tekstur Teks ke Permukaan dengan feDisplacementMap
Dalam artikel sebelumnya dalam seri ini, saya memperkenalkan Anda ke primitif feComponentTransfer , dan kami menggunakannya untuk membatasi jumlah warna pada gambar untuk membuat efek posterisasi. Pada artikel ini, kita akan melihat bagaimana primitif ini dapat digunakan untuk membuat efek duotone , seperti Photoshop. Kami juga akan belajar bagaimana menggunakannya untuk mengontrol intensitas dan kontras warna gambar.
Tinjauan Singkat
Ulangi sedikit.
Primitive feComponentTransfer memungkinkan Anda untuk mengubah masing-masing komponen R, G, B, dan A yang ada dalam piksel. Dengan kata lain, feComponentTransfer menyediakan manipulasi independen dari setiap saluran warna, serta saluran alfa, di elemen input .
Komponen RGBA dimodifikasi dengan melakukan berbagai macam fungsi pada komponen ini. Untuk ini, setiap komponen memiliki elemennya sendiri. Elemen-elemen komponen ini bersarang di feComponentTransfer . Untuk RGBA, ini adalah elemen komponen feFuncR , feFuncG , feFuncB , dan feFuncA .
Atribut type digunakan dalam elemen komponen untuk menentukan tipe fungsi yang ingin Anda gunakan untuk memodifikasi komponen ini. Lima jenis fungsi saat ini tersedia: identitas , tabel , diskrit , linier, dan gamma . Jenis fungsi ini digunakan untuk mengubah komponen RGBA (warna dan saluran alfa) dari sumber grafis. Kami menyebutkan bahwa satu atau lebih komponen dapat diubah secara bersamaan dan saluran dapat diubah secara independen dengan menerapkan fungsi yang berbeda untuk setiap elemen komponen.
<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>">
Dalam artikel sebelumnya, kami mengklarifikasi fungsi diskrit dan melihat bagaimana itu dapat digunakan untuk memposting gambar. Pada artikel ini, kita akan mulai dengan menggunakan fungsi tabel untuk membuat efek duotone, mirip dengan apa yang dapat Anda buat di Photoshop.
Buat efek dua warna di Photoshop
Saya bukan seorang desainer dan tidak mengerti editor grafis seperti Photoshop . Ketika saya ingin membuat efek dua warna di SVG, saya pertama kali mencari cara untuk membuat efek ini di editor grafis untuk melihat apakah saya bisa mereplikasi dengan menggunakan operasi penyaringan yang tersedia di SVG. Ternyata, langkah-langkah untuk membuat gambar dua warna di SVG persis sama dengan di Photoshop.
Video berikut adalah versi akselerasi dari tutorial ini yang saya temukan di YouTube.
Dalam video ini, perancang membuat efek dua warna dengan mengikuti langkah-langkah ini:
- Desaturate gambar dengan membuatnya bernuansa abu-abu.
- Bandingkan rentang nuansa abu-abu dengan rentang baru, yang alih-alih hitam dan putih di kedua ujungnya memiliki dua warna berbeda yang ingin Anda gunakan dalam efek dua warna. Dengan kata lain, Anda perlu membuat dan menggunakan peta gradien dengan nuansa abu-abu yang cocok.
Mari kita lihat bagaimana langkah-langkah ini dapat direproduksi dalam SVG.
Buat efek dua warna dalam SVG
Untuk membuat ulang efek ini dalam SVG, pertama-tama kita perlu memutihkan gambar. Ini dapat dilakukan dengan menggunakan primitif filter feColorMatrix .
Kemudian, kita harus dapat membuat dan meneruskan peta gradien ke browser untuk menampilkan gambar baru dalam skala abu-abu.
Konversi gambar skala abu-abu dengan feColorMatrix
Dengan feColorMatrix, Anda dapat menentukan matriks warna yang menentukan jumlah merah, hijau, dan biru pada gambar Anda. Memberikan jumlah yang sama dari ketiga komponen ini, kami membuat matriks yang mengubah gambar kami menjadi versi diri kami dalam nuansa abu-abu:
<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>
Pada gambar berikut, gambar di sebelah kanan adalah hasil dari penerapan filter di atas ke gambar di sebelah kiri:
Fig_1. Hasil (kanan) dari mengubah gambar di sebelah kiri menjadi skala abu-abu menggunakan operasi filter feColorMatrix .
Anda dapat mempelajari semua tentang feColorMatrix dan bagaimana menggunakannya dalam artikel ini oleh Una Kravets.
Sekarang gambar kita pada dasarnya terdiri dari gradien abu-abu, kita perlu membuat peta gradien dua warna untuk menampilkan gradien abu-abu.
Membuat peta gradien menggunakan fungsi transfer komponen tabel
Di SVG, Anda bisa menggunakan primitif feComponentTransfer dengan tabel tipe untuk membuat peta gradien.
Pada artikel sebelumnya, kami melihat bagaimana Anda bisa mencocokkan warna gambar dengan daftar warna yang disediakan dalam atribut tableValues menggunakan fungsi diskrit . Browser menggunakan daftar kami TableValues untuk membuat rentang, yang kemudian digunakan untuk mencocokkan warna dengan nilai yang kami berikan.
Saat menggunakan fungsi tabel , kami juga akan memberikan nilai warna pada atribut tableValues . Sekali lagi, browser akan menggunakan nilai-nilai ini untuk mencocokkan warna gambar. Namun, cara browser menampilkan warna-warna ini berbeda. Alih-alih mencocokkan rentang warna dengan nilai warna diskrit, ini akan membuat rentang warna dari nilai yang disediakan, dan kemudian memetakan rentang input ke rentang baru ini.
Misalkan kita ingin menggunakan dua warna untuk efek dua-nada kita:
Fig_2. Dua warna asli.
Dua warna ini akan digunakan untuk membuat tampilan gradien:
Fig_3. Gradien yang dibuat oleh dua nilai warna.
... yang akan kita cocokkan dengan peta skala abu-abu kita.
Fig_4. Tampilkan peta dua nada dengan gradien dua warna.
Untuk menggunakan warna-warna ini di feComponentTransfer , kita perlu mendapatkan nilai dari saluran R, G dan B dari setiap warna. Karena tableValues berisi nilai fraksional, kita perlu mengubah nilai RGB menjadi fraksi. Nilai warna biasanya dalam kisaran [0,255]. Untuk mengubahnya menjadi pecahan, bagilah dengan 255.
Misalnya, pink memiliki nilai RGB berikut:
R: 254 G: 32 B: 141
Mengubahnya menjadi sebagian kecil, kita dapatkan:
R: 254/255 = .996078431 G: 32/255 = .125490196 B: 141/255 = .552941176
Demikian pula untuk nilai kuning yang kita dapatkan:
R: .984313725 G: .941176471 B: .478431373
Sekarang kita memiliki nilai warna, saatnya untuk membuat peta gradien kita. Kami sebutkan sebelumnya bahwa ketika kami menyediakan tableValues untuk digunakan dalam fungsi tabel , browser akan menggunakan tableValues untuk membuat rentang. Oleh karena itu, kami akan mulai dengan memberikan nilai RGB dua warna sebagai nilai RGB untuk elemen komponen:
<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>
Dalam artikel sebelumnya, kami melihat bahwa ketika menggunakan fungsi diskrit , peramban membuat rentang n untuk nilai n di tableValues . Ketika kami menggunakan fungsi tabel , browser membuat rentang n-1 untuk nilai n . Karena kami menyediakan dua tableValues untuk setiap komponen, yang berarti bahwa kami akan mendapatkan satu rentang ([merah muda, kuning]) untuk masing-masing komponen.
Sekarang feComponentTransfer akan melakukan tugasnya: browser akan memindai setiap piksel dari sumber gambar secara berurutan. Untuk setiap piksel, itu akan menerima nilai komponen merah, hijau, dan biru. Karena gambar kami memiliki nuansa abu-abu, nilai R / G / B akan berada dalam kisaran [0, 1] = [hitam, putih] (0 - benar-benar hitam, 1 - benar-benar putih dan nuansa abu-abu di antara mereka). Kemudian nilai setiap komponen akan dipetakan ke rentang baru yang ditentukan dalam tableValues .
Jadi:
- nilai komponen merah akan dipetakan ke kisaran [.996078431, .984313725];
- nilai biru komponen akan dipetakan ke kisaran [.125490196, .941176471];
- nilai hijau komponen akan dipetakan ke kisaran [.552941176, .478431373].
Dengan demikian, pada saat browser melewati semua piksel gambar, Anda akan mengganti semua nilai RGB dalam gradien skala abu-abu dengan nilai RGB dari tampilan gradien dua warna. Hasilnya, gambar akan menjadi dua warna.
Fig_6. Hasil (kanan) menampilkan gambar skala abu-abu (kiri) di peta gradien kami.
Kode lengkap kami sekarang terlihat seperti ini:
<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>
Anda dapat bermain dengan demo di sini:
Anda dapat melangkah lebih jauh dan alih-alih hanya menyediakan dua nilai warna untuk peta gradien, berikan tiga nilai warna dalam tableValues , membuat peta gradien yang memiliki tiga warna, bukan dua.
Kontrol kontras dan intensitas warna dengan fungsi transfer gamma
Dengan menggunakan fungsi transfer komponen gamma , kita dapat melakukan koreksi gamma dari sumber gambar kita. Koreksi gamma adalah fungsi untuk mengontrol level cahaya dari suatu gambar.
Fungsi gamma memiliki tiga atribut yang memungkinkan Anda untuk mengontrol fungsi koreksi gamma yang akan digunakan untuk mengontrol iluminasi: amplitudo, eksponen, dan offset. Bersama-sama, mereka membuat fungsi transfer berikut:
C' = amplitude * pow(C, exponent) + offset
gamma dapat digunakan untuk mengontrol kontras keseluruhan gambar. Meningkatkan atribut eksponen membuat area gelap lebih gelap, sementara meningkatkan atribut amplitudo membuat area terang lebih bersinar. Dan ini, pada gilirannya, meningkatkan kontras keseluruhan gambar. Atribut offset digunakan untuk meningkatkan intensitas setiap komponen, dan juga memengaruhi gambar penuh: area terang dan gelap.
Menyesuaikan kontras area gelap dan terang pada gambar terkadang dapat berguna jika Anda tidak mendapatkan jumlah "kecerahan" yang ingin Anda lihat dalam gambar.
Misalnya, jika Anda menerapkan filter duotone dari bagian sebelumnya ke gambar berikutnya, hasilnya tidak akan "hidup" seperti yang kita inginkan:
Fig_7. Hasil dari filter duotone.
Gambar dua warna di sebelah kanan terlihat sedikit pucat, dan warnanya sedikit buram. Saya ingin menambahkan kontras agar terlihat lebih hidup. Mari kita tambahkan sedikit amplitudo dan eksponen :
<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>
Saya bisa membuat area terang lebih bercahaya, dan yang gelap lebih intens:
Fig_8. Hasil koreksi gamma.
Tentu saja, ini hanya sebuah contoh. Anda dapat memilih versi gambar yang lebih pucat, terutama untuk membuatnya terlihat lebih baik dengan teks di atas. Saya pikir koreksi gamma paling berguna untuk mengendalikan kontras gambar hitam putih. Jika saya menerapkan operasi koreksi gamma yang sama untuk versi grayscale dari gambar, saya mendapatkan gambar yang lebih menguntungkan:
Fig_9. Hasil koreksi gamma untuk gambar skala abu-abu.
Tentu saja, Anda dapat melakukan yang sebaliknya dan alih-alih meningkatkan kontras, Anda dapat sedikit meringankan area gelap. Dalam hal ini, Anda harus mengurangi nilai amplitudo dan / atau atribut eksponen , dan tidak menambahnya. Nilai default untuk keduanya adalah 1. Nilai default dari atribut offset adalah 0.
Bermain-main dengan nilai gamma dalam demo berikut untuk lebih memahami bagaimana mereka memengaruhi kecerahan dan kontras gambar:
Gradient Map SVG Tool
Yoksel telah bermain dengan filter SVG untuk beberapa waktu dan baru-baru ini menciptakan alat visual yang fantastis yang memungkinkan Anda untuk mengunggah gambar dan menerapkan berbagai efek dua atau bahkan tiga nada, dan yang menghasilkan kode filter SVG untuk Anda, siap untuk disalin dan ditempelkan ke lokasi yang diinginkan. Ini adalah alat yang hebat untuk menjelajahi lebih lanjut feComponentTransfer .
Fig_10. Alat Gradien Peta SVG Yoksel Filter.
Alat ini bahkan memungkinkan Anda menyesuaikan efek skala abu-abu yang dibuat dengan feColorMatrix . Dalam kode kami, kami menggunakan jumlah saluran R, G, dan B yang sama untuk menghasilkan efek skala abu-abu. Ini adalah salah satu cara untuk membuat gambar skala abu-abu. Tetapi ada cara lain. Misalnya, Anda dapat membuat efek skala abu-abu untuk setiap saluran, yang akan menghasilkan hasil skala abu-abu yang berbeda untuk setiap saluran:
Fig_11. Hasil membuat gambar skala abu-abu dengan cara lain.
Saya sarankan sedikit bermain-main dengan alat ini dan memeriksa bagaimana pemilihan efek Anda mengubah kode yang mendasarinya, karena ini adalah salah satu cara terbaik untuk mempelajari lebih lanjut tentang filter SVG.
Kesimpulan
Primitive feComponentTransfer memberi kita kendali besar atas warna dan komponen alfa dari gambar dan memungkinkan kita untuk membuat efek kelas-Photoshop dalam kenyamanan editor kode kita.
Pada artikel berikutnya dalam seri ini, kita akan melihat beberapa primitif lagi yang memungkinkan kita untuk mereproduksi efek Photoshop lain menggunakan langkah-langkah yang hampir sama seperti di Photoshop, dan menunjukkan sekali lagi bagaimana SVG dapat membawa kekuatan editor grafis ke platform web. Kita akan belajar bagaimana mencampur teks dengan warna dan tekstur gambar latar belakang untuk mendapatkan hasil yang terlihat menarik. Tetap bersama kami.