Ta lekcja jest w bazie eduweb

Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.

Wykup dostęp do bazyZaloguj się kontem Easy

Lekcja 27/ 40Eksport do Lottie i sprawdzanie błędów

0:00 / 0:00
Grafika motion i 3DAfter Effectsw Praktyce

Projektuj Animacje UI z Lottie Files i After Effects: Eksport do Lottie i sprawdzanie błędów

6 godz. 18 min wideo40 lekcji3 moduły

Michał Wedlechowicz
Wszystkie kursy autora

Czego się nauczysz

  • Wprowadzenie do Lottie
  • Przykłady animacji na stronach
  • Wprowadzenie do After Effects
  • Import plików do aftera
  • Praca z timelinem
  • Pierwsze projekty i kompozycje
  • Instalacja pluginu Lottie
  • Przygotowanie plików w Adobe Illustrator
  • Konwertowanie warstw na ścieżki
  • Podstawowe właściwości warstw w After Effects
  • Transformacje ścieżek na osi czasu
  • Dopuszczalne efekty dla Lottie
  • Usuwanie błędów i niepotrzebnych warstw
  • Graph Editor
  • Optymalizacja wagi pliku
  • Eksport do formatu dotLottie
  • Import do Webflow
  • Dodawanie interakcji i animacji

Projektuj Animacje UI z Lottie Files i After Effects - w Praktyce

Ruch oraz interakcja z interfejsem to dziś standard, bez którego nie może obejść się żaden serwis czy aplikacja. Tworzenie animacji z pomocą kodu może być bardzo problematyczne dla osób nietechnicznych, a zwłaszcza dla tych, którzy nie są programistami. Projektowanie animacji to zajęcie dla osób kreatywnych, pełnych wyobraźni, które uwielbiają wprawiać w ruch materiały statyczne. Dlatego nie powinna ograniczać nas technologia, a wyłącznie nasza wyobraźnia. W tym celu został stworzony lekki format Lottie, który w oparciu o plik JSON jest w stanie odtwarzać animacje na stronach internetowych czy aplikacjach. Dzięki niemu, bez użycia kodu, możemy zbudować stronę produktową z obracającym się modelem telefony w trakcie przewijania widoku, dokładnie tak jak na stronach produktowych Apple.

Konfiguracja i poznanie After Effects

Wystartujemy z wprowadzeniem do After Effects. Poznamy podstawowe funkcje programu, przygotujemy i zaciągniemy do niego pierwsze materiały i zaczniemy wprawiać je w ruch pracując na ścieżkach wektorowych. Zainstalujemy plugin Lottie i skonfigurujemy swoje konto w serwisie Lottie FIles, abyśmy mogli eksportować tam nasze animacje i pobierać je w formatach dotLottie albo JSON.

Praktyczny projekt z After Effects

W drugim rozdziale zaczniemy pracować nad docelowym projektem. Poznasz te funkcje Aftera, które będą istotne dla przygotowania plików Lottie. Poznasz też ograniczenia i najczęstsze problemy, oraz dowiesz się jak sobie z nimi radzić i jak optymalizować pliki importowane do After Effects. Dowiesz się też jakich narzędzi wolno używać, a które nie są wspierane przez format Lottie. Jeżeli natomiast pracujesz już z motion designem i znasz bardzo dobrze After Effects, to dzięki temu szkoleniu będziesz wiedział jak wykorzystać swoje umiejętności na zupełnie nowym polu, jakim jest animacja na potrzeby interfejsów.

Dopracowanie projektów i praca z Lottie w Webflow

Ostatni rozdział kursu to dopracowanie projektu w najmniejszych szczegółach i praca ze ścieżkami wektorowymi oraz z ich animacją. Usuniemy niepotrzebne elementy w kompozycjach i zadbamy o optymalizację pliku oraz o jego wagę. Postaramy się, żeby jego waga oscylowała w granicach od kilkudziesięciu do maksymalnie kilkuset kilobajtów, aby nie obciążać strony internetowej. Dodatkowo zaimportujemy nasz Lottie do Webflow, abyśmy mogli zobaczyć jak w praktyce będzie działała nasza animacja i w jakie interakcje możemy z nią wchodzić.

Zaawansowana animacja z Lottie

Jednym z praktycznych projektów jaki stworzymy w trakcie kursu będzie Bardzo zaawansowana animacja postaci oparta na ruchu węzłów wektorowych. Do stworzenia projektu wystarczą nam podstawowe funkcje Aftera. W kursie dowiesz się, że projektując animację pod Lottie nie możemy korzystać z bardziej złożonych narzędzi After Effects, ponieważ mogą nie być one wspierane przez format Lottie czy JSON. Przejdziemy przez listę funkcjonalności, które możemy stosować, a których lepiej unikać, aby mieć pewność, że nasze animacje będą wyświetlać się prawidłowo na wielu różnych platformach.

Dla kogo jest ten kurs?

Materiał szkoleniowy, to zbiór lekcji wideo, poukładanych w odpowiednich rozdziałach i podzielonych na części tematyczne. Został opracowany z myślą o: projektantach graficznych, UI designerach, motion designerach. Wszystkie lekcje przygotowane są tak, aby osoby początkujące mogły nauczyć się podstaw animacji obsługi After Effects. Natomiast osoby posiadające już doświadczenie z animacją dowiedzą się jak wykorzystać swoją wiedzę dla tworzenia animacji i interakcji w dziedzinach związanych z Digital Designem. Kto jeszcze może skorzystać na wiedzy zawartej w tym kursie? Graficy pracujący w zawodzie od lat - doświadczeni graficy będą mogli wykorzystać swoją wiedzę na zupełnie innym polu, jakim jest motion. Dowiedzą się jak działa After Effects, oraz jak eksportować poprawne pliki Lottie, niezawierające błędów. Zyskają nowe perspektywy i umiejętności, które pozwolą im wyróżnić się na konkurencyjnym rynku pracy. Freelancerzy pracujący zdalnie dla dużych agencji reklamowych - dla nich materiał to droga do poznania nowych technik pracy i wykorzystania swojej wiedzy na zupełnie innych polach, co przełożyć się może na otrzymywanie bardziej zróżnicowanych zleceń i lepsze zarobki.

Kurs Projektuj Animacje UI z Lottie Files i After Effects

3 rozdziały40 lekcji6h 18min

Konfiguracja i poznanie After Effects

1h 47min
  • Witaj w kursie2min(zablokowana)
  • Lottie - przykłady10min(zablokowana)
  • Dashboard13min(zablokowana)
  • Zakładanie konta i instalacja pluginu5min(zablokowana)
  • Interfejs After Effects - Podstawy4min(zablokowana)
  • Elementy kompozycji w Illustrator12min(zablokowana)
  • Pierwsze ruchome wektory12min(zablokowana)
  • Czas i Maska10min(zablokowana)
  • Kompozycja w kompozycji8min(zablokowana)
  • Obrys wypełnienie i opacity7min(zablokowana)
  • Efekt Trim Path9min(zablokowana)
  • Eksport pliku Lottie6min(zablokowana)
  • Alternatywa dla Mask Path10min(zablokowana)

Praktyczny projekt z After Effects

2h 33min
  • Wprowadzenie do praktycznego projektu3min(zablokowana)
  • Przygotowanie plików10min(zablokowana)
  • Częste błędy w przygotowaniu plików7min(zablokowana)
  • Przygotowanie warstw do animacji8min(zablokowana)
  • Animacja Drop down Menu12min(zablokowana)
  • Opcje transformacji kształtów wektorowych24min(zablokowana)
  • Animacja kursora19min(zablokowana)
  • Zastosowanie prostej ekspresji9min(zablokowana)
  • Praca z animowanym tekstem11min(zablokowana)
  • Animacja Chatu11min(zablokowana)
  • Animacja Czatu cz - 214min(zablokowana)
  • Animacja Chatu - ciąg dalszy15min(zablokowana)
  • Czyszczenie projektu10min(zablokowana)

Trzecia animacja oraz interakcje w Webflow

1h 58min
  • Eksport do Lottie i sprawdzanie błędów11min(zablokowana)
  • Wykorzystanie animacji w Webflow5min(zablokowana)
  • Preview animacji w sekcji Hero5min(zablokowana)
  • Przygotowaniu plików do trzeciej animacji6min(zablokowana)
  • Obrót postaci o 180 stopni31min(zablokowana)
  • Praca na ścieżkach i praktyczne maskowanie5min(zablokowana)
  • Duplikowanie kompozycji5min(zablokowana)
  • Przygotowanie finalnej kompozycji8min(zablokowana)
  • Kanał Alpha dla kompozycji13min(zablokowana)
  • Eksport dotLottie3min(zablokowana)
  • Webflow i animacja po scrollu10min(zablokowana)
  • Preview i finalizacja6min(zablokowana)
  • Bonus - Lottie i Figma8min(zablokowana)
  • Zakończenie3min(zablokowana)

Ten kurs jest w bazie eduweb

Dostęp do wszystkich kursów z bazy eduweb za 199 zł/mies.

Wykup dostęp do bazy

Autor kursu

Michał Wedlechowicz
Średnia ocen autora: 4,8

Bio

Michał Wedlechowicz - projektant graficzny - urodził się w 1989 r. Na co dzień pracuje w firmie produkującej opakowania i zajmuje się opracowywaniem artworków i nadruków dla opakowań z branży FMCG (głównie art. spożywcze). Jego pasja i zamiłowanie do grafiki nie kończy się jednak tylko na opakowaniach. Michał, po godzinach pracy projektuje materiały promocyjne dla własnych klientów, które możecie obejrzeć w serwisie Behance pod adresem https://www.behance.net/MichalWedlechowicz

Inne kursy tego autora

Pokaż więcej kursów