Videolara hareketli grafikler nasıl eklenir
Videolara daha açıklayıcı olması için hareketli grafikler nasıl eklenir: Yerini hak eden 8 grafik, zamanlama kuralları, 60 saniyelik bir çekim listesi ve bunları oluşturmanın 3 yolu.
Roozbeh Firoozmand10 dk okuma
Çoğu ürün videosunun daha fazla harekete ihtiyacı yoktur. İzleyicinin gözünün doğru saniyede doğru yere odaklanmasına ihtiyaçları vardır. Videoya hareketli grafik eklediğinizde, her biri şu 2 işten birini yapmalıdır: nereye bakılacağını göstermek veya bir şeyin ne anlama geldiğini söylemek. Bunun dışındaki her şey süslemedir ve ekran kaydında süsleme, öğrettiğiniz arayüzle rekabet eder.
Aşağıda: işlevsel 8 grafik, her biri için zamanlama kuralları, 60 saniyelik bir anlatım için öncesi/sonrası çekim listesi ve bunları oluşturmanın 3 yolu yer alıyor.
Her grafiğin geçmesi gereken test
Klibi grafikli ve grafiksiz oynatın. İzleyici doğru düğmeyi veya sayıyı grafikle daha mı hızlı buluyor? Dürüst cevap "daha hoş görünüyor" ise, onu çıkarın. Şu 2 kontrol daha çoğu karmaşayı yakalar:
- Aynı anda sadece bir grafik hareket etsin. Girişleri en az yarım saniye arayla yapın, aksi takdirde izleyici hiçbirini okuyamaz.
- Grafik anlatımla birlikte gelsin. Seslendirme "Dışa Aktar'a tıklayın" diyorsa ve vurgu 2 saniye sonra geliyorsa, izleyici zaten arayışa girmiştir. Grafiği kelimeyle aynı anda veya birkaç kare öncesinde getirin.
Ekran kaydında yerini hak eden 8 grafik
| Grafik | İşlev | İpucu |
|---|---|---|
| Açıklama (metin etiketi) | Ekrandaki öğeyi isimlendirir | 2-6 kelime, ekranda en az okuma süresinin 2 katı kadar kalmalı |
| Yakınlaştırma + vurgu | Aksiyonun nerede olduğunu gösterir | Tıklamadan önce yakınlaştırın, tıklandıktan sonra 1-2 saniye tutun |
| Adım sayacı | İzleyicilere nerede olduklarını söyler | Her adımda aynı köşe, aynı stil |
| Alt bant | Bir kişiyi veya bölümü isimlendirir | Alt kısımda, gösterdiğiniz arayüzü kapatmayacak şekilde |
| Başlık kartı | Bölümleri birbirinden ayırır | 2-3 saniye, 1 satır metin |
| Hareketli ok | Yakınlaştırmanın odaklayamadığı bir yeri işaret eder | Çizdirin ve sabit bırakın |
| Veri sayacı | Bir sayının etkisini artırır | Yaklaşık 1 saniyede saydırın, sonra son değerde tutun |
| Geçiş | Sahne veya konu değişimini belirtir | Video başına 1 stil, yarım saniyenin altında |
Açıklamalar
Bir açıklama, kontrolü isimlendirmeli veya sonucu belirtmelidir: "Fatura ayarları" veya "Fatura gönderildi". 6 kelimeyle sınırlı tutun. BBC'nin altyazı kılavuzları, altyazılar için kelime başına en az 0,3 saniye önerir. Ekran kaydında izleyiciniz aynı zamanda arayüzü de taradığı için bunu ikiye katlayın: 4 kelimelik bir açıklama 1,2 değil, yaklaşık 2,5 saniyeye ihtiyaç duyar.
Yakınlaştırma + vurgu
Ekran kaydındaki en kullanışlı ve en çok suistimal edilen hareketli grafik. Tıklamadan 0,5 saniye önce yakınlaştırın, sonuç görünene kadar tutun, ardından izleyicinin nerede olduğunu görmesi için uzaklaştırın. Vurgu (yumuşak bir kutu veya karartılmış çevre), çerçeveyi hareket ettirmeden aynı işi yapar; bu, yakınlaştırmanın bağlamı gizlediği yoğun paneller için uygundur. Eylem başına birini veya diğerini kullanın.
Adım sayaçları
Sabit bir köşedeki "5 adımın 3'ü" ifadesi, izleyiciye ne kadar kaldığını söyler. Konumu ve stili sabit tutun, sadece sayıyı değiştirin. 3 adımdan az ise kullanmayın.
Alt bantlar
Ürün videolarında alt bantlar, kamera balonundaki sunucuyu isimlendirir veya bir bölümü etiketler ("Yönetici görünümü"). Yerleşime dikkat edin: çoğu web uygulamasının alt kısmı kaydetme çubukları ve sohbet araçları içerir.
Başlık kartları
Her adımda değil, bölümler arasında kullanın. 60 saniyelik bir videonun başında 1 tane olması yeterlidir. Okunması için zaman gereken bir başlık kartı, grafik kılığına girmiş bir paragraftır.
Hareketli oklar
Ekranda iki şey birbiriyle ilişkiliyse (örneğin "bu anahtar önizlemeyi değiştirir"), ok yakınlaştırmadan daha iyidir. Yaklaşık 0,3 saniyede çizilmesini sağlayın ve durdurun. Zıplayan bir ok, zıpladığı sürece dikkat çeker.
Veri sayaçları
"1.240 bilet"e kadar saydırmak, bir demo veya lansman klibinde istatistiğe ağırlık katar. Nasıl yapılır videolarında nadiren yeri vardır. Hızlıca canlandırın ve son sayıda tutun, aksi takdirde izleyicinin aklında kalan tek şey hareket olur.
Geçişler
Video başına 1 stil kullanın ve sadece sahne veya konu değiştiğinde uygulayın. Aynı ekrandaki iki adım arasında genellikle kesme (cut) en iyisidir. Flaş efektlerinden kaçının: 3 flaş veya altı hakkındaki WCAG başarı kriteri, yanıp sönen içeriğin nöbetleri ve migreni tetikleyebilmesi nedeniyle mevcuttur.
Hareketli katmanları tutarlı tutan kurallar
Hareketli katmanlar bir sistem gibi göründüklerinde profesyonel dururlar:
1. Tek bir hareket stili. Her açıklama için aynı yumuşatma, aynı giriş yönü, aynı süre. Açıklamalar 1. adımda soldan kayarak geliyorsa, 5. adımda da soldan kayarak gelmelidir. 2. Bir kez oluşturulan marka şablonları. Yazı tipleri, renkler, logo açılışı ve başlık kartı düzeni, video başına yeniden oluşturulmak yerine kayıtlı bir şablonda bulunmalıdır. Aşağıdaki her araç bunu bir şekilde destekler. 3. Güvenli alan. Metni çerçeve kenarlarından ve gösterdiğiniz arayüz kontrollerinden uzak tutun. Şablonunuzda güvenli alanı işaretleyin. 4. Grafikler senaryoyu takip eder. Önce seslendirmeyi yazın, ardından her grafiğin asılı kalacağı kelimeyi işaretleyin. Kelime yoksa, grafik de yok.
Öncesi ve sonrası: 60 saniyelik bir anlatım çekim listesi
Tipik bir SaaS faturalandırma uygulamasında "ilk faturanızı gönderin" konulu 60 saniyelik bir anlatım. "Öncesi", seslendirmeli ham kayıttır.
| Süre | Öncesi (ham kayıt) | Sonrası (hareketli grafiklerle) |
|---|---|---|
| 0:00–0:03 | Panel, imleç geziniyor | Başlık kartı: Logo açılışıyla "İlk faturanızı gönderin", 3 saniye |
| 0:03–0:10 | Anlatıcı hedefi panel üzerinde açıklıyor | Adım sayacı görünür ("4 adımın 1'i"); anlatıcı isimlendirirken Faturalar sekmesinde vurgu |
| 0:10–0:18 | Faturalar'a tıkla, sayfa yükleniyor | Tıklamadan 0,5 saniye önce Yeni fatura düğmesine yakınlaştırma; "Yeni fatura" açıklaması |
| 0:18–0:32 | Müşteri, kalemler, tutar giriliyor | 4 adımın 2'si; formu tam göstermek için uzaklaştırma; gerçek müşteri e-postasına bulanıklık |
| 0:32–0:40 | Son ödeme tarihine kaydırma | 4 adımın 3'ü; son ödeme tarihi alanından ödeme koşulları önizlemesine ok |
| 0:40–0:50 | Gönder'e tıkla, onay bildirimi | 4 adımın 4'ü; bildirime yakınlaştırma; "Fatura gönderildi" açıklaması, 2,5 saniye tutulur |
| 0:50–0:57 | Anlatıcı hatırlatıcılardan bahsediyor | Hatırlatıcılar ekranına kaydırmalı geçiş; anahtarda vurgu |
| 0:57–1:00 | Video panelde bitiyor | Bir sonraki video başlığıyla bitiş kartı, açılışla aynı şablon |
Bu, 60 saniyede 16 grafik olayı demektir. Girişler kademeli olduğu ve her biri senaryodaki bir kelimeye bağlı olduğu için işe yarar. Bulanıklık gizlilik içindir ve gerçek müşteri verilerinde asla atlamamanız gereken tek grafiktir.
Videolara hareketli grafik eklemenin 3 yolu
1. Geleneksel bir düzenleyici: Premiere, After Effects veya DaVinci Resolve
After Effects ile Adobe Premiere. Hareketli Grafik şablonları (.mogrt dosyaları) After Effects'te oluşturulur ve Premiere'de yeniden kullanılır. Adobe'nin yardım sayfasına göre, Grafik Şablonları panelinden bir şablonu video kanalına sürükler, ardından Özellikler panelinin Düzenle sekmesinden değiştirirsiniz. Veri odaklı şablonlar, çubuk grafikleri ve çizgi grafikleri elektronik tablo verileriyle doldurur; bu, doğru veri sayaçları ve grafikler için en temiz yoldur.
DaVinci Resolve. Fusion sayfası, Resolve içinde 200'den fazla araç sunan düğüm tabanlı bir kompozitördür. Fusion'da alt bantlar, hareketli arka planlar ve geçişler oluşturabilir, bunları makro olarak kaydedebilir ve yalnızca bir editörün dokunması gereken kontrolleri görünür kılabilirsiniz. Bunlar daha sonra herhangi bir proje için Düzenleme sayfasının efekt kütüphanesinde görünür. Resolve ücretsiz indirilebilir; Resolve Studio'nun liste fiyatı 295$'dır.
En uygun olduğu durum: Şablonları bir kez oluşturan bir hareket tasarımcısına ve bunları yeniden kullanan editörlere sahip ekipler. Dezavantajı: Ekran kaydındaki yakınlaştırmalar ve açıklamalar her seferinde manuel olarak ana karelenmelidir.
2. Şablon tabanlı bir editör: Canva veya CapCut
Canva, Animate düğmesini kullanarak sayfaları, öğeleri ve metinleri canlandırmanıza olanak tanır; Yavaş, Orta veya Hızlı ön ayarları ya da tam giriş ve çıkış süreleri mevcuttur. "Öğe zamanlamasını göster" her öğenin ne zaman görüneceğini ayarlamanızı sağlar, "Animasyon Oluştur" ise bir öğeyi hareket yolu boyunca sürüklemenize olanak tanır. Marka Kitleri, logoları, renkleri ve yazı tiplerini saklayarak şablonların marka kimliğine uygun kalmasını sağlar.
CapCut, bir metin şablonları ve metin animasyonları kütüphanesine sahiptir ve masaüstünde konum, ölçek, döndürme ve opaklığı ana kareleyebilirsiniz. Manuel bir yakınlaştırma veya kayan bir açıklama kutusunu bu şekilde oluşturursunuz.
En uygun olduğu durum: Zaten bu araçları kullanan ve kısa klipler üzerinde hareketli metne ihtiyaç duyan pazarlamacılar. Dezavantajı: Hiçbiri ekran kayıtları için özel olarak tasarlanmamıştır, bu nedenle tıklamaları takip eden yakınlaştırmalar, imleç temizleme ve gizlilik bulanıklaştırma işlemleri manuel olarak yapılır.
3. Clevera: zaman çizelgesi üzerinde katmanlar veya düz bir dille özet
Clevera kayıttan başlar. AI destekli nasıl yapılır videoları ve ürün demoları için imleci yumuşatır, temel etkileşimleri vurgular ve seslendirmeyi yazıp senkronize ederken akıllı yakınlaştırma uygular. Yukarıdaki çekim listesindeki yakınlaştırma ve vurgulama işlerinin çoğu, editörü açmadan önce tamamlanır.
Zaman çizelgesi editöründe, geri kalanını ekler veya ayarlarsınız: metin, görsel, bulanıklaştırma ve vurgulayıcı katmanları, başlık kartları, giriş kartları, logo gösterimleri, yakınlaştırmalar ve yakınlaştırmalı çapraz geçiş, merdiven, panjur, çözülme, yumuşak silme ve kaydırma gibi geçişler. Başlık kartları, logo gösterimleri ve video stili hazır veya özel şablonlar olarak kaydedilir, böylece ikinci video ilkiyle aynı görünür. Yalnızca kendi kaydınızın yakınlaştırmalar, katmanlar ve başlık kartlarıyla stillendirilmesini istiyorsanız, stillendirilmiş (paylaşıma hazır) seçenek AI kredisi kullanmaz, bu nedenle Ücretsiz dahil her planda sınırsızdır (Ücretsiz planda bağlantı veya gömme ile paylaşırsınız; MP4 indirmeleri Starter ve Pro planlarında mevcuttur).
Bu listenin dışındaki grafikler için AI hareketli grafik oluşturucuda Ne istediğinizi tarif edin özelliğini kullanın. "0:45'te 0'dan 1.240'a kadar hareketli bir sayaç ve son tarih alanından terimler önizlemesine bir ok ekle" gibi serbest bir özet yazarsınız ve Clevera mevcut videonun üzerine hareketli grafikler oluşturur. Editörün katman listesinde özel bir ok veya sayaç bulunmadığından, bunlar için bu yöntem kullanılır.
Yayınlanmış bir Clevera videosundaki metin, vurgu ve bulanıklaştırma düzenlemeleri tüm barındırılan bağlantıları ve gömülü videoları günceller, böylece yeniden adlandırılan bir düğme etiketi bir kez düzeltilir. Yeni kullanıcı arayüzü hala yeni çekim gerektirir.
En uygun olduğu durum: Her hafta editör olmadan rehber videolar hazırlayan ürün, destek ve pazarlama ekipleri. Dezavantajı: AI kaydedici yalnızca herkese açık https web sitelerini ve web uygulamalarını yakalar, bu nedenle masaüstü yazılımı ve intranet görüntüleri masaüstü uygulamasından veya yükleme yoluyla gelir. Ayrıca, yapmaması gereken işler için bir sonraki bölüme bakın.
Clevera'nın kendi başına ekledikleri ve eklemedikleri
Ekim 2026'da, Clevera'nın AI kaydedicisiyle bir demo yapılacaklar uygulamasında kısa bir görevi, 0:58'lik ham görüntüyü yakaladık ve bir nasıl yapılır videosuna dönüştürdük. Yaklaşık 50 saniye ve 9 kredi sonra, zaman çizelgesinde zaten bir giriş kartı, logo gösterimi ve 1.5x ile 1.8x'te otomatik yakınlaştırmalar vardı ve 0:40'a kısaltılmıştı. Çekim listesindeki başlık kartı ve yakınlaştırma satırları tamamlanmıştı. Açıklama kutuları, adım sayacı ve oklar yoktu; onları eklemek size kalmış.
Ardından, aynı kayıt üzerinde yerleşik Varsayılan yerine ekip şablonumuzla Paylaşım için stillendir özelliğini çalıştırdık. Yaklaşık 25 saniye sürdü ve 0 kredi harcadı. Çıktı, giriş kartı nedeniyle kaynak videodan daha uzun, 1:07 sürdü; 1.8x'te 2 otomatik yakınlaştırma vardı ve editör arka plan, dolgu, köşeler ve imleç için Stil panelinde açıktı. Kaydedilen sayfanın kendisi soluk ve düşük kontrastlı görünüyordu; Stil paneli görüntüleri çerçeveler, düzeltmez.
Aynı kaydın 1:07'lik, düzenlenmemiş, 0 kredilik Paylaşım için stillendirilmiş versiyonu.
Özet yöntemi için, Özel bir özet yaklaşık 7 ila 8 dakikada 86 kredi karşılığında dolan bir çubukla 1:00'lik bir hareketli infografik oluşturdu. Sayılar doğruydu ancak özette yazılan 15 saniyeyi görmezden geldi (uzunluk Biçim menüsünden ayarlanır) ve kaynak satırı telefon için çok küçük çıktı. Bu klip sıfırdan oluşturuldu. Mevcut bir kayıt üzerine katmanlanan grafikleri henüz test etmedik.
Clevera'nın özetten döndürdüğü, düzenlenmemiş 1:00'lik hareketli infografik.
Bir hareket tasarımcısına ne zaman para ödenir
AI editörleri ve şablonlar bu kılavuzdaki grafikleri kapsar. Aşağıdaki durumlar için bir hareket tasarımcısının yerini tutmazlar:
- Bir lansman tanıtım videosu veya marka filmi: Her karenin sanat yönetmenliğinin yapıldığı ve hareketin bizzat mesaj olduğu durumlar.
- Hareketli görüntüler üzerinde izlenen grafikler: Elde çekilen bir görüntüde telefonu takip eden bir etiket gibi.
- 3D, karakter animasyonu veya özel hareketli illüstrasyon.
- Şablon sisteminiz. Bir tasarımcının After Effects veya Fusion'da alt bantlarınızı, başlık kartlarınızı ve logo gösteriminizi oluşturması için harcadığı bir haftalık süre, şablon kabul eden her araçta ekibinizin yaptığı her videoda karşılığını verir.
Genel iş bölümü: sistem ve amiral gemisi lansman için bir tasarımcı, haftalık rehber videolar için bir AI aracı veya şablon editörü.
Yakınlaştırma ile başlayın
Bir sonraki ekran kaydınıza tek bir şey ekleyecekseniz, tıklamadan yarım saniye önce gerçekleşen bir yakınlaştırma ekleyin. Ürün videolarıyla ilgili en yaygın şikayet olan "Nereye tıkladığını göremedim" sorununu çözer ve bu kılavuzdaki diğer tüm grafikler, izleyicinin gözünü seslendirmenin işaret ettiği yere odaklama alışkanlığı üzerine inşa edilir.
