Tutorial PSD to HTML/CSS #1

Langkah terpenting dalam web development adalah mengubah desain menjadi HTML. Langkah ini sering disebut PSD to HTML. Mengapa penting, karena sang Programmer akan pusing jika tidak ada “kanvas” untuk ber-coding ria. Seperti yang telah disebutkan dalam 4 Tahapan Membuat Theme WordPress, setelah proses desain diperlukan proses PSD to HTML untuk bisa melanjutkan ke tahap Integrasi Coding.

Slicing PSD

Kali ini kita coba memakai desain buatan Tokokoo: TokoBajoo.

Download tokobajoo.zip, extract dan buka dengan Photoshop.

Dalam tutorial ini kita akan bahas 4 jurus cara slicing sesuai kondisi elemen yang mau kita slice, yaitu:

  1. Slicing Image/Foto
  2. Slicing Area tertentu
  3. Slicing untuk Background Berulang
  4. Slicing untuk Sprite.

1. Slicing Image/Foto

Untuk slicing foto caranya sangat mudah, tinggal duplicate layer foto tersebut dan Trim transparent pixel-nya. Begini caranya :

1.Pilih object/layer yang ingin di-slice dengan menekan Ctrl ketika meng-klik object

2. Klik kanan pada layer terpilih, kemudian pilih Duplicate Layer

3. Pilih Destination-Document: New. Klik OK

4. Photoshop akan membuat jendela baru berisi layer yang kita duplikasi. Pilih layer image, kemudian pilih Menu -> Trim. Centang Based On Transparent Pixels, Trim Away : Top, Bottom, Left, Right.

Proses slice image/foto sudah dapat di save dengan mengklik Alt+Shift+Ctrl+S (atau lari ke menu File -> Save for Web & Devices). Taruh dalam satu folder, misalnya folder images.

Ninja Tips : Ubah keybord shortcut untuk Trim dan Save for Web & Devices dengan tombol lain, misalnya dengan tombol F1 dan F2. Pengaturannya ada di menu Edit -> Keyboard Shortcuts. Dengan shortcut yang lebih singkat, pastinya proses slicing akan lebih cepat. Wush-wussh!

2. Slicing Area tertentu

Untuk men-slice area yang kita inginkan, kita gunakan tool Slice dengan menekan Shift+C hingga terpilih icon Slice Tool. Atau klik-tekan pada icon Crop Tool.

1. Select area yang ingin dislice, kemudian double-click. Pilih Slice Type: Image. Namakan object slice-nya, nanti ini menjadi nama file image hasil slice.

2. Save for Web & Devices, pilih object slice dengan Slice Tool, pastikan pilih tab Optimized

Atur Preset, Save, akan muncul dialog untuk menentukan lokasi penyimpanan file,

Pada dialog window, pilih Format: Images Only, Slices: Selected Slices. Save!

Ninja Tips : Tekan Ctrl+R untuk menampilkan Ruler sehingga dapat membuat garis bantu dengan cara klik Ruler dan drag ke posisi object, sehingga memudahkan penentuan slice terhadap object yang akan dislice. Kombinasikan dengan Zoom Tool (Shift+Z) untuk ketepatan slicing.

Slicing untuk Background Berulang

Jurus slicing ini dibutuhkan jika kita ingin lebih menghemat ukuran image, sehingga dapat dimanipulasi dengan CSS menggunakan atribut background-repeat. Jurus ini dapat digunakan jika object slice memiliki pola berulang seperti gradasi vertikal atau horizontal. Contoh pada PSD kali ini kita akan membuat background berulang secara horizontal. Yang kita butuhkan hanyalah men-slice bagian pola yang nantinya akan kita repeat dengan CSS.

Slicing untuk Sprite

Jurus slicing yang satu ini dikhususkan untuk membuat tombol atau menu sehingga dapat berubah ketika dihover/focus. Dengan membuat sprite (menggabungkan beberapa image kecil menjadi satu image) dapat juga mempercepat loading halaman web, jika terdapat banyak icon image yang cukup banyak dalam satu halaman. Banyak yang salah paham dengan slicing PSD, karena tidak selamanya image harus dislice menjadi kecil-kecil.

Kompresi Gambar

Sebenarnya si Photshop otomatis optimasi file image ketika kita memilih Save for Web & Devices. Sebagai catatan saja ukuran ideal pixel untuk tampilan desktop adalah 72 DPI berbeda dengan ukuran ideal pixel untuk Print, yaitu 300 DPI. Ingat ya, jangan terbalik ­čśÇ┬áukuran Dot Per Inch ini bisa kita tentukan jika menggunakan sofware lain. Ingat, semakin kecil ukuran file gambar semakin cepat loading website, tapi jangan terlalu hemat bisa-bisa gambarnya jadi rusak dan ┬átidak enak dilihat.

Ninja Tips : Sebenarnya image hasil kompresi Photoshop masih bisa dikompresi lebih irit lagi tanpa mengubah kualitas image dengan senjata rahasia dari Yahoo, namanya Smush It. Dijamin makin padet dan irit size!

Yak, untuk sementara sampai di sini dulu ya tutorialnya. Kalau ada yang kurang jelas di salah satu langkah di atas silakan ditanyakan ya. Apa? Kamu punya jurus yang lebih hebat, share di sini donks!!

Eh-eh mana langkah-langkah penerapan ke HTML-nyaaa??

Hehe sebenarnya nanti dilanjut di postingan berikutnya selain itu akan dibahas juga jurus Slicing untuk Background Berulang dan Slicing untuk Sprite lebih detail. Follow dan mention twitter @sirio ya :]

 

 

 

Komentar

comments

Baca Juga:  Adobe Edge Web Font : Layanan Web-Font Dari Adobe

Rio

Pengajar Front-end Web Development di masagi.org

grain storage instagram t├╝rk takip├ži sat─▒n al