Monday, March 27, 2017

Cara Membuat Banner Iklan Bergerak dengan After Effeck dan Photoshop


Iklan ialah pariwara atau promosi atau pengenalan produk, informasi barang atau jasa. kegiatan memberitahukan atau menginformasikan suatu hal, barang, atau jasa melalui media massa baik online maupun ofline. Media yang digunakan, antara lain televisi, radio, koran, majalah, internet, hp, poster, pamflet, brosur, spanduk dan sebagainya. 

Sekilas tentang arti iklan kita tahu bahwa iklan sangat penting dalam kegiatan pemasaran suatu usaha, untuk itu sebuah iklan haruslah menarik agar kegiatan pemasaran dapat berjalan sesuai dengan yang di harapkan

Pada kesempatan ini saya akan berbagi cara bagai mana membuat banner iklan menggunakan software Adobe After Effect dan Photoshop untuk kegiatan promosi online. pada contoh banner iklan yang akan saya buat dimana bertujuan untuk mempromosikan jasa desain interior kamar dengan ukuran banner 728x90px, yang biasanya posisi banner tersebut berada di Header atau Footer suatu website. lihat hasil dari apa yang akan kita buat dibawah ini : 



Saya juga menggunakan gambar karya Armando Ferriani sebagai ilustrasi gambar banner iklan yang akan saya buat, oke langsung saja.

Pertama-tama jalankan After Effect, setelah itu klik Composition lalu New Composition, anda juga bisa menekan ctrl+n untuk cara cepatnya. akan muncul jendela baru seperti di bawah ini :

Gambar 1

Pada gamabar 1 :
  1. Ganti nama sesuai dengan project file anda
  2. Ganti ukuran menjadi 728x90px atau sesuaikan dengan keperluan anda
  3. Pilih jumlah FPS menjadi 25 FPS
  4. Ganti durasi iklan 7 detik atau menyesuaikan dengan keperluan anda
  5. Ganti warna latar sesuai dengan keinginan anda
  6. Setelah itu klik OK saja

Setelah itu klik icon dengan simbol huruf T atau tekan ctrl+t pada keyboarad, lihat keterangan Gambar 2 dibawah ini :


Gamabar 2

Dan arahkan cursor mouse anda pada media composition lalu ketikan informasi teks iklan yang akan anda tampilkan. kemudian atur posisi teksnya sesuai dengan keinginan anda, contoh lihat gambar 3 dibawah ini :

Gambar 3

Setelah itu,
  1. Klik icon seperti mata panah
  2. Lalu klik lagi icon seperti mata panah Animated
  3. Pilih Scale, Lihat keterangan pada gambar 4 di bawah

Gambar 4

Setelah itu.
  1. Rubah nilai Scale dari 100 menjadi 0 (teks pada media compos akan hilang sementara)
  2. Klik icon panah pada Range Selector, lalu klik icon Stopwacth pada Start dan End
  3. Keyframe secara otomatis akan muncul pada Timeline, lihat keterangannya pada gambar 5 dibawah
Gambar 5

Kemudian tekan U pada keyboard, lalu tekan dan tahan shif  dan tekan page down dua kali pada keyboard dan rubah nilai start dari 0 menjadi 100 maka akan muncul lagi satu buah keyframe, lalu block semua keyframe yang adan dan tekan F9, icon keyframe akan berubah bentuk menjadi jam pasir jika berhasil, lihat keterangan pada gambar 6 di bawah ini :


Gambar 6

Lalu tekan ctrl+i untuk mengimpor gambar ilustrasi yang relevan pada teks iklan, pilih gambarnya dan open. setelah gambar berada pada menu project tekan tahan dan tarik file gambar lalu masukan kedalam composition timeline. setelah itu atur posisi gambar dan sesuaikan ukuran gambarnya lalu mask gambar menyesuaikan dengan media composition project. cara masking gambar klik icon pulpen clasic sebelum icon T lihat Gambar.2 diatas atau tekan G pada keyboard, kemudian buatlah empat titik point gambar yang ingin di ambil/maks. lihat keterangan gambar 7 di bawah ini :

Gambar 7

Pastikan anda masih berada pada posisi di compos timeline pada file gambar, dan tekan P pada keyboard maka akan muncul opsi Position lalu tekan tahan shift dan tekan Page Down satu kali. Kemudian klik icon stopwatch yang disamping Position maka akan muncul keyframe pada timeline dan tekan tahan lagi shift dan tekan Page Up, maka garis timeline akan mundur kebelakang. lalu rubah nilai Position yang paling ujung sampai anda melihat gambar ilustrasi hilang pada media banner tenggelam kebawaah atau anda juga bisa menarik gambar kebabawah sampai gambarnya hilang dan secara otomatis akan muncul keyframe baru lagi. Block semua keyframe pada timeline gambar dan tekan F9 (ini akan merubah gerakan animasi menjadi lebih soft). lihat pada gambar 8 di bawah ini.

