Merancang Website Outdoor Berstekstur di Photoshop
Di bagian pertama proyek pembuatan situs web ini, kita akan melalui proses pembuatan konsep terperinci untuk situs luar ruangan. Desain didasarkan pada berbagai tekstur dan campuran biru dan abu-abu untuk membuat situs web bergaya dan canggih untuk 'Hutan Pinewood'.
Pinewood Forest adalah kawasan fiksi keindahan alam dan daya tarik pengunjung. Tujuannya adalah untuk membuat desain web untuk memamerkan hutan, apa yang ditawarkan dan memberi tahu pengunjung tentang acara mendatang. Kami akan membuat desain berdasarkan gaya canggih dengan elemen bertekstur halus dan font serif. Latar belakang akan menampilkan gambar latar statis besar yang memungkinkan konten utama untuk menggulir di atasnya, dan konten itu sendiri dipecah menjadi area fokus utama dengan fotografi yang digunakan untuk menarik pengguna.
Mulailah dengan membuat dokumen baru. Saya cenderung membuat ukuran kanvas pada resolusi monitor besar yang khas. Dengan desain yang menampilkan gambar latar besar ini, kami ingin mengakomodasi resolusi yang lebih besar yang digunakan oleh monitor 24 atau 27 inci.
Ubah pilihan tenda menjadi 960px dan seret panduan untuk mengidentifikasi bagian halaman ini, ini akan menjadi tempat konten utama akan dimuat.
Impor foto untuk digunakan sebagai gambar latar besar dan skala untuk mengisi sebagian besar layar, tetapi sisakan margin tipis di kedua sisi. Seret panduan untuk mengidentifikasi garis lipatan khas untuk resolusi monitor besar, katakanlah sekitar 1920px. Gambar khusus ini saya unduh dari ThinkStock , yang juga merupakan sumber rentang nada biru dan abu-abu.
Tambahkan Layer Mask ke foto dan gunakan berbagai kuas Cat Air untuk memudarkan tepinya. Jatuhkan opacity kuas Anda untuk menciptakan tampilan berlapis dan bertekstur yang keren di mana gambar menyatu dengan latar belakang.
Buat logo untuk hutan dan letakkan di tengah area header halaman. Sesuaikan ukuran font sehingga fokusnya ada pada kata Pinewood, tetapi sejajarkan kedua kata dengan meningkatkan pelacakan pada kata forest. Campuran sans-serif (League Gothic) dan serif (Clarendon) bekerja sangat baik untuk menggabungkan gaya modern dan tradisional.
Tambahkan gaya lapisan Drop Shadow dan Gradient Overlay ke logo. Kedua efek menambah kedalaman dengan mengangkat logo dari halaman dan membuatnya lebih menonjol. Pertahankan kontras antara gradien dan opacity bayangan tetap rendah untuk mempertahankan kehalusan.
Ketik beberapa item navigasi untuk duduk di kedua sisi logo untuk membentuk menu. Font serif Georgia adalah alternatif web yang aman untuk jenis huruf Clarendon yang digunakan dalam logo, tanpa memerlukan perawatan font web khusus. Pelacakan dalam konsep desain dapat disesuaikan dengan spasi huruf CSS.
Gambarlah pilihan persegi panjang besar untuk menguraikan area konten dalam panduan 960px. Isi persegi panjang ini dengan pilihan warna abu-abu muda dari gradien logo.
Tambahkan tekstur Noise halus (Filter > Noise > Add Noise) sekitar 2,5% untuk memberikan nuansa sentuhan pada panel konten.
CMD-klik thumbnail layer panel konten, lalu klik kanan dan pilih Transform Selection. Sesuaikan lebar dan tinggi menjadi 40px lebih kecil dalam ukuran dan isi seleksi dengan warna putih. Tambahkan Drop Shadow halus untuk mengangkat panel putih dari batas abu-abu.
Gunakan pilihan kuas rol cat untuk membuat kasar tepi batas abu-abu dengan mengecat ke layer mask. Muat seleksi panel putih dan isi area ini dengan warna hitam pada layer mask untuk membuatnya transparan, lalu turunkan opacity batas abu-abu menjadi sekitar 60% untuk memungkinkan latar belakang fotografi terlihat.
Impor foto untuk digunakan sebagai latar belakang area fitur utama pada halaman. Gambarlah seleksi tenda persegi panjang tipis agar sesuai dengan panel konten, balikkan seleksi dan hapus kelebihan dari foto.
Warna foto tidak benar-benar cocok dengan skema keseluruhan situs web jadi buat beberapa penyesuaian dengan alat Curves. Tekuk saluran Merah dan Hijau menjadi sedikit 'S-bends', lalu atur saluran biru dengan bentuk 'S' terbalik.
Kurangi saturasi gambar untuk mengurangi warna, hasilnya adalah warna yang dicor pada gambar yang cocok dengan warna biru dan abu-abu keren dari desain di sekitarnya.
Gunakan salah satu kuas rol cat dari Colorburned untuk melukis di latar belakang untuk beberapa teks di area fitur.
Sesuaikan ukuran dan pelacakan teks judul untuk membuat tajuk tipografi yang keren, lalu atur paragraf berikut sebagai teks isi 14px biasa.
Gaya lapisan serupa dengan yang digunakan pada logo akan membantu meningkatkan dampak tajuk. Tambahkan overlay gradien abu-abu ke putih dan drop shadow halus.
Tombol ajakan bertindak yang jelas akan memberi peramban biasa arah yang jelas ke mana harus pergi selanjutnya dari beranda. Gambarlah persegi panjang tipis dan isi dengan contoh warna biru dari skema. Tambahkan filter noise halus untuk sedikit memperkeras tombol, lalu gunakan pengaturan pensil 1px pada alat Eraser untuk memotong sedikit takik di setiap sudut.
Tambahkan Inner Glow ke tombol menggunakan warna biru yang sedikit lebih gelap. Atur opsi ke mode blending Normal, opacity 100% dan sesuaikan ukurannya. Juga beri tombol stroke 1px menggunakan warna biru yang sedikit lebih terang.
Selesaikan tombol dengan pesan yang jelas dan deskriptif, pastikan semua elemen area fitur disejajarkan dengan rapi.
Mulailah mengisi area konten dengan body copy. Atur judul intro dalam ukuran font yang sedikit lebih besar dan biarkan membentang di seluruh lebar penuh. Sejajarkan salinan isi yang lebih kecil ke dalam tata letak dua kolom, satu kolom lebar untuk konten utama dan kolom yang lebih kecil untuk bilah sisi. Tautan juga perlu diolok-olok untuk menunjukkan bagaimana mereka akan diidentifikasi. Warnai bagian tertentu dari teks dengan warna biru muda dan tambahkan garis bawah.
Di bilah sisi kita akan membuat tiga area fitur mini yang akan terhubung ke area lain dari situs. Masing-masing akan menyertakan gambar, judul, dan paragraf pendek. Tambahkan latar belakang bertekstur menggunakan kuas rol cat lalu klip gambar peta ke ukuran di dalam area bertekstur ini.
Gunakan kuas rol cat untuk membuat latar belakang lain, kali ini gunakan warna biru tua untuk membuat dasar untuk teks judul. Pangkas area yang tumpang tindih agar sesuai dengan tepi gambar.
Tambahkan judul pendek ke grafik header dan berikan perlakuan yang sama seperti teks di bagian fitur.
Kelompokkan semua elemen yang membentuk fitur samping di bilah sisi, lalu duplikat grup dan edit konten untuk membentuk tiga area fitur terpisah.
Di bawah teks di kolom utama, kami akan menambahkan bagian 'Acara mendatang'. Gunakan gaya font yang sudah ditetapkan dari teks header dan isi untuk menata konten, lalu buat area tanggal kecil menggunakan pilihan dari batas abu-abu.
Setiap acara ditata dengan ikon tanggal, judul, tautan info lebih lanjut, dan deskripsi singkat. Kami dapat merencanakan pada tahap ini bagaimana tata letak ini dapat dikodekan dengan elemen HTML yang relevan, tetapi Anda harus menunggu hingga minggu depan untuk melihat langkah demi langkah!
Di sini kita memiliki konsep yang sudah jadi. Minggu depan kita akan melalui proses coding dengan HTML dan CSS. Ingat kita akan menjaga gambar latar belakang besar itu tetap statis sehingga bagian luar gambar tidak akan terlihat oleh sebagian besar resolusi monitor. Ini juga berarti semua konten tengah harus menggulir ke gambar latar belakang, jadi kami akan menggunakan banyak grafik PNG-24 untuk menggunakan transparansi alfa.
Sumber: https://line25.com/tutorials/design-a-textured-outdoors-website-in-photoshop/
Komentar
Posting Komentar