DesignMagz

Gradasi dan Diagonal

---

Beberapa waktu lalu, saya mendapatkan job untuk mengkonversi dari sebuah desain yang telah dibuat oleh klien dalam bentuk .psd (Format File Photoshop) menjadi dalam bentuk HTML. Terlihat pekerjaan yang sederhana memang, namun ternyata tidaklah sesederhana yang diperkirakan sebelumnya.

Permasalahan yang saya hadapi adalah dari layouting dari desain itu sendiri. Desain yang telah dibuat bisa saya bilang “Web Unfriendly” karena setelah di konversi, desain tersebut menghasilkan filesize dan layouting tabel yang rumit.

Tidak hanya dipenuhi image dan icon-icon besar yang tersebar di dalam desain yang dibuat, tapi ada hal lain yang menarik perhatian saya, yaitu gradasi dan tataletak navigasi diagonal.

Gradasi
Desain yang dibuat memiliki latar dengan warna ungu gradasi dengan warna mudanya. Gradasi warna yang diberikan adalah seperti pada gambar dibawah (dalam ukuran 800×600).

Seperti pernah diulas pada artikel sebelumnya, gradasi menyebabkan kompresi LZW pada GIF membuat banyak pola, hingga bakcground ini bila disave dengan format GIF akan menghasilkan filesize yang besar. Untuk hal ini, saya menggunakan format JPEG dengan kualitas kompresi high (60).

Alasan lainnya, background diatas akan menyulitkan dalam pola (pattern) dari background akibatnya bila ukuran resolusi melebihi ukuran desain yang dibuat maka pola background akan terlihat tidak menyatu.

Diagonal
Hal lainnya adalah tataletak navigasi yang terbilang “tidak biasa” yaitu menu-menu diletakan secara diagonal pada sisi kanan bawah, hingga pada proses slicing, akan membuat tabel yang rumit. Tidak hanya itu, image-image selain menu yang bertaburan sebagai penghias dari halaman tersebut membuat saya berfikir ekstra untuk menghasilkan hasil akhir yang optimal. Perhatikan hasil slicing yang dipergunakan:

Pada slicing diatas terpaksa “aturan tabel” dilanggar (baca artikel tip slicing image) karena banyaknya image dan teks yang tersebar pada halaman.

Bagaimana Sebaiknya?
Dalam menampilkan background, sebaiknya pergunakan background yang memudahkan untuk di-pola (pattern) yang memiliki filesize yang kecil. Bila harus menampilkan gradien, pergunakan gradien vertikal atau horisontal agar dapat dibuat pola dengan mudah, kemudian Anda dapat menggunakan CSS untuk mengatur tampilan dan letak dari background tersebut.

Dalam membuat merancang situs Web pertimbangkan pula tataletak aturan tabel untuk mempermudah dalam konversi kedalam HTML. (Pupung Budi Purnama)