Halo, gaes! Kalian pasti sering melihat efek visual yang sedang tren di berbagai aplikasi dan website modern akhir-akhir ini—efek seperti kaca buram yang transparan, dengan bayangan halus, dan sedikit kilau? Itulah yang disebut Glass Morphism!
Efek ini memberikan kesan modern, elegan, dan depth yang menarik bagi desain interface. Kabar baiknya, kalian tidak perlu software khusus untuk membuatnya. Dengan CorelDRAW dan pemahaman mendalam tentang Transparency Tool, kalian bisa menciptakan efek glass morphism yang memukau!
Di tutorial ini, kita akan membongkar rahasia membuat efek ini step-by-step, dari dasar hingga teknik profesional. Yuk, kita tingkatkan skill UI design kalian!
.jpg)
Bagian 1: Dekonstruksi Efek Glass Morphism: Memahami Elemen Penyusunnya
Sebelum kita praktik, mari kita pahami dulu apa saja sih "bahan-bahan" yang membentuk efek glass morphism yang sempurna?
Karakteristik Utama Glass Morphism:
1. Transparansi (Transparency): Efek buram seperti kaca frost yang memungkinkan latar belakang terlihat samar-samar.
2. Background Blur: Efek blur pada area di belakang elemen kaca, menciptakan kedalaman.
3. Border Halus (Subtle Border): Garis tepi yang sangat halus untuk memisahkan elemen kaca dari background.
4. Highlight dan Shine: Kilau cahaya yang memberikan kesan tekstur kaca.
5. Shadow yang Lembut: Bayangan yang menyebar untuk menciptakan efek "mengambang".
a. Persiapan Kanvas dan Latar Belakang
Glass morphism membutuhkan latar belakang yang colorful untuk efek terlihat optimal.
1. Buat Kanvas Baru: Ukuran 800x600 px dengan mode warna RGB.
2. Buat Background yang Berwarna: Isi dengan gradient warna yang colorful atau tempatkan gambar yang memiliki variasi warna. Efek glass akan terlihat lebih dramatis.
3. Lock Layer Background: Kunci layer background agar tidak terpilih tidak sengaja.
Bagian 2: Membangun Dasar Efek Kaca dengan Transparency Tool
Ini adalah jantung dari tutorial kita. Kita akan memanfaatkan kekuatan Transparency Tool secara maksimal.
a. Membuat Shape Dasar dan Menerapkan Transparansi
Langkah-langkah Membuat Dasar Glass Panel:
1. Buat Shape Dasar: Gunakan Rectangle Tool (F6) untuk membuat persegi panjang dengan sudut membulat (rounded corners). Ukuran sekitar 300x200 px.
2. Isi dengan Warna Solid: Beri warna putih atau warna light gray sangat muda (misal: 5% Black).
3. Aktifkan Transparency Tool: Pilih shape, lalu klik Transparency Tool dari toolbox.
4. Atur Tipe Transparansi: Di property bar, ubah dari Uniform menjadi Fountain Transparency (gradien transparansi).
5. Konfigurasi Gradien Transparansi:
· Pilih tipe Linear Transparency.
· Atur node transparansi: Node kiri (hitam) = 100% transparan, Node kanan (putih) = 30% transparan.
· Putar arah gradien menjadi vertikal (dari atas ke bawah).
Hasil Sementara: Shape kalian sekarang memiliki transparansi gradien, tapi belum terlihat seperti kaca. Ini baru dasar!
Tips Ringan: Untuk kontrol yang lebih presisi, gunakan Interactive Transparency di property bar dan atur slider-nya secara manual.
b. Menambahkan Efek Blur dengan Power of Duplikat
Karena CorelDRAW tidak memiliki "background blur" langsung, kita trik dengan duplikat background.
Langkah-langkah Membuat Latar Belakang Blur:
1. Duplikat Area Background: Seleksi area pada background yang persis di belakang glass panel. Kalian bisa menggunakan Rectangle Tool dan PowerClip untuk memotong bagian background tersebut.
2. Terapkan Blur: Dengan objek background yang sudah dipotong terseleksi, pergi ke Bitmaps > Convert to Bitmap (gunakan setting RGB, 300 DPI, Transparent Background). Lalu, Bitmaps > Blur > Gaussian Blur. Atur radius sekitar 10-15 piksel.
3. Tumpuk di Bawah Glass Panel: Letakkan objek yang sudah diblur ini tepat di bawah glass panel di stacking order. Gunakan Shift+PgDn untuk cepat memindahkannya ke bawah.
Voilà! Sekarang glass panel kalian memiliki ilusi bahwa ia mem-blur apapun yang ada di belakangnya!
Bagian 3: Penyempurnaan dan Detailing: Dari Shape Biasa Menuju Kaca Elegan
Bagian ini yang akan membedakan desain biasa dengan desain profesional.
a. Membuat Border Halus dengan Outline Transparan
Border adalah kunci untuk memisahkan elemen kaca dari background.
1. Duplikat Glass Panel: Pilih glass panel, tekan Ctrl+D.
2. Hapus Fill dan Atur Outline: Pada duplikatnya, hapus fill (klik X pada color palette). Beri outline putih dengan ketebalan 0.2 - 0.5 pt.
3. Terapkan Transparansi pada Outline: Dengan outline shape terpilih, gunakan Transparency Tool lagi. Kali ini, gunakan Uniform Transparency dengan nilai sekitar 70-80%. Ini akan membuat border yang sangat halus dan tidak keras.
b. Menambahkan Highlight dan Kilau
Highlight memberikan kesan tekstur dan kedalaman pada kaca.
1. Buat Shape Highlight: Gunakan Rectangle Tool atau Shape Tool untuk membuat shape tipis dan memanjang di bagian atas glass panel. Beri warna putih.
2. Terapkan Gradien Transparansi yang Ekstrem: Pada shape highlight, gunakan Transparency Tool dengan tipe Fountain Transparency (linear). Atur sehingga satu sisi 0% transparan (putih) dan sisi lainnya 100% transparan (hitam). Sesuaikan sudutnya sehingga transisi halus dari putih ke transparan.
3. Atur Blending Mode (Opsional): Di property bar Transparency Tool, coba ubah Normal menjadi Add atau Lighten untuk efek kilau yang lebih intens.
c. Finishing Touch dengan Shadow yang Tepat
Shadow memberikan efek "mengambang" yang khas.
1. Pilih Glass Panel (yang asli): Pergi ke Effects > Drop Shadow.
2. Atur Properties Shadow:
· Opacity: 15-25% (sangat rendah)
· Feathering: 20-30 px (tinggi, untuk efek yang sangat lembut)
· Color: Hitam atau warna gelap yang sesuai dengan background.
· Distance: Sesuaikan hingga mendapatkan efek mengambang yang subtle.
Bagian 4: Aplikasi Praktis: Membuat Komponen UI dengan Glass Morphism
Mari kita terapkan teknik ini untuk membuat komponen UI yang sesungguhnya.
a. Membuat Search Bar dengan Glass Effect
1. Buat Shape Dasar: Rectangle panjang dengan rounded corners.
2. Terapkan Teknik Glass Morphism seperti di atas.
3. Tambahkan Icon dan Placeholder Text: Buat icon search sederhana dan teks "Search..." dengan warna putih transparan (50-60% opacity).
4. Group Semua Elemen: Group semua elemen search bar sehingga mudah diduplikasi atau dipindahkan.
b. Membuat Card Profile dengan Efek Kaca
1. Buat Rectangle sebagai dasar card.
2. Terapkan glass effect, namun dengan transparansi yang lebih rendah (misal, 20% di bagian paling opaque) agar konten di dalamnya tetap terbaca.
3. Tambahkan Konten: Avatar (circle), nama, dan tombol. Pastikan konten ini tidak memiliki transparansi agar mudah dibaca.
4. Letakkan di atas background yang colorful untuk menunjukkan efek glass-nya.
Tips Praktis: Buat Color Palette khusus untuk glass morphism: putih, abu-abu sangat muda, dan warna highlight biru muda.
Bagian 5: Best Practices dan Common Mistakes
Yang Harus Dilakukan:
· Gunakan Background yang Berwarna: Glass morphism tidak akan terlihat pada background putih polos.
· Jaga Keterbacaan: Pastikan teks di atas glass panel memiliki kontras yang cukup. Tambahkan background solid di belakang teks jika perlu.
· Konsistensi: Gunakan tingkat transparansi dan blur yang konsisten di seluruh desain.
Yang Harus Dihindari:
· Terlalu Banyak Transparansi: Elemen akan menjadi sulit dilihat.
· Blur yang Berlebihan: Dapat membuat desain terlihat tidak fokus.
· Mengabaikan Hierarki: Glass effect seharusnya tidak mengalahkan konten utama.
Oke, gaes! Kita telah menyelami cukup dalam tentang seni membuat efek glass morphism yang trendy ini. Kunci utamanya ada pada penguasaan Transparency Tool dan perhatian terhadap detail-detail kecil seperti border, highlight, dan shadow.
Sekarang, waktunya bereksperimen! Cobalah buat berbagai macam komponen UI dengan efek ini—modal, sidebar, notification card. Coba variasikan tingkat transparansi, warna, dan ukuran untuk menemukan kombinasi yang paling sesuai dengan brand kalian.
Terima kasih sudah membaca, dan selamat mendesain dengan efek yang super trendy ini! Jangan lupa share hasil karya glass morphism kalian di kolom komentar ya!
Selamat berkreasi dan sampai jumpa di tutorial berikutnya! ✨
Sekian cara dan tutorial belajar CorelDRAW kali ini. Semoga semua konten yang ada di blog ecorel ini dapat bermanfaat bagi kalian semua... Terimakasih... See yoouuu!!! :D
ConversionConversion EmoticonEmoticon