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
0 komentar: