Penanganan detail sangat penting dalam desain web. Saya pribadi sering mengamati situs web Gringo dan menemukan bahwa desain situs web yang bagus sangat bijaksana dalam menangani detail. Kiat yang saya bagikan kepada Anda hari ini sangat sederhana, namun dapat meningkatkan detail keseluruhan situs web secara signifikan. Jadi menurut saya tips ini juga berguna untuk meningkatkan level desain website Anda.
Dan Anda akan melihat bahwa semua teknik ini berkisar pada satu kata, yaitu "pikselasi", yang berarti beberapa garis kecil berukuran 1px dan 2px. Oke, ini dia.
1. Garis pembagi piksel Pengenalan pertama adalah garis pembagi. Silakan lihat bilah navigasi pada gambar di bawah ini.
Perhatikan garis-garis pada lingkaran merah pada gambar dan garis pemisah antar tombol. Garis-garis ini terlihat cekung sehingga membentuk kesan garis pemisah yang baik. Selanjutnya saya akan memperbesar gambar ini dan mari kita lihat prinsipnya.
Kita dapat melihat bahwa garis pemisah ini terdiri dari dua garis lurus 1px yang berdekatan, dan satu warna lebih gelap dan yang lainnya lebih terang dari warna latar belakang. Selanjutnya lihat caranya:
Pilih alat pensil (jangan salah memilih kuas) dan atur ukurannya menjadi 1px
Pilih warna yang lebih gelap dari warna latar belakang, misalnya biru tua pada gambar, tahan Shift dan buat garis lurus
Pilih warna yang lebih terang dan gambar garis lurus lainnya. OKE
PS. Selama proses menggambar garis, Anda dapat memperbesar kanvas (Z) untuk observasi.
Bagaimana? Efeknya jauh lebih baik daripada pembagi warna tunggal, bukan? Mari kita lihat beberapa contoh penggunaan teknik pembagi ini:
2. Tepi piksel
Pertama, mari kita lihat gambar asli tanpa “tepi piksel”:
Berikutnya adalah apa yang ditambahkan:
