Tutorial Konversi PSD ke HTML

Web Design
Oleh : Ruth Ema Febrita

Petunjuk :
Supaya hasil slicing anda berhasil dengan baik, bacalah tutorial ini hingga selesai, kemudian
lakukan praktikum seperti langkah-langkah yang telah diberikan dalam tutorial ini!

Bukalah file PSD yang telah Anda buat sebagai desain layout untuk web Anda. Sebagai
contoh saya akan menggunakan gambar berikut:
Logo

Header Menu navigasi

Teks Paragraf

Content

Footer

(Referensi Gambar: Ecoliving Web Template)

Hal-hal yang perlu diperhatikan adalah:

1. Pastikan ada space kosong untuk menulis teks paragraf
2. Untuk menu navigasi, pastikan tidak ada perbedaan antara menu yang sedang aktif
atau tidak seperti contoh diatas, karena kita dapat menambahkannya pada saat
membuat CSS dengan Dreamweaver.

Apabila semuanya sudah siap, maka kita akan mulai membuat slicing dari file PSD tersebut.
1. Buatlah garis bantu yang dapat menolong Anda melakukan slicing dengan presisi.
Garis bantu dapat dilakukan dengan mengaktifkan Window Ruler, kemudian drag
 dari ruler ke garis-garis batas antar area sehingga menghasilkan tampilan seperti
berikut:

2. Berikutnya, kita klik tool Slicing pada toolbox.

3. Kita slice seluruh area gambar menjadi 1 daerah yang disebut dengan wrapper,
sehingga muncul no.1 pada kotak slice.
4. Berikutnya kita akan membagi seluruh daerah tersebut sesuai dengan layout kita.
Apabila dalam contoh diatas saya memiliki 3 daerah utama, yaitu Header, Content
dan Footer, maka sekarang saya akan membagi wrapper menjadi 3 daerah tersebut.

5. Dari bagian header, kita akan slice lagi sesuai dengan apa saja yang terdapat di
dalamnya, yaitu logo, dan menu navigasi.

Dalam langkah ini, saya menjadikan setiap menu navigasi menjadi slice yang terpisah
supaya dapat dijadikan sebagai background dari beberapa link yang berbeda.
6. Berikutnya kita akan melakukan slicing pada bagian content. Slicing pada bagian
content dapat dilakukan sesuai dengan kebutuhan. Apabila anda membutuhkan cukup
satu area yang cukup luas untuk menuliskan paragraf yang sangat panjang, anda tidak
perlu membagi area content menjadi beberapa slice. Namun, apabila Anda ingin
dalam website Anda terdiri dari 2 atau 3 kolom, maka Anda perlu membaginya
 menggunakan slice. Seperti contohnya dalam website ini saya ingin membagi content
menjadi 2 kolom dan 3 baris, maka hasil slicingnya adalah sebagai berikut:

7. Tahap terakhir adalah memotong bagian footer.

8. Dengan demikian proses slicing telah selesai.

9. Untuk menjadikannya file HTML, maka langkah selanjutnya adalah File Save for
Web and Devices, maka akan muncul kotak dialog berikut:
 Klik pada bagian Optimized, dan klik Save. Tentukan lokasi penyimpanan dan nama
file HTML.
10. Secara otomatis, dalam lokasi penyimpanan yang ditentukan akan terdapat sebuah
folder berisi images dan nama file HTML kita. File HTML inilah yang nanti akan kita
edit dengan menggunakan Dreamweaver.
11. Sampai tahap ini konversi PDF ke HTML telah selesai.

Tips slicing:

1. Lakukan slicing seluruh area sebagai wrapper

2. Lakukan slicing berdasarkan bagian-bagian utama dalam
layout anda (header, content, footer)
3. Darimasing-masing bagian utama, lakukan slicing
berdasarkan setiap detail.
4. Usahakan slicing mengikuti garis bantu yang telah dibuat.