Cara menambahkan motion graphics ke video
Cara menambahkan motion graphics ke video agar lebih informatif: 8 grafik yang tepat guna, aturan durasi, daftar shot 60 detik, dan 3 cara membuatnya.
Roozbeh Firoozmand11 menit baca
Kebanyakan video produk tidak butuh lebih banyak gerakan. Mereka butuh mata penonton tertuju ke tempat yang tepat di detik yang tepat. Saat Anda menambahkan motion graphics ke video, setiap grafik harus menjalankan 1 dari 2 fungsi: menunjukkan ke mana harus melihat, atau menjelaskan arti sesuatu. Selebihnya hanyalah dekorasi, dan dalam rekaman layar, dekorasi justru akan mengganggu UI yang sedang Anda jelaskan.
Di bawah ini: 8 grafik yang efektif, aturan durasi untuk masing-masing, daftar shot sebelum/sesudah untuk panduan 60 detik, dan 3 cara membuatnya.
Uji coba yang harus dilalui setiap grafik
Putar klip dengan grafik tersebut dan tanpa grafik tersebut. Apakah penonton menemukan tombol atau angka yang tepat lebih cepat dengan grafik itu? Jika jawaban jujurnya hanya "terlihat lebih bagus", hapus saja. 2 pemeriksaan tambahan ini dapat mengatasi sebagian besar kekacauan:
- Satu grafik yang bergerak dalam satu waktu. Beri jeda kemunculan setidaknya setengah detik, atau penonton tidak akan sempat membaca salah satunya.
- Grafik muncul bersamaan dengan narasi. Jika sulih suara mengatakan "klik Ekspor" dan sorotan muncul 2 detik kemudian, penonton sudah kebingungan. Munculkan tepat saat kata tersebut diucapkan, atau beberapa frame sebelumnya.
8 grafik yang tepat guna dalam rekaman layar
| Grafik | Fungsi | Aturan praktis |
|---|---|---|
| Callout (label teks) | Menamai objek di layar | 2 hingga 6 kata, muncul di layar setidaknya 2x waktu baca |
| Zoom + sorotan | Menunjukkan lokasi tindakan | Zoom sebelum klik, tahan 1 hingga 2 detik setelah klik |
| Penghitung langkah | Memberi tahu posisi penonton | Sudut yang sama, gaya yang sama, setiap langkah |
| Lower third | Menamai orang atau bagian | Sepertiga bawah, jangan menutupi UI yang didemonstrasikan |
| Kartu judul | Memisahkan bab | 2 hingga 3 detik, 1 baris teks |
| Panah animasi | Menunjuk sesuatu yang tidak bisa di-zoom | Munculkan, lalu diam |
| Penghitung data | Menegaskan angka | Hitung naik sekitar 1 detik, lalu tahan nilai akhir |
| Transisi | Menandai perubahan adegan atau topik | 1 gaya per video, di bawah setengah detik |
Callout
Callout harus menamai kontrol atau menyatakan hasil: "Pengaturan penagihan" atau "Faktur terkirim". Batasi hingga 6 kata. Panduan subtitle BBC merekomendasikan minimal sekitar 0,3 detik per kata untuk subtitle. Dalam rekaman layar, penonton Anda juga memindai antarmuka, jadi gandakan durasinya: callout 4 kata membutuhkan sekitar 2,5 detik, bukan 1,2.
Zoom + sorotan
Motion graphic paling berguna dalam rekaman layar, sekaligus yang paling sering disalahgunakan. Zoom 0,5 detik sebelum klik, tahan saat hasilnya muncul, lalu zoom out agar penonton tahu posisi mereka. Sorotan (kotak lembut atau latar belakang redup) melakukan fungsi yang sama tanpa menggerakkan frame, yang cocok untuk dasbor padat di mana zoom justru menyembunyikan konteks. Gunakan salah satu per tindakan.
Penghitung langkah
"Langkah 3 dari 5" di sudut tetap memberi tahu penonton berapa banyak yang tersisa. Pertahankan posisi dan gaya yang tetap, lalu ubah angkanya saja. Jika di bawah 3 langkah, lewati saja.
Lower third
Dalam video produk, lower third menamai presenter dalam gelembung kamera atau melabeli bagian ("Tampilan admin"). Perhatikan penempatan: bagian bawah sebagian besar aplikasi web berisi bilah simpan dan widget obrolan.
Kartu judul
Gunakan di antara bab, bukan di setiap langkah. Video 60 detik hanya butuh 1, di awal. Kartu judul yang butuh waktu lama untuk dibaca hanyalah paragraf yang berpura-pura menjadi grafik.
Panah animasi
Panah lebih baik daripada zoom saat 2 hal di layar saling berkaitan, seperti "tombol ini mengubah pratinjau itu". Biarkan muncul dalam sekitar 0,3 detik, lalu berhenti. Panah yang memantul akan menarik perhatian selama ia memantul.
Penghitung data
Menghitung hingga "1.240 tiket" memberikan bobot statistik dalam demo atau klip peluncuran. Jarang sekali cocok digunakan dalam video tutorial. Animasikan dengan cepat dan tahan angka akhirnya, atau gerakan tersebut justru akan menjadi satu-satunya hal yang diingat penonton.
Transisi
Gunakan 1 gaya per video, hanya saat adegan atau topik berubah. Antara 2 langkah di layar yang sama, potongan langsung (cut) biasanya yang terbaik. Hindari efek kilatan: kriteria keberhasilan WCAG tentang 3 kilatan atau kurang ada karena konten yang berkedip dapat memicu kejang dan migrain.
Aturan agar overlay animasi tetap konsisten
Overlay animasi terlihat profesional jika tampak seperti sebuah sistem:
1. Satu gaya gerakan. Easing yang sama, arah kemunculan yang sama, durasi yang sama untuk setiap callout. Jika callout muncul dari kiri di langkah 1, mereka harus muncul dari kiri di langkah 5. 2. Template merek, dibuat sekali. Font, warna, logo reveal, dan tata letak kartu judul harus ada dalam template tersimpan, bukan dibuat ulang per video. Setiap alat di bawah ini mendukung ini dalam beberapa bentuk. 3. Area aman. Jauhkan teks dari tepi frame dan dari kontrol UI yang Anda tunjukkan. Tandai area aman di template Anda. 4. Grafik mengikuti naskah. Tulis narasi terlebih dahulu, lalu tandai kata tempat grafik akan muncul. Tidak ada kata, tidak ada grafik.
Sebelum dan sesudah: daftar shot panduan 60 detik
Panduan 60 detik tentang "mengirim faktur pertama Anda" di aplikasi penagihan SaaS standar. "Sebelum" adalah rekaman mentah dengan sulih suara.
| Waktu | Sebelum (rekaman mentah) | Sesudah (dengan motion graphics) |
|---|---|---|
| 0:00–0:03 | Dasbor, kursor bergerak | Kartu judul: "Kirim faktur pertama Anda" dengan logo reveal, 3 detik |
| 0:03–0:10 | Narator menjelaskan tujuan di atas dasbor | Penghitung langkah muncul ("Langkah 1 dari 4"); sorotan pada tab Faktur saat narator menyebutkannya |
| 0:10–0:18 | Klik Faktur, halaman dimuat | Zoom pada tombol Faktur baru 0,5 detik sebelum klik; callout "Faktur baru" |
| 0:18–0:32 | Mengetik pelanggan, item baris, jumlah | Langkah 2 dari 4; zoom out untuk menampilkan formulir lengkap; blur pada email pelanggan asli |
| 0:32–0:40 | Menggulir ke tanggal jatuh tempo | Langkah 3 dari 4; panah dari kolom tanggal jatuh tempo ke pratinjau syarat pembayaran |
| 0:40–0:50 | Klik Kirim, toast konfirmasi | Langkah 4 dari 4; zoom pada toast; callout "Faktur terkirim", ditahan 2,5 detik |
| 0:50–0:57 | Narator menyebutkan pengingat | Transisi slide ke layar Pengingat; sorotan pada tombol toggle |
| 0:57–1:00 | Video berakhir di dasbor | Kartu akhir dengan judul video berikutnya, template sama dengan pembuka |
Itu adalah 16 peristiwa grafik dalam 60 detik. Cara ini berhasil karena kemunculannya diatur secara bertahap dan masing-masing bergantung pada kata dalam naskah. Efek blur digunakan untuk privasi, dan itu adalah satu-satunya grafik yang tidak boleh Anda lewatkan pada data pelanggan asli.
3 cara menambahkan motion graphics ke video
1. Editor tradisional: Premiere, After Effects, atau DaVinci Resolve
Adobe Premiere dengan After Effects. Template Motion Graphics (file .mogrt) dibuat di After Effects dan digunakan kembali di Premiere. Sesuai halaman bantuan Adobe, Anda menarik template dari panel Graphics Templates ke track video, lalu mengubahnya di tab Edit pada panel Properties. Template berbasis data mengisi grafik batang dan grafik garis dari data spreadsheet, yang merupakan cara paling bersih untuk mendapatkan penghitung data dan grafik yang akurat.
DaVinci Resolve. Halaman Fusion adalah komposer berbasis node di dalam Resolve, dengan lebih dari 200 alat. Anda dapat membuat lower third, latar belakang animasi, dan transisi di Fusion, menyimpannya sebagai makro, dan hanya menampilkan kontrol yang perlu diakses editor. Elemen tersebut kemudian muncul di pustaka efek halaman Edit untuk proyek apa pun. Resolve dapat diunduh secara gratis; Resolve Studio dibanderol seharga $295.
Terbaik untuk: tim dengan motion designer yang membuat templat sekali pakai, dan editor yang menggunakannya kembali. Kekurangan: zoom dan callout pada rekaman layar harus di-keyframe secara manual setiap saat.
2. Editor berbasis templat: Canva atau CapCut
Canva memungkinkan Anda menganimasikan halaman, elemen, dan teks dari tombol Animate, dengan preset Lambat, Sedang, atau Cepat, atau durasi intro dan outro yang presisi. "Tampilkan waktu elemen" memungkinkan Anda mengatur kapan setiap elemen muncul, dan "Buat Animasi" memungkinkan Anda menyeret elemen di sepanjang jalur gerak. Brand Kit menyimpan logo, warna, dan font agar templat tetap sesuai dengan brand.
CapCut memiliki pustaka templat teks dan animasi teks, dan di desktop Anda dapat melakukan keyframe pada posisi, skala, rotasi, dan opasitas. Begitulah cara Anda membuat zoom manual atau callout geser.
Terbaik untuk: pemasar yang sudah terbiasa dengan alat ini dan membutuhkan teks animasi di atas klip pendek. Kekurangan: keduanya tidak dirancang khusus untuk rekaman layar, jadi zoom yang mengikuti klik, pembersihan kursor, dan blur privasi harus dikerjakan secara manual.
3. Clevera: overlay pada timeline, atau ringkasan dalam kata-kata sederhana
Clevera memulai dari rekaman. Untuk video panduan dengan narasi AI dan demo produk, alat ini menghaluskan kursor, menyoroti interaksi utama, dan menerapkan zoom cerdas sembari menulis serta menyinkronkan sulih suara. Sebagian besar pekerjaan zoom + sorotan dalam daftar bidikan di atas selesai sebelum Anda membuka editor.
Di editor timeline, Anda kemudian dapat menambah atau menyesuaikan sisanya: teks, gambar, overlay blur dan highlighter, kartu judul, kartu intro, pengungkapan logo, zoom, dan transisi seperti zoom cross, staircase, blinds, dissolve, soft wipe, dan slide. Kartu judul, pengungkapan logo, dan gaya video disimpan sebagai templat bawaan atau kustom, sehingga video kedua terlihat seperti yang pertama. Jika Anda hanya ingin rekaman Anda sendiri diberi gaya dengan zoom, overlay, dan kartu judul, opsi bergaya (siap bagikan) tidak menggunakan kredit AI, jadi jumlahnya tidak terbatas pada setiap paket, termasuk Gratis (pada paket Gratis Anda berbagi melalui tautan atau sematan; unduhan MP4 tersedia dengan paket Starter dan Pro).
Untuk grafik di luar daftar tersebut, gunakan Jelaskan apa yang Anda inginkan di generator grafik gerak AI. Anda menulis ringkasan bentuk bebas, seperti "tambahkan penghitung animasi dari 0 hingga 1.240 pada 0:45 dan panah dari kolom tanggal jatuh tempo ke pratinjau ketentuan", dan Clevera membuat grafik animasi di atas video yang ada. Daftar overlay editor tidak menyertakan panah atau penghitung khusus, jadi ini adalah cara untuk membuatnya.
Edit pada teks, sorotan, dan blur pada video Clevera yang dipublikasikan akan memperbarui setiap tautan dan sematan yang dihosting, sehingga label tombol yang diganti namanya cukup diperbaiki sekali. UI baru tetap memerlukan rekaman baru.
Terbaik untuk: tim produk, dukungan, dan pemasaran yang membuat panduan setiap minggu tanpa editor. Kekurangan: perekam AI hanya menangkap situs web dan aplikasi web https publik, jadi rekaman perangkat lunak desktop dan intranet berasal dari aplikasi desktop atau unggahan. Dan lihat bagian berikutnya untuk pekerjaan yang tidak boleh dilakukan oleh alat ini.
Apa yang ditambahkan Clevera sendiri, dan apa yang tidak
Pada Oktober 2026, kami meminta perekam AI Clevera menangkap tugas singkat di aplikasi to-do demo, 0:58 rekaman mentah, dan mengubahnya menjadi video panduan. Sekitar 50 detik dan 9 kredit kemudian, timeline sudah berisi kartu intro, pengungkapan logo, dan zoom otomatis pada 1,5x dan 1,8x, dipotong menjadi 0:40. Itu adalah baris kartu judul dan zoom dari daftar bidikan yang selesai. Callout, penghitung langkah, dan panah tidak ada di sana; itu adalah bagian yang harus Anda tambahkan sendiri.
Kami kemudian menjalankan "Bergaya untuk dibagikan" pada rekaman yang sama dengan templat tim kami, bukan Default bawaan. Prosesnya memakan waktu sekitar 25 detik dan 0 kredit. Hasilnya berdurasi 1:07, lebih lama dari sumbernya karena kartu intro, dengan 2 zoom otomatis pada 1,8x dan editor terbuka di panel Gaya untuk latar belakang, padding, sudut, dan kursor. Halaman yang direkam itu sendiri terlihat pudar dan kontras rendah; panel Gaya membingkai rekaman, bukan memperbaikinya.
Versi 1:07 Bergaya untuk dibagikan dari rekaman yang sama, tanpa edit, 0 kredit.
Untuk rute ringkasan, ringkasan Kustom membuat infografis animasi berdurasi 1:00 dengan bilah pengisi dalam waktu sekitar 7 hingga 8 menit dengan 86 kredit. Angkanya benar, tetapi mengabaikan 15 detik yang tertulis dalam ringkasan (durasi diatur di menu Format) dan baris sumber muncul terlalu kecil untuk ponsel. Klip itu dibuat dari awal. Kami belum menguji grafik yang dilapisi pada rekaman yang ada.
Infografis animasi 1:00 yang dikembalikan Clevera dari ringkasan, tanpa edit.
Kapan motion designer layak dibayar
Editor AI dan templat mencakup grafik dalam panduan ini. Mereka tidak menggantikan motion designer untuk:
- Video hero peluncuran atau film brand di mana setiap bingkai diarahkan secara artistik dan gerakannya sendiri adalah pesannya.
- Grafik yang dilacak pada rekaman bergerak, seperti label yang mengikuti ponsel dalam bidikan genggam.
- 3D, animasi karakter, atau ilustrasi kustom dalam gerak.
- Sistem templat Anda. Waktu satu minggu seorang desainer untuk membangun lower third, kartu judul, dan pengungkapan logo Anda di After Effects atau Fusion akan terbayar di setiap video yang dibuat tim Anda setelahnya, di alat apa pun yang menerima templat.
Pembagian yang biasa: desainer untuk sistem dan peluncuran utama, alat AI atau editor templat untuk panduan mingguan.
Mulai dengan zoom
Jika Anda menambahkan satu hal ke rekaman layar Anda berikutnya, buatlah zoom yang mendarat setengah detik sebelum klik. Ini memperbaiki keluhan paling umum tentang video produk, "Saya tidak bisa melihat apa yang Anda klik", dan setiap grafik lain dalam panduan ini dibangun berdasarkan kebiasaan mengarahkan mata penonton ke tempat narasi menunjuk.
