Siapa yang terbiasa dengan pengembangan situs web, tahu bahwa biasanya tidak dimulai dengan struktur HTML. Sebaliknya, seseorang mengambil program grafis dan membangun tata letak halaman di sana. (Jika bekerja di sebuah agensi, maka tata letak diberikan oleh desainer grafis atau klien). Setelah itu, tugasnya adalah membangun halaman dari tata letak ini. Sekaranglah saatnya membicarakannya.
Sehubungan dengan membuat ulang tata letak, Anda akan terus bertemu dengan kedua istilah Slicing dan Dicing. Ini sebenarnya hanya berarti bahwa Anda mengambil desain atau desain tersebut, memotongnya dalam program grafis Anda, dan kemudian menyusunnya kembali melalui HTML.
Program Grafis yang Tepat
Yah, setiap orang memiliki preferensi tentang perangkat lunak mana yang paling ia sukai digunakan. Seperti halnya dengan program grafis. Namun, dalam konteks desain web profesional, situasinya sedikit berbeda. Di sana hampir selalu menggunakan Photoshop. Nyatanya, sebagian besar desain ada dalam format PSD. Dan format PSD ini tidak dapat dibuka atau diedit di semua program.
Jika Anda tidak memiliki Photoshop, Anda sebenarnya tidak sepenuhnya terdampar. Alternatif yang mungkin adalah GIMP. Anda dapat mengunduh program ini secara gratis dari situs http://www.gimp.org/. Saya akan menunjukkan langkah-langkah dasar dalam membuat tata letak menggunakan GIMP. Ini akan berfungsi dengan cara yang sama dengan Photoshop.
Membuat Tata Letak Sendiri
Pertama-tama, pertimbangkan aspek desain dasar berikut:
• Seberapa lebar tata letak akan?
• Berapa banyak kolom yang akan disertakan?
Setelah itu, buatlah area kerja melalui File>New dan tentukan ukurannya. Meskipun tata letak yang saya buat akan "mengisi seluruh layar," konten sebenarnya hanya memiliki lebar 1000 piksel. Saya atur tinggi tata letak menjadi 887 piksel. (Dimana tinggi situs web nantinya akan disesuaikan dengan kontennya).
Dengan menekan OK, informasi tersebut dikonfirmasi. Dengan demikian, area kerja siap dan dapat diisi dengan konten. (Untuk kejelasan, saya bekerja dengan latar belakang abu-abu di desain ini. Di situs web nanti, latar belakang ini tidak akan terlihat).
Sebuah elemen yang sangat umum dalam sebuah situs web adalah logo, yang biasanya dalam bentuk grafis. Untuk menyisipkannya ke dalam tata letak, buka File>Open dan pilih logo Anda dalam format PNG, GIF, atau JPEG. Konfirmasikan pilihan dengan Open. Sekarang, tekan Ctrl+C, untuk menyalin logo ke clipboard. Kemudian beralih ke desain web sebenarnya dan tekan Ctrl+V di sana. Logo yang disisipkan tidak akan berada di posisi yang diinginkan. Namun, dengan alat Move, Anda dapat dengan mudah memindahkannya ke posisi yang benar.
Jika gambar tidak dapat dipindahkan, aktifkan dulu lapisannya. Pengaturan terkait dapat ditemukan di bawah Tampilan>Seni Ini>d>nya Dialog>Layers.
Untuk memudahkan penataan, Anda dapat menampilkan Garis bantu. Caranya adalah dengan mengklik Penggaris dengan mouse dan menariknya dengan klik kiri> mouse tertekan ke posisi yang diinginkan.
Anda dapat menarik sebanyak mungkin garis bantuan yang diperlukan untuk menata elemen-elemen situs web.
Buatlah lapisan tambahan. Lapisan ini harus berisi menu bagian atas.
Sebagai nama, Anda dapat menggunakan Menu Atas. Buat lapisan dengan OK. Buka Kotak Pilihan dan buat area tempat navigasi akan dimasukkan.
Saya asumsikan dalam contoh ini bahwa latar belakang menu atas akan memiliki gradien warna. Klik pada Pola Warna: Isi pilihan dengan gradient warna (fill).
Gradien warna itu harus bervariasi dari abu-abu ke hitam. Anda dapat mengatur warna yang sesuai melalui Kotak Warna. Sebagai jenis gradien warna, saya atur Vertikal dari Atas ke Bawah. Tahan Tombol Ctrl dan tarik garis dari atas ke bawah di area yang dipilih. Setelah klik kiri dilepaskan, area tersebut akan memiliki gradien warna yang diinginkan.
Pada dasarnya, ada dua pilihan:
• Biarkan area navigasi seperti itu saja.
• Masukkan setiap menu item untuk melihat lebih jelas jenis huruf yang digunakan dalam desain. Pilihan antara keduanya terserah Anda. Namun, jika Anda ingin mempresentasikan tata letak kepada klien, saya sangat menyarankan untuk menyertakan item menu. Kebanyakan klien biasanya kurang memiliki daya imajinasi di sini.
Pertama-tama, pilihlah Jenis Huruf. Di GIMP, Anda dapat menemukan pengaturan yang sesuai di bawah Seni Ini>d>nya Dialog>Fonts.
Sejauh ini, masalah jenis huruf dalam konteks CSS dan HTML telah dibahas dalam seri ini. Pada dasarnya, sebagai perancang web, Anda dapat menentukan jenis huruf apa pun secara teoritis. Namun, apakah jenis huruf tersebut ada di komputer pengunjung situs web dan dapat ditampilkan, belum tentu Anda tahu. Oleh karena itu, hasilnya sulit dikontrol, terutama jika Anda menggunakan jenis huruf yang cukup eksotis. Saya akan membahas aspek ini lagi dalam seri ini ketika saya membahas jenis huruf dalam situs web contoh. Untuk tata letak saat ini, saya memilih pengaturan berikut:
• Verdana bold
• 20 Piksel
• Warna huruf putih
Anda sekarang bisa menyisipkan item menu satu per satu. Yang terbaik adalah menyalin lapisan di mana item menu pertama termasuk, dan menyisipkannya sebagai lapisan baru. Anda kemudian dapat menyesuaikan teks lapisan tersebut. Buatlah menu bagian atas.
Menu bagian atas harus memiliki efek Hover. Ketika mengarahkan kursor ke item menu individual, warna latar belakangnya akan berubah. Aspek ini juga sebaiknya diilustrasikan dalam desain. Untuk melakukannya, pilih warna Hover yang diinginkan dan salin salah satu lapisan menu yang sudah ada. Beri lapisan tersebut warna tersebut. Dalam contoh ini, saya mengasumsikan gradien warna biru. Kemudian masukkan teks item menu. Dengan begitu, Anda bisa memperkirakan bagaimana menu akan terlihat nantinya.
