RSS

Membuat web dari Photoshop dengan Dreamweaver – Menampilkan Background

07 Jun

Menanggapi beberapa masukan dari yang berkunjung ke blog soal Membuat website dengan Photoshop dan Dreamweaver, ternyata agak susah juga ya klo baru belajar, tenang saja, semua pasti bisa.

Nah, langsung saja, tahap pertama menampilkan background web dari Photoshop ke Dreamweaver. Langkah-langkahnya sebagai berikut :

1. Gambar di atas adalah bentuk asli dari background, aku buat dengan Photoshop dengan ukuran
800×600 pixel aku pakai model Gradasi warna. Gambar inilah yang akan kita gunakan untuk web kita.


2. Aktifkan slice tool, tempatkan di ujung kiri atas, tahan mouse, drag sedikit saja ke kanan,
trus draglah ke bawah, hingga membentuk persegi panjang. Kemudian klik File – Save for Web, pada preset pilih
jpeg High (lihat ukuran di bawah yang 590 byte, 1 sec @ 28.8 kbps, brarti setting yang sudah benar).
Aku simpan dengan nama ” background “.


ini hasil potongan gambar yang telah kita potong dengan slice tool.

Kenapa mesti kudu dipotong segala, kok tidak
dipakai saja seluruh gambar? ini fungsinya, supaya beban load web tidak terlalu besar, bayangkan ukuran
segitu besar kudu di load pertama kali, belum isi web yang lain, bisa-bisa yang nunggu sudah males,
karena untuk buka web saja kudu pakai waktu lama, dan juga dengan Dreamweaver, potongan background yang kecil
bisa dipakai secara berulang, hingga membentuk suatu background yang utuh.

3. Buka Dreamweaver, pilihlah HTML, trus pada title ganti namanya, misal : Coba web, jangan lupa DISIMPAN
DENGAN NAMA = Index.html

4. Pada panel CSS di Dreamweaver, klik lah tanda ” + “, kemudian akan muncul gambar berikut ini

Pilih settingan seperti pada gambar di atas, kemudian klik tombol ” OK

5. Berikutnya akan tampil jendela ” CSS Rule definition for body “, pada panel ” Category ” pilihlah ” Background
kemudian disebelah kanan ada opsi ” Background Images “, tekan tombol Browse, dan carilah letak potongan gambar background yang bentuknya kecil tapi memanjang / persegi panjang / hasil dari langkah 2 di atas, terakhir, klik tombol Apply dan OK
maka akan dimunculkan hasil di Dreamweaver seperti gambar berikut :

JANGAN LUPA SIMPAN ULANG PERUBAHAN YANG TELAH KITA LAKUKAN INI.

6. Langkah terakhir, coba kita test lewat browser, disini aku pakai Mozilla Firefox, dan berikut hasilnya :

Mudah kah, moga-moga lebih memperjelas anda dalam belajar, klo ada yang masih kurang jelas, silakan
kasih komentar saja, ntar klo ada waktu dan bisa aku jawab segera, akan aku jawab.

salam lewat.

 
1 Komentar

Ditulis oleh pada Juni 7, 2010 in Ngeblog

 

One response to “Membuat web dari Photoshop dengan Dreamweaver – Menampilkan Background

  1. muhamad rifai

    Mei 12, 2011 at 5:33 am

    saya mau tanya cara seting gambar potongan pada dreamweaver supaya tidak pisah-pisah gambar potongannya ketika dikirim dan masuk di email, mohon pencerahannya……

     

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

 
%d blogger menyukai ini: