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