Cara Membuat Tombol Roll Over dengan Dreamweaver

Cara Membuat tombol Roll Over dari  Photoshop Langsung ke Dreamweaver.

Salam Pembaca

Dalam Postingan kali ini , saya akan melanjutkan Artikel cara membuat Tombol Roll Over dari Photoshop Langsung ke Macromedia DreamWeaver. Dimana sebelumnya  saya membuat Roll Over memakai ImagrReady Cs2.

Pertama kita akan edit Indext yang telah kita buat sebelumnya. Karena di Indext html tsb, kita hanya membuat tombol menu tanpa dengan Animasi Roll Over.

Mari kita buka folder Rancangan web kemudian Pilih Index html.Buka dengan Macromedia Dream weaver.( Open with : Macromedia Dreamweaver)

Tampilanya akan sbb:

                                                        Gambar 1 Indext html

Tombol2 menu tsb diatas adalah tombol biasa tanpa animasi Roll Over. Tombol inilah yang akan kita ganti dengan tombol Roll Over. Caranya tutup dulu Dreamweaver tsb. Kita akan buka  Folder Rancangan Web  di My Document, disitu ada file Indext.html Dan File Image .dan pilih icon Image.  >Lalu pilih Tombol Home Buka dengan Photoshop ( Open with : Photoshop). Gambarnya akan tampil dilayar Photoshop sbb:

                                                               Gmbr.2 Tombol Home /o6 gif.

Lalu klik Menu Image di menu bar lalu gandakan dulu tombol Home dengan cara klik di bagian Duplikat dibawah menu Image. Tombol Home akan menjadi dua. lalu klik Ajustment> lalu lilik  >Hue/Saturation.Akan tampil Dialog Box sbb:

                                                  Gmbr 3. Dialog Box Hue/Saturation.

Selanjutnya kita akan membuat Duplikat tombol Home dengan di beri warna baground yang beda. Disini saya pilih warna Hijau muda caranya…

Di kotak Dialog Box. Bagian Edit pilihlah Master. klik dulu Kotak colorize dibagian kanan bawah  (beri centang). juga tombol Preview( centang juga).

Geser2  tombol geser di hue dan Saturation Hingga ketemu warna Hijau Muda.

Atau tulis dbagian HUE angka 113 dan di saturation angka 89 bagian Lightness isi 0.

Anda akan mendapat warna hijau Muda

Klik oke

Tombol Home  warna Hijau muda telah terbentuk seperti gambar dibawah ini.

                                                               Gambar4. tombol Home warna Hijau Muda

Simpan tombol ini dengan klik File, lalu save namai fielnya Home 06 copy lalu klik close . untuk tombol Home hijau maupun Biru.

Lalu buat juga duplikat2 tombol lainya (Product, Panduan , Info bisnis dan Member) dengan cara yang sama persis dengan tombol Home.

Sehinga semua tombol sekarang punya  2 macam warna yaitu Biru dan HijauMuda.

Sekarang Kita membuka progam Dreamweaver

Buka lagi Indext html.; .File=>.Open=>indext.html

                                         Gmbr 5.Indext html di layar kerja Dreamweaver.

Pilih tombol Home dengan cara klik kiri .tombol akan terpilih dengan ditandai segi empat sekelilingnya, seperti gambar berikut.

                                                           Gamba.6 tanda pilih (selector mark)

Selelah itu hapus dengan klik tombol Delete.

Lalu klik Insert=>Image Obyect=>Roll Over ImageAkan muncul Dialog Box sbb.

                                              Gambar7. Dialog box Insert Roll Over

Pada Image name isi dengan Home image Roll Over.

Pada Original Image. Isi dengan tombol biru(tombol Home /biru) > klik tombol Brows dan pilih gambarnya

Pada Roll over masukan tombol hijau Muda(tombol Home/Hijau Muda)> klik tombol Brows dan pilih gambarnya…. Ulangi dengan cara yang sama untuk tombol2 lainya.

Setelah selesai klik Save, lalu anda bisa mencobanya di browser anda dengan klik  tombol F12.

Sekian teman2, Mudah2an bermanfaat.... sampai jumpa di artikel selanjutnya.

Sallam : Gumilar.H