Membuat web dari adobe Fireworks, Photoshop dan Dreamweaver

Kali ini saya akan memberikan tutorial mengenai pembuatan web sederhana. Pembuatan web kali ini menggunakan aplikasi fireworks, photoshop dan dreamweaver. Penggunaan firewoks agar pembentukkan dasar web lebih rapi dan mudah, selanjutnya menggunakan photoshop untuk melakukan pemotongan slice dan terakhir dreamweaver agar mampu menyisipkan html script di web kamu. 

PART 1. ADOBE FIREWORKS CS 3

Siapkan sebuah gambar dengan ukuran tertentu. Saya sarankan memakai ukuran gambar yang pas atau lebih dari 1200 x 800 px biar kualitas lebih bagus. Lalu pilih FILE => NEW, untuk membuat dokumen baru atur settingan dengan width : 1200px dan height : 800px serta resolution : 72px. 

Buka file gambar  ( CTRL + O ), lalu pilih / browse  gambar dengan resolusi 1200 x 800px yang kamu inginkan untuk dijadikan tampilan dasar web.  

Maka tampilan akan muncul seperti ini. Jikalau gambar tidak sesuai dengan ukuran kanvas, maka dapat kamu perbesar atau perkecil ukurannya agar sesuai dengan kanvas.

Setelah itu atur zoom dengan cara klik SET MAGNIFICATION pada sebelah kanan bawah. Pilih sesuai dengan pasnya kamu akan bekerja. Saya sarankan lebih baik mulai dari 150px, agar kelihatan jelas.

Selanjutnya, mengaktifkan garis bantu dengan cara drag dari sisi kanan atau atas rule. Hal ini dilakukan agar pembuatan dasar tampilan web lebih baik. Lihat pada gambar dibawah ini.

Lalu kamu pilih SLICE TOOL pada toolbox di sebelah kanan, dan buat design web sesuai dengan ukuran kamu inginkan dengan garis bantu tadi. Lihat gambar ( garis warna hijau adalah garis bantu, sementara area hijau adalah slice )

Nah kemudian, setelah semua tampilan web kamu selesai, maka kamu langsung export file ke photoshop. Caranya klik sebelah kanan QUICK EXPORT => PHOTOSHOP => EXPORT PHOTOSHOP.

Maka akan muncul tampilan berikut untuk menyimpan. Ketik nama file lalu pilih SAVE. Nah, tampilan dasar web kamu sudah selesai dan akan dilanjutkan ke PHOTOSHOP.

Pada pembahasan selanjutnya akan dibahas mengenai pemotongan ala photoshop biar lebih rapi dan disesuaikan dengan penyimpanan web dasar di dreamweaver