Safirul Amar Azmi Blog! SKYTECH CREATIVE SKYTECH CREATIVE SKYTECH CREATIVE Baju Muslimah Kanak-kanak

Thursday, January 22, 2015

Bagaimana membina image bergerak animated image

Bagaimana membina image bergerak animated image (animasi) mengikut citarasa dan kesesuaian anda, fungsinya adalah untuk menarik perhatian pengunjung blog dengan iklan/banner bergerak, dinamik banner, dan sebagai mempromosikan sesuatu produk, bukankah lebih interaktif dan tidak statik? kan? kan? bila kita paparkan banner atau iklan dinamik animated sedikit sebanyak akan membuatkan audien lebih tertarik dengan mesej yang cuba nak disampaikan.

Sebagai contoh, anda boleh melihat iklan iklan di bawah header blog saya, dimana iklan bergerak gerak. ikuti langkah langkah mudah yang aku sediakan dibawah ini. Harap harap membantu. Aku menggunakan adobe photoshop versi CS3 untuk membuat animated banner ini, agak mudah kalau nak diikutkan dengan versi photoshop terdahulu, dimana anda perlu menggunakan adobe image ready
 
Untuk membuat dinamik iklan atau banner bergerak, anda perlu mahir menggunakan layer dan animation tools. Mari kita lihat cara cara membuat animated banner di bawah ini.


1) Buat design anda terlebih dahulu (sebarang saiz) dan sebagai contoh, saiz 728px x 90px (lihat gambar 1) dan save kepada format .JPEG atau .BMP (bipmap), contoh banner1.bmp , dan buat satu lagi banner 728px x 90px dan namakan sebagai banner2.bmp.

Bagaimana nak membina animated image
gambar 1
 2) Selepas melaksanakan dan membuat banner1.bmp dan banner2.bmp,  open file kedua dua fail .bmp tu ke dalam photoshop anda. (lihat gambar 2)

Bagaimana nak membina animated image
gambar 2
3) Langkah seterusnya, pergi menubar WINDOW dan tekan sekali ANIMATION untuk keluarkan animation tools frames. (lihat gambar 2)

4) Seterusnya, terpulang kepada anda untuk meletakkan image yang mana dahulu sebagai image yang pertama di paparkan (main image).

Bagaimana nak membina animated image
gambar 3
 5) Selepas anda tentukan image mana sebagai main image, tekan sekali pada image.bmp atau .jpg yang anda mahukan dan untuk melakukan animated banner atau animated gif anda perlu, tambah layer (add layer) di animation frames (lihat gambar 3-anak panah).

Bagaimana nak membina animated image
gambar 4
6) Setelah tambah layer di animation frame (lihat gambar 4), anda akan dapati paparan seperti di gambar 4 di paparkan.

Bagaimana nak membina animated image
gambar 5

Bagaimana nak membina animated image
gambar 6
 7) Di langkah ini, anda perlu tarik (drag) design image anda kedalam main image (lihat gambar 6). Ini bertujuan untuk melakukan slider animation image (layer akan wujud secara automatik).

Bagaimana nak membina animated image
gambar 7
 8) Selepas langkah 7 di lakukan, proses animated akan bermula di langkah ini, anda hanya perlu bermain dengan layer dan frame animation sahaja untuk melakukan animated image ini.

Bagaimana nak membina animated image
gambar 8
 9) Anda hanya perlu ke frame animation dan tentukan kedua dua image itu, tekan pada frame 1 di animation frame dan tutup mata di layer (photoshop), dan begitu juga di frame kedua (animation frame), tekan dan buka mata di layer photoshop, nampak tak perbezaan antara frame animation 1 dan frame animation 2? (lihat gambar 8)

Bagaimana nak membina animated image
gambar 9
10) Selepas itu, cuba main (play) kan image anda, dekan menekan butang play (A) (lihat gambar 9), dan jika ingin membuat banner atau image anda agar kelihatan soft dari segi motion, tekan (B) tween animation frames (lihat gambar 9), dan anda juga boleh tentukan masa (timing) bagi animated images anda tekan butang kecik (C) (delay time)(lihat gambar 9).

 
Bagaimana nak membina animated image
gambar 10
 11)  Di langkah ini, untuk save file animated image anda, caranya, pergi ke menu FILE dan SAVE FOR WEB & DEVICE. (lihat gambar 10)

Bagaimana nak membina animated image
gambar 11
 12) Selepas itu, anda akan dapati paparan seperti di gambar 11 di paparkan. (lihat gambar 11), namakan fail anda, dan SAVE AS TYPE pilih image only  (.gif)

Siap akhirnya banner bergerak anda (animated image banner), SEMOGA BERJAYA DAN TERHIBUR....
 

10 comments:

  1. Ok, dah tahu. Banyak juga jalan kerjanya yer. Ish. ingat mudah jer. Hehehehe

    ReplyDelete
  2. wahhhh panjang lebar..hehe..but nice sharing! ^_^

    ReplyDelete
  3. pernah gak try tutorial utk adobe photoshoot ni...sampai kesudah xdpt biat..dok try tak mnjadi..lasy skali fed up malas buat...

    ReplyDelete
  4. pernah gak try tutorial utk adobe photoshoot ni...sampai kesudah xdpt biat..dok try tak mnjadi..lasy skali fed up malas buat...

    ReplyDelete
  5. ok.. memerlukan kesabaran yg tinggi untuk membuatnya.. =)

    zinziemeewah

    ReplyDelete
  6. Power :)
    Tak semua orang boleh buat ni. ^^

    ReplyDelete
  7. kalau guna photoscape agak mudah. hehe. walaupun simple habis. :)
    selalu guna photoscape je nak buat gif :)

    ReplyDelete
    Replies
    1. ana pon guna photoscape je yg pandai kikiki

      Delete
  8. TQ bagi cara-cara nak buat ni...Nak jugak cuba 1 hari nanti...

    ReplyDelete
  9. nice tutorial, tapi kak ana paling fail bab coding ni..memang tak buatlah nampaknya..:)

    ReplyDelete

Sila gunakan bahasa dan ayat yang mudah di fahami dan GUNA NAMA SEBENAR, sebarang komen dari ANONYMOUS (TIDAK DI KENALI) dan tidak berdaftar, akan di remove serta merta oleh ADMIN.

Tolong jangan meletakkan hyperlink URL di ruangan komen.

Terima kasih, kerana memberikan pandangan, komen, kritikan dan teguran.