Cara mudah membuat banner animasi dengan ulead gif animator
-
Upload
kurnia-tuhadi -
Category
Technology
-
view
19.232 -
download
3
description
Transcript of Cara mudah membuat banner animasi dengan ulead gif animator
T o s h i b a
M e m p a w a h , K a l i m a n t a n
B a r a t
4 / 1 7 / 2 0 1 0
Bang Adhie
Cara yang cukup mudah untuk membuat banner sendiri
tanpa harus online
http://www.adhiemempawah.co.cc
Halaman : 2
Dibuat dengan
MS Word 2007
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
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
Klik tombol kanan disini
Halaman : 3
Dibuat dengan
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.
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.
Sebelum dikecilkan
setelah dikecilkan
Hanya sebagian dari gambar yg kita gunakan
Halaman : 4
Dibuat dengan
MS Word 2007
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
Banner yang sudah ditambah dengan gambar latar
Gambar yg sudah diedit, bagian sebelah kiri
gambar dihilangkan dgn Magic Wand
Halaman : 5
Dibuat dengan
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 :
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
Frame
Halaman : 6
Dibuat dengan
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.
Halaman : 7
Dibuat dengan
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
Halaman : 8
Dibuat dengan
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
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
gambar tsb sudah terseleksi,
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.
MEMOTONG DAN MENGHAPUS
Memotong gambar dapat dilakukan sebagai berikut :
Gbr 1 Gbr 2
Batas pinggir
masing2 gbr
Batas pinggir masing2
gambar sudah hilang
karena sudah menjadi
satu gambar
Halaman : 9
Dibuat dengan
MS Word 2007
Menggunakan Selection Tool – Lasso :
Lasso diarahkan sesuai batas
pinggir gambar yg akan kita
hilangkan, bagian yg lain dapat
sampai lepas diluar rang area
karena bagian tsb tidak
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 .
Bagian yg akan dihilangkan / dipotong & tekan tombol delete pd keyboard
Hasil dari memencet tombol delete, bagian yg dihilangkan
Bag. Ini
sesuai batas
gambar
Bag. Yg ini
dapat
sampai
diluar range
area
Penambahan background. Pada
contoh type file adalah .uga
Halaman : 10
Dibuat dengan
MS Word 2007
Menggunakan Selection Tool – Magic Wand :
Menggunakan Selection Tool – Rectange dan Ellipe :
Halaman : 11
Dibuat dengan
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.
Halaman : 12
Dibuat dengan
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
Halaman : 13
Dibuat dengan
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