Membuat Sprite Image dengan Mudah Menggunakan SpritePad

Membuat Sprite Image dengan Mudah Menggunakan SpritePad

Untuk membuat web dengan desain 2.0, akan memerlukan sangat banyak gambar berukuran kecil yang digunakan sebagai pattern, icon, button, dan lain sebagainya. Banyaknya gambar…

Untuk membuat web dengan desain 2.0, akan memerlukan sangat banyak gambar berukuran kecil yang digunakan sebagai pattern, icon, button, dan lain sebagainya. Banyaknya gambar yang dimuat sebagai komponen-komponen tersebut membuat proses loading halaman menjadi lebih lama. Walaupun awalnya gambar–gambar tersebut berukuran kecil, proses permintaan ke server yang dilakukan berulang-kali mengakibatkan beban lalu lintas data yang cukup besar, bahkan lebih besar dari ukuran keseluruhan gambar itu sendiri. Nah, Anda bisa mengatasi masalah tersebut dengan menggunakan teknik sprite image. Yang dimaksud sprite image dalam pemrograman website adalah kumpulan gambar-gambar komponen kecil dalam satu gambar yang berukuran lebih besar. Sprite image digunakan untuk mempercepat proses menampilkan halaman website karena meminimalkan jumlah permintaan berkas gambar ke server.

Namun bukan berarti dengan menggunakan sprite image Anda sudah benar-benar terbebas dari masalah. Untuk membuat sprite image yang baik diperlukan akurasi yang tinggi hingga unit ketelitian pixel. Untuk menggunakan sprite image juga membutuhkan kode CSS yang teliti untuk memisahkan tiap komponen di dalamnya dengan tepat. Tentunya hal tersebut cukup merepotkan dalam membuat web dengan tampilan menawan dan performa yang baik apabila developer (baik desainer maupun programer) tidak menguasai teknik desain dan CSS dengan baik.

Bisakah Membuat Sprite Image dengan Mudah?

sprite

Sebuah teknologi baru yang dikembangkan oleh Kiss+, bernama SpritePad, bisa jadi merupakan salah satu solusi untuk masalah susahnya pembuatan dan penggunaan sprite image. Kiss+ sendiri mengklaim SpritePad mampu menghasilkan sprite image beserta kode CSS untuk mengakses tiap komponen di dalamnya dalam hitungan detik. Benarkah itu? Mari kita buktikan!

Mengenal SpritePad

Karena SpritePad merupakan aplikasi berbasis web, maka yang perlu Anda sediakan adalah browser yang dilengkapi dengan Java plugin. SpritePad dapat dibuka di alamat http://spritepad.wearekiss.com/.  Apabila halaman SpritePad sudah termuat seluruhnya, akan muncul tampilan seperti pada gambar berikut ini.

Tiga bagian utama dari SpritePad yang harus kita kenal adalah  Map, Code Area, dan Menu Topbar.

Map

Map adalah area tempat untuk meletakkan gambar-gambar komponen yang akan dijadikan sprite image. Untuk memasukkan gambar ke dalam Map, cukup menggeser file gambar yang Anda inginkan ke dalam Map. Anda juga perlu menata gambar pada Map sedemikian rupa agar gambar-gambar tersebut tidak saling menindih satu sama lain maupun banyak membuang ruang kosong. Luas area Map ini juga bisa diatur dengan menggeser tombol resize map atau melalui Menu Topbar.

Code Area

Setiap kali Anda memasukkan gambar ke area Map, sebuah kelas CSS untuk elemen gambar tersebut dihasilkan di Code Area. Kode tersebut dapat berubah secara otomatis sesuai dengan posisi gambar pada Map.

Menu Topbar

Hampir semua kontrol terhadap fitur-fitur SpritePad terletak pada bagian ini. Menu-menu yang ada pada topbar adalah:

  1. Spritemap berisi kontrol-kontrol bagi area Map, mulai dari membuat Map baru, membuka Map yang telah disimpan, menyimpan Map, mengubah ukuran Map, serta mengatur sharing Map dengan pengguna SpritePad lain. Fungsi sharing atau berbagi map hanya berlaku bagi pengguna dengan akun premium.
  2. Download digunakan untuk menyimpan file sprite image serta file CSS yang berisi kode dari komponen-komponen bagian sprite image tersebut yang dikemas dalam sebuah file berformat .zip.
  3. Fit Document berfungsi agar luas area Map menyesuaikan dengan gambar-gambar di dalamnya sehingga nanti saat disimpan menjadi file gambar yang dihasilkan dapat berukuran seminimal mungkin.
  4. Auto Alignment berfungsi untuk menyusun gambar dalam area Map secara otomatis sehingga ruang yang dipakai bisa optimal dan file gambar yang dihasilkan berukuran seminimal mungkin. Menu Auto Alignment ini hanya dapat digunakan oleh pengguna yang terdaftar dengan akun premium.
  5. Login/Register digunakan untuk masuk atau mendaftar sebagai pengguna, baik gratis maupun premium. Pengguna premium akan dapat menggunakan semua fitur yang disediakan oleh SpritePad. Bagi pengguna gratis akan mendapat fitur untuk menyimpan dan membuka sprite yang telah dibuat sehingga dapat diubah kapan saja. Sayangnya, untuk mendapatkan slot penyimpanan sprite, pengguna gratis harus mengajak teman menggunakan SpritePad. Satu slot akan diberikan untuk setiap teman yang berhasil diajak. Untuk pengguna premium akan mendapatkan slot yang tidak terbatas.

Bagaimana Menggunakan SpritePad?

confused

Setelah mengenal menu-menu SpritePad rasanya tidak perlu lagi dijelaskan dengan panjang lebar bagaimana cara menghasilkan sprite image dengan SpritePad. Anda hanya perlu menarik gambar-gambar yang diinginkan selanjutnya jadikan satu ke dalam sebuah sprite image ke dalam Map, mengatur gambar-gambar tersebut (atau memilih menu Auto Alignment jika memiliki akun premium), kemudian pilih tombol download. Wow, ternyata mudah sekali! Rasanya tidak terlalu berlebihan jika SpritePad diklaim bisa menghasilkan sprite image dalam hitungan detik.

Sebenarnya teknologi pembuat sprite image sudah ada, namun berbentuk aplikasi offline yang harus diinstall terlebih dahulu pada komputer dan kebanyakan berupa aplikasi Mac. Keunggulan dari SpritePad adalah basisnya yang berupa web, sehingga dapat digunakan di mana saja tanpa perlu instalasi terlebih dahulu. So, apakah SpritePad adalah solusi sprite image yang Anda cari? Selamat mencoba!

Tag: , , , ,

4 Comments

Leave Comment
  1. F_V_TA says:

    “passionate in learning, hyper active worker. Perfectionist entity with warm heart and humoric brain. Still a growing bud.”

    opo iku maksude -____________-

  2. F_V_TA says:

    coba kasih contoh penggunaannya step by step gitu lho mas. beserta skrinsut nya

  3. ko ga ada tutorial videonya

Write Comment

Your email will not be published. The marked label is required.