Layout blog yang sudah dibuat pada Tutorial ‘Bagian 1 - Layout Blog dengan Photoshop‘ akan diproyeksikan sebagai tampilan blog, dengan terlebih dahulu dibagi/dipotong dalam beberapa file.
Pembagian atau pemotongan images dalam beberapa file ini dimaksudkan agar images dapat diloading atau ditampilkan dengan cepat dalam browser.
Ada dua cara pemotongan images di photoshop yang bisa dilakukan, yaitu pertama dengan fasilitas slice tool dan kedua menggunakan copymerged-paste. Sedangkan menyimpan file digunakan fitur Save for Web, dimana file image akan dioptimalisasi ukurannya sehingga loading images di browser tidak terlalu berat/lama namun kwalitasnya tetap baik.
Untuk memulai tutorial kali ini, buka kembali file psd yang dibuat pada tutorial sebelumnya.
Slice Tool
Slice berfungsi membagi images dalam beberapa area yang langsung dapat disimpan menggunakan Save for Web dan secara sekaligus bisa dibuat dalam sebuah web.
Langkah-langkahnya:
1 - Bagian Header
Membatasi bagian header dan footer dengan ruler sebagai garis bantu pembatas. Untuk bagian header dibatasi garis menjadi dua bagian (header1 dan header2) agar ukuran file tidak besar sehingga saat loading images tidak terlalu berat/lama.
Arahkan pointer ke area horizontal ruler, lalu klik tahan mouse dan drag ke arah bawah. Garis biru yang tampil letakkan diposisi akhir batas header (di bawah shape tapak kaki kanan). Lakukan hal yang sama seperti di atas dan posisikan garis pembatas di tengah header untuk membagi header menjadi dua bagian.
2 - Bagian Footer
Masih menggunakan cara yang sama, tarik ruler dari atas ke arah bawah dan letakkan pada batas atas bagian footer.
3 - Garis Bantu Back-Main
Tambahkan satu garis bantu pembatas untuk bagian ‘back-main’ yang ditempatkan di bawah garis bantu header2 dengan lebar secukupnya.
4 - Slice Tool
Aktifkan icon Slice Tool di Toolbox, kemudian kotaki area header1. Akan terlihat area header1 memiliki delapan kotak sudut kecil dan angka ‘01′ pada bagian sudut kiri atas yang menunjukkan nomor urut slice yang dibuat.
Ulangi langkah di atas untuk menandai slice pada area header2, back-main dan footer, sehingga terdapat empat slice. Jika terdapat lima slice dengan tambahan slice ke-4 yaitu area lebar di bagian tengah layout, biarkan saja. Slice ini bisa dibuang/delete kemudian.
5 - Fitur Save for Web
Dengan menggunakan slice tool, area images yang sudah dibuat bisa langsung disimpan secara bersama-sama.
Pilih menu File - Save for Web. Pada jendela baru yang tampil, klik folder ‘4-Up’ untuk melihat perbandingan hasil optimasi file asli dengan tiga optimalisasi pilihan (lingkaran merah). Fitur Save for Web bisa dilihat disini.
Pilihlah format GIF pada bagian settings di kanan jendela Save for Web (lingkaran hijau). Kemudian lihatlah keterangan di bawah tiga kotak hasil optimalisasi. Setiap gambar memiliki keterangan mengenai ukuran dan waktu download/loading-nya (lingkaran biru). Pilihlah hasil yang memiliki ukuran dan waktu loading terkecil, tapi pastikan kwalitas gambarnya tetap baik.
Format gambar bisa juga dipilih berformat JPG. Format ini biasa digunakan untuk images/gambar seperti foto. Untuk lebih jelasnya, bisa dilakukan banyak percobaan optimalisasi dengan berbagai images.
Bisa juga masing-masing slice yang dibuat dioptimalkan satu persatu. Klik icon Slice Select Tool di sebelah kiri (lingkaran hitam) lalu klik bagian slice yang akan dioptimalkan. Menggeser area slice bisa dilakukan dengan drag mouse menggunakan icon Hand Tool.
6 - Simpan
Simpan images yang sudah dioptimalkan dengan klik tombol SAVE di kanan atas jendela Save for Web.
Agar memudahkan penjelasan, buatlah folder ’simple-blue’ yang berfungsi untuk menyimpan file-file images dan file HTML juga file CSS kemudian. Maka bagian ‘Save in’ masuk ke folder ’simple-blue’. Bagian Save as type, pilih Images Only (*.gif) karena hanya file images yang akan disimpan. Bagian Settings dalam Default Settings dan bagian Slices dalam All Slices. Untuk nama file, beri nama ‘blue.gif’. Terakhir klik Save.
File-file images hasil slice ini akan disimpan dalam sub folder images di folder simple-blue dan masing-masing bernama blue_01.gif sampai blue_05.gif.
CopyMerged - Paste
Pada cara kedua pemotongan images ini, tiga langkah pertama (1,2 dan 3) memiliki langkah yang sama dengan cara memotong images menggunakan cara Slice Tool, yaitu membagi bagian-bagian header1, header2, footer dan back-main dengan garis bantu.
3 - Duplikasi gabungan
Dari bagian-bagian yang sudah dibatasi dengan garis bantu tadi, maka akan dilakukan pengambilan bagian tersebut satu persatu menggunakan Retangle Marquee Tool.
Klik icon Retangle Marquee Tool di Toolbox, dan pastikan Feather yang berada di baris Options dalam keadaan 0 px. Bagian pertama yang akan dicopy adalah header1, maka kotaki area dimaksud dengan cara tempatkan pointer pada salah satu sudut area, lalu klik tahan mouse dan drag hingga akhir sudut diagonalnya.
Terlihat bagian header1 yang dipilih akan dikitari garis putus-putus. Dalam keadaan demikian, pilih menu Edit - Copy Merged.
4 - Paste di New Layout
Kemudian buka lembar kerja baru dengan cara pilih menu File - New atau langsung Ctrl+N dan pilih OK untuk konfirmasi jendela New yang tampil.
Setelah lembar kerja baru siap, pilih menu Edit - Paste atau langsung Ctrl+V untuk menampilkan objek hasil copy di atas.
5 - Save for Web
Tahap selanjutnya adalah menyimpan bagian header1 tadi. Pilih menu File - Save for Web. Lakukan optimalisasi seperlunya lalu klik SAVE dan beri nama file image ‘header1′ dan simpan di folder simple-blue agar tidak tercampur dengan file lain atau memudahkan pencarian file.
6 - Pengulangan
Ulangi langkah 3 sampai 5 untuk bagian header2, footer dan back-main.
Bagian back-main akan digunakan sebagai background area main. Untuk lebar diambil tidak terlalu besar karena ‘back-main’ ini nantinya dalam CSS akan disetting berulang (reply) secara vertikal atau searah sumbu-y.
Tahapan selanjutnya adalah membuat file HTML dan CSS.***
Silahkan mendownload tutorial bagian 2 disini.
Baca juga:
- Part #1 : HTML dan CSS
- Membuat Blog Sederhana
- Bagian 1 : Membuat layout blog dengan photoshop
- Bagian 3 : Membuat CSS dan HTML
wah, aku ketinggalan kursus nih mbak :D