Slicing: Memotong Mockup Theme
Proses slicing umumnya dilakukan menggunakan softwarephotoshop (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 logo berformat .gif - 6,55 KB
contoh logo berformat .png - 10,4 KB
Contoh foto dalam berbagai format
Note: perhatikan ukuran filenya:
Test foto berformat .jpg - 80,7 KB
Contoh foto berformat gif - 49,6 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.
