Sebuah Anatomi Cepat Dari Cahaya Dan Bayangan
Pada diagram sederhana di bawah ini, kita dapat melihat bahwa sumber cahaya datang dari kiri. Puncak adalah di mana cahaya paling kuat, dan bayangan jatuh di sisi terjauh dari sumber cahaya. Munculnya cahaya dan bayangan memberitahu kita banyak tentang permukaan dan tekstur pada gambar.
Tapi apa ini harus dilakukan dengan desain Web, Anda bertanya?
Jika Anda mencoba untuk merancang kaya, antarmuka taktil dan website, cahaya dan bayangan adalah teman Anda. Dengan cara yang sama bahwa banyak seniman klasik membuat lukisan mereka melompat dari kanvas, Anda dapat menggunakan cahaya untuk memberikan kedalaman desain dan bunga visual. Mari kita ke dalamnya.
1. Menggunakan Sumber Cahaya
Mungkin bagian yang paling penting dari bekerja dengan pencahayaan adalah mengetahui di mana cahaya (s) berasal. Sumber cahaya kemungkinan besar akan menentukan di mana highlight dan bayangan jatuh (meskipun dengan desain Web Anda mampu untuk membengkokkan aturan ini di tempat-tempat). Jika Anda bekerja di Photoshop, Anda dapat menggunakan "light global" efek sehingga semua efek pencahayaan Anda mengikuti arah cahaya yang sama.
Mengontrol sumber (s) dari cahaya dalam desain Anda (bahkan jika hanya dengan gradien linear atau radial) dapat membantu menciptakan suasana dalam desain halaman Anda. Hal ini juga dapat membantu mengarahkan mata ke titik fokus dalam desain.
CONTOH DI WEB
Kampanye Monitor menggunakan ledakan sinar cahaya yang menyampaikan perasaan matahari terbit di balik desain.
Icebrrg menggunakan cahaya untuk menenggelamkan situs bawah air yang mendalam.
Mike Berharga menggunakan lebih dari satu sumber cahaya untuk menambah daya tarik visual dan untuk mengikat dengan meja-lampu gaya pencahayaan.
Deaxon menggunakan sumber cahaya yang halus di belakang logo untuk memberikan logo keunggulan visual pada halaman.
2. Gradien
Dalam dunia nyata, sangat sedikit hal memiliki nada datar. Cahaya dan bayangan yang dalam segala hal. Halus menggunakan gradien adalah cara yang bagus untuk memberikan kedalaman dan membuat hal-hal datang untuk hidup di layar.
Kunci dengan gradien adalah tidak berlebihan mereka. Jika Anda menggunakan Photoshop, menggunakan gaya layer untuk gradien Anda. Ini memberi Anda kebebasan untuk mengeditnya pada setiap titik, tetapi juga berarti bahwa jika Anda mengubah ukuran elemen, gradien akan rescale juga.
CONTOH DI WEB
situs nclud itu adalah pelajaran yang digunakan namun efektif halus gradien untuk memisahkan dan mengatur konten.
CSS Ninja tampaknya menggunakan warna datar pada pandangan pertama, tetapi masing-masing daerah memiliki warna gradien halus, yang memberikan tekstur.
3. Highlight
Highlights dapat membantu bayangan keseimbangan dan harus digunakan pada tepi objek yang paling dekat dengan sumber cahaya. Highlights sering diabaikan karena bila digunakan secara efektif, Anda bahkan tidak menyadari mereka ada di sana. Dan sementara tidak cocok untuk setiap situasi, sorot kecil dapat membuat semua perbedaan dalam memoles sebuah antarmuka. The "tajam" puncak, yang shinier permukaan akan muncul.
Untuk benar-benar menghargai highlights, kita perlu memperbesar sedikit dekat. Sebuah trik yang baik untuk menambahkan highlights adalah untuk bekerja pada 200% atau lebih, karena pada 100% akan sulit untuk melihat apa yang Anda lakukan dengan jelas.
CONTOH DI WEB
Icon Dock dan Newism keduanya menggunakan garis putih semi-transparan di atas tepi halaman elemen untuk memberikan sorot. Ini hampir tak terlihat tetapi menambahkan ember cat untuk desain.
Anda mungkin pernah melihat website Apple sudah. Namun, Anda mungkin tidak menyadari highlights indah di bagian bawah item navigasi, yang membantu membuat kata-kata tampak tersembunyi.
4. Dasar Bayangan
Seperti gradien, drop-bayangan telah menjadi pokok dari kebanyakan desainer Web. Bayangan benar-benar dapat menambah kedalaman visual dan tekstur bila digunakan dengan cara yang benar. Kuncinya adalah untuk tidak berlebihan.
Sifat-sifat bayangan tergantung pada arah cahaya dan intensitas, serta jarak antara objek dan permukaan di mana bayangan dilemparkan. Semakin kuat cahaya, lebih gelap dan lebih tajam bayangan. Semakin lembut cahaya, lembut bayangan.
CONTOH DI WEB
Ketika datang ke contoh online drop-bayangan, ada terlalu banyak situs untuk memilih dari.Ketika digunakan cerdik, mereka dapat menambahkan sentuhan dimensi bahkan desain yang paling minimal.
LinkedIn menambahkan bayangan sangat halus ke bagian bawah elemen sidebar untuk menciptakan ilusi kedalaman.
Google - dengan mungkin halaman yang paling sulit bekerja di Internet - masih berinvestasi dalam penggunaan halus bayangan untuk halaman pencarian.
5. Lanjutan Bayangan
Anda dapat melakukan banyak hal di luar dasar drop-bayangan untuk memberikan unsur-unsur dimensi ketiga. Bayangan lagi adalah cara yang bagus untuk mengubah hubungan spasial antara objek pada halaman.
Dalam contoh di bawah, Coke kaleng yang sama diberikan posisi yang sama sekali berbeda dalam ruang tergantung pada naungan dan bayangan.
CONTOH DI WEB
Emosi oleh Mike cerdik menggunakan bayangan (dan cahaya) untuk mengubah halaman datar ke lantai.
Superkix menggunakan bayangan melayang sneakers "di atas" website. Bayangan itu bergerak ketika Anda mengubah ukuran halaman, seolah-olah cahaya yang bergeser.
Sofa menciptakan lantai pada latar belakang putih dengan penggunaan besar dari kedua cahaya dan bayangan.
Selanjutnya Resources
Lokasi untuk artikel lebih lanjut dan sumber daya terkait.
- Photoshop Cafe
Tutorial pada casting bayangan di Photoshop. - Teknik Lanjutan Bayangan
Bekerja dengan bayangan di Photoshop. - PSDtop Blog
Memahami drop-bayangan. - Peachpit
Cahaya dan bayangan di Photoshop. - Aviva
Casting bayangan realistis. - PSDTUTS
Menggunakan cahaya dan bayangan untuk membawa teks untuk hidup. - Membangun Internet
Cahaya dan bayangan: bulu-bulu gradien di Photoshop - PSDTUTS
Menggunakan gradien untuk membuat cahaya dan bayangan ... dan secangkir kopi!
0 comments:
Posting Komentar