Cahaya dan bayangan ada dimana-mana dalam kehidupan nyata. Segala sesuatu yang Anda lihat dipantulkan oleh cahaya dan bayangan. Secara visual, cahaya dan bayangan membantu kita mengidentifikasi benda dan mengenali materi , skala , dan perspektifnya .
Oleh karena itu, jika kita ingin membuat desain web kita lebih natural, dinamis, nyata, dan intuitif, sangat penting untuk memahami efek cahaya dan bayangan dengan benar. Berikut lima tips untuk membantu Anda memanfaatkan cahaya dan bayangan dengan lebih baik. Menggunakannya dengan baik dapat membuat desain Anda lebih halus dan menonjol dari halaman lain.
Analisis singkat tentang prinsip pencahayaan dan bayangan
Pada gambar di bawah, sumber cahaya berasal dari kiri. Sorotan adalah bagian yang paling terang, dan bayangan terletak paling jauh dari sumber cahaya. Keberadaan cahaya dan bayangan membantu kita memahami sejumlah besar informasi tentang material permukaan suatu benda . Tapi Anda mungkin bertanya, apa hubungannya dengan desain web?
Jika Anda berencana membuat antarmuka dan situs web yang kaya dan bertekstur, cahaya dan bayangan dapat membantu Anda. Sama seperti banyak seniman tradisional yang menggunakan cahaya dalam lukisan, Anda juga dapat menggunakan cahaya untuk memberikan kedalaman dan daya tarik visual pada desain Anda.
1. Gunakan sumber cahaya
Perlu dikatakan bahwa saat menggunakan pencahayaan, mengetahui di mana sumber cahaya berada adalah masalah dasar yang paling penting. Posisi sumber cahaya menentukan penempatan sorotan dan bayangan (walaupun dalam desain web Anda dapat melanggar aturan ini). Di Photoshop, Anda dapat menggunakan "Penerangan Global" dalam gaya lapisan untuk memastikan bahwa sumber cahaya dari semua efek cahaya dan bayangan yang Anda buat berada pada posisi yang sama.
Mengontrol posisi sumber cahaya dapat menciptakan suasana unik untuk desain halaman Anda (bahkan gradien linier atau radial sederhana pun dapat mencapai efeknya). Efek cahaya dan bayangan juga dapat memandu pergeseran pusat visual.
Campaign Monitor menggunakan sumber cahaya yang berbeda untuk menciptakan efek matahari terbit.
Icebrrg menggunakan pencahayaan untuk membuat halaman di bawah air.
Mike Precious menggunakan lebih dari satu sumber cahaya untuk menambah daya tarik visual, dan menggunakan pencahayaan lampu meja secara keseluruhan.
Deaxon memiliki sumber cahaya redup di belakang logo, yang membawa fokus halaman ke logo.
2. Gradien
Di dunia nyata, tidak ada yang selalu datar. Cahaya dan bayangan melekat pada segalanya. Menggunakan gradien adalah cara terbaik untuk menciptakan kedalaman dan keaslian.
Kunci dalam menggunakan gradien adalah jangan berlebihan . Saat menggambar gradien di Photoshop, lakukan overlay gradien dalam gaya lapisan Ini akan memastikan bahwa gradien Anda dapat diedit, dan saat lapisan diskalakan, gradien juga dapat diskalakan tanpa kehilangan.
Situs web nclud menggunakan gradien yang halus namun efektif untuk membedakan dan mengatur konten.
Sekilas CSS Ninjas terlihat menggunakan warna datar. Namun, setiap area warna sebenarnya memiliki gradasi samar, sehingga menciptakan efek material yang menarik.
3. Sorotan
Sorotan menyeimbangkan bayangan dan harus ditempatkan di tepi objek yang dekat dengan sumber cahaya . Sorotan sebagian besar diabaikan karena jika digunakan dengan baik, Anda hampir tidak menyadarinya. Namun, tidak semua situasi cocok karena keberadaan highlight yang halus dapat menyebabkan perbedaan besar pada polesan permukaan suatu objek. Semakin "tajam" sorotannya, semakin kuat kilap permukaan objeknya.
Untuk mengapresiasi hal-hal penting, kita perlu memperbesar detailnya. Saat membuat desain high-gloss, sebaiknya gandakan ukuran desain Anda lebih dari dua kali lipat, karena Anda mungkin tidak dapat mengetahui apa yang Anda lakukan saat ditampilkan pada skala aslinya.
Icon Dock dan Newism menggunakan warna putih transparan di tepi atas halaman untuk menciptakan efek highlight. Meski sangat tidak mencolok, namun memberikan kilau yang kuat pada desainnya.
Setiap orang pasti sudah familiar dengan situs web Apple. Namun Anda mungkin tidak melihat sorotan halus di bagian bawah menu navigasi. Sorotan inilah yang memberikan kesan menonjol pada menu.
4. Bayangan dasar
Seperti halnya gradien, drop shadow juga banyak digunakan oleh desainer web. Jika digunakan dengan benar, drop shadow benar-benar dapat menambah kedalaman visual dan tekstur pada desain. Kuncinya adalah jangan berlebihan atau menyalahgunakannya.
Kedalaman bayangan bergantung pada arah dan intensitas cahaya, serta jarak benda dari permukaan proyeksi. Semakin kuat cahayanya, semakin tajam dan gelap bayangannya; semakin lemah cahayanya, semakin lemah pula bayangannya.
Ada terlalu banyak contoh proyeksi di Internet.
LinkedIn menambahkan drop shadow yang sangat halus di bagian bawah sidebar untuk menciptakan kesan mendalam.
Google—mungkin halaman yang paling sulit dirancang di Internet—masih menggunakan drop shadow halus di halaman pencariannya.
5. Bayangan Tingkat Lanjut
Untuk memberikan kesan tiga dimensi pada suatu objek, Anda memiliki banyak pilihan selain proyeksi sederhana. Bayangan panjang dapat secara dramatis mengubah hubungan spasial objek pada halaman.
Pada contoh di bawah, setelah kaleng Coke yang sama diberi bayangan dan bagian gelap yang berbeda, seluruh posisi spasial tampak sangat berbeda .
Emosi oleh Mike menggunakan bayangan (dan pencahayaan) secara cerdik untuk mengubah halaman datar menjadi lantai.
Superkix menggunakan drop shadow untuk membuat sepatu kets melayang di atas halaman. Saat Anda memperbesar halaman, bayangannya juga bisa bergerak, seperti halnya sumber cahaya yang juga ikut bergeser. Sofa menciptakan lantai dengan latar belakang putih bersih melalui penggunaan cahaya dan bayangan yang sangat baik. Lebih banyak sumber daya Konten berikut dalam bahasa Inggris:
Tentang penulisRob Morris adalah seorang desainer Australia yang bekerja di Jepang. Sebagai seorang desainer lepas, ia menggunakan nama Digitalmash dan memiliki klien di seluruh dunia. Anda dapat mengikuti petualangannya di Twitter. |