Wednesday, March 25, 2009

Tutorial Membuat Banner Bergerak

atas saran & dorongan dari :

3snahouse
3sna
maka postingan di mupengml saya posting ulang disini dengan harapan bisa lebih berguna bagi kita semua.
hokeehhh..kita mulaiii...
berhubung cara buat dasaran pink udah dibahas di sini....maka dalam tutorial ini langsung dibahas cara memasukkan gambar bergerak kedalam banner dasar yg sudah dibuat buat.
siapkan banner pink bergaris yg udah kita buat kmaren













bongkar file gif yang akan kita masukkan ke banner dengan cara, klik kanan file *.gif > Open With > Image Ready


















simpan gambar *.gif (yang udah dibongkar) menjadi fiple *.psd (dalam hal ini saya simpan dengan nama goyang2muter.psd)
























kembali ke dasar bannerpink dengan photoshop yang sudah aktif, sekarang buka file goyang2muter.psd, hasil dari proses pada point sebelumnya (file ini punya 9 layer) dan lakukan copas (copy-paste) ke layer baru pada bannerpink dengan menggunakan magic wand. caranya, sorotkan / klik menggunakan magic wand pada bidang kosong dalam layer, tekan ctrl + shift + i (gunanya untuk membalik seleksi yang kita buat sehingga seleksi bisa pas mengikuti bentuk bidang yang kita inginkan) tekan ctrl + c

untuk mengcopy isi seleksi dan paste-kan pada layer baru di dalam file bannerpink yang sudah aktif




























ulang proses diatas untuk layer ke 2 sampai dengan layer 9, hasilnya sesuai gambar  di bawah ini (terdapat 9 layer baru pada bannerpink yang berisi layer hasil "copas" dari goyang2muter.psd).























sekarang buka file mashimaro.gif dengan klik kanan > Open With > Image Ready, dan simpan ke format *psd (dalam hal ini disimpan jadi mashilari.psd)

lakukan proses copas setiap layer seperti sebelumnya


















































lakukan free transform (ctrl + t) pada masing2 layer hasil copas dari mashilari.psd sehingga diperoleh efek gerakan mashimaro berjalan ke kiri.

























lakukan duplicate layer pada layer mashilari1 - mashilari 4 dan beri nama berbeda (dalam hal ini "mashilaribalik1-5). lakukan free transform (ctrl + t) pada layer mashilaribalik1-5 hingga diperoleh kebalikan / pencerminan dari mashilari1-4






























tambahkan layer2 lain berisi dekorasi (termasuk gambar Vic zhou pake baju kelinci), tampilan lengkapnya seperti pada gambar dibawah ini. simpan (ctrl + s)dan pilih edit with Image Ready.



















































pada gambar diatas (yang sudah aktif di Image Ready), masih terdapat 1 frame animation, atur visibility (gambar mata) tiap layer seperti pada gambar diatas.
lakukan penggandaan frame animation menjadi 9 frame (kita pakai 9 frame karena 2 gambar bergerak *mashimaro & cewek muter2* yg sudah ada di banner tadi sama2 memiliki 9 layer), aktifkan frame 2 dan atur tampilan layer seperti pada gambar di bawah ini.


























lakukan proses setting frame seperti diatas pada frame 3 sampai dengan frame 9 sesuai dengan gambar2 dibawah ini. jangan lupa mengatur durasi per frame menjadi 0,1 sec.







































































































































langkah terakhir, lakukan save seperti pada gambar dibawah ini.




































dan hasil dapat dilihat seperti pada bannerpink(tut).gif.
sekian tutorial seadanya dari saya..
tutorial ini juga saya posting di sinigambar gif sebagai bahan sudah saya attach-kan

kalo ada yag kurang jelas, saya minta maap....
semoga berguna..amiienn

Attachment: 24770.gif
Attachment: mashimaro.gif
Attachment: bannerpink(tut).gif

32 comments:

  1. wew..kalo di preview kok ancur tiada tara gini yahhh :(

    ReplyDelete
  2. bacanya aja uda pening.........butuh waktu belajar nih
    ha....ha..........

    ReplyDelete
  3. baru tahu kalau gambar giftnya bisa dipecah......
    terima kasih....

    ReplyDelete
  4. Kayaknya susah buat ku....'nanti balik lagi ja, sebelumnya makasih.

    ReplyDelete
  5. hiyaa...maap morat-marit...xixixixixixix

    ReplyDelete
  6. Boleh ku copy di komp ku bwt blajar boleh ya

    ReplyDelete
  7. Mba..trimakasih yah n_nhahahaha ... nah loh

    baca "dorongan"-nya kelewatan.
    sa'iki mupeng tananan said

    atas saran & dorongan dari :


    3sna
    Selamat, ya Mba ...

    ReplyDelete
  8. wedeww,,"tananan iku opo y Om?...*asli gak nyambung*

    ReplyDelete
  9. xixixix..nulisnya td sambil kucing2an ma boz y Om?
    wedew, "tenanan" ? tenanan ngapaen yahhh???

    ReplyDelete
  10. nek melu2 kiro2 rambutku rontog ra yo .....he3

    ReplyDelete
  11. hahah..dijamin gundul kang...

    ReplyDelete
  12. konsennya pecah pas baca komen ini... XD
    pusing, mba...~

    ReplyDelete
  13. bener kata temen, pake potoskep lebih mudah.
    Tapi memang gabisa gabung gini... *mungkin sayah yg belum bisa gabungin

    tutorialnya mantep, mba.. *keasikan

    ReplyDelete
  14. *jitak lagi*....sayah ganteng gini masih dipanggil Mba' juga... :P

    ReplyDelete
  15. Nice info, tapi ribet kayaknya, mending buat header biasa,

    ReplyDelete