Gambar 8

Setelah itu posisikan cursor anda pada teks di kotak compos timeline dan klik, atau anda bisa mengkliknya teksnya secara langsung pada kotak composition project. jika sudah tekan P pada keyboard dan opsi Position akan munul lalu tekan icon stopwatch keyframe akan muncul di timeline dan kemudian tekan tahan shift lalu tekan page down, setelah itu rubah nilai dari posisi vertical yang kedua sampai teks bergerak ke arah atas dan menghilang. jika sudah block semua keyframe dan tekan F9. lihat keterangan gambar 9 dibawah ini :

Gambar 9

Oke samapai disni jika kurang jelas anda dapat melihat video tutorialnya di akhir phostingan ini.

Kita lanjut lagi, sekarang kita akan tambahkan teks lainnya yakni "Klik Disini", dan sekedar informasi kalian dapat memunculkan semua keyframe dengan menekan U pada keyboard. 

Oke sobat, tekan G pada keyboard untuk mendapatkan text tool lalu arahkan cursor mouse dan ketikan "Klik Disini" pada media banner lalu posisikan sesuai keinginan anda mau di utara, selatan tenggara, barat daya bebas suka-suka tergantung kreativitas anda saja hehe. jika sudah mendapat posisi yang nyaman di mata tekan S pada keyboard opsi scale ankan muncul dan seperti biasa klik icon stopwatch untuk menaruh keyframe pada timeline, setelah itu tekan T di keyboard untuk memunculkan opsi opacity dan jangan lupa klik icon stopwatchnya lalau tekan U di keyboard untuk memunculkan semua opsi yang kita buat keyframenya yaitu scale dan opacity.

Jika sudah, rubah nilai scale dan opacity menjadi 0. dan tekan tahan shift lalu tekan page down untuk melompat ke multiple frame berikutnya dan rubah nilai opacity menjadi 100% dan nilai scale menjadi 120 atau menyesuaikan keinginan anda, dan block semua keyframe lalu tekan F9 untuk membuat gerakannya menjadi lebih dinamis, lihat keterangan pada gambar 10.

Gambar 10

Jika sudah, sekarang kita tinggal membuat scene penutupnya saja. Caranyapun cukup mudah arahkan cursor mouse ke atas dan klik layer/new/solid, atau tekan ctrl+y untuk shortcutnya. rubah warnanya sesuai dengan keinginan anda. pada contoh ini saya akan menyamakan saja warna solid layer dengan warna background yaitu #F3255A. jika sudah arahkan cursor mouse pada layer lalu klik kanan cari effect/transition/linear wipe. lihat keterangn gambar 11 di bawah ini :

Gambar 11

Jika sudah maka rubah nilai transition completion menjadi 0 dan tekan icon stopwatch untuk menaruh keyframe pada timeline, setelah itu tekan shit+page down dan rubah kembali nilai transition completion menjadi 100%, dan atur wipe angle sesuai keingan anda. lihat keterangan gambar 12 di bawah :

Gamber 12

Oke sobat, disini kita sudah selesai dengan after effect untuk melihat hasil sementara sebelum kita render dalam bentuk video FLV anda bisa melihatnya dengan mengklik icon warna hijau pada gambar di bawah ini :

Gambar 13

Jika dirasa semua sudah berjalan sesuai dengan keingan kita maka anda bisa langsung merendernya dalam bentuk Video dengan format FLV lalu kita import ke photoshop dan save file to web, dan juga anda bisa mengimportnya ke adobe flash player. 

Untuk merender file di after effect klik composition/add to render queue atau tekan ctrl+m. pada ouput module klik lossless dan pada format pilih FLV lalu okekan saja. pada output to pilih destinasi output rendernya taruh saja di desktop dan klik save, lalu klik render dan tunggu sampai selesai.

Jika sudah buka photoshop lalu klik file/import/video frames to layers maka akan muncul jendela baru klik oke saja. lalu klik file lagi dan pilih save for web atau tekan ctrl+shift+alt+s. anda dapat klik save langsung atau preview terlebih dahulu dan selesailah sudah apa yang ingin kita buat.

oke sobat saya rasa sudah selesai sesi kita kali ini jika ada yang kurang jelas silahkan bertanya di kolom komentar di bawah, atau fast respon hubungi saya di Twitter, FB, IG. mohon maaf jika ada kekurangannya, jika ada kritik dan sarannya silahkan saja ungkapkan, sekian dari saya terimakasih.

Simak Video tutorialnya :



Donwload project file :

Bagikan

Jangan lewatkan

Cara Membuat Banner Iklan Bergerak dengan After Effeck dan Photoshop
4/ 5
Oleh

Subscribe via email

Suka dengan artikel di atas? Tambahkan email Anda untuk berlangganan.