Tutorial ini adalah kelanjutan dari tutorial sebelumnya, Mendesain Blog Elegan dengan Photoshop. Di sini, kita akan menambahkan penanda featured post pada post dan melakukan proses slicing. Slicing adalah memotong desain gambar dari Photoshop untuk kemudian digunakan dalam markup XHTML/CSS.
Preview: Featured Post
Sebelum memulai proses slicing. Kita akan menambahkan penanda featured post di pojok post. Ini berlaku untuk menandai posting sticky di WordPress. Lihat terlebih dahulu hasilnya di bawah.
Langkah 1: Membuat Featured Post
Buka kembali file PSD yang kita buat di tutorial sebelumnya. Buat sebuah persegi dan beri jarak 3 px dengan kotak post.
Langkah 2
Dalam desain web, kita harus bekerja dengan ketepatan hingga pixel per pixel. Kita harus memastikan bahwa tidak ada bagian yang buram (blurry). Caranya dengan zoom lebih dekat lalu pastikan shape yang kita buat tepat berada dalam 1 pixel. Tidak tepat 1 pixel, misalnya 1/2 px atau 3/4 px akan membuat Photoshop melakukan proses antialising dan membuatnya blurry. Gambar di bawah memperlihatkan kotak dengan posisi tepat pada 1 px, sementara di bawahnya kotak sedikit keluar dari 1 px.
Tepat berukuran 1px. Persegi terlihat tajam.
Sedikit lebih dari 1px. Perhatikan bahwa ada sedikit area blurry di sisi persegi.
Langkah 3
Klik pojok kiri bawah dengan tool pen untuk menghapus titik tersebut.
Langkah 4
Gandakan path, geser ke kanan atas. Pilih subtract di baris pilihan.
Langkah 5
Beri Gradient Overlay.
Langkah 6
Buat tulisan “FEATURED”. Tekan Ctrl + T, sambil menahan Shift, putar teks 45 derajat.
Langkah 7
Ctrl-klik thumbnail layer pita. Buat layer baru di bawah pita dan isi dengan hitam. Klik Edit > Fill, pilih Black.
Langkah 8
Klik Filter > Blur > Gaussian Blur.
Langkah 9
Hapus bayangan yang tidak dibutuhkan dengan tool eraser.
Langkah 10
Buat persegi dengan warna #234547. Simpan di belakang pita. Buat lagi beberapa path untuk menyembunyikan bagian lain hingga shape ini menjadi bagian belakang pita.
Langkah 11
Seperti inilah hasil yang kita peroleh.
Langkah 12: Slicing Iklan
Sekarang kita akan memulai proses slicing termudah, iklan. Untuk iklan, kita tidak membutuhkan area transparan. Jadi, proses slicingnya relatif lebih mudah.
Aktifkan layer iklan yang terdapat di group ad. Ctrl-klik thumbnail layer ad lalu tekan Ctrl + C.
Langkah 13
Buat file baru. Otomatis ukuran file akan mengikuti ukuran gambar yang tadi kita copy. Langsung saja klik OK.
Langkah 14
Paste di file baru, Ctrl + V.
Langkah 15
Klik File > Save for Web atau Ctrl + Shift + Alt + S. Untuk iklan, kita bisa menyimpannya sebagai file JPEG.
Langkah 16: Slicing Ikon Search
Dalam slicing ikon search, kita akan mengambil area transparan. Aktifkan layer ikon search yang bisa ditemukan di dalam group search.
Langkah 17
Sembunyikan semua layer kecuali layer ikon search. Tekan Ctrl + A lalu Ctrl + C.
Langkah 18
Buat file baru dan klik OK.
Langkah 19
Paste ikon, Ctrl + V. Sembunyikan layer Background.
Langkah 20
Tekan Ctrl + Shift + At + S. Simpan sebagai PNG-24 dan aktifkan Transparency. Dengan ini, area transparan di sekeliling akan ikut tersimpan.
Langkah 21: Slicing Pemisah Kategori
Bagian ini mudah saja, kita seleksi dulu dengan tool marquee. Penanda ini memiliki 2px, terdiri dari dua garis 1px yang tersimpan di dua layer. Tekan Ctrl + Shift + C. Shortcut ini mirip dengan Ctrl+C namun akan menyalin semua isi seleksi yang terlihat, tidak terbatas pada isi layer tertentu.
Buat file baru, paste gambar dan simpan sebagai file PNG.
Langkah 22: Slicing Latar Kategori
Kita tinggal mengulangi seperti tadi. Hanya saja kali ini kita cukup membuat seleksi dengan lebar 1px.
Langkah 23: Membuat Sprite Logo
Kita akan memberikan efek rollover pada logo menggunakan sprite.
Sembunyikan semua layer kecuali logo. Tekan Ctrl + A lalu Ctrl + Shift + C. Buat file baru lalu paste logo.
Langkah 24
Sekarang kita buat agar logo lebih gelap. Edit layer style Gradient Overlay pada judul situs sehingga terlihat lebih gelap.
Langkah 25
Beri Color Overlay hitam dengan Opacity 10% pada tagline dan ikon. Seleksi semua, Ctrl + A, lalu Ctrl + Shift + C.
Langkah 26
Kembali ke file sprite. Tekan Ctrl + Alt + C, aktifkan Relative. Perbesar height 100% dengan anchor tengah atas. Perintah ini akan memperbesar panjang gambar ke bawah.
Langkah 27
Paste gambar, simpan di bawah logo sebelumnya.
Langkah 28
Di tutorial berikutnya, menggunakan CSS kita akan mengatur penempatan logo. Ketika kursor berada di atas logo, logo akan terlihat lebih gelap.
Langkah 29: Slicing Featured Post
Sembunyikan semua layer kecuali gambar featured post. Seleksi gambar featured post, tekan Ctrl + Shift + C.
Langkah 30
Buat file baru, paste gambar. Sembunyikan Background. Simpan sebagai file PNG transparan.
Hasil Akhir
Di bawah adalah semua gambar hasil slicing yang akan kita gunakan dalam mengubah desain ke HTML dan theme WordPress. Dalam proses slicing, intinya adalah mengenali gambar mana yang perlu diambil. Misalnya, dalam Langkah 16 kita mengambil seluruh bagian ikon search karena gambar itu akan ditampilkan secara utuh. Berbeda lagi dengan Langkah 22, kita cukup mengambil satu pixel karena bagian itu akan kita jadikan sebagai latar yang akan tampil berulang-ulang.
Di tutorial berikutnya, kita akan menggunakan file gambar hasil slicing dan mengubahnya ke format XHTML/CSS.
Wow sudah mulai proses pemisahan gambar nich mas,artikel selanjutnya ditunggu nich,lebih menarik pastinya karena dah mulai masuk coding
Bagian ini tidak menjelaskan proses pemisahan (slicing) sampai tuntas. Saya hanya menjelaskan konsep-konsepnya melalui beberapa contoh. Walaupun begitu, mudah-mudahan bisa dimengerti.
Tutorial berikutnya akan membahas koding. Rencananya akan membahas konversi desain ke theme wordpress.
wah keren mas, saya tunggu artikel berikutnya sampai koding
Ya, rencananya desain ini akan diubah ke theme wordpress.
maksudku itu mas, saya pengen bikin tema sendiri. makasi ya mas tutorialnya
mantap gan…ini yg di tunggu2…hehe…nambah ilmu lagi nih..makasih, di tunggu tutorial berikunya..
Terima kasih. Tunggu saja tutorial berikutnya.
nah yang berikutnya nih yang di nanti-nanti hehe..
Proses mendesain yang cukup panjang. Melelahkan juga tentunya.
Setelah itu masih ada satu tahap proses lagi, yaitu mengubahnya ke format XHTML/CSS. Apakah ini sudah otomatis menyesuaikan ke coding WordPress, Mas Jeprie? Atau masih ditambah satu proses lagi, konversi ke wordpress? Maklum, saya terlalu awam kalau dengan yang begini.
Proses pembuatan theme wordpress biasanya ada tiga:
1. Desain di Photoshop, di sini desain akhir divisualisasikan.
2. Proses slicing, bagian gambar yang akan digunakan dipotong.
3. Konversi ke XHTML/CSS.
4. File hasil konversi dimodifikasi, disesuaikan dengan struktur theme wordpress.
Jujur mas, kalau berhubungan dengan photoshop saya masih belum baik, berutung bagi saya mas Jeprie sudah membuat tutorialnya disini.
File yang tersedia di sini bisa digunakan untuk tutorial berikutnya, konversi desain ke theme wordpress.
Awalnya tadi saya kira ini tutorial menggunakan tool slice photoshop. Ternyata malah pake metode “ambil, salin ke file baru, dan simpan”, persis seperti yang selama ini saya lakukan
Dari tutorial slicing yang pernah saya baca di Six Revisions, metodenya memang seperti itu
Saya pernah lihat juga video tutorial Jeffrey Way, editor nettuts+. Cara slicingnya sama seperti ini. Sepertinya tool slicing sudah tidak berguna lagi sekarang.
Yang saya ingat, tool slice banyak digunakan ketika desain web masih menggunakan tabel.
Berarti saya udah benar yak… kalo denger kata slicing pasti kebayangnya ya tool slice. Tapi slice tool emang lebih cocok buat table based design sih
waow..ilmu baru neeh..
jadi pengen praktek juga neeh…
This is 30 steps, a very detailed tutorial, I think it will be easily practiced even by beginners.
1000 thanks.
terima kasih untuk Ctrl + Shift + C
Sama-sama. Kalau lewat menu ada di Edit > Copy Merged.
Wah kayaknya yang ini perlu dicoba juga nih mas, hehe… Ngebet banget pengen punya theme minimalis..
Silakan dicoba. Hasil akhir jadi dalam format theme wordpress juga tersedia.
wah.. siiip sip tutorialnya mas. …makasih ilmunya. tapi masih ada yang masih lum paham ini mas. itu untuk ngasih nama hasil slicing nya, apa ada aturannya ya? makasih..
Penamaan sebaiknya yang mudah dipahami, misalnya background untuk gambar latar, tombol-fb untuk tombol facebook, dst.
di tunggu kang tutorial berikut nya ….