Membuat Marquee Holder

Langkah-langkah membuat marquee holder tidak jauh berbeda dengan membuat score holder yang telah saya posting sebelumnya. Anda dapat membuat kreasi sendiri marquee holder yang anda inginkan. Software yang saya gunakan disini adalah Adobe Photoshop 7, anda dapat juga membuatnya dengan Adobe Photoshop versi diatas 7.

Luncurkan Adobe Photoshop 7, buat dokumen baru dengan ukuran 300x100 pixel dan background color putih. Anda dapat merubah background color sesuai dengan website anda. Buat layer baru dengan menekan tombol CTRL+SHIFT+N. Ubah warna foreground menjadi #2C5CAC. Dengan menggunakan rounded rectangle tool, buat sebuah objek rounded rectangle dengan radius 30px. Setelah itu Klik menu Layer >Resterize > Shape.




Klik kanan layer Shape 1 kemudian pilih Blending Options... seperti pada gambar dibawah ini.



Pada kolom styles pilih Gradient Overlay, kemudian ikuti langkah-langkah seperti gambar dibawah ini.






Masih dalam kotak dialog Layer Style. Pada kolom style, pilih Inner Shadow dan lakukan pengaturan Blending Option seperti pada gambar dibawah ini.



Dengan setingan seperti diatas, maka anda telah memilik efek seperti ini.



Buat layer naru dengan menekan tombol CTRL+SHIFT+N. Buat objek rounded rectangle dengan radius 30 dengan ukuran yang lebih kecil dari objek sebelumnya, letakkan di tengah objek sebelumnya. Klik menua Layer > Resterize > Shape.



Klik kanan layer baru yang telah kita buat kemudian pilih Blending Options... Pada kolom Styles pilih Gradient Overlay, isikan pengaturan seperti gambar dibawah ini.





Masih dalam kotak dialog Layer Style. Pada kolom style, pilih Stroke dan lakukan pengaturan Blending Option seperti pada gambar dibawah ini.




Selesai! Holder marquee telah selesai dibuat.

Gunakan gambar yang telah kita buat sebagai background. Kita dapat menggunakan tag

yang dapat kita atur properti backgroundnya menggunakan CSS.

Berikut tag HTML yang saya gunakan untuk mengkombinasikan gambar yang telah saya buat dengan marquee, sehingga gambar akan nampak seperti marquee holder.

<div style="width:300px; height:100px; background-image:url(marquee_holder_img10.jpg); margin:10px 7px 10px 7px;"> <div style="margin: 35px 25px 25px 27px;"> <marquee scrollamount="3"><span style=" ">I name it as 'marquee holder' </marquee> </div> </div>