Cara mudah membuat banner animasi dengan ulead gif animator
Upcoming SlideShare
Loading in...5
×
 

Cara mudah membuat banner animasi dengan ulead gif animator

on

  • 20,296 views

Cara mudah membuat banner animasi

Cara mudah membuat banner animasi

Statistics

Views

Total Views
20,296
Views on SlideShare
19,774
Embed Views
522

Actions

Likes
2
Downloads
460
Comments
1

12 Embeds 522

http://pnpmgronggrong.wordpress.com 332
http://artincrisna.blogspot.com 70
http://rewinsatria.blogspot.com 56
http://crisnadesign.blogspot.com 27
http://crisnadesainergrafis.blogspot.com 10
http://translate.googleusercontent.com 10
http://www.blogger.com 8
http://www.slideshare.net 3
http://tik-supra.blogspot.com 2
http://www.adhiemempawah.co.cc 2
http://a294713.blogspot.com 1
http://jempot2-office.blogspot.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Cara mudah membuat banner animasi dengan ulead gif animator Cara mudah membuat banner animasi dengan ulead gif animator Document Transcript

  • Bang Adhie Toshiba Cara yang cukup mudah untuk membuat banner sendiri tanpa harus online Mempawah, Kalimantan Barat 4/17/2010 http://www.adhiemempawah.co.cc
  • CARA MUDAH MEMBUAT BANNER ANIMASI DENGAN ULEAD GIF ANIMATOR Pada postingan kali ini saya akan membahas tentang membuat banner animasi dengan memanfaatkan Ulead Gif Animator. Dengan software ini membuat animasi tidaklah terlalu rumit, hasilnya cukup lumayan. Gambar disamping memper- lihatkan tampilan awal saat Ulead Gif Animator kita buka. Pada control box ada beberapa petunjuk yang dapat kita laku-kan yaitu :  Animation Wizard  Blank Animation  Open an existing image file.  Open an existing video file.  Open a sample file Dengan demikian kita juga dapat mengadaptasi animasi kita dari file video. Tetapi yang akan kita bahas disini adalah yang nomor 2 yaitu Blank animation. Karena dengan blank animation kita dapat melakukan proses kreativitas kita. Untuk mempersiapkan pembuatan animasi/banner animasi tentunya kita harus mempunyai beberapa file gambar baik gambar utama maupun sebagai latar. 1. CARA MENGATUR UKURAN BANNER Misalnya kita akan membuat banner Klik tombol kanan disini dengan ukuran 468 x 60 pixel, maka kita dapat mengklik tombol kanan mouse pada bagian banner kosong seperti gambar di samping. Piih Object Properties kemudian pilih Positon and Size. Size (ukuran) banner dapat kita sesuaikan, lebar (width) kita ketikkan angka 468 dan tinggi (height) kita buat 60. Jika gambar yg harus tampil sesuai aslinya maka keep aspect rationya dicentang, tetapi jika rasio kita abaikan seperti gambar untuk latar atau ketikan/tulisan pesan keep aspect ratio nya dilepas/kosongkan saja sehingga kita dapat membentuk tampilan gambar atau text yang tentunya tetap menganut azaz kesusai-an. Ya iyalah masak pakai azaz baris berbaris. Mengatur posisi (position) pada Dibuat dengan Halaman : 2 MS Word 2007
  • left position (posisi sebelah kiri) artinya menimbulkan jarak sebelah kiri depault banner dengan isi banner kita. Begitu juga dengan posisi sebelah atas (top position) akan membuat jarak antara batas atas dengan isi banner kita. Jika mode lock kita centang maka posisi isi banner kita tidak dapat kita geser. Oke … untuk mengatur ukuran banner dan mengatur yang lainnya kita cukupkan sampai disini dulu, kita menuju pada cara membuat banner berikutnya. 2. MENYIAPKAN MATERI BANNER. Sebagai contoh saya mempunyai gambar dgn ukuran 518 x 423 Pixel, dan itu harus disesuaikan dengan ukuran banner yang kita buat yaitu 468 x 60 Pixel. Itu artinya harus kita kecilkan agar sesuai. Bagaimana caranya? Sama seperti yang diatas yaitu kita klik tombol kanan mouse pada gambar yang sudah kita add (masukkan), dan pilih Object Properties dan kecilkan dengan memilih height dan masukkan angka 60 maka tinggi gambar kita sekarang adalah 60 Pixel, kenapa harus height nya kita rubah? Karena kalau width kita perlu banyak mengukur kesesuaian itu tadi, sementara pada height ukuran yg kita mau sudah pasti tingginya 60 Pixel. Dan jangan lupa untuk posisi bagian atas gambar pas dengan posisi atas banner kita, karena jika sudah kita geser apalagi bagian paling bawah gambar kelihatan salah-salah ketika kita rubah ukurannya malah tidak kelihatan karena keluar dari area banner kita. Sebelum dikecilkan setelah dikecilkan Kita dapat juga hanya mengambil bagian dari gambar, misalnya bagian mata saja, bagian bibir atau bagian lain yang kita mau dengan cara menggeser gambar sampai bagian yang kita inginkan. Hanya sebagian dari gambar yg kita gunakan Dibuat dengan Halaman : 3 MS Word 2007
  • Banner yang sudah ditambah dengan gambar latar Jika menggunakan gambar untuk latar maka dapat ditambahkan gambar latarnya terlebih dahulu, tetapi jika lupa dan baru akan ditambahkan kemudian, langkah yg perlu dilakukan adalah menyalin atau copy gambar utama lalu hapus atau delete setelah itu add gambar untuk background tsb dan sesuaikan dengan ukuran banner. Dalam proses ini usahakan jangan menyalin yg lain karena akan menghilangkan gambar utama yg masih terekam di memory computer kita. Oleh karena itu jika gambar latarnya sudah siap langsung saja paste kan gambar utama tadi, karena pada UGA tidak tersedia fasilitas untuk mengatur apakah gambar mau kita tempatkan di atas atau di bawah (front dan back). 3. EDIT GAMBAR Edit gambar pada UGA mirip dengan software asalnya yaitu Ulead Photo Impact, diantaranya :  Kita dapat membuat teks (dengan mengklik Text Tool)  Dapat memotong, menghilangkan bagian gambar yg tidak dibutuhkan (dengan mengklik Selection Tool – Magis Wand, Selection Tool – Lasso atau Selection Tool – Ractange)  Dapat memberikan warna pada bagian tertentu dari banner (Fill Tool)  Atau dapat menghapus bagian yang perlu dihilangkan (Eraser Tool)  Dan lain-lain fasilitas Gambar yg sudah diedit, bagian sebelah kiri gambar dihilangkan dgn Magic Wand Dibuat dengan Halaman : 4 MS Word 2007
  • Caranya adalah dgn memilih Selection Tool – Magic Wand, arahkan ke bagian gambar yg akan dihilangkan, klik disitu & tekan tombol delete. Jika masih ada yg tersisa, ulangi sekali lagi pada bagian yg tertinggal tsb. Selanjutnya kita juga dapat menambahkan gambar lain untuk memperkaya tampilan banner kita. 4. MEMBUAT GAMBAR BERGERAK Agar banner kita menjadi gambar bergerak dapat kita lakukan dengan cara sbb : Frame A. Pada saat awal kita memasang banner yang ada hanya satu frame, untuk itu kita dapat menambah frame lagi sampai beberapa frame (dalam contoh kita menggunakan sampai 8 Frame. Image saya bahwa gambar yg sebelah kiri akan memunculkan efek kelihatan dan hilang saling silih berganti. Caranya adalah : 1. Copy gambar latar dan gambar sebelah kanan (gbr mouse); 2. Klik tombol (button) Add Frame maka akan muncul frame kosong, salin (paste) sesuai nomor 1 diatas maka akan didapat frame baru tetapi gambar sebelah kiri tidak terpasang. Kini kita sudah punya 2 frame banner. 3. Klik tombol Duplicat Frame, misalnya sampai 4 x, maka frame kita bertambah menjadi 6 Frame seperti pada frame nomor 2. 4. Klik Frame nomor 1, setelah itu klik pula tombol Duplicat Frame misalnya 3 kali, maka frame akan bertambah 3 lagi antara frame nomor 1 dan Frame nomor 5. Dan frame tambahan ini akan sama dengan frame nomor 1 (ada gambar sebelah kiri) 5. Untuk melakukan test dapat kita klik tombol preview yg terdapat pada bagian atas layar monitor atau mengklik tombol Play yg terdapat disamping kiri frame nomor 1 yang bertanda seperti ini. 6. Jika hasil yg didapat sudah sesuai dengan keinginan, langkah selanjutnya adalah merekam/menyimpan file tersebut. Ada beberapa jenis file yg dapat direkam antara lain UGA (Ulead Gif Animator), Gif (animasi), UFO (Ulead Photo Impact), PSD (Adope Photoshop) serta beberapa file video. 7. Untuk ini kita hanya merekam file tersebut dalam 2 jenis, yaitu UGA (type ini hanya dapat dibuka dgn Ulead Gif Animator dan ber extention .UGA dan untuk keperluan editing pada lain waktu jika memerlukan perubahan pada file tersebut). Sebagai contoh nama file adalah Contoh 01.UGA. Jenis penyimpanan ke 2 adalah dgn memilih Gif dan file ini dapat digunakan untuk berbagai kepentingan seperti untuk dipasang di Blog/Web Site. Animasinya dapat terbaca di Windows Explorer atau Desktop wallpaper. Sebagai contoh nama file adalah Contoh 01. Gif Dibuat dengan Halaman : 5 MS Word 2007
  • 8. Sampai disini kita telah mempunya file animasi dengan catatan bahwa proses penyimpanannya dengan memilih File  Save As dan dilakukan 2 kali yaitu UGA dan Gif. Khusus yg ber extention Gif dapat didistribusikan untuk banyak keperluan. B. MENAMBAH TEKS PESAN Untuk menambahkan teks pesan pada banner kita klik saja pada tombol Add Banner Text, ubah text yg ada dengan teks yang akan kita pakai. Sesuaikan jenis, ukuran huruf dan warna. Jika ingin ada variasi ukuran huruf antara yg atas dan bawah (dalam contoh ini menggunakan 2 baris tulisan) maka range/arsir pada bagian atas (banner ini dibuat dgn) dan utak atiklah ukuran hurufnya. Yg penting adalah bagaimana memperoleh banner yang cantik. Untuk mendapatkan tulisan bergerak dari kanan ke kiri maka kelik Effek, pada Enter Scane pilih Scroll Left dan pada Exit Scane juga pilih Scroll Left. Kita dapat pula membuat gerak tulisan dari atas kebawah atau sebaliknya, hanya bagaimana kita memilih effek tersebut untuk mendapatkan animasi yang bagus. Variasi lain adalah Neon, yaitu memberi effek cahaya pada tulisan pesan tersebut. Kita dapat melakukan uji-uji coba terhadap effek tersebut. Dibuat dengan Halaman : 6 MS Word 2007
  • Agar kecepatan teks yang bergerak dari kanan ke kiri dapat diatur cobalah delay time dan Key frame delay diganti dengan angka yang sesuai, biasanya angka yang lebih tinggi akan menimbulkan efek gerak yang lebih lambat dibanding dengan angka yang rendah. Maksudnya angka 15 akan lebih cepat dibanding dengan angka 20 dan seterusnya. Untuk melakukan test kita dapat mengklik tombol Start Preview, dan jika dianggap sudah oke klik tombol OK dan pilih Create as Banner Text (Recommended). Kini kita sudah mempunyai 20 frame banner. Oh ya jangan lupa rekam file anda. Banner dengan teks berjalan sudah jadi. Selamat & Sukses. MEMBUAT BANNER DENGAN VARIASI LAINNYA Sebagai proses kreatif, kita dapat pula menggunakan software lain untuk mendapatkan hasil yang lebih optimal seperti Ulead Phoho Impact, Adope Photoshop, Corel Draw serta masih banyak lagi software-software yang khusus untuk editing. Selain itu yang cukup sederhana seperti MS Power Point juga dapat kita manfaatkan untuk mendapatkan gambar (photo) yang bagus dengan cara sederhana Dibuat dengan Halaman : 7 MS Word 2007
  • dan tidak ribet. Semua itu tergantung kitanya saja, karena proses kreatif adalah suatu proses yang sulit ditentukan batasnya. Menggabungkan dua gambar menjadi satu gambar. Dua gambar yang berbeda Gbr 1 Gbr 2 dapat kita gabungkan menjadi satu gambar dengan cara memilih satu gambar tsb (klik) bersamaan dengan menekan tombol Shift (dapat pula tombol Ctrl) pada keyboard dan langsung pula klik pada gambar lainnya tanpa melepas tombol di keyboard, maka kedua Batas pinggir gambar tsb sudah terseleksi, masing2 gbr tekan tombol kanan mouse untuk mendapatkan menu, pilihlah Combine as Single Object (penggabungan menjadi satu objek) sehingga garis putus-putus yang tadinya ber- sumber dari dua gambar kini sudah menjadi satu gambar. Batas pinggir masing2 gambar sudah hilang karena sudah menjadi satu gambar MEMOTONG DAN MENGHAPUS Memotong gambar dapat dilakukan sebagai berikut : Dibuat dengan Halaman : 8 MS Word 2007
  •  Menggunakan Selection Tool – Lasso : Bag. Ini sesuai batas Bagian yg gambar akan dihilangkan / dipotong & tekan tombol Bag. Yg ini delete pd keyboard dapat sampai diluar range area Lasso diarahkan sesuai batas Hasil dari pinggir gambar yg akan kita memencet hilangkan, bagian yg lain dapat tombol delete, sampai lepas diluar rang area bagian yg karena bagian tsb tidak dihilangkan berpengaruh pada bentuk gambar. Yang perlu diperhatikan adalah batas pinggir gambar, disini perlu hati-hati menggerakkan mouse agar diperoleh gambar yg layak. Jika ingin menambahkan dgn gambar latar tinggal klik tombol add image . Penambahan background. Pada contoh type file adalah .uga Dibuat dengan Halaman : 9 MS Word 2007
  •  Menggunakan Selection Tool – Magic Wand :              Menggunakan Selection Tool – Rectange dan Ellipe : Dibuat dengan Halaman : 10 MS Word 2007
  •  Menggunakan Selection Tool – Erase Tool : Arah kan kursor erase tool kebagian gambar yg akan dihilangkan, dan lakukan seperti menggosok maka bagian gambar yg akan dihilangkan sedikit demi sedikit akan hilang dan gambar latar (background) mulai kelihatan. Dibuat dengan Halaman : 11 MS Word 2007
  •  Menggunakan Paintbrush Tool :  Menggunakan Text Tool : Disini kita menggunakan fasilitas teks yaitu Text Tool yang berfungsi memberikan teks pada banner. Banner yg sudah ada teksnya Dibuat dengan Halaman : 12 MS Word 2007
  • Untuk urusan teks ini saya lebih suka menggunakan bantuan dari software lain, karena hasilnya lebih bagus misalnya dengan menggunakan Power Point dari Microsoft Office 2007. Berikut contoh Teks yang dibuat dengan Power Point. Menambahkan teks dari software lain caranya sama dengan penambahan gambar yaitu dengan memilih menu Add Image. (Contoh dapat dilihat pada file Contoh 04b 250x250.uga dan Contoh 04b 250x250.gif). Untuk tutorial bagian I ini saya cukupkan sampai disini dulu dan akan disambung pada tutorial berikutnya sambil mencoba mengumpulkan materi berikutnya. Semoga tutorial ini dapat memberikan manfaat yang baik bagi Anda. Sebagai tambahan banner/animasi yang dibuat dengan UGA ini dapat pula ditambahkan untuk animasi Power Point. Wassalam. DAFTAR FILE CONTOH : NO. NAMA FILE (UGA) NAMA FILE (GIF) 1 Contoh 01.uga Contoh 01.gif 2 Contaoh 01 250x250.uga Contoh 01 250x250.gif 3 Contoh 01a 468x60.uga Contoh 01a 468x60.gif 4. Contoh 02 250x250.uga Contoh 02 250x250.gif 5. Contoh 03 250x250.uga Contoh 03 250x250.gif 6. Contoh 04 250x250.uga Contoh 04 250x250.gif 7 Contoh 04a 250x250.uga Contoh 04a 250x250.gif 8 Contoh 04b 250x250.uga Contoh 04b 250x250.gif Dibuat dengan Halaman : 13 MS Word 2007