Podstawy After Effects: od pierwszej kompozycji do animacji, którą da się użyć na stronie

After Effects najlepiej zacząć od małego zadania, a nie od próby zrobienia kinowego intro. Dla strony firmowej, landing page’a albo reklamy zwykle wystarczy prosta animacja logo, ruchomy kadr produktu, krótki napis lub przejście między scenami. Jeśli opanujesz kompozycję, warstwy, keyframes i eksport, reszta programu przestaje wyglądać jak panel sterowania samolotem.

To jest praktyczny samouczek od zera: co kliknąć najpierw, czego nie ruszać na początku i jak przygotować animację, którą później da się normalnie wykorzystać w internecie.

Od czego zacząć w After Effects?

Najważniejsze są trzy pojęcia: kompozycja, warstwa i keyframe. Kompozycja to scena z rozmiarem, czasem trwania i liczbą klatek na sekundę. Warstwy to elementy w tej scenie: tekst, obraz, kształt, film, tło. Keyframes mówią programowi, że dana wartość ma zmienić się w czasie.

Na start ustaw kompozycję pod realny kanał użycia. Dla hero na stronie często wystarczy 1920 × 1080 lub 1600 × 900, 24 albo 25 fps i 5-8 sekund. Dla pionowej reklamy lepsze będzie 1080 × 1920. Nie projektuj „na wszelki wypadek” w ogromnej rozdzielczości, jeśli później i tak plik trafi do małego bloku na stronie.

Pierwsza prosta animacja krok po kroku

1. Utwórz nową kompozycję i nazwij ją jasno, na przykład hero-logo-6s.
2. Dodaj logo, tekst albo prosty kształt jako osobną warstwę.
3. Rozwiń właściwości Transform: Position, Scale, Rotation, Opacity.
4. Włącz stoper przy jednej właściwości, na przykład Opacity.
5. Ustaw pierwszy keyframe na 0%, przesuń czas o sekundę i ustaw drugi keyframe na 100%.
6. Dodaj delikatny ruch lub skalowanie, ale nie wszystko naraz.
7. Zaznacz keyframes i użyj łagodzenia ruchu, żeby animacja nie wyglądała mechanicznie.

Jeżeli po pięciu minutach masz ochotę dodać dziesięć efektów, zatrzymaj się. Na stronach WWW najczęściej wygrywa ruch prosty, krótki i czytelny. Animacja ma prowadzić oko, zamiast udowadniać, że znasz wszystkie menu programu.

Najczęstszy błąd początkujących: za dużo efektów

After Effects kusi gotowymi presetami, rozmyciem, glow, cząsteczkami i pseudo-3D. Problem w tym, że taki plik łatwo staje się ciężki, chaotyczny i trudny do wdrożenia na stronie. Jeśli animacja ma być elementem strony internetowej, trzymaj się kilku zasad:

• czas trwania krótki: zwykle 3-8 sekund,
• jedna główna akcja na scenę,
• czytelny kontrast tekstu,
• brak migania i agresywnych przejść,
• eksport w formacie pasującym do miejsca użycia.

Jak eksportować animację na stronę?

Najpierw zdecyduj, czy animacja ma być filmem, GIF-em, Lottie czy sekwencją obrazów. Film MP4/WebM jest dobry dla tła i krótkich demonstracji. Lottie sprawdza się przy lekkich ikonach i prostych wektorowych mikroanimacjach. GIF zwykle wygląda kusząco, ale często jest cięższy i brzydszy niż dobrze przygotowany film.

Przy eksporcie pilnuj wagi pliku tak samo mocno jak jakości. Animacja hero, która waży 25 MB, może wyglądać dobrze w projekcie, ale realnie spowolni pierwsze wrażenie na stronie. Lepiej przygotować krótszy wariant, dodać poster image i ładować materiał dopiero wtedy, gdy naprawdę jest potrzebny.

Mini-checklista przed publikacją

• Czy animacja ma jeden jasny cel?
• Czy po zatrzymaniu na dowolnej klatce nadal wygląda schludnie?
• Czy tekst jest czytelny na telefonie?
• Czy plik ma sensowną wagę?
• Czy ruch nie przeszkadza osobom wrażliwym na animacje?
• Czy istnieje statyczny fallback, jeśli film się nie załaduje?

Oficjalne materiały Adobe do nauki After Effects są dobrym miejscem, jeśli chcesz później przejść do stabilizacji, maskowania i bardziej zaawansowanych efektów. Na potrzeby strony firmowej najpierw dopracuj jednak podstawy: rytm, kompozycję i eksport.

Kiedy warto zlecić animację zamiast robić ją samemu?

Jeżeli animacja ma być częścią kampanii, identyfikacji wizualnej albo ważnego landing page’a, lepiej potraktować ją jak element projektu, nie ozdobę. Wtedy liczy się scenariusz ruchu, dobór formatów, wersja mobilna, kompresja i wdrożenie na stronie bez pogorszenia szybkości.

Dobry efekt nie musi być skomplikowany. Ma wyglądać świadomie, ładować się szybko i pomagać użytkownikowi zrozumieć, co jest ważne.

Źródło pomocnicze: Adobe Learn: After Effects.