Dalam bidang desain website (interface), memang ada beberapa hal yang akan ditemui dan berbeda dari desain print. Jika kita desainer grafis yang terbiasa dengan desain print lalu ingin mencoba di bidang desain website atau interface, kemungkinan akan menemukan hal-hal teknis yang tidak biasa. Salah satunya adalah teknik slicing pada desain interface.
Pengerjaannya masih sama-sama dikerjakan pada software grafis, bisa dari Adobe Illustrator, Corel Draw atau software kesayangan kita Adobe Photoshop. Dalam hal ini saya akan membahas slicing dengan Photoshop saja karena itulah yang selalu saya gunakan.
Slicing adalah sebuah teknik pemotongan gambar/desain pada website, memecahnya jadi beberapa bagian untuk kemudian disatukan kembali menggunakan kode CSS dan HTML. Mengapa harus dipecah? Website yang kita lihat ini bisa muncul terlihat utuh tidak seperti jika kita melihat sebuah brosur yang benar-benar mencetak hasil utuh dari sebuah desain.
Ini semua muncul dari hasil potongan-potongan image saat slicing. Bisa dilihat jika kitasave as Web Complete akan ada folder yang isinya potongan-potongan image. Itulah hasil slicing. Teknik slicing tentu dapat mempercepat proses downloading website secara paralel namun jangan terlalu banyak juga bagian potongannya karena justru dapat memperlambat downloading karena keterbatasan jumlah download paralel pada browser.
Setiap desainer punya cara dan jurus tersendiri dan berbeda-beda dalam mengerjakan proyeknya. Itu sah-sah sja, yang penting kerjaan beres dengan tepat waktu. Teknik slicing pada Photoshop bisa menggunakan Slice tool atau manual dengan Crop tool. Saya sendiri lebih menyukai crop tool. Jika menggunakan slice tool, kita memang bisa secara otomatis memotong beberapa bagian sekaligus dalam sekali ‘slice’ dan langsung save for web sekaligus dalam satu folder untuk semua file hasil potongan tersebut.
Namun ini akan menyulitkan kita jika filenya transparan dan menimpa sebuah background. Well, bisa saja itu tetap dikerjakan, namun akan lebih mempermudah programmer menyusun gambar jika kita memisahkan file transparan tersebut dengan backgroundnya.
Pada bidang-bidang kotak, persegi panjang dan juga background ada teknik khusus dalam memotongnya. Kecuali jika background berupa foto atau image. Untuk menslicing sebuah bidang, misal pada background atau sebuah kotak yang ujungnya melengkung (dengan rounded rectangle) tentu ada caranya bagaimana memotong bidang –bidang tersebut. Jika yang akan kita potong adalah sebah bidang kotak, misal untuk background tulisan paragraf, namun ujungnya lancip maka kita cukup memotong tipis 1 bagian saja.
Sedangkan jika bidang yang dipotong berujung lengkung, kita akan memotong pada bagian ujung kiri-kanan atau atas bawah (tergantung arah efek gradasi jika ada) dan bagian tengah.
Mengapa kita hanya memotong tipis seperti itu saja dan atau hanya 3 bagian itu saja? Karena ketika nanti dibuat kode, jika tekstur bidangnya sama dan atau tanpa tekstur, proses kode akan menyatukannya dengan me-repeat hasil potongan bagian tengah tersebut entah itu arah vertical atau horizontal Berbeda jika image nya berupa gambar atau tekstur yang tidak merata, tentu tidak bisa menggunakan kode ‘repeat’, yang ada hasilnya berantakan.
Seperti sempat dibahas di atas teknik slicing untuk bidang bergradasi tergantung seperti apa arah gradasinya. Horizontal atau Vertikal. Jika horizontal dengan ujung melengkung, maka yang kita potong bagian ujung kiri, tengah dan ujung kanan.
Tapi jika vertical dengan ujung melengkung yang kita potong adalah bagian ujung atas, tengah dan ujung bawah. Biarlah programmer me-repeat bagian tengahnya saja. Gambar di bawah ini contoh yang ujungnya lancip, jadi hanya sekali potong saja, programer akan me-repeatnya nanti.
Untuk penamaan folder file-file slicing yang telah kita potong, tidak bisa menggunakan spasi, misal kita akan menamakan image 05, kita harus menamainya dengan image05 atau image_05. Karena kode HTML tidak bisa membaca file dengan nama yang menggunakan spasi. Dan sebaiknya jika file tersebut sejenis atau berurutan gunakan penomeran atau urutan abjad agar memudahkan programmer saat membuka file. Semua pasti ada dalam 1 folder saja, tidak terpisah atau tidak berupa folder dalam folder.
Pada awalnya bagi desainer yang belum terbiasa slicing mungkin akan bingung mulai darimana atau apa saja yang harus dislicing. Namun untuk membiasakannya tidak akan memakan waktu lama asalkan bisa Photoshop atau software grafis lainnya tentu saja.
Jika ada kesulitan menentukan bagian slicing sebaiknya didiskusikan dengan programernya atau yang bagian codernya, karena dialah yang nanti menerima hasil slicing untuk disatukan jadi halaman website utuh.
Silahkan para desainer interface dan programmer berkomentar, jika ada masukan atau ada yang kurang, dengan senang hati bisa ditambahkan di kolom komentar di bawah.
View the Original article
