Jak dodać grafikę ruchomą do wideo
Jak dodać grafikę ruchomą do wideo, aby lepiej wyjaśniała: 8 grafik, które mają sens, zasady synchronizacji, 60-sekundowy scenopis i 3 sposoby ich tworzenia.
Roozbeh Firoozmand11 min czytania
Większość filmów produktowych nie potrzebuje więcej ruchu. Potrzebują tego, by wzrok widza w odpowiedniej sekundzie spoczął we właściwym miejscu. Kiedy dodajesz grafikę ruchomą do wideo, każda z nich powinna pełnić jedną z dwóch funkcji: pokazywać, gdzie patrzeć, lub wyjaśniać, co coś oznacza. Wszystko inne to dekoracja, a w nagraniu ekranu dekoracja konkuruje z interfejsem, który prezentujesz.
Poniżej: 8 grafik, które naprawdę się przydają, zasady ich synchronizacji, scenopis przed/po dla 60-sekundowego przewodnika oraz 3 sposoby ich tworzenia.
Test, który musi przejść każda grafika
Odtwórz klip z grafiką i bez niej. Czy dzięki niej widz szybciej znajduje właściwy przycisk lub liczbę? Jeśli uczciwa odpowiedź brzmi "wygląda ładniej", usuń ją. Dwie dodatkowe kontrole pozwolą wyeliminować większość bałaganu:
- Jedna animowana grafika w danym momencie. Rozdziel momenty ich pojawiania się o co najmniej pół sekundy, inaczej widz nie zauważy żadnej z nich.
- Grafika pojawia się wraz z narracją. Jeśli lektor mówi "kliknij Eksport", a podświetlenie pojawia się 2 sekundy później, widz już dawno zaczął szukać. Pokaż ją dokładnie w momencie wypowiedzenia słowa lub kilka klatek wcześniej.
8 grafik, które mają sens w nagraniu ekranu
| Grafika | Zadanie | Praktyczna zasada |
|---|---|---|
| Etykieta (tekst) | Nazywa element na ekranie | 2 to 6 words, na ekranie przez co najmniej 2x dłużej niż trwa czytanie |
| Zbliżenie + wyróżnienie | Pokazuje, gdzie wykonać działanie | Zrób zbliżenie przed kliknięciem, zatrzymaj je na 1 to 2 seconds po jego wykonaniu |
| Licznik kroków | Informuje widzów, na którym są etapie | Ten sam róg, ten sam styl, na każdym kroku |
| Belka dolna | Przedstawia osobę lub sekcję | Dolna tercja ekranu, z dala od prezentowanego interfejsu |
| Plansza tytułowa | Oddziela rozdziały | 2 to 3 seconds, 1 wiersz tekstu |
| Animowana strzałka | Wskazuje element, którego nie da się wyodrębnić zbliżeniem | Pojawia się, a potem pozostaje nieruchoma |
| Licznik danych | Pozwala wybrzmieć liczbie | Zwiększaj wartość przez około 1 second, a potem zatrzymaj na wartości końcowej |
| Przejście | Oznacza zmianę sceny lub tematu | 1 styl na film, poniżej pół sekundy |
Callouty
Callout powinien nazywać kontrolkę lub wskazywać wynik: "Ustawienia rozliczeń" lub "Faktura wysłana". Ogranicz się do 6 słów. Wytyczne BBC dotyczące napisów zalecają minimum około 0,3 sekundy na słowo. W nagraniu ekranu widz jednocześnie skanuje interfejs, więc podwój ten czas: 4-słowny callout potrzebuje około 2,5 sekundy, a nie 1,2.
Powiększenie + podświetlenie
Najbardziej użyteczna grafika ruchoma w nagraniu ekranu, a zarazem najczęściej nadużywana. Powiększ 0,5 sekundy przed kliknięciem, przytrzymaj, aż pojawi się wynik, a następnie pomniejsz, aby widz widział kontekst. Podświetlenie (delikatna ramka lub przyciemnienie tła) robi to samo bez przesuwania kadru, co sprawdza się w gęstych pulpitach nawigacyjnych, gdzie powiększenie ukrywa kontekst. Używaj jednego lub drugiego na akcję.
Liczniki kroków
"Krok 3 z 5" w stałym rogu mówi widzowi, ile zostało do końca. Zachowaj stałe miejsce i styl, zmieniając tylko liczbę. Poniżej 3 kroków – pomiń to.
Lower thirds (podpisy)
W wideo produktowym podpisy nazywają osobę w dymku z kamerą lub etykietują sekcję ("Widok administratora"). Uważaj na rozmieszczenie: dół większości aplikacji webowych zawiera paski zapisu i widżety czatu.
Plansze tytułowe
Używaj ich między rozdziałami, nie przy każdym kroku. 60-sekundowe wideo potrzebuje jednej, na początku. Plansza tytułowa, która wymaga czasu na czytanie, to akapit udający grafikę.
Animowane strzałki
Strzałka wygrywa z powiększeniem, gdy dwie rzeczy na ekranie są ze sobą powiązane, np. "ten przełącznik zmienia ten podgląd". Niech pojawi się w około 0,3 sekundy, a potem zatrzyma. Skacząca strzałka odciąga uwagę tak długo, jak długo skacze.
Liczniki danych
Odliczanie do "1240 zgłoszeń" nadaje statystyce wagę w demo lub klipie startowym. Rzadko pasuje do instrukcji. Animuj szybko i zatrzymaj na końcowej liczbie, inaczej widz zapamięta tylko ruch.
Przejścia
Używaj 1 stylu na wideo, tylko gdy zmienia się scena lub temat. Między dwoma krokami na tym samym ekranie zazwyczaj najlepsze jest zwykłe cięcie. Unikaj efektów błysku: kryterium sukcesu WCAG dotyczące 3 błysków lub mniej istnieje, ponieważ migające treści mogą wywoływać ataki epilepsji i migreny.
Zasady zapewniające spójność animowanych nakładek
Animowane nakładki wyglądają profesjonalnie, gdy tworzą system:
1. Jeden styl ruchu. To samo wygładzanie, ten sam kierunek wejścia, ten sam czas trwania dla każdego callouta. Jeśli callouty wsuwają się z lewej w kroku 1, wsuwają się z lewej w kroku 5. 2. Szablony marki, stworzone raz. Czcionki, kolory, animacja logo i układ planszy tytułowej powinny być w zapisanym szablonie, a nie budowane od nowa dla każdego wideo. Każde narzędzie poniżej wspiera to w jakiejś formie. 3. Bezpieczny obszar. Trzymaj tekst z dala od krawędzi kadru i kontrolek interfejsu, które pokazujesz. Zaznacz bezpieczny obszar w swoim szablonie. 4. Grafiki podążają za scenariuszem. Najpierw napisz narrację, potem zaznacz słowo, na którym zawieszasz każdą grafikę. Brak słowa, brak grafiki.
Przed i po: scenopis 60-sekundowego przewodnika
60-sekundowy przewodnik "wyślij swoją pierwszą fakturę" w typowej aplikacji SaaS do rozliczeń. "Przed" to surowe nagranie z lektorem.
| Czas | Przed (surowe nagranie) | Po (z animowaną grafiką) |
|---|---|---|
| 0:00–0:03 | Panel, kursor przesuwa się bez celu | Plansza tytułowa: "Wyślij pierwszą fakturę" z animowanym pojawieniem się logo, 3 seconds |
| 0:03–0:10 | Narrator wyjaśnia cel na tle panelu | Pojawia się licznik kroków ("Krok 1 of 4"); wyróżnienie karty Faktury, gdy narrator ją wymienia |
| 0:10–0:18 | Kliknięcie Faktur, ładowanie strony | Zbliżenie na przycisk Nowa faktura 0.5 seconds przed kliknięciem; etykieta "Nowa faktura" |
| 0:18–0:32 | Wpisywanie klienta, pozycji i kwoty | Krok 2 of 4; oddalenie, aby pokazać cały formularz; rozmycie prawdziwego adresu e-mail klienta |
| 0:32–0:40 | Przewijanie do terminu płatności | Krok 3 of 4; strzałka od pola terminu płatności do podglądu warunków płatności |
| 0:40–0:50 | Kliknięcie Wyślij, komunikat potwierdzający | Krok 4 of 4; zbliżenie na komunikat; etykieta "Faktura wysłana", widoczna przez 2.5 seconds |
| 0:50–0:57 | Narrator wspomina o przypomnieniach | Przejście do ekranu Przypomnienia; wyróżnienie przełącznika |
| 0:57–1:00 | Film kończy się na panelu | Plansza końcowa z tytułem kolejnego filmu, w tym samym szablonie co plansza początkowa |
To 16 zdarzeń graficznych w 60 sekund. Działa to, ponieważ wejścia są rozłożone w czasie, a każde z nich jest powiązane ze słowem w scenariuszu. Rozmycie służy prywatności i jest to jedyna grafika, której nigdy nie pomijasz przy prawdziwych danych klientów.
3 sposoby na dodanie grafiki ruchomej do wideo
1. Tradycyjny edytor: Premiere, After Effects lub DaVinci Resolve
Adobe Premiere z After Effects. Szablony Motion Graphics (pliki .mogrt) tworzy się w After Effects i używa ponownie w Premiere. Zgodnie ze stroną pomocy Adobe, przeciągasz szablon z panelu Szablony graficzne na ścieżkę wideo, a następnie zmieniasz go w zakładce Edycja panelu Właściwości. Szablony oparte na danych wypełniają wykresy słupkowe i liniowe danymi z arkusza kalkulacyjnego, co jest najczystszą drogą do dokładnych liczników danych i wykresów.
DaVinci Resolve. Strona Fusion to oparty na węzłach program do kompozycji wewnątrz Resolve, oferujący ponad 200 narzędzi. W Fusion możesz tworzyć dolne belki (lower thirds), animowane tła i przejścia, zapisywać je jako makra i udostępniać tylko te kontrolki, których edytor powinien używać. Pojawiają się one następnie w bibliotece efektów na stronie Edit w każdym projekcie. Resolve jest dostępny za darmo; Resolve Studio kosztuje 295 USD.
Najlepsze dla: zespołów z motion designerem, który raz tworzy szablony, oraz edytorów, którzy z nich korzystają. Wada: zbliżenia i objaśnienia (callouts) na nagraniu ekranu są za każdym razem ręcznie klatkowane.
2. Edytor oparty na szablonach: Canva lub CapCut
Canva pozwala animować strony, elementy i tekst za pomocą przycisku Animate, korzystając z ustawień wstępnych Slow, Medium lub Fast albo precyzyjnie określając czas trwania wejścia i wyjścia. „Pokaż czas trwania elementu” pozwala ustawić, kiedy każdy z nich się pojawi, a „Utwórz animację” umożliwia przeciąganie elementu wzdłuż ścieżki ruchu. Zestawy marki przechowują logotypy, kolory i czcionki, dzięki czemu szablony pozostają zgodne z identyfikacją wizualną.
CapCut posiada bibliotekę szablonów tekstowych i animacji tekstu, a na komputerze możesz klatkować pozycję, skalę, obrót i przezroczystość. W ten sposób stworzysz ręczne zbliżenie lub przesuwający się objaśniacz.
Najlepsze dla: marketerów, którzy już korzystają z tych narzędzi i potrzebują animowanego tekstu na krótkich klipach. Wada: żadne z nich nie jest stworzone z myślą o nagraniach ekranu, więc zbliżenia podążające za kliknięciami, czyszczenie kursora i rozmywanie prywatnych danych to ręczna robota.
3. Clevera: nakładki na osi czasu lub brief w kilku słowach
Clevera zaczyna od nagrania. W przypadku filmów instruktażowych z narracją AI i prezentacji produktów, wygładza kursor, podświetla kluczowe interakcje i stosuje inteligentne zbliżenia podczas pisania i synchronizacji lektora. Większość pracy związanej ze zbliżeniami i podświetleniami z powyższej listy ujęć jest wykonana, zanim jeszcze otworzysz edytor.
W edytorze osi czasu możesz następnie dodawać lub dostosowywać resztę: tekst, obrazy, rozmycia i nakładki podświetlające, plansze tytułowe, plansze wstępne, animacje logo, zbliżenia oraz przejścia, takie jak zoom cross, staircase, blinds, dissolve, soft wipe i slide. Plansze tytułowe, animacje logo i styl wideo zapisują się jako gotowe lub własne szablony, dzięki czemu drugie wideo wygląda jak pierwsze. Jeśli chcesz tylko, aby Twoje własne nagranie zostało wystylizowane za pomocą zbliżeń, nakładek i plansz tytułowych, opcja „Styled (share-ready)” nie zużywa kredytów AI, więc jest nielimitowana w każdym planie, w tym w wersji Free (w wersji Free udostępniasz przez link lub osadzenie; pobieranie MP4 jest dostępne w planach Starter i Pro).
W przypadku grafiki spoza tej listy użyj opcji Opisz, czego potrzebujesz w generatorze animowanej grafiki AI. Piszesz dowolny brief, np. „dodaj animowany licznik od 0 do 1240 w 0:45 oraz strzałkę od pola daty do podglądu warunków”, a Clevera buduje animowaną grafikę na istniejącym wideo. Lista nakładek w edytorze nie zawiera dedykowanej strzałki ani licznika, więc to jest właściwa droga dla takich elementów.
Edycje tekstu, podświetleń i rozmyć w opublikowanym wideo Clevera aktualizują każdy udostępniony link i osadzenie, więc zmiana nazwy przycisku jest poprawiana tylko raz. Nowy interfejs nadal wymaga nowego materiału wideo.
Najlepsze dla: zespołów produktowych, wsparcia i marketingu, które tworzą instrukcje co tydzień bez edytora. Wada: rejestrator AI przechwytuje tylko publiczne strony https i aplikacje internetowe, więc materiały z oprogramowania desktopowego i intranetu pochodzą z aplikacji desktopowej lub z przesłanego pliku. Zobacz kolejną sekcję, aby dowiedzieć się, czego nie powinno się robić za jego pomocą.
Co Clevera dodała sama, a czego nie
W październiku 2026 r. użyliśmy rejestratora AI Clevera do nagrania krótkiego zadania w demonstracyjnej aplikacji do zadań – 0:58 surowego materiału – i zamieniliśmy go w film instruktażowy. Około 50 sekund i 9 kredytów później oś czasu zawierała już planszę wstępną, animację logo i automatyczne zbliżenia 1.5x oraz 1.8x, przycięte do 0:40. To gotowa plansza tytułowa i rzędy zbliżeń z listy ujęć. Objaśnienia, licznik kroków i strzałki nie zostały dodane; to zadanie dla Ciebie.
Następnie uruchomiliśmy „Styled for sharing” na tym samym nagraniu, używając naszego szablonu zespołu zamiast wbudowanego Default. Zajęło to około 25 sekund i 0 kredytów. Wynik trwał 1:07, dłużej niż źródło ze względu na planszę wstępną, z 2 automatycznymi zbliżeniami 1.8x i otwartym panelem Style dla tła, marginesów, rogów i kursora. Sama nagrana strona wyglądała na wyblakłą i o niskim kontraście; panel Style obramowuje materiał, nie naprawia go.
Wersja 1:07 „Styled for sharing” tego samego nagrania, bez edycji, 0 kredytów.
W przypadku briefu, „Custom brief” stworzył 1:00 animowaną infografikę z paskiem postępu w około 7 do 8 minut za 86 kredytów. Liczby były poprawne, ale zignorował 15 sekund wpisane w briefie (długość ustawia się w menu Format), a linia źródłowa wyszła zbyt mała na telefon. Ten klip został zbudowany od zera. Nie testowaliśmy jeszcze grafiki nakładanej na istniejące nagranie.
Animowana infografika 1:00, którą Clevera zwróciła z briefu, bez edycji.
Kiedy warto zapłacić motion designerowi
Edytory AI i szablony pokrywają grafikę w tym przewodniku. Nie zastępują one motion designera w przypadku:
- Wideo promującego premierę lub filmu marki, gdzie każda klatka jest wyreżyserowana, a sam ruch jest przekazem.
- Grafiki śledzącej ruch na nagraniu, takiej jak etykieta podążająca za telefonem w ujęciu z ręki.
- Animacji 3D, animacji postaci lub niestandardowych ilustracji w ruchu.
- Twojego systemu szablonów. Tydzień pracy projektanta nad budową dolnych belek, plansz tytułowych i animacji logo w After Effects lub Fusion zwraca się przy każdym kolejnym wideo tworzonym przez Twój zespół, w każdym narzędziu obsługującym szablony.
Typowy podział: projektant do systemu i głównej premiery, narzędzie AI lub edytor szablonów do cotygodniowych instruktaży.
Zacznij od zbliżenia
Jeśli masz dodać jedną rzecz do swojego kolejnego nagrania ekranu, niech to będzie zbliżenie, które kończy się pół sekundy przed kliknięciem. Rozwiązuje to najczęstszą skargę dotyczącą filmów produktowych: „Nie widziałem, w co kliknąłeś”, a każda inna grafika w tym przewodniku opiera się na nawyku kierowania wzroku widza tam, gdzie wskazuje narracja.
