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' (disarankan gambar Gig yang Transfaransi Background)
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 Background
begitu 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 Gif
atau simpan dalam format Uga kalau mau diedit lagi nantinya ...
inilah hasilnya :
selamat mencoba, buatlah header atau banner sesuai selera anda !
0 komentar:
Posting Komentar
TINGGALKAN KOMENTAR ANDA!