Animacja zrobiona prosto: koncepcja - tekst i dźwięk.

Witajcie na szkoleniu "Animacja w After Effects" od PSD-Tutorials.de. Jestem Philipp Sniechota i poprowadzę was przez to szkolenie.




Chcę zanurzyć się w świat animacji razem z wami na podstawie projektu praktycznego i sprawdzić, na czym polega dobra animacja.

Będziemy wykorzystywać Adobe After Effects jako narzędzie i nie będziemy się skupiać na podstawach. Nie nauczymy się, jak tworzyć kompozycje, korzystać z pól kolorów czy stosować efekty, ale zainteresujemy się tym, co sprawia, że animacja jest dobra. Wiedza, którą zdobędziecie tutaj, będzie miała zastosowanie w wielu dziedzinach. Nawet nie musicie myśleć o pracach 2D w After Effects. Możecie sięgać po animacje 3D oraz animacje postaci.

Szkolenie to jest interesujące dla każdego, kto interesuje się motion designem i ma styczność z animacją w swojej pracy.


Razem stworzymy projekt, który nazwałem "Animacja w prosty sposób". Zrobimy krótki zwiastun, sam się zajmujący animacją. Stopniowo będziemy określać, co to są piękne ruchy, na co zwracać uwagę i jakie zasady warto przestrzegać i stosować w After Effects. Chodzi o to, jak działa realizacja, jakie mam dla was wskazówki i o co należy dbać.

Projekt praktyczny jest bardzo oszczędny stylowo. Pracowałem tylko z dwoma kolorami, nie tworzyłem dużych ilustracji i ogólnie wszystko trzymałem w prostocie. Stylowo wróciłem nawet do czasów, gdy obrazy zaczęły się ruszać.

Wiedza na temat animacji, którą wam przekazuję, istnieje już od prawie 100 lat i od tego czasu korzystają z niej Walt Disney, Pixar i inne duże studia animacji.

Chcę odkryć z wami ten świat i uczynić to w sposób jak najbardziej przystępny, abyście na końcu zrozumieli esencję dobrej animacji. Z odpowiednim treningiem, bo to też jest niezbędne, możecie wzbogacić swoje projekty wideo o wiele.

W tym duchu życzę wam dużo zabawy z tym szkoleniem, owocnego czasu i spotkamy się zaraz, gdy będziemy rozmawiać o podstawach animacji, czyli o podstawach twórczości Walta Disneya, "Zasadach Disneya - Część 1", a następnie przejdziemy do koncepcji kolorystycznej.

Zanim rozpoczniemy i zanurzymy się w After Effects, chciałbym zgubić kilka zdań na temat koncepcji, czyli kilku zdań o tym, co robić, zanim się zacznie.

Należy zastanowić się, w jakim kierunku chcesz pójść stylowo i jaki efekt lub jaki nastrój chcesz przekazać.

Postanowiłem, że odchodzimy od tego błyszczącego motion designu i lśniących sfer, które znamy dzisiaj, od Sky i amerykańskiej telewizji. Wróćmy krok wstecz do czasów, gdy animacja zaczęła się rozwijać, do czasów kreskówek i Zasad Disneya, i nadajmy naszemu filmowi lekki wygląd z akcentem w kierunku kreskówkowym.

Oczywiście nie chcemy tworzyć animacji kreskówkowej, bo byłoby to zbyt czasochłonne i chcemy pracować z After Effects. Naśladujemy więc stylizację kreskówki i przenosimy ją do After Effects. Co nam w tym pomoże?

Krok 1

W tym przypadku zdecydowałem się już na font odręczny. Ten font nie jest narysowany odręcznie przeze mnie, ale jest czcionką dostępną pod nazwą Amatic na stronie fontsquirrel.com. Dzięki twórcy Vernonowi Adamsowi.





Mamy wielkie litery i małe litery, choć wszystkie zapisane są wielką literą, dzięki czemu mamy dwie wersje czcionki. Małe litery to nowo narysowane wersje wielkich liter.

Ładny font, który bardzo dobrze się animuje.





Pokażę wam to w jednym z kolejnych poradników, jak to zrobić, aby wyglądało tak, jak gdyby każda klatka była naprawdę ręcznie narysowana.

Najpierw pobiorę ten font i go zainstaluję.

Krok 2

Aby jeszcze bardziej nawiązać do czasów, gdy obrazy zaczęły się ruszać i film zaczął się rozwijać, około 1900 roku, zdecydowałem się również na wprowadzenie muzyki w tym kierunku. Ragtime przypomina o Charlym Chaplinie, o Stanisławie i Lois oraz o wszystkich tych początkowych próbach filmów telewizyjnych i oczywiście przemysłu animacyjnego.

Odpowiednią melodię znalazłem na Incompetech.com od Kevina MacLeoda. Niesamowity facet, obecny od marca 2006 roku i oferujący na swojej stronie naprawdę wiele piosenek i stylów muzycznych. Zwłaszcza nowe rzeczy są świetne, a także nagrał "Fig Leaf Rag", klasyka Scotta Joplina, klasycznego dla filmów niemych.





Dokładnie taką stylizację szukałem. Ta melodia ma także piękne akcenty, co zawsze jest dobre dla animacji. Mamy zatem określone fragmenty, które można "ugrać" z muzyką. W tych fragmentach możemy fantastycznie animować i tworzyć niemalże rozdziały.

Pobiorę ten utwór muzyczny.

Krok 3

Pod względem kolorystycznym zdecydowałem, że pozostanie on stosunkowo zredukowany do niebieskiego w połączeniu z żółtym, więc użyjemy tylko dwóch odcieni, które są ze sobą komplementarne i dzięki temu wyróżniają się od siebie bardzo dobrze.

To działa również bardzo dobrze w obie strony, czyli żółty tekst na niebieskim tle lub niebieski tekst na żółtym tle. Dzięki temu mogę bawić się, dzieląc wideo i tworząc rozdziały, zmieniając oba kolory w środku animacji, aby na przykład stworzyć wizualny podział pomiędzy pozycją wyjaśniającą i pytającą. To bardzo się do tego nadaje.

Krok 4

Chcemy utworzyć ustawienia i najpierw utworzyć plik projektu, abyśmy mogli pięknie animować i skupić się na tym.

Otwieramy After Effects i wyciągamy stamtąd ponownie z folderu dźwiękowego "Fig Leaf Rag" i importujemy go do After Effects.





Czas trwania pokazuje 3:29, ale oczywiście wideo nie będzie trwało tak długo. Zakończymy kawałek po około pół minuty.

Krok 5

Aby rozpocząć, przeciągnij "Fig Leaf Rag" na ikonę kompozycji i tym samym wygeneruj kompozycję.

Sprawdzam prawym przyciskiem myszy lub Ctrl+K ustawienia Kompozycji. Jest wszystko w porządku: Wybieramy Predefinicje: 720 25, czyli rozdzielczość HD z 25 klatkami na sekundę (Framerate), ponieważ znajdujemy się w Europie.

Długość zostawiamy taką, mamy więc miejsce z tyłu. Na razie nie musimy się tym martwić. Potwierdzamy to klikając OK.

Krok 6

Czcionka jest zainstalowana i ustawiona: Amatic SC.

Piszę "Animacja prosta" i zmieniam trochę rozmiar czcionki.

Mała wskazówka na tym etapie: Zawsze sugeruję regulowanie rozmiaru czcionki w panelu. Widzę bowiem, że ludzie często piszą tekst, a następnie chwytają go za uchwyty i przesuwają, przytrzymując klawisz Shift-, aby powiększyć. Odradzam to, ponieważ tak naprawdę zmieniacie skalę warstwy. Jeśli chodzi o jakość, nie jest to problem, ponieważ teksty w After Effects są wektorowe, ale trochę trudno jest utrzymać spójny wygląd różnych tekstów - nie powinno być zbyt wielu rozmiarów czcionek. I wtedy trudno jest dopasować je do tej samej wielkości.





Skalowanie zalecam pozostawić na dodawanie efektów i przybliżanie. Do kompozycji i podstawowego układu zalecam korzystanie z palety znaków i rozmiaru czcionki.

Mam dla was jeszcze jedną wskazówkę dotyczącą pracy z tekstem:

Podczas umieszczania kursora w tekście można dostosować odstęp pomiędzy poszczególnymi literami, czyli odstęp międzyliterowy (nazywany także międzyliterowym lub krerningiem), bardzo wygodnie w pojedynkę.

Często widzę ludzi, którzy używają suwaka w panelu - gdy zaznaczę wszystko, mam pełną szerokość międzyliterową - i starają się korektować tekst. Jest to masochistyczny sposób postępowania. Za pomocą Alt+strzałki w lewo lub prawo można to zrobić naprawdę łatwo i wygodnie, pozostając pośrodku tekstu. Mogę pięknie dostosować odstęp międzyliterowy tekstu, aż mi się spodoba.





W naszym przypadku trochę złe rozmieszczenie liter nie robi różnicy, ponieważ jesteśmy tutaj w stylu ręcznie pisanych pism i idealne rozmieszczenie nie jest tak konieczne, jak w przypadku czcionek Sans Serif.

Krok 7

Chciałbym teraz dostosować odstęp międzyliniowy. Jest tutaj ponownie suwak lub możecie kliknąć trzykrotnie na drugą linię, aby zaznaczyć całą linię.

A następnie możecie łatwo z wciśniętym klawiszem Alt- i strzałkami w górę lub w dół dostosować linię tak, jak Wam odpowiada.

Automatycznie dostosowywana jest również wielkość, która stopniowo maleje, co dla mnie osobiście jest o wiele bardziej wygodne.