Start A Business

Tutorial Membuat Banner Animasi dengan Photoshop

 

Loading...

Banner sebagai media promosi dalam media online, sangat mudah ditemui di internet. Mulai dari yang dibuat statis/diam, ataupun dibuat animasi/bergerak. Dibuat animasi sendiri agar banner dapat menampung banyak informasi, sekaligus untuk mendapatkan perhatian lebih dari pengunjung website.

Melalui tutorial berikut ini, kita akan mencoba membuat banner bergerak yang sederhana. Dengan beberapa teknik animasi dasar menggunakan aplikasi Photoshop. Saya memakai Photoshop CS3, jadi Anda bisa menggunakan versi yang lebih baru atau di atasnya. Ada 2 part pada tutorial kali ini, yang pertama kita buat desain banner iklan dan yang kedua kita mulai menganimasikan banner tersebut.

1. Buat lembar kerja baru

1

Pertama tama, Anda buat lembar kerja baru dan sesuaikan dengan kebutuhan Anda. Di sini saya membuat dengan ukuran 300×250 pixels, dan jangan lupa setting color mode pada pilihan RGB. Ukuran banner yang saya buat ini merupakan rekomendasi ukuran banner Google Adwords.

2. Mulai mendesain

2

Nah, sekarang kita bisa mulai mendesain banner iklan yang diinginkan. Masukkan kata-kata iklan yang telah Anda buat dalam lembar kerja, kemudian atur dan tata sedemikian rupa. Saya memisahkan tiap teks berdasar stylenya, untuk membuat animasi terpisah setiap teksnya.

Di sini saya membuat banner iklan tentang produk terbaru BEON.co.id yaitu WordPress Hosting Indonesia.

3. Tambahkan elemen gambar

3

Tambahkan ilustrasi pendukung kata-kata iklan Anda. Di sini saya menambahkan gambar sebuah laptop ditambahkan sedikit screenshot dari panel Admin wordpress.

4. Jangan lupa dengan Call to Action

4

Jangan pernah lupakan sebuah Call to Action dalam banner iklan Anda. Call to Action mengajak pengunjung yang selanjutnya diarahkan menuju landing website Anda. Dimana pengunjung website dapat melihat lebih detail informasi dari iklan yang Anda buat.

5. Terakhir LOGO

6

Agar lebih dikenali dan agar orang yang melihat banner kita lebih aware juga, sebuah logo wajib ada dalam banner iklan kita.

Setelah desain jadi, sekarang Anda bisa mulai menganimasikan banner Anda.

6. Buat Frame

Munculkan jendela animasi pada menu “Window > Animation”

Window Animation

 

Tambahkan satu frame, dengan cara klik icon “Duplicate Selected Frame”

Add Frame

Kemudian untuk menciptakan efek animasi Fade In pada konten banner. Pertama tama ubah Opacity layer menjadi 0% , pastikan Anda merubah opacity layer pada posisi frame 1

Disni saya menghilangkan layer teks , teks, dan gambar laptop

Transparant Layer

7. Membuat Animasi

Setelah itu, pilih layer 1 dan 2 pada timeline. Kemudian klik icon “Tween Animation Frames”.

Tweens animation frames

Selanjutnya akan muncul window Tween, pada window ini Anda bisa mengatur jumlah frame transisi sesuai kebutuhan Anda. Di sini menambahkan 10 frame transisi.

Window Tween

 

Frame transisi secara otomatis ditambahkan diantara frame 1 dan 2 yang kita pilih tadi.

 

Tween Frame Added

8. Cek Animasi

Untuk cek animasi yang telah dibuat, klik icon “Plays Animation”

Plays Animation

 

 

9. Kembangkan Animasi

Anda bisa menambahkan animasi selain yang saya contohkan di atas. Seperti dengan animasi bergeser. Caranya tidak jauh beda dari yang sebelumnya.

Tambahkan frame satu lagi pada frame terakhir, kemudian pindahkan posisi layer keluar dari lembar kerja Photoshop Anda.

Keluar Frame

Kemudian tambahkan tween untuk membuat transisi bergeser.

Cek animasi sekali lagi

10. Atur Frame Rate

Tambahkan jeda waktu ketika konten banner muncul, agar dapat dibaca.

Tambahkan jeda sesuai kebutuhan. Di sini saya menambahkan jeda hingga 5 detik, untuk memastikan konten banner terbaca.

Frame Rate

Anda juga bisa custom frame rate dengan memilih menu “Other…”

Cek animasi untuk kesekian kali :D

11. Save As

Save As banner dalam bentuk ekstensi .GIF

Pilih menu File > Save for Web & Devices… atau dengan menggunakan kombinasi keyboard “Alt+Shift+Ctrl+S”. Kemudian akan muncul window.

Save for Web

Anda bisa memainkan settingan pada window tersebut untuk mendapatkan hasil yang optimal. Karena bisanya banner GIF akan mempunyai ukuran file yang besar. Tergantung konten banner kita dan jumlah frame pada timeline. Foto laptop pada banner di atas merupakan salah satu penyebab yang membuat file banner menjadi besar sekali.

Setelah meng-export banner, sekarang waktunya Anda membuka file GIF di browser.

Selamat mencoba :))

Baca juga:

7 Tips Membuat Desain Logo yang Melegenda

Tren Logo 2014 : 30 Simple Logo dengan Gaya Negative Space

[Infografis] Belajar Asyik Membuat Logo Profesional

Loading...

Berikan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *