Blog

Mencapai Efek Glassmorphism

Mencapai Efek Glassmorphism

Mencapai Efek Glassmorphism

25 Oktober 2022

Glassmorphism

Desain UI Glassmorphism artinya adalah transparansi dengan efek kaca yang ngeblur berkat penggunaan Background Blur. Selain itu, yang bikin Glassmorphism semakin populer di kalangan desainer adalah pendekatan berlapis-lapis dengan objek mengambang, penggunaan warna-warna cerah yang menonjolkan transparansi yang blur serta garis batas halus dan tipis pada objek yang tembus cahaya.

Nah, karena tampilan kaca itulah, efek ini dikenal dengan sebutan Glassmorphism.


Cara mencapai efek Glassmorphism

Untuk mencapai efek Glassmorphism sebenarnya nggak sulit kok. Tapi meski begitu ada beberapa hal yang wajib diperhatikan. Pertama, tata letak berbasis bangun datar segi empat, di mana semakin dekat objeknya dengan kita, maka akan semakin banyak menarik cahaya. Artinya, tampilannya menjadi sedikit lebih transparan.

Dasar untuk seluruh efek ini datang dari kombinasi bayangan, transparansi dan keburaman latar belakang. Kamu cuma bisa menggunakan satu atau beberapa lapisan transparan, tapi kalau mau efeknya terlihat menonjol, seenggaknya dua tingkat tembus cahaya muncul di latar belakang yang berwarna-warni.


Cara mengatur transparansi 

Sangat penting diingat, kamu nggak boleh membuat seluruh bentuk transparan. Sebagian besar design tool ketika kamu mengatur tingkat transparansi di angka 100% dan transparansi objek lebih rendah, maka background blur akan dinonaktifkan.

Dalam contoh di atas, ada nilai background blur yang sama persis, yakni 8, tapi kok, bisa gambarnya terlihat beda banget. Jika opasitas isian 100%, maka nggak masalah seberapa rendah opasitas objeknya.


Cara memilih background yang pas!

Background memegang peran penting untuk membuat efek ini bersinar. Terlarang membuatnya terlalu simple atau membosankan kalau kamu ingin membuat efeknya terlihat sempurna. Selain itu, kamu juga nggak boleh membuatnya dengan detail yang terlalu dalam.

Seperti yang sudah kamu baca pada cara mencapai efek glassmorphism, untuk membuatnya menonjol maka menggunakan latar belakang warna-warni

Mungkin itulah kenapa Apple memilih background warna-warni sebagai wallpaper default pada Mac OS Big Sur. Pasalnya, perbedaan tonal yang mudah dilihat itu lebih gampang kamu lihat ketika ada permukaan buram transparan yang membentang di atasnya. So, saat kamu memilih latar belakang, pastikan background pilihanmu itu punya perbedaan tonal yang cukup agar glass effect bisa benar-benar terlihat dengan cantik.


Penting untuk dicoba

Nah penting untuk kamu coba adalah menambahkan 1p inner border dengan beberapa transparansi pada bentuk yang diinginan. Cara ini akan mensimulasikan tepi kaca dan membuat bentuk jadi lebih menonjol dari background-nya.