Membuat web dari adobe Fireworks, Photoshop dan Dreamweaver II

PART 2 : ADOBE PHOTOSHOP CS 3

Setelah kemarin dibahas mengenai pembuatan web dari ADOBE FIREWORKS, nah sekarang giliran ADOBE PHOTOSHOP. Ok, langsung saja ikuti langkah berikut ini.

Buka file PSD yang sudah disimpan di komputer atau laptop kamu, seperti pada gambar dibawah ini.

Jika ada notifikasi update seperti ini, maka kamu hiraukan saja dengan memilih NO. Lalu centang "DONT SHOW AGAIN", lihat pada gambar.

Atur perbesaran gambar dengan cara geser zoom di sebelah kanan. Agar lebih optimal, pilih perbesaran mulai dari 200% saja, lihat gambar.

Setelah itu kamu kembali membuat layout dengan cara menarik garis bantu, sesuaikan dengan tulisan "HOME" "BLOG" "ABOUT US" dan "CONTACT US". Buat yang rapi dan sesuaikan dengan ukuran yang kamu inginkan, lihat pada gambar.

Setelah selesai kamu membuat layout dengan garis bantu, saatnya kini melakukan pemotongan "SLICE" pada gambar. Caranya klik saja pada toolbox "SLICE" lalu buat slice pada tulisan "HOME" "BLOG" "ABOUT US" dan "CONTACT US". 

Selain dari itu jangan lupa untuk membuat slice pada bagian isi "CONTENT" web yang akan diisi nantinya. Lihat pada gambar berikut.

Setelah semua kamu slice saatnya sekarang untuk menyimpan file psd ini ke dalam format html. Caranya  pilih dan klik FILE => SAVE FOR WEB & DEVICE 

.

Maka akan muncul tampilan berikut ini. Kamu pilih seperti tampak pada lingkaran lalu klik EDIT OUTPUT SETTINGS

Atur penyimpanan output cara memilih SETTING => CUSTOM. Untuk lebih jelas, lihat gambar di bawah.

Nah, selanjutnya kamu pilih SAVE untuk menyimpan file psd tadi kedalam format html. Dan berikut tampilan yang akan muncul di browser kamu untuk melihat tampilan website yang sudah dibuat.

Nah, semua file yang sudah kamu slice tadi akan berubah menjadi file HTML dengan sebuah folder "IMAGES". Lihat pada gambar berikut ini.

Ok, pada pembahasan selanjutnya akan dibahas mengenai tahap terakhir yaitu penyisipan script kedalam file html ini dengan adobe dreamweaver.