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