Mendesain Blog Elegan Bag. 2 – Slicing

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.

Mendesain Blog Elegan Bag. 2 - Slicing

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.

Mendesain Blog Elegan Bag. 2 - Slicing

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.

Mendesain Blog Elegan Bag. 2 - Slicing
Tepat berukuran 1px. Persegi terlihat tajam.

Mendesain Blog Elegan Bag. 2 - Slicing
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.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 4

Gandakan path, geser ke kanan atas. Pilih subtract di baris pilihan.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 5

Beri Gradient Overlay.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 6

Buat tulisan “FEATURED”. Tekan Ctrl + T, sambil menahan Shift, putar teks 45 derajat.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 7

Ctrl-klik thumbnail layer pita. Buat layer baru di bawah pita dan isi dengan hitam. Klik Edit > Fill, pilih Black.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 8

Klik Filter > Blur > Gaussian Blur.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 9

Hapus bayangan yang tidak dibutuhkan dengan tool eraser.

Mendesain Blog Elegan Bag. 2 - Slicing

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.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 11

Seperti inilah hasil yang kita peroleh.

Mendesain Blog Elegan Bag. 2 - Slicing

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.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 13

Buat file baru. Otomatis ukuran file akan mengikuti ukuran gambar yang tadi kita copy. Langsung saja klik OK.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 14

Paste di file baru, Ctrl + V.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 15

Klik File > Save for Web atau Ctrl + Shift + Alt + S. Untuk iklan, kita bisa menyimpannya sebagai file JPEG.

Mendesain Blog Elegan Bag. 2 - Slicing

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.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 17

Sembunyikan semua layer kecuali layer ikon search. Tekan Ctrl + A lalu Ctrl + C.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 18

Buat file baru dan klik OK.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 19

Paste ikon, Ctrl + V. Sembunyikan layer Background.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 20

Tekan Ctrl + Shift + At + S. Simpan sebagai PNG-24 dan aktifkan Transparency. Dengan ini, area transparan di sekeliling akan ikut tersimpan.

Mendesain Blog Elegan Bag. 2 - Slicing

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.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 22: Slicing Latar Kategori

Kita tinggal mengulangi seperti tadi. Hanya saja kali ini kita cukup membuat seleksi dengan lebar 1px.

Mendesain Blog Elegan Bag. 2 - Slicing

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.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 24

Sekarang kita buat agar logo lebih gelap. Edit layer style Gradient Overlay pada judul situs sehingga terlihat lebih gelap.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 25

Beri Color Overlay hitam dengan Opacity 10% pada tagline dan ikon. Seleksi semua, Ctrl + A, lalu Ctrl + Shift + C.

Mendesain Blog Elegan Bag. 2 - Slicing

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.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 27

Paste gambar, simpan di bawah logo sebelumnya.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 28

Di tutorial berikutnya, menggunakan CSS kita akan mengatur penempatan logo. Ketika kursor berada di atas logo, logo akan terlihat lebih gelap.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 29: Slicing Featured Post

Sembunyikan semua layer kecuali gambar featured post. Seleksi gambar featured post, tekan Ctrl + Shift + C.

Mendesain Blog Elegan Bag. 2 - Slicing

Langkah 30

Buat file baru, paste gambar. Sembunyikan Background. Simpan sebagai file PNG transparan.

Mendesain Blog Elegan Bag. 2 - Slicing

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.

Mendesain Blog Elegan Bag. 2 - Slicing

Di tutorial berikutnya, kita akan menggunakan file gambar hasil slicing dan mengubahnya ke format XHTML/CSS.

Download source file

Iklan

29 thoughts on “Mendesain Blog Elegan Bag. 2 – Slicing

  1. 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.

  2. 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.

  3. 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.

  4. Jujur mas, kalau berhubungan dengan photoshop saya masih belum baik, berutung bagi saya mas Jeprie sudah membuat tutorialnya disini.

  5. 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 😛

  6. 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.

  7. 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 😛

  8. 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..

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s