Deni Kurnia's Blog: Teknik Slice di Photoshop untuk Website

Photoshop adalah editing tool yang banyak digunakan oleh para web designer. Untuk keperluan membuat header dan background misalnya, salah satu tool yang bisa digunakan adalah photoshop. Permasalahannya, apabila desain cukup banyak menggunakan gambar, maka ukuran file akan menjadi besar, walaupun sudah memakai fasilitas save for web yang sudah tersedia di Photoshop. Dampak lainnya adalah kecepatan akses web menjadi terhambat karena loading yang lambat.

Fasilitas slice yang terdapat di photoshop cukup efektif memecah gambar menjadi beberapa bagian, kelebihan lainnya adalah dapat mempercepat proses loading browser saat mengakses website yang bersangkutan.

OK, kita mulai, misalnya kita akan membuat header sbb :

Header tersebut bisa saja kita potong menjadi 4 bagian dengan menggunakan slice tool. Sebelum menggunakan slice tool, kita ikuti langkahnya step by step pembuatan header tersebut.

1. Buka Photoshop.

2. Buat file baru dengan menggunakan Ctrl+N

3. Set ukuran file menjadi 745 x 200 pixel, resolusi 100 pixel/inc, bg color transparent

4. Pilih rectangular marquee tool.

5. Beri fill merah

6.Buat Layer baru, beri fill abu tua, (pastikan layer 2 ada dibawah layer 1), lihat gambar sbb :

7. Beri efek emboss dan drop shadow, caranya, klik kanan di layer 1>Blending Option. NAnti akan muncul layer style. Centang embos dan drop shadow. Hasil penerapan style ini, maka layer merah berkesan timbul dan ada bayangan.

8. Buka file baru berupa gambar mobil misalnya, sbb :

9. Drag gambar mobil ke gambar background rancangan kita, lihat gambar :

10. Pastikan letaknya di layer antara layer 1 dan 2. Pilih eraser tool, sesuaikan ukuran eraser untuk menghapus sebagian gambar mobil tadi. lihat contoh :

11. Ketikan huruf sbb, sehingga hasilnya seperti ini :

OK...urusan desain anggap selesai....sekarang kita akan menerapkan bagian penting dalam tulisan ini yaitu teknik slice, siaaaap ?

12. Klik slice tool :

14. Lalu potong gambar tersebut menjadi tiga bagian (boleh lebih) mirip kita memotong kue, hehe....

Nanti akan ada gambar amplop disertai angka yang menunjukkan urutan nama file slice yang kita buat. Misalnya nama file background_01, backgorund_02 dan background_03. lihat contoh.