Langkah Mudah Membuat Banner Animasi

29 Desember 2011 94 Komentar

Mengingat banyak yang meminta agar dibuatkan tutor membuat banner animasi, oke kesempatan ini saya akan coba terangkan Langkah Mudah Membuat Banner Animasi format .gif. Sebenarnya cara ini sudah saya terangkan pada artikel Cara Membuat Animasi Dengan Photoshop. Tapi seperti judul artikelnya memang tutor tersebut menggunakan Program Photoshop. Lain dengan yang akan saya terangkan kali ini, yaitu Langkah Mudah Membuat Banner Animasi dengan software Easy GIF Animator. Yang dijadikan tutor dalam membuat Banner Animasi ini saya menggunakan Easy GIF Animator 5 Pro.

Saya rasa dalam hal membuat Banner Animasi menggunakan Easy GIF Animator termasuk mudah dalam membuatnya. Berbeda dengan Photoshop lumayan sulit, pendapat saya yang masih belajar  Easy GIF Animator adalah sebuah software yang khusus untuk membuat Animasi, didalamnya selain anda bisa membuat Banner Animasi, terdapat juga membuat Button Animasi, dan anda bisa berkarya leluasa lagi tanpa menggunakan fasilitas otomatis. Hasilnya lumayan menarik dan sizenya juga kecil sehingga sangat cocok untuk ditampilkan pada blog anda.

Jika anda tertarik atau ingin mencoba dulu software Easy GIF Animator silahkan bagi yang belum tahu atau belum punya softwarenya, silahkan sedot dulu disini.

Setelah anda sedot softwarenya, silahkan diinstall dulu pada PC/Laptop anda. Selesai diinstall, cara menggunakannya akan coba saya uraikan dan ingat tutor ini hanya globalnya saja, silahkan untuk kreasi kembangkan lagi sendiri.

Langkah 1

Buka Easy GIF Animator yang Anda install, klik Create Animated Banner

Langkah 2

Dalam tutor ini saya akan beri contoh banner dengan ukuran 234 x 60 px. Setelah selesai menentukan ukuran banner lalu klik Next >

Langkah 3

Selanjutnya anda akan diminta untuk menentukan background banner. Terdapat tiga pilihan, Simple Color, Gradient Color, dan Picture or Texture. Tapi saya akan pilih Picture or Texture. Karena pada langkah sebelumnya memilih banner dengan ukuran 234 x 60 px, maka anda harus menyiapkan background dengan ukuran tersebut. Lalu klik Browse untuk membuka background banner yang sudah disiapkan. Dan klik Next >

Langkah 4

Sekarang pada layar kerja terlihat kotak dialog Text Messages. Silahkan anda ketik kata-kata yang akan ditampilkan dalam banner. Disini terdapat tiga slide yaitu Text 1, Text 2, Text 3. Dan sebagai contoh pada Text 1 saya ketik blog sederhana dengan jenis huruf Brush Script STD, size 28, dan warna Dark Blue. Dalam kotak dialog Text Messages terdapat juga pengaturan How to show? saya pilih Type in, dan How long to show saya pilih 2 sec.

Pada Text 2 saya mengetik dan melakukan pengaturan seperti yang terlihat pada gambar di bawah :

Terakhir Text 3 saya mengetik dan melakukan pengaturan seperti yang terlihat pada gambar di bawah, setelah dirasa cukup klik  Next >

Langkah 5

Jika banner animasi anda tidak menginginkan untuk disetting lebih lanjut, klik Save Banner to File….

Langkah 6

Ketik nama File, saya beri contoh belajar banner. Lalu pada Save as type beri format GIF Image (*.gif)

Hasil akhir seperti ini :

Langkah 7

Untuk tambahan, mungkin saja anda ada yang belum mengetahui caranya agar banner animasi bisa tampil pada blog anda, atau cara mengambil kode banner dengan maksud banner anda ingin ditampilkan kode HTML-nya untuk tujuan tukeran banner dengan teman blog.

Setelah anda selesai membuat banner animasi yang cocok sesuai selera. Silahkan anda login ke akun blog anda. Disini saya memberi contoh pada blog WordPress saja . . . Setelah anda login dan masuk ke Menu Dasbor, klik menu Media dan Tambahkan Baru

Langkah 8

Setelah masuk ke tampilan Unggah Media Baru klik Pilih Berkas dan cari banner animasi yang sudah dibuat. Setelah berhasil di unggah, copy URL Berkas dan paste dulu pada Word Document atau Notepad. Klik Simpan seluruh perubahan.

Langkah 9

Selanjutnya kode HTML yang dibutuhkan agar banner tersebut bisa tampil pada blog anda, adalah :

<a title="Belajar Banner" href="http://onesetia82.wordpress.com/" target="_blank"><img class="aligncenter" src="http://onesetia82.files.wordpress.com/2011/12/belajar-banner.gif" alt="onesetia82" width="234" height="60" /></a>

\

Keterangan :

Belajar Banner = Judul Banner

http://onesetia82.wordpress.com/ = Ganti dengan alamat blog Anda

aligncenter = Banner agar tampil ditengah

http://onesetia82.files.wordpress.com/2011/12/belajar-banner.gif = URL Banner, yang tadi disimpan pada Word Document atau Notepad

onesetia82 = Silahkan diganti dengan yang Anda inginkan

234 dan 60 = Ukuran banner

Langkah 10

Terakhir untuk menampilkan banner, copy kode tersebut dan paste pada Mode HTML untuk tampil pada Postingan, atau Widget Text untuk tampil pada Sidebar.

Sedangkan agar kode HTML tersebut ingin ditampilan pada Postingan atau Widget (bukan bannernya tapi kode HTML-nya) dengan tujuan Banner tersebut akan dijadikan banner Tukeran Banner dengan teman blog, cara menampilkannya Anda bisa baca pada artikel pada postingan saya klik disini.

Selamat mencoba, jika sukses dan Anda hendak bertukeran banner dengan saya, konfirmasi saja. Kode HTML banner saya ada di halaman Friend Link.