Tentunya kamu tahu tentang rollover image, sebuah tombol yang dibuat oleh web designer yang terdapat dalam halaman web, yang digunakan untuk membangun keinteraktifan antara pengguna dan web itu sendiri. mungkin anda dapat dengan mudah membuatnya dalam dreamweaver atau flash, oleh karena itu dibawah diberikan langkah-langkah untuk membuat rollover image dengan adobe

1. Membuat file.

pada ImageReady, pilih File, New untuk membuka kotak dialog dokumen sehingga kamu dapat membuat file baru. untuk tutorial ini masukan width 340 pixels dan height 240 pixels untuk ukuran image-nya, kemudian pilih white pada content of First Layer. klik OK



2. Membuat Tombol.

buatlah sebuah layer, kemudian pilih Elliptical Marquee tool, Shift dan drag untuk membuat image berbentu lingkaran sempurna, pilih Edit, Fill dan isilah button shape dengan black.





3. Memberi Layer Effect.

untuk memberi efek 3D pada tombol, pilih Window, Styles untuk membuka Styles palette. kemudian klik Green Gel style. secara otomatis mendesain layer yang aktif dengan style yang sama.



4. Membuat duplikat layer.

Di menu layer palette, pilih Duplicate Layer untuk membuat copy dari tombol dan efeknya. pilih Duplicate Layer lagi untuk membuat tombol sehingga total terdapat 3 layer yang berisi tombol, setiap layer berisi tombol yang sama dengan style yang sama.



5. Memberi warna setiap Layer.

pada Layer palette, pilih Layer 1 Copy dan double klik Color Overlay style untuk membuka kotak dialog Layer Style. klik color swatch untuk membuka color picker, pilih sebuah warna yang baru, and klik OK untuk warnanya. klik OK lagi untuk merubah style. kembai ke Layers palette dan pilih Layer 1 Copy 2 layer dan ulangi langkah-langkah tadi, pilihlah warna yang berbeda.





6. Membuat Rollover State.

pilih Window, Web Content untuk membuka palette Web Content. pilih Rollover State baru dari palette menu untuk membuat sebuah rollover state baru, klik kanan pilih set state over. pilih State baru lagi untuk membuat rollover state lain yang baru, klik kanan pilih down. sekarang kamu seluruhnya mempunyai 3 states: Normal state dan 2 rollover state yang berlabel Over dan Down.



7. Mencocokan layer dengan state.

pada Web Content palette, pilih Normal state; pada Layers palette, pilih layer yang menunjukkan warna yang kamu inginkan untuk tombol pada normal state. ulangi langah ini untuk rollover states Over dan Down. pilih File, Save Optimized untuk menyipan file, pastikan pada Save as Type anda memilih dalam format HTML and Images.