Header Ads

ad728
  • Breaking News

    Langkah Mudah Membuat Banner Animasi

    Salah satu cara untuk membuat orang meng-klik suatu link pada sebuah website adalah dengan memasang banner animasi. Banyak cara dengan menggunakan bantuan software untuk membuat Banner animasi. Bisa dengan Flash maupun gif animator. Yang akan kami sharingkan disini, adalah langkah-langkah membuat 'Banner Animasi' mudah dan sederhana dengan bantuan Adobe Photoshop.

    Membuat Banner Animasi 468x60 pixel


    1. Buka Adobe Photoshop
    2. Klik File > New atau (Ctrl+N)




    4. Hasilnya adalah sebagai berikut, ukuran kanvas 468 x 60 pixel



    3. Langkah Selanjutnya adalah memilih  latar belakang/background. Cara paling mudah adalah memanfaatkan scan dari cover buku, majalah, gambar yang kira-kira cocok dengan yang kita inginkan. Nanti kita lihat hasilnya..
    4. Open File > Nama File Hsil Gambar Scan Cover buku/majalah
    Contoh yang backgroundnya bagus seperti berikut :



    Gambar dikecilkan dari aslinya, perhatikan gradasi warna biru, gambar warna-warni yang nanti bisa kita olah untuk kita jadikan warna latar banner, kita bisa scan macam-macam cover buku yang kita inginkan/sesuai selera kita.



    5. Didalam Lembar Kerja kita ada dua image/gambar, kanvas ukuran 468x60 dan 'gambar hasil scan' kita.
    Selanjutnya, drag/geser 'gambar hasil scan' menggunakan Move Tool(V) ke dalam kanvas banner kita.



    Latar belakang/background masih kasar dan pecah-pecah dari hasil scan.

    6. langkah selanjutnya, kita perhalus background imagenya, dengan jalan kita blur



    Hasilnya, gambar latar lebih 'smooth' dan 'eye catching', bisa di rubah-rubah tingkat/parameter blur-nya



    . Langkah Selanjutnya mengisi text/tulisannya



    8. Langkah selanjutnya, jump to image ready



    Tampilan di Image Ready



    9. Drag/Geser Frame 1 pada tab Animation ke Duplicate buton, atau bisa juga pastikan Fram 1 tersortir baru kemudian klik Duplicate current Frame, sehingga terdapat Frame 1 dan Frame 2. Banyaknya Frame bisa disesuaikan dengan kebutuhan banyaknya animasi yang dibuat. Terdapat 3 layer , Layer 1 Background gambar; Layer 2 Tulisan Sejutaweb.com (Warna text 'Sejuta' warna Orange) , Layer 3 Tulisan Sejutaweb.com(Warna 'Sejuta' sudah kita rubah menjadi warna Putih)




    10. Atur Indicate Layer Visibility dari masing-masing Frame, jika 'Gambar Mata' aktif berarti layer aktif/tampil, jika tidak terdapat 'gambar mata' berarti gambardi kanvas tidak tampil/off




    11. Atur Indicate Masing-masing Frame dengan Layer visibility yang berbeda-beda
    untuk Frame 1 Layer Sejutaweb.com copy yang aktif atau sebaliknya



    untuk Frame 2 Layer Sejutaweb.com yang aktif atau sebaliknya



    Langkah selanjutnya, atur durasi waktu masing-masing frame sesuai dengan keinginan



    12. langkah terakhir, test animasi dengan tombol play. Setelah disesuaikan sana-sini sesuai dengan kebutuhan dan selera, Tinggal kita save optimise, dengan extensi .gif



    Cukup Mudah bukan, Selamat mencoba dan dengan dikembangkan dengan model-model yang lain
    .



    Author : romeoarjuna

    24 comments:

    1. wah bagus infonya

      ReplyDelete
    2. ulasan banner ini sangat membantu sekali dengan apa yg sedang saya kerjakan, pokoknya thank berat yahh....

      ReplyDelete
    3. wah saya ga ngerti potoshop..tp ada ga ya buat banner instan yang bagus??

      ReplyDelete
    4. manatap n kren tutorial nya

      ReplyDelete
    5. Wah bagus banget blognya, terus artikelnya sangat berguna, thanks ya bos

      ReplyDelete
    6. Thanks ya Bro.. :)
      Mau dicoba dulu..

      ReplyDelete
    7. siip..

      klo mw download software2,
      langsung aja ke my blog..
      da juga informasi tentang komputer,

      ReplyDelete
    8. asslmkm,,,
      artikel yang bagus,,, thanks ya,,, ini sangat berguna buatku yang lg belajar ngeblog...
      thanks

      ReplyDelete
    9. Alhamdulillah,mendapat pencerahan hari ini.terimakasih yah...!!!

      ReplyDelete
    10. pasang iklan murah10 July 2009 at 13:54

      kok aku gak berhasil ya? setelah di upload. Gimana sich....

      ReplyDelete
    11. saya lebih suka dg cara ini, lebih bebas berekspresi drpd menggunakan sofware yang sudah ada.

      ReplyDelete
    12. Terimakasih informasinya. Ini sangat berguna untuk buat banner di website MasterHipnotis kami.

      ReplyDelete
    13. untuk hyperling atau link targetnya gi mana neh ?

      ReplyDelete
    14. banner saya udah jadi trus saya letakan pada blog saya ekh pas di klik kok link nya ke :

      http://4.bp.blogspot.com/_Jc9niq1J3UA/SvzpBRG7qI/AAAAAAAAAGg/nF5GIQfUftY/s1600-h/banner.gif

      bukanya ke link yang saya tujukan wah in letak kekeliruannya di mana neh?


      hormat saya
      susi

      ReplyDelete
    15. wah keren neh.. bisa langsung praktek.. thx bro.. keep update yah.. ^_^

      ReplyDelete
    16. thanks to nambah ilmu bos

      ReplyDelete
    17. Wah ini pengalaman yang sangat bagus bagi pemula, saya mo coba membuat banner untuk blog saya Rumah Kost Di Dempasar

      ReplyDelete
    18. wah baru tau saya kalau adobe fhotoshop bisa dibikin banner animasi, tanks ya,,,,

      ReplyDelete
    19. Ini yang saya cari, belara buat banner,.....animasi,..sekalisug belajar photoshop..

      ReplyDelete
    20. kalau tak mengerti fotoshop gimana pak?

      ReplyDelete
    21. @blog raharja

      Silakan membaca artikel tentang belajar Photoshop terlebih dahulu

      ReplyDelete
    22. Photoshop new version udah beda toolsnya, harus dipelajari lagi bisa by youtube tutorialnya gimana. Misalkan mau buat desain banner or spanduk dan bingung gimana pake photoshop, bisa coba langsung ke tempat digital printing, biasanya provide jasa desain mulai dari banner biasa sampe animasi juga bisa tergantung kebutuhan aja. Mau yang 2D or 3D suspended.

      ReplyDelete

    Post Top Ad

    ad728

    Post Bottom Ad

    ad728