Untuk membuat Header Blog yang bisa bergerak, biasanya kita menggunakan Animasi Flash atau Gif. dan saya mau sharing cara membuat animasi Gif, selain lebih simpel Gif juga tidak perlu plugin khusus untuk melihatnya di web. sedangkan Flash diperlukan plugin Flash Player untuk membukanya, jika komputer kita belum terinstal Flash plugin-nya maka gambar tidak akan ditampilkan sampai kita mendownload dan menginstalnya dulu ...
itulah sebabnya hampir semua gambar/teks bergerak di blog ini menggunakan animasi Gif, meskipun ada juga animasi Flash-nya.
untuk
membuat header blog buatan sendiri, yang pertama harus diketahui yaitu
ukuran panjang x lebar header blognya itu sendiri anda bisa melihatnya
dari kode template
html-nya.
| Html | Artinya |
| #header-wrapper { | halaman header |
| width:800px; | lebarnya 800 pixels |
| height:120px; | tingginya 120 pixels |
setelah kita mengetahui ukuran headernya, buatlah sebuah gambar dengan ukuran yang sama untuk backgroundnya. anda bisa menggunakan Photoshop atau coreldraw atau software gambar apa saja boleh, dan simpan dalam format Jpg. ada baiknya juga anda tulis Deskripsi Blog dan Url Address-nya sekalian, sebenarnya hal ini bisa dilakukan di UGA, tapi biar pemahaman lebih cepat dan tidak terlalu rumit juga untuk menghemat Frame. karena dengan frame yang banyak maka gambar akan menjadi lebih berat sedangkan hasilnya sama (kecuali jika anda ingin membuat Deskripsi Blog & Url Address-nya juga bergerak).
setelah
background kita siapkan, selanjutnya kita cari gambar
Gif yang bergerak, saya ambil contoh yang ini saja '
gambar cowboy'
buka
Ulead Gif Animator (UGA) jika belum punya silahkan
download dulu di sini.
dengan
UGA buka gambar
Gif-nya
'Open Image' (Ctrl+O) ...
rubah ukuran
canvas, samakan dengan ukuran
header anda.
Menu Bar Edit > Canvas size...
(Ctrl+G) klik
OK
buka Menu Bar File > Add Image (Ins), pilih gambar Background yang sudah di siapkan.
klik
Open, maka gambar yang
Background akan menutupi gambar lainnya.
pada
Layer Option seret
Background ke paling bawah
Klik
Frame 2, maka gambar
background hilang kan?
pada
Layer Option nyalakan
gambar mata, gambar
background akan kembali muncul!
klik
Frame 3, lalu nyalakan
gambar mata pada
Layer Backgroundbegitu seterusnya sampai gambar
Frame dan
Layer habis terpilih ...
sekarang coba klik tombol '
Play' di bawah
Frame, gambar
cowboynya bergerak mengunyah sementara
Backgroundnya diam.
sekarang saatnya memberikan
text effect,
klik icon Text di bawah Frame
(Add Banner Text)
pada dialog Add Banner Text, pilih Font sesuai selera anda, warna dan ukuran juga bisa anda gunakan efek Shadow
pada tab
Effect pilih animasi yang akan ditampilkan, semuanya keren, bro !
pada tab
Frame Control dan
Neon lewati saja dulu ...
Klik Start Preview untuk melihat hasilnya, sampai anda menemukan efek yang pas, kalau sudah klik lagi Start Preview, lalu klik OK > Create As Banner Text (recommmended)
klik
Save As ... simpan dalam format
Gifatau simpan dalam format
Uga kalau mau diedit lagi nantinya ...
inilah hasilnya :
selamat mencoba, buatlah
header atau
banner sesuai selera anda !
Sumber