BANNER SEDERHANA DENGAN ADOBE FIREWORKS

Created by : Ari Rusmanto

Date : Tuesday, February 17, 2009

Software : Adobe Fireworks


Photobucket

Pertama kamu harus punya object gambar dasar yang akan digunakan sebagai banner, sebagai contoh gambar dibawah ini, kamu bisa membuatnya dengan adobe photoshop

Photobucket

Buka Adobe fireworks, klik Fireworks Document (PNG)
Photobucket

Ubahlah ukuran canvas Width 160 pixel, Height 160 pixel, Resolution 50 pexel/inch dan canvas color Transparent, dikarenakan object dasar banner berukuran 155x156 px, jadi canvas harus lebih beasr dari object dasar, agar animasi bannernya bisa kelihatan

Photobucket


Kemudian klik OK, inilah tampilan halaman kerja adobe fireworks
Photobucket

Untuk memasukan object dasar yang telah kita siapkan tadi, klik menu File – Import
Photobucket

Cari lokasi kita menyimpan object dasar tadi, kemudian klik open
Photobucket

Posisikan mouse di pojok kiri atas pada canvas, kemudian klik mouse

Photobucket

Pilih Text tool, ganti warna dengan warna hitam, dan ukuran font 20
Photobucket

Ketiklah beberapa kata di object dasar yang telah kita masukkan tadi, sebagai contoh dibawah ini

Photobucket

Setelah selesai dengan tulisan, sekarang kita tambah frame dengan cara klik pada pojok kanan atas pada window pages and layers and frames, pilih add frames

Photobucket

Tambahkan 4 frame lagi, dan pilih After current frame, klik OK
Photobucket

Aktifkan frame 1, kemudian pilih menu layers, klik folder layer 1, dan tekan ctrl+c untuk mencopy folder layer 1

Photobucket

Aktifkan frame 2, kemudian tekan ctrl+V untuk paste layer 1 tadi, teruskan ke frame 3 sampai frame 5
Photobucket

Kembali ke frame 1, geser object
gambar ke pojok kiri atas seperti gambar dibawah
Photobucket

Berpindah ke frame 2, kemudian geser object gambar ke pojok kanan atas dan ganti warna tulisan dengan warna merah, teruskan ke frame 3 sampai frame 5 sesuai kreasi kamu
Photobucket

Klik angka pada frame 1 dan seterusnya, ubahlah frame delay menjadi 10, agar pergerakan animasi terlihat cepat
Photobucket

Ubahlah settingan optimize manjadi Animated GIF dan Web adaptif, agar hasil project bisa bergerak atau bisa menjadi animasi
Photobucket

Setelah semuanya beres alias selesai, simpan project dengan cara klik menu File - save as, simpan dengan extensi atau type file Animated GIF
Photobucket
Photobucket