Animacji 2D: Storyboard
od Podstaw
9 godz. 33 min · After Effects · Grafika motion i 3D
Michał WedlechowiczCzego się nauczysz
- Praca koncepcyjna
- Storyboard
- Tworzenie postaci na potrzeby animacji
- Przygotowanie warstw do animacji
- Animacja Frame by Frame
- Punkty odniesienia i praca ze ścieżkami
- Kompozycja i zapętlanie
- Automatyzacja w animacji
- Plugin DUIK i riggowanie
- Animacja z użyciem kontrolerów
- Animacja twarzy i wprowadzanie emocji
- Udźwiękowienie
- Adobe Media Encoder
- i wiele więcej!
Zasady animacji w praktyce
Pierwszy rozdział kursu poświęcimy wprowadzaniu w życie kilku zasad animacji opartych o wiedzę zawartą w książce "The Illusion of Life", przedstawioną przy pomocy miniaturowych animacji. Pokażę Ci, jak przy pomocy narzędzi After Effects zastosować te zasady na prostej animacji piłeczki odbijającej się od rakietki do tenisa. Nauczysz się dzięki temu transformować obiekty podczas ruchu tak, aby uwzględnić ich objętość, wagę i możliwość przewidywania ruchu.
Praca koncepcyjna i storyboard
Kolejna część kursu zostanie oparta o pomysł i szkicowanie ruchu na storyboardzie przy pomocy strzałek. Dzięki temu, podczas animowania będzie nam się pracowało dużo wygodniej. Na tym etapie wymyślimy głównego bohatera filmu, zastanowimy się nad przebiegiem akcji, i budowaniem scen. Pokażę Ci jak przygotować ilustracje i warstwy na potrzeby późniejszej pracy w After Effects. Zadbanie o odpowiedniki nawyki w procesie rysowania pozwoli na swobodną i lekką prace później.
Animacja Frame by Frame.
Animacja w technice Frame by Frame, może budzić skojarzenia z czasochłonną i mozolną pracą nad każdą klatką. Ale w tym kursie dowiesz się jak optymalnie pracować z tą techniką, aby praca przebiegała sprawnie, a rezultat był rewelacyjny. Dzięki mojej optymalizacji ja wolę nazywać tą technikę "Almost Frame by Frame". Praca w tym systemie daje nam bardzo dużo swobody w projektowaniu ruchu, a ta swoboda z kolei umożliwia nam łatwe stosowanie najważniejszych zasad animacji omówionych w pierwszym rozdziale.
Automatyzacja i Riggowanie
W kolejnym rozdziałach pokażę Ci jak połączyć technikę Frame by Frame z riggowaniem postaci w trakcie pracy nad drugą animacją. W tym przypadku wykorzystamy potężny plugin DUIK, pozwalający na stworzenie łatwego do animowania szkieletu. Dzięki temu będziemy wprawiać w ruch naszą postać przy pomocy kontrolerów, a to pozwoli na szybszą i wygodną pracę. Z DUIKiem będziemy mogli również zoptymalizować pracę z twarzą bohatera, wprowadzając również ruch do jej elementów. Kiedy postać zostanie zriggowania, nauczysz się tworzyć klatki kluczowe w taki sposób, aby animacja wyglądała miękko i płynnie.
Efekty, dźwięk i render
Do naszych prac dołożymy również efekty pozwalające na zmniejszenie liczby klatek, dodanie tekstur i nierówności na krawędziach, aby animacje wyglądały jak prawdziwy film rysunkowy. To pozwoli uzyskać lepszy efekt finalny, a w połączeniu z dźwiękiem otrzymamy pełnoprawny film. Całą tą wiedzę możesz wykorzystać do własnych animowanych projektów, lub też możesz tworzyć materiały wideo jak na przykład animacje explainer dla swoich własnych klientów. Kiedy Twój projekt będzie gotowy pokażę Ci jak wyrenderować finalny plik MP4 przy pomocy aplikacji Adobe Media Encoder.
Dla kogo jest ten kurs?
Ten kurs powstał z myślą o grafikach, ilustratorach oraz osobach początkujących, które chcą wejść na wyższy poziom i "ożywić" swoje kreacje. Przed przystąpieniem do kursu warto znać podstawy pracy z After Effects, aby ułatwić sobie pracę. Z kursu skorzystają początkujący animatorzy oraz doświadczeni designerzy, którzy nie pracowali jeszcze z animacją, ale chcą nauczyć się profesjonalnej animacji 2D.
Adobe CC 2021
Witam Cię w kolejnym rozdziale naszego kursu.
Przejdziemy teraz na chwilę do aplikacji Adobe Photoshop po to, abyśmy mogli
naszkicować sceny animacji, którą będziemy w ciągu najbliższych rozdziałów tworzyć.
Chciałbym wstępnie, bardzo wstępnie i bardzo szkicować, określić co się będzie
działo na poszczególnych scenach naszej animacji i chciałbym mniej więcej
narysować strzałkami ruch, jaki będzie wykonywany na poszczególnych scenach.
Zrobimy to bardzo szkicowania, w bardzo uproszczony sposób, po to tylko,
żebyśmy mogli sobie nakreślić nasz plan działania.
OK, przechodzimy do pracy.
Na chwilę zostawimy aplikację Adobe After Effects.
Przejdziemy do Photoshopa, ponieważ tutaj
będę chciał, abyśmy stworzyli plan naszej animacji.
Będziemy rysować wstępnie story board.
Pokażę Ci zarys tego, co chciałbym, aby działo się na naszej animacji,
więc myślę, że możemy stworzyć sobie nowy dokument wybierając Create New.
Proponuję, żebyśmy przeszli do sekcji print, ponieważ mamy tutaj A4.
Ustawimy to w poziomie 300 pikseli na cal.
OK, niech zostanie.
Wybieram teraz Create.
I mamy naszą stronę.
Stworzymy nową warstwę i na tej warstwie narysujemy sobie kilka
takich ramek, w których narysujemy sobie nasz story.
Będzie to typowo praca koncepcyjna.
Zaczniemy od wyboru pędzla.
Wybieram więc narzędzie Szczur.
Przechodzę do opcji pędzla.
Mamy tutaj pędzle ogólne zaokrąglony, miękki.
Możemy sobie wybrać zaokrąglony, twardy,
a ja będę chciał, żeby ten pędzel symulował nam taki ołówek.
Więc myślę, że możemy przejść do opcji pędzla wybierając Window.
Następnie wybierzmy Bash settings, a OK.
I.
Przejdźmy do Shape Dynamic a.
Kontrolę ustawiamy zależną od siły nacisku piórka.
I teraz wygląda to w ten sposób bardzo dobrze.
Następnie mamy coś takiego jak transfer, czyli przeźroczystość.
Wahanie, przeźroczystości też niech będzie zależne od siły nacisku piórka na tablet.
OK, mamy coś takiego.
Możemy sobie ten pędzel zapisać.
Wybierając nasz pojazd i niech to będzie
nasze powiedzmy pięc sil a wybieram przycisk OK.
Przy czym tryb mieszania tego pędzla ustawimy na disable.
I teraz mamy taki fajny pędzelek.
Dobra, to sobie zwijamy.
Tworzymy sobie nową warstwę, tą którą stworzyliśmy teraz i na niej robiliśmy.
Te nasze pierwsze mozaiki
usuwamy tudzież wyłączamy jej widok i na tej warstwie
shift mogę sobie narysować taką ramkę, jedną, może troszeczkę większą.
OK.
Shift wciskam po to, aby rysować linie proste.
OK i mamy naszą ramkę.
Jest ona oczywiście na warstwie numer 2.
Może zapiszemy sobie nazwę tej warstwy
jako RAM i z altem przeciągam kopie? OK.
Mamy już dwie ramki, może powiększymy sobie troszkę rozmiar strony, więc
wybierzmy Image Canvas size i ustawmy sobie może 4 tysiące ok.
Tak, żeby nam się zmieściła tu jeszcze jedna ramka.
W porządku. Te 3 ramki kopiujemy też z altem,
zaznaczam je na warstwach, wszystkie trzy z shift i z altem przeciągam kopię tutaj.
A może zróbmy jeszcze raz to samo, czyli z Shift.
Zaznaczam te 3 warstwy skopiowane i z altem przeciągam jeszcze raz w dół.
I. Całość.
Może powinniśmy sobie troszkę do góry porządku.
Te ramki sobie zamkniemy z shift zaznaczam wszystkie warstwy, te ramki sobie
zamkniemy w folderze, więc wybieram command g lub control.
Jeśli pracujesz z Windowsem mamy tu folder i nazwiemy go sobie.
Powiedzmy ramki.
Teraz stworzę sobie nową warstwę i tu będę rysował to co chciałbym żeby się
działo w naszej animacji, więc wybieram nasz pędzel.
OK, działa.
Możemy sobie troszeczkę zmniejszyć jego końcówkę
w lewym nawiasem kwadratowym, żeby był troszeczkę mniejszy.
A no i to co chciałbym zrobić to animację.
Prostą animację dwudziesto kilku sekundową, która będzie przedstawiała
naszą wektorową postać bohatera, który przygotowuje się do jazdy na hulajnodze.
Czyli możemy na przykład najpierw
założyć, że jeszcze jedną rzecz zróbmy smooth i ustawmy na kilkanaście procent,
tak aby kreski, które będę rysował były w miarę gładkie.
To co możemy zrobić, to najpierw narysować sobie jakiś grunt, czyli ziemie.
I tutaj ustalimy sobie przykład, powiedzmy jakąś nogę naszego bohatera.
Sobie but ok.
I obok postawimy sobie hulajnogę.
Czyli tu sobie możemy narysować jakieś koło hulajnogi, ok.
W porządku. I tu chciałbym, żeby ta pierwsza
animacja przedstawiała nogę, którą nasz bohater stawia na hulajnodze.
W ten sposób np.
.
OK.
I teraz wybieram czerwony kolor.
Może sobie coś wrzucę na nową warstwę.
Albo jakikolwiek inny np.
niebieski.
A chciałbym po prostu, żeby na tej animacji było.
Na tej pierwszej sekwencji było pokazane jak nasz bohater nogę.
Stawia tu.
Na hulajnodze.
W drugiej sekwencji chciałbym, żeby nasz bohater troszeczkę w bardziej zaawansowany
sposób przygotowywał się do jazdy hulajnogą.
To znaczy chciałbym, żeby zrobił coś jeszcze innego.
Mógłby np. moglibyśmy pokazać, jak kładzie swoje ręce
na kierowniku, ale może na razie to zostawmy.
Chciałbym, żeby on słuchał muzyki.
Czyli fajnie by było, gdyby na przykład zakładał sobie słuchawki na głowę.
Więc spróbujmy może tutaj
pokazać, jak on sobie właśnie narysuje jakąś prostą głowę.
OK, włosy.
Nie będę tutaj jakoś szczególnie zagłębiał się w detale.
Powiedzmy, że tu będzie miał ucho albo tu Może narysujemy już tą słuchawkę.
OK.
I tu drugą.
Teraz zbierzmy się. Czyli rejestr to.
Ponieważ tu chciałbym narysować dłonie, które trzymają te słuchawki.
W porządku, to jest jakby jedna.
I tu oczywiście druga.
Teraz jak on ma sobie zakładać te słuchawki?
Myślę, że fajnie by było, gdyby gdyby on sobie po prostu
naciągał te słuchawki na głowę, czyli one ręce powinny iść z góry na dół.
Więc może wybierz kolor niebieski?
OK, czyli to ma wyglądać w ten sposób?
Możemy mu jeszcze np.
podnieść oczy tak jak on by chciał spojrzeć w górę,
więc oczy niech mu powędrują wyżej na przykład.
Może sobie to kopiujemy jeszcze.
Command c command v i tą kopię przesuniemy sobie tutaj.
Następnie chciałbym, żeby po założeniu tych słuchawek jego ręce
oczywiście jego dłonie odkleił się od tych słuchawek i powędrowały np.
na dół czy na kierownik.
Choć może nie musimy tego pokazywać, ale.
Oczywiście te dłonie muszą iść gdzieś tu.
Jedna i druga.
Chciałbym też pokazać.
Moment, w którym nasz bohater
włącza muzykę w swoim telefonie, bo skoro zaciągnął
słuchawki, to pewnie będzie chciał czegoś słuchać.
Dlatego myślę, że możemy.
Tutaj narysować naszego bohatera, a w zasadzie jego dłoń, która trzyma telefon.
Może narysujemy to w ten sposób, ok?
I tutaj niech ma jakąś.
Jakąś aplikację muzyczną i przycisk play,
to może z tego telefonu niech wystaje jakiś przewód.
Tu rysujemy przycisk Play.
I będę chciał, żeby on za chwilę nacisnął przycisk Play.
I fajnie by było, gdyby w tle pojawiała się muzyka.
Teraz skąd ten telefon ma się wziąć? Może np.
niech on sobie tutaj ten telefon
zaznaczymy Na niebiesko ruch i ten telefon.
Przyjdzie stąd Łukowa tym ruchem.
Następnie skupujemy ten telefon około.
Command c.
Command v.
Wrzuciłem go tu.
OK.
I tutaj proponuję, żebyśmy pokazali jak ten kciuk.
Naciska przycisk.
Wybieram klawisz D aby z automatu wrzucić czarny kolor.
OK.
I oczywiście ten kciuk.
Po prostu pokaż tutaj ten ruch.
Ten kciuk po prostu będzie wędrował w ten sposób,
że wrzucimy go na ekran i niech on naciska ten przycisk.
W porządku.
Teraz moglibyśmy pokazać kolejne ujęcie,
jak na przykład nasz bohater zaczyna się rozpędzać.
Czyli znowu musimy tutaj wziąć naszą hulajnogę, przerzucić kamerę na hulajnogę
i pokazać, jak nasz bohater zaczyna się rozpędzać.
I myślę, że możemy to zrobić troszeczkę jakoś bardziej komicznie, np.
powiedzmy, że trzyma obie nogi na hulajnodze i jedną z tych nóg kładzie na
ziemi tak, żeby po prostu więcej się działo.
Nie chciałbym powielać tej klatki tutaj i zaczynać ruch od odpychania się tą nogą.
Chciałbym, żeby nasz bohater zrobił troszeczkę więcej.
Wybieram klawisz D, aby malować czarnym kolorem.
No i spróbujmy sobie tutaj narysować.
Właśnie tą hulajnogę.
I jedno koło to powiedzmy drugie.
Oczywiście możemy sobie narysować jakiś grunt, jakąś powierzchnię, na której
nasza hulajnoga będzie jechać, to sobie narysujemy kierownik.
OK.
Oczywiście później.
Będziemy dbać o szczegóły bardziej i.
Będziemy rysować już docelowy wygląd tych wszystkich elementów.
Ale powiedzmy, że nasz bohater obie nogi trzyma na tej hulajnodze.
Może to być troszkę dziwne, bo nie da się stać w miejscu na owej
hulajnodze, ale możemy przyjąć, że nasza hulajnoga jest kołowa.
No i teraz chciałbym, żeby.
Ta noga powędrowała, ta noga, która jest z frontu, żeby powędrowała tu.
Na ziemie.
Może narysujemy to na osobnej warstwie?
Chciałbym, żeby nasz bohater postawił tą
nogę na ziemi, a następnie postawi to, żeby rozpoczął odpychanie tak, żeby mógł
się po prostu odepchnąć na tej hulajnodze i ruszyć.
Więc sobie kopiujemy znowu command c command v dajmy to tu.
OK, może sobie możemy tą nogę.
Albo może zróbmy inaczej zaznaczmy ją.
Command x command v.
Sobie.
Tu.
Cóż, może zróbmy coś takiego
I tu nasz bohater już niech zaczyna ruch w momencie kiedy postawi ją na ziemi.
Może sobie tutaj życzymy?
Wybudujemy sobie kilka elementów.
OK. Ta noga będzie musiała być zgięta.
Więc musimy ją narysować od nowa.
W ten sposób.
OK.
W porządku coś takiego.
I teraz na niebiesko jeszcze sobie zaznaczmy tutaj ruch.
Czyli w momencie kiedy ta noga będzie na ziemi, to chciałbym, żeby on się nią
odepchnął i żeby ona poleciała do tyłu i do góry.
W ten sposób.
Kolejna sekwencja chciałbym żeby tutaj.
Nasz bohater już był w pełni pokazany.
Mieliśmy takie jakby nakręcanie akcji, że
do czegoś nasz bohater się przygotowuje, podchodzi do naszej kuli nogi, stawia
najpierw jedną nogę, potem zakłada sobie słuchawki, a następnie
jak już założy te słuchawki, żeby odpalił sobie aplikację muzyczną i włączył play.
Potem chcielibyśmy, żeby postawił jedną nogę na ziemi i rozpoczął ruch.
Teraz już pokażemy już tą pełną akcję
naszego bohatera w całości, więc może stworzymy nową warstwę tutaj.
I wybieram czarny kolor klawiszem D, aby ustawić default.
Kolory konkretny, intensywnie czarny.
I oczywiście rysujemy naszego bohatera już w całości, więc powiedzmy, że on będzie.
Więc powiedzmy, że będzie on wyglądał mniej więcej tak.
Tutaj specjalnie mu rysuję taką grzywę, bo
chciałbym, żeby z tymi włosami coś się działo, żeby one np.
powiewały na wietrze.
Myślę, że to da taki fajny rezultat.
Narysuję mu tutaj te słuchawki.
Następnie np.
jedną ręką trzyma się hulajnogi.
OK.
2 W drugiej ręce niech np.
trzyma swój telefon.
I oczywiście niech stoi na hulajnodze.
Tak, tutaj narysujemy sobie klamkę.
I myślę, że możemy tutaj.
Rysować najpierw to.
Nowe, która będzie dalej od kamery, czyli na drugim drugim planie ok.
Natomiast ta frontowa noga będzie oczywiście w ruchu, bo on będzie się tą
nogą odpychał, czyli ona będzie powiedzmy do tyłu, będzie szła.
Narysujemy sobie tutaj tą hulajnogę, żebyśmy wiedzieli o co chodzi naturalnie.
No i zaznaczmy jeszcze fajnie by było gdyby on miał np.
jakiś kabel, który idzie od słuchawek do telefonu.
I teraz na niebiesko zaznaczymy sobie ruch.
Oczywiście ta noga musi uciekać.
Tu.
Do tyłu. Tak jak wspomniałem wcześniej, później
nogę będzie przekładał do przodu i później znowu.
Do tyłu.
W taki sposób będzie wyglądał ruch.
Oczywiście to ciało jego będzie musiała uciekać góra dół, bo kiedy on będzie
stawiał nogę na ziemi, żeby się odepchnąć, będzie musiał tu zgiąć kolano.
No i oczywiście to będzie.
Się tak wahać Góra, dół, góra, dół W porządku.
No i ostatnia rzecz, ostatnia scena.
Chciałbym, żeby nasz bohater zniknął z
kadru w tle, żeby było słychać dźwięk piszczących opon i jakiś huk.
No i żeby w kadr wleciało jedno skaczące
kółko, jedno skaczące kółko z naszej hulajnogi.
Przyjmijmy, że on się rozbił gdzieś,
wjechał w coś, bo patrzył się w telefon, a nie tam,
gdzie, nie tam, gdzie chciał jechać, gdzie jechał w ogóle.
Więc cóż, może nową warstwę sobie zróbmy?
Czarny kolor I tutaj rysujemy sobie grunt i naszą oponę.
Która oderwała się od hulajnogi.
Nasze koło
zaznaczmy sobie ruch na niebiesko i fajnie by było, gdyby po prostu.
To koło. To się odbijało jak piłeczka.
Aż w końcu wylatuje z kadru.
No i oczywiście ono też musi się samo w sobie kręcić wokół własnej osi.
Myślę, że będzie to dodatkowo ciekawszy efekt.
To kółko jest rozpędzone i po prostu
gdzieś tam się odbiło od czegoś i ucieka sobie skacząc.
OK, zostawmy to w ten sposób.
Możemy sobie jeszcze tutaj ponumerować na
czarno poszczególne klatki, to oczywiście będziemy mieli pierwszą.
Tu mamy drugą.
Tutaj mamy trójeczkę.
4.
5.
6.
7.
8 i ostatnia.
Dziewiąta. OK.
Z takim planem możemy przejść dalej.
Teraz będę chciał zająć się projektowaniem
elementów naszej animacji, czyli konkretnie ilustracji.
Zapiszmy to sobie i możemy teraz śmiało przejść do następnej lekcji.