Proses slicing umumnya dilakukan menggunakan software photoshop (karena umumnya mockup berupa file .psd). Proses slicing dilakukan menggunakan slicing tools dan di save melalui fitur Save for Web & Devices (Alt + Sift + Ctr + S) dan menghasilkan file .png, .gif, dan .jpeg.

.jpg (Joint Photographic Expert Group)

Format .jpg memiliki kedalaman warna yang kaya sehingga cocok untuk image-image seperti foto.

.gif (Graphic Interchange Format)

Format .gif berukuran lebih kecil namun memiliki kedalaman warna yang tidak terlalu dalam. Cocok untuk image yang ‘plain‘ dan tidak kaya akan warna.

.png (Portable Network Graphics)

Format .png berukuran lebih kecil dari .jpg namun memiliki kedalaman warna yang lebih kaya daripada .gif. Selain itu, format .png juga memiliki fitur (transparansi / opacity) yang membuatnya menjadi pilihan utama untuk elemen desain web modern.

Kelemahan png:

  • Untuk foto, png memiliki ukuran file yang lebih besar daripada .png
  • IE6 tidak mensupport fitur transparansi .png.

Contoh logo dalam berbagai format

Note: perhatikan ukuran filenya:

contoh icon dalam format .jpg, besar file 26,2 KB
contoh icon dalam format .jpg, besar file 26,2 KB
Contoh logo berformat .gif - 6,55 KB
Contoh logo berformat .gif - 6,55 KB
contoh logo berformat .png - 10,4 KB
contoh logo berformat .png - 10,4 KB

Contoh foto dalam berbagai format

Note: perhatikan ukuran filenya:

Test foto berformat .jpg - 80,7 KB
Test foto berformat .jpg - 80,7 KB
Contoh foto berformat gif - 49,6 KB
Contoh foto berformat gif - 49,6 KB
Contoh foto berformat .png - 127 KB
Contoh foto berformat .png - 127 KB

Beberapa pertimbangan dalam melakukan slicing

  • Apakah kita perlu menggunakan image atau cukup menggunakan CSS dalam mewarnai satu elemen?
  • Apakah perlu kita men-slice suatu elemen seutuhnya ataukan cukup ‘mengiris’ satu piksel dari elemen tersebut lalu di repeat secara horizontal ataukah di repeat secara horizontal menggunakan CSS?
  • Apakah perlu kita men-slice suatu block lengkap dengan backgroundnya ataukah cukup kita slice elemen imagenya lalu background dari elemen tersebut kita buat transparan lalu di save kedalam format .png?
  • dll

Karena sulitnya menjelaskan faktor-faktor ini tanpa adanya konteks, faktor-faktor ini akan dijelaskan seiring dengan proses XHTML-ing yang akan dibahas dalam post-post berikutnya.

3 thoughts on “Slicing: Memotong Mockup Theme

  1. […] mockup desain selesai dibuat dan di-slice, langkah selanjutnya adalah meng-xhtml-kan mockup desain tersebut. Langkah pertama dari […]

  2. jpg bagus untuk foto mas. terutama untuk yang hobi fotografi, ia mengandung banyak warna secara detail daripada encoding yang lainnya

    kalo gif emang menang efisien kalo monochrome

    kalo png menurut saya sih penengah keduanya.
    tapi kok pas dites mas Fikri kok jadi gede banget gitu ya? 🙄

    1. yap, kurang lebih begitu. Kelebihanya png karena dia support transparansi.

      Kalau di save-as dari photoshop, ya besar filenya jadi seperti itu lah 🙂

Share Your Thought