Dzień dobry! Dziś postaram się opisać możliwości programu Adobe Illustratorporównując to z możliwościami spłukiwania. Nie będzie to globalna analiza programu według kości, a raczej opis kilku interesujących sztuczek, które odkryłem w tym programie. Podczas studiowania zbierałem informacje kawałek po kawałku, aby umieścić wszystko w jednym poście. Muszę od razu przyznać, że nie jestem tylko super-doświadczonym użytkownikiem ilustratorów ostatnie sześć miesięcy Używam go do rysowania (wcześniej narysowałem wszystko we flashu). Wiele osób narzeka, że \u200b\u200bilustrator jest skomplikowany i nie zawsze intuicyjny. W pewnym stopniu zgadzam się, że po flashowaniu ten program jest trudny. Ale najważniejsze jest to, aby nie rzucać, ale kontynuować naukę. A po kilku tygodniach pojawia się myśl, jak mogłem się bez niego obejść!
Więc co mi się podobało w ilustratorze i co znalazłem dla siebie, czego nie ma we Flashu.
1. Zacznę od najprostszych, ale jednocześnie niezbędnych. Spróbuj błyskawicznie ułożyć obiekty w kółko. Był wcześniej Narzędzie dekoracyjne , ale został usunięty, najwyraźniej uznany za niepotrzebny. Zdecydowaliśmy, że fajniej będzie robić to za pomocą długopisów. Illustrator ma tę funkcję: Efekt - zniekształć i przekształć - przekształć.
Wszystko jest szybkie i proste, wartości (odległość między obiektami, ilość kopii) ustalamy sami w ustawieniach.
2. Zig-zag
Jeszcze prostsza, ale mimo to użyteczna rzecz. Wydawałoby się to drobiazgiem, ale w mgnieniu oka trzeba rysować ręcznie, w ilustratorze to kwestia sekund.
3. Deformacja obiektów (Warp)
Nie ma nic takiego w mgnieniu oka. W poniższym przykładzie pokazałem tylko 2 sposoby deformowania prostych kształtów (Effect - Warp - Arc / Fish). W rzeczywistości jest ich 15 ostatnia wersja programy.
4. Automatyczne zaokrąglanie rogów (Round Corners)
Możesz to zrobić ręcznie: na obiekcie graficznym po zaznaczeniu w rogu (na wszystkich oczach) pojawia się biały punkt i zaokrąglona linia. Wyciągamy myszką, dopasowujemy się do Twojego gustu.
Ale dotyczy to tylko kształtów, z linią ołówka w nieco inny sposób - zastosuj efekt zaokrąglenia ( Efekt - Stylizacja - Okrągłe rogi). Na wyjściu otrzymujemy ten sam wynik.
5. Chropowaty (gruboziarnisty)
Efekt jest stosowany do prostych kształtów ( Efekt - zniekształcenie i przekształcenie - szorstkość). Na wyjściu otrzymujemy coś, co przypomina model 3D low-poly. Moim zdaniem fajnie :) A co najważniejsze - bardzo proste.
6. Pucker & Bloat (Ciągnięcie i wzdęcia)
Przykład na poniższym obrazku:
7. Rozbudowa formularza (Offset Path)
Flash ma funkcję Expand Fill, w przeciwieństwie do ilustratora w ogóle nie działa z liniami ołówka.
8. Pędzle (pędzel artystyczny, pędzel wzorka, pędzel rozpraszający)
Zobacz zdjęcie poniżej z przykładami:
9. Pędzel teksturowy (Pędzle tekstury)
Illustrator zawiera również wiele pędzli tekstur, o których pisałem i jak się one pojawiały nowa wersja spłukać -. Zauważono, że używanie pędzli w programie Adobe Animate jest niezwykle powolne. Otóż \u200b\u200bto:(
10. Nie jestem pewien, czy to prosta sztuczka, ale chcę skupić się na pędzlu o zabawnym imieniu KropelkaSzczotka... Umieszczony w skrzynce narzędziowej, bardzo ładny pędzel w użyciu. Ma kilka ustawień, podoba mi się bardziej niż zwykle. Trudno opisać słowami jego zalety, lepiej spróbować raz.
10. Podziel na siatkę
Przydatna jest również funkcja Split to Grid (Object-Path-Split to Grid), która umożliwia cięcie kształtu na równe segmenty. O czym nam to przypomina? Zgadza się - okna w wieżowcu. Jak dla mnie fajna rzecz do rysowania np. Pejzaży miejskich;)
Jeszcze jeden użyteczne narzędzieprezentowane w programie Illustrator, prawdopodobnie od jego pierwszego wydania. Można nim tworzyć np. Tekstury drewna:
12. Ruch (w prawo - Transform - Move)
Przemieszczenie obiektu o określoną odległość. Jeśli chcesz, możesz od razu utworzyć kopię, która zostanie umieszczona w żądanej odległości od wybranego obiektu poziomo / lub pionowo. Wcześniejsza wersja Flasha miała wtyczkę, która to robiła ta funkcja... Niestety nie pamiętam jego nazwy.
Tworzenie bezszwowych wzorów w programie Illustrator jest bardzo wygodne ( Tworzenie wzoru obiektu). Pamiętam, jak błyskawicznie byłem wyrafinowany podczas tworzenia. W ilustratorskiej wersji CC 2015 wszystko jest zautomatyzowane, kilka ustawień pomoże uformować wzór w dziesiątkach wariacji, mając pod ręką tylko kilka elementów graficznych. W więcej wcześniejsze wersje wszystkie programy trzeba było wykonywać ręcznie, jak do tej pory we flashu.
(Uwaga - wzorzec można przekształcić w obiekt do edycji wektorowej za pomocą funkcji parsowania ( Obiekt - rozwiń wygląd).
14. Mozaika obiektów
Tworzenie palety kolorów na podstawie istniejącego obrazu. Następnie importujemy obraz, który nam się podoba, do chorego (Open) Obiekt - Utwórz mozaikę obiektów... W ustawieniach określamy częstotliwość podziału na wysokość i szerokość.
A na wyjściu otrzymujemy:
15.Blend
Służy do tworzenia gradientów. Możesz tworzyć przejścia krok po kroku, takie jak na zdjęciu. Nie powiem, że często go używam, ale może się komuś przydać. Myślę, że można go użyć do tworzenia prostych obrazów tła.
Narzędzia można również używać do klonowania obiektów. Umieść dwa obiekty w pewnej odległości od siebie i zastosuj opcje mieszania, wybierz liczbę kroków (liczbę klonowanych obiektów).
16. Narzędzie Narzędzie do tworzenia kształtów. Bardzo przydatna rzecz do pracy z prymitywami. W mgnieniu oka wydało mi się to mniej wygodne.
Przytrzymując Alt i klikając wybrane segmenty - usuń segmenty. Jeśli po prostu przeciągniemy myszką po kilku wybranych obszarach - połączeniach.
Dodatek to narzędzie pomagające w automatycznym cięciu, łączeniu itp. wyróżnione formy. Jak dla mnie nie jest to zbyt wygodne, często z niego korzystam BudowaćKształtNarzędzie.
(obszary robocze)
18. niestandardowy panel narzędzi
Możliwość tworzenia własnego paska narzędzi, odrzucania niepotrzebnych i wybierania tylko tych, których używasz.
We Flashu obszary robocze, a mianowicie sceny ( Scena 1, 2, 3 ..) znajdują się osobno i musisz przełączać się między nimi (Shift + F2). W programie Illustrator możesz umieścić je wszystkie przed oczami. Jest to wygodne, gdy tworzysz kilka wersji tego samego rysunku, tak aby wszystkie opcje były przed oczami do porównania.
19.Isometry using Style graficzne
A ostatnia to tworzenie izometrii bez użycia 1 kliknięcia (a dokładniej 3 kliknięć, bo mamy 3 strony;) \u200b\u200bza pomocą stylów graficznych ( Style graficzne). Jak to się stanie, podpiszę następnym razem.
Illustrator ma coś wspólnego z fleszem - możliwość zapisania obiektu do symbolu (symbolu) i równie łatwo ten symbol można przenieść do pamięci flash (otworzyć w pliku flash.ai przez Import - Importuj na scenę).
Symbol w programie Illustrator ma takie same właściwości jak w programie Flash.
I na koniec napiszę, że w ilustratorze moim zdaniem jest gorszy od flasha. Tak tak to jest. A to jest narzędzie do wypełniania ( Wiadro farby). Bez względu na to, jak staram się przyzwyczaić do tego chorym, jest to wygodniejsze we flashu.
Jeśli moje notatki stały się dla Ciebie przydatne lub chcesz coś od siebie dodać - zapraszam w komentarzach! Powodzenia wszystkim;)
Masz jedną lub dwie ikony, które chcesz animować za pomocą animacji. Gdzie byś zaczął? Załóżmy, że masz pliki SVG, programy Illustrator CC i Po efektach CC, ale rozwiązanie umyka Ci.
W tym artykule pokażę, jak łatwo animować plik SVG, w tym przygotować plik SVG w programie Illustrator i zaimportować go do After Effects CC. Wyjaśnię również, jak możesz przekonwertować go na warstwy kształtu i dodać ruch. Na koniec porozmawiajmy o eksportowaniu i renderowaniu.
Efekt końcowy pracy.
A teraz przejdźmy do części zabawnej - jak animować obrazy.
Przygotowanie pliku SVG w programie Illustrator
Zacznijmy od otwarcia pliku SVG w programie Adobe Illustrator CC. Będę animował małą ikonę samochodu, która jest dostępna za darmo w Week of Icons.
Po otwarciu pliku musimy rozgrupować i podzielić wszystkie obiekty na warstwy. Możesz to zrobić ręcznie lub użyć Zwolnij na warstwy (sekwencja) aby przyspieszyć ten proces. Przed zaimportowaniem pliku do After Effects musimy zapisać go jako plik programu Illustrator.
Możemy rozgrupować obiekty za pomocą opcji Release to Layers (Sequence), aby nie tracić cennego czasu. Importowanie i organizowanie pliku w programie After Effects CC
Możesz teraz zaimportować do programu After Effects CC. Użyjmy skrótu klawiaturowego Ctrl + I (Windows)lub Command + I (Prochowiec)aby załadować okno dialogowe Importować pliklub przejdź do Plik\u003e Importuj\u003e Plik ... W tym samym miejscu wybierz przygotowany przez nas plik Illustrator CC i kliknij Import.Powinno pojawić się małe okno dialogowe z nazwą wybranego pliku. Proszę wybrać Kompozycja z listy rozwijanej pod nazwą Rodzaj importu.
Szybszym sposobem importowania pliku jest dwukrotne kliknięcie kolumny w panelu projektu. W panelu osi czasu zobaczymy nową kompozycję. Kliknij go dwukrotnie. Powinniśmy teraz zobaczyć warstwy programu Illustrator CC z pomarańczowymi ikonami po lewej stronie tytułów.
Zanim przejdziemy do rzeczy, musimy przekonwertować wszystkie te warstwy na Kształtuj warstwy... Musimy wybrać je wszystkie za pomocą Ctrl + A / Command + Alub ręcznie za pomocą Shift + lewy przycisk myszy... Następnie kliknij warstwę prawym przyciskiem myszy i wybierz Utwórz\u003e Utwórz kształty z warstwy wektorowej.
Teraz, gdy nowe warstwy są zaznaczone, przeciągnij je do górna część panele nad warstwami programu Illustrator CC, a następnie usuń warstwy programu Illustrator CC, aby nie przeszkadzały.
Konwersja warstw programu Illustrator CC na warstwy Shape w programie After Effects CC Chociaż nie jest to konieczne, ważne jest, aby nadać każdej warstwie odpowiednią nazwę i / lub ją pokolorować. Umożliwi nam to wydajniejszą pracę, gdy będziemy się skupiać klatki kluczowe... W poniższym przykładzie kolory etykiet mniej więcej odpowiadają wypełnieniu odpowiednich warstw.
Etykietowanie warstw kształtów odpowiednimi nazwami, kolorami, etykietami i lokalizacjami jest bardzo praktyczne. Użyj skrótu klawiaturowego, aby skonfigurować opcje Ctrl + K / Command + K lub Kompozycja\u003e Ustawienia kompozycji… W ustawieniach kompozycji musimy wybrać szerokość, wysokość, liczbę klatek na sekundę i czas trwania (szerokość, wysokość, liczbę klatek na sekundę i czas trwania). Do tego projektu wybrałem 60 klatek na sekundę, aby animacja była płynna.
Na ten moment wszystko wydaje się być gotowe do pracy, ale jest jeszcze jedna rzecz do zrobienia. Musimy pogrupować razem pewne warstwy, aby ich ruchy były zsynchronizowane z główną warstwą, którą możemy kontrolować. Ta metoda nazywa się Rodzicielstwo.
Użyj opcji Pick Whip, aby przypisać warstwę macierzystą do wielu warstw. W naszym przykładzie przypisałem mniej znaczące warstwy (warstwy potomne), takie jak przednia szyba, części ciała, drewno i liny, do głównej warstwy ciała (warstwa macierzysta). Pozwoliło mi to kontrolować położenie i obrót całego samochodu (z wyłączeniem kół) za pomocą warstwy macierzystej.
Tworzenie animacji
Chciałem, żeby samochód uderzył w kamień i lekko zawisł w powietrzu. Chciałem też, żeby drzewo poruszało się w górę iw dół i otwierało pień. Zacząłem od stworzenia kamienia, samochodu i kół. Potem przyszedł czas na pokonanie największej przeszkody - narzucenie akcji drzewu. Po skończeniu zająłem się drobnymi szczegółami, takimi jak pień i liny.
Szkic z opisem animacji Pierwszym krokiem było nadanie elementowi lub warstwie wyglądu przypominającego kamień, ale zamiast wracać do programu Illustrator CC, aby dodać kolejną warstwę, po prostu użyłem narzędzia Pióro w After Effects CC. To pozwoliło mi szybko zaprojektować mały kamień.
Och, potężne narzędzie Pen! Kufer był stosunkowo prostym zadaniem. Zainstalowałem go w tylnej części samochodu i zrobiłem punkt odniesienia w lewym dolnym rogu. Używając Pick Whip, przypisałem go do macierzystej warstwy ciała. Przedostatnim krokiem było nadanie efektu kręcenia się, co z kolei sprawiło, że moment podskoku auta był bardziej realistyczny.Bodymovin w połączeniu z mobilną biblioteką Lottie.
P.S. możesz znaleźć moje pliki programu Illustrator CC i After Effects CC.
Zestaw ikon jest dostępny do bezpłatnego pobrania pod adresem.
Dziś mamy nietypowy tutorial do Adobe Illustrator. Bo tym razem nie zrobimy statycznego obrazu, a prawdziwą animację. Wyobraź sobie, że się okazuje z Adobe Illustrator potrafi również rysować bajki :)
I nie potrzebujemy do tego niczego. Kompetentna organizacja warstw i eksport ostateczna praca do formatu swf, w którym każda warstwa jest konwertowana na klatkę animacji. W dzisiejszym samouczku narysujemy animację odliczania w stylu retro. Wyjście powinno być filmem flash z tym samym odliczaniem.
Pierwszą rzeczą do zrobienia jest narysowanie wszystkich niezbędnych elementów do przyszłej animacji. Aby to zrobić, w osobnym dokumencie wykonałem dwie pozycje klatki filmowej, okrąg odniesienia, który został pocięty na osobne sektory, teksturę i pionową rysę, aby dodać efekt starożytności, a także wszystkie liczby i napisy.
Gdy wszystkie części naszej kreskówki będą gotowe, możesz rozpocząć tworzenie samej animacji. Dla wygody najlepiej zrobić to w nowym dokumencie. W tym przypadku warstwy będą pełnić rolę klatek animacji. A na pierwszej warstwie wystarczy skopiować ramkę taśmy filmowej. Umieść go na środku obszaru roboczego.
Teraz utwórz drugą warstwę i skopiuj do niej pasek folii, w którym otwory wzdłuż krawędzi są przesunięte. Musi być również wyśrodkowany.
Z tych dwóch warstw można już uzyskać ruchomą animację filmu. Ale później potrzebujemy dużo więcej warstw. Wybierz więc pierwsze dwie warstwy, przejdź do opcji panelu i zrób kopię warstw.
Podobnie musimy zgromadzić 12 warstw ruchomych obrazów filmu.
Teraz mamy całą masę warstw i wszystkie są widoczne. W tym sensie, że górne warstwy zasłaniają dolne, co nie jest zbyt wygodne w pracy. Dlatego możesz wyłączyć niektóre warstwy, klikając ikonę z okiem po lewej stronie nazwy warstwy. Aby wyłączyć lub włączyć wszystkie warstwy jednocześnie, przytrzymaj klawisz Alt i kliknij ikonę oka. Włączając i wyłączając warstwy, możesz dokładnie zobaczyć, co znajduje się w określonej klatce naszej przyszłej animacji. A teraz, abyśmy mogli dodać lekkie drgania do ruchu filmu, musimy nieco przesunąć powstałe klatki w różnych kierunkach. Aby to zrobić, uwzględnij tylko warstwę, z którą zamierzasz teraz pracować, a następnie przesuń ramkę o kilka pikseli w dowolną stronę.
Po przejściu przez wszystkie warstwy i dodaniu niewielkiego przesunięcia można rozpocząć tworzenie animacji poruszającego się koła. Aby to zrobić, skopiuj okrąg składający się z sektorów z dokumentu z częściami rysunkowymi i umieść go na pierwszej warstwie nad ramką taśmy filmowej.
Jeśli odznaczysz krąg, będzie wyglądał jak pojedyncza całość. Właśnie tego potrzebujemy.
Ale ponieważ składa się z oddzielnych sektorów, możesz bardzo szybko i łatwo tworzyć animacje, zmieniając ich kolor. Aby to zrobić, skopiuj ten okrąg do drugiej warstwy i rozjaśnij pierwszy sektor. Pamiętasz, że nasz film trzęsie się podczas ruchu, więc nie ma potrzeby umieszczania koła dokładnie na środku kadru. Umieść to na oko.
Podobnie, musisz skopiować okrąg do każdej następnej warstwy, malując jaśniejszym kolorem o jeden sektor więcej niż poprzednio. Te 12 warstw tworzy razem animację filmową z wypełnionym okręgiem.
Następnie musimy dodać teksturę do naszych warstw. Włącz pierwszą warstwę i skopiuj tam teksturę z oryginalnego pliku z częściami zamiennymi.
Następnie włącz po kolei kolejne warstwy i skopiuj tam tę samą teksturę. Aby wyglądała inaczej na każdej ramie, po prostu obróć ją o 90 stopni. Jak można się domyślić, musimy dodać teksturę do wszystkich 12 klatek.
Jeśli jesteś już zmęczony kopiowaniem, mogę cię zadowolić - zostało bardzo mało. Najtrudniejsza część się skończyła. Pozostaje dodać pionowe zadrapania i prawie wszystko. Aby to zrobić, ponownie skopiuj oryginalną rysę i umieść ją w dowolnym miejscu na kilku warstwach. W moim przypadku rysy pojawiają się tylko w dwóch warstwach.
Teraz, gdy główna pętla z animacją filmu jest gotowa, pozostaje dodać liczby. Ponieważ odliczamy od 3 do 1 plus słowo Go !!!, potrzebujemy jeszcze więcej warstw. Nie 12, ale aż 48. W tym celu należy wykonać jeszcze trzy kopie gotowych warstw z animacją filmową.
A potem wszystko jest proste. Włącz pierwszą warstwę i umieść tam numer trzy.
Następnie musisz skopiować tę liczbę do kolejnych warstw, aż animacja koła się zakończy. Gdy dojdziesz do kolejnej kopii warstw, gdzie koło zostanie ponownie całkowicie wypełnione, musisz już wstawić numer dwa. W ten sam sposób skopiuj numer jeden do żądanych warstw. A kiedy dojdziesz do ostatnich warstw podpisu Idź !!!, po prostu usuń kółko przed skopiowaniem podpisu do żądanej warstwy.
To wszystko z animacją. Najważniejsze, żeby się nie pomylić. Możesz nadać warstwom wygodne nazwy, ale byłem trochę zbyt leniwy :) A jednak, kiedy skończysz, pamiętaj, aby ponownie włączyć wszystkie warstwy, klikając ikonę oka.
Pamiętaj, aby ustawić opcję Eksportuj jako: Warstwy AI na Ramki SWF w oknie z ustawieniami eksportu. Ta opcja zamienia warstwy programu Illustrator w ramki animacji. Następnie kliknij przycisk Zaawansowane.
Będzie otwarte dodatkowe ustawienia... Tutaj musisz ustawić liczbę klatek na sekundę. Mam 12 klatek na sekundę. Za zapętlenie animacji odpowiada pole wyboru Looping. Dzięki niej wideo będzie odtwarzane w kole. A opcja Layer Order: Bottom Up odtwarza warstwy programu Illustrator od dołu do góry w panelu. Tak właśnie zbudowaliśmy naszą animację.
Na wyjściu otrzymujemy wideo flash z naszą animacją.
Teraz to widzisz prosta animacja do zrobienia w programie Adobe Illustrator nie jest tak trudne, jak się wydaje na pierwszy rzut oka.
Jednak do tworzenia długich filmów lub aplikacji interaktywnych nadal lepiej jest używać programu Adobe Flash lub innych edytorów Flash. Na przykład zrobiłem tego kota w starym Macromedia Flashu, który wykopałem w pracy.
Również ostatnio do tworzenia animacji coraz częściej wykorzystywane są HTML5 i CSS3. Ten kod jest obsługiwany przez nowoczesne przeglądarki i nie wymaga użycia Flash Playera.
Roman aka dacascas specjalnie dla bloga Notes of a microstock illustrator
Zapisz się do naszego newslettera, aby nie przegapić niczego nowego:
Dziś mamy nietypowy tutorial do Adobe Illustrator. Bo tym razem nie zrobimy statycznego obrazu, a prawdziwą animację. Wyobraź sobie, że okazuje się, że możesz także rysować kreskówki za pomocą programu Adobe Illustrator :)
I nie potrzebujemy do tego niczego. Właściwa organizacja warstw i eksport gotowej pracy do formatu swf, gdzie każda warstwa jest konwertowana na klatkę animacji. W dzisiejszym samouczku narysujemy animację odliczania w stylu retro. Wyjście powinno być wideo flash z tym samym odliczaniem.
Pierwszą rzeczą do zrobienia jest narysowanie wszystkich niezbędnych elementów do przyszłej animacji. Aby to zrobić, w osobnym dokumencie wykonałem dwie pozycje klatki filmowej, okrąg odniesienia, który został pocięty na osobne sektory, teksturę i pionową rysę, aby dodać efekt starożytności, a także wszystkie liczby i napisy.
Gdy wszystkie części naszej kreskówki będą gotowe, możesz rozpocząć tworzenie samej animacji. Dla wygody najlepiej zrobić to w nowym dokumencie. W tym przypadku warstwy będą pełnić rolę klatek animacji. A na pierwszej warstwie wystarczy skopiować ramkę taśmy filmowej. Umieść go na środku obszaru roboczego.
Teraz utwórz drugą warstwę i skopiuj do niej pasek folii, w którym otwory wzdłuż krawędzi są przesunięte. Musi być również wyśrodkowany.
Z tych dwóch warstw można już uzyskać ruchomą animację filmu. Ale później potrzebujemy dużo więcej warstw. Wybierz więc pierwsze dwie warstwy, przejdź do opcji panelu i zrób kopię warstw.
Podobnie musimy zgromadzić 12 warstw ruchomych obrazów filmu.
Teraz mamy całą masę warstw i wszystkie są widoczne. W tym sensie, że górne warstwy zasłaniają dolne, co nie jest zbyt wygodne w pracy. Dlatego możesz wyłączyć niektóre warstwy, klikając ikonę z okiem po lewej stronie nazwy warstwy. Aby wyłączyć lub włączyć wszystkie warstwy jednocześnie, przytrzymaj klawisz Alt i kliknij ikonę oka. Włączając i wyłączając warstwy, możesz dokładnie zobaczyć, co znajduje się w określonej klatce naszej przyszłej animacji. A teraz, abyśmy mogli dodać lekkie drgania do ruchu filmu, musimy nieco przesunąć powstałe klatki w różnych kierunkach. Aby to zrobić, uwzględnij tylko warstwę, z którą zamierzasz teraz pracować, a następnie przesuń ramkę o kilka pikseli w dowolną stronę.
Po przejściu przez wszystkie warstwy i dodaniu niewielkiego przesunięcia można rozpocząć tworzenie animacji poruszającego się koła. Aby to zrobić, skopiuj okrąg składający się z sektorów z dokumentu z częściami rysunkowymi i umieść go na pierwszej warstwie nad ramką taśmy filmowej.
Jeśli odznaczysz krąg, będzie wyglądał jak pojedyncza całość. Właśnie tego potrzebujemy.
Ale ponieważ składa się z oddzielnych sektorów, możesz bardzo szybko i łatwo tworzyć animacje, zmieniając ich kolor. Aby to zrobić, skopiuj ten okrąg do drugiej warstwy i rozjaśnij pierwszy sektor. Pamiętasz, że nasz film trzęsie się podczas ruchu, więc nie ma potrzeby umieszczania koła dokładnie na środku kadru. Umieść to na oko.
Podobnie, musisz skopiować okrąg do każdej następnej warstwy, malując jaśniejszym kolorem o jeden sektor więcej niż poprzednio. Te 12 warstw tworzy razem animację filmową z wypełnionym okręgiem.
Następnie musimy dodać teksturę do naszych warstw. Włącz pierwszą warstwę i skopiuj tam teksturę z oryginalnego pliku z częściami zamiennymi.
Następnie włącz po kolei kolejne warstwy i skopiuj tam tę samą teksturę. Aby wyglądała inaczej na każdej ramie, po prostu obróć ją o 90 stopni. Jak można się domyślić, musimy dodać teksturę do wszystkich 12 klatek.
Jeśli jesteś już zmęczony kopiowaniem, mogę cię zadowolić - zostało bardzo mało. Najtrudniejsza część się skończyła. Pozostaje dodać pionowe zadrapania i prawie wszystko. Aby to zrobić, ponownie skopiuj oryginalną rysę i umieść ją w dowolnym miejscu na kilku warstwach. W moim przypadku rysy pojawiają się tylko w dwóch warstwach.
Teraz, gdy główna pętla z animacją filmu jest gotowa, pozostaje dodać liczby. Ponieważ odliczamy od 3 do 1 plus słowo Go !!!, potrzebujemy jeszcze więcej warstw. Nie 12, ale aż 48. W tym celu należy wykonać jeszcze trzy kopie gotowych warstw z animacją filmową.
A potem wszystko jest proste. Włącz pierwszą warstwę i umieść tam numer trzy.
Następnie musisz skopiować tę liczbę do kolejnych warstw, aż animacja koła się zakończy. Gdy dojdziesz do kolejnej kopii warstw, gdzie koło zostanie ponownie całkowicie wypełnione, musisz już wstawić numer dwa. W ten sam sposób skopiuj numer jeden do żądanych warstw. A kiedy dojdziesz do ostatnich warstw podpisu Idź !!!, po prostu usuń kółko przed skopiowaniem podpisu do żądanej warstwy.
To wszystko z animacją. Najważniejsze, żeby się nie pomylić. Możesz nadać warstwom wygodne nazwy, ale byłem trochę zbyt leniwy :) A jednak, kiedy skończysz, pamiętaj, aby ponownie włączyć wszystkie warstwy, klikając ikonę oka.
Pamiętaj, aby ustawić opcję Eksportuj jako: Warstwy AI na Ramki SWF w oknie z ustawieniami eksportu. Ta opcja zamienia warstwy programu Illustrator w ramki animacji. Następnie kliknij przycisk Zaawansowane.
Otworzą się dodatkowe ustawienia. Tutaj musisz ustawić liczbę klatek na sekundę. Mam 12 klatek na sekundę. Pole wyboru Looping odpowiada za zapętlenie animacji. Dzięki niej wideo będzie odtwarzane w kole. A opcja Layer Order: Bottom Up odtwarza warstwy programu Illustrator od dołu do góry w panelu. Tak właśnie zbudowaliśmy naszą animację.
Na wyjściu otrzymujemy wideo flash z naszą animacją.
Teraz widać, że prosta animacja w programie Adobe Illustrator nie jest tak trudna, jak się wydaje na pierwszy rzut oka.
Jednak do tworzenia długich filmów lub aplikacji interaktywnych nadal lepiej jest używać programu Adobe Flash lub innych edytorów Flash. Na przykład zrobiłem tego kota w starym Macromedia Flashu, który wykopałem w pracy.
Również ostatnio do tworzenia animacji coraz częściej wykorzystywane są HTML5 i CSS3. Ten kod jest obsługiwany przez nowoczesne przeglądarki i nie wymaga użycia Flash Playera.
Roman aka dacascas specjalnie dla bloga
Zapisz się do naszego newslettera, aby nie przegapić niczego nowego:
Ostatnio różne rodzaje grafiki SVG (Scalable Vector Graphics) stały się bardzo popularne na stronach internetowych i w aplikacjach. Wynika to z faktu, że wszystko najnowsze przeglądarki już obsługują ten format. Oto informacje o obsłudze przeglądarek SVG.
W tym artykule omówiono najprostszy przykład animacji wektora SVG przy użyciu lekkiej wtyczki Jquery Lazy Line Painter.
ŹródłoAby wykonać i w pełni zrozumieć to zadanie, podstawowa znajomość HTML, CSS, Jquery jest pożądana, ale nie jest wymagana, jeśli chcesz tylko animować SVG) Zaczynajmy!
A więc kroki, które musimy wykonać:
- Utwórz poprawną strukturę plików
- Pobierz i podłącz wtyczkę
- Narysuj fajną grafikę konturową w programie Adobe Illustrator
- Konwertuj nasze zdjęcie do Lazy Line Converter
- Wklej wynikowy kod do main.js.
- Dodaj trochę CSS do smaku
1. Utwórz poprawną strukturę plików
Pomoże nam w tym usługa Initializr, gdzie trzeba wybrać parametry jak na poniższym obrazku.
- Klasyczny H5BP (płyta kotłowa HTML5)
- Brak szablonu
- Tylko HTML5 Shiv
- Zminimalizowane
- Klasy IE
- Ramka chromowana
- Następnie kliknij Pobierz!
2. Pobierz i podłącz wtyczkę
Ponieważ initializr zawiera najnowszą bibliotekę jquery, z archiwum, które musimy pobrać z repozytorium projektu Lazy Line Painter, musimy przenieść tylko 2 pliki do naszego projektu. Pierwsza z nich to „jquery.lazylinepainter-1.1.min.js” (wersja wtyczki może się różnić) i znajduje się w katalogu głównym folderu wynikowego. Drugi to przykład / js / vendor / raphael-min.js.
Umieść te 2 pliki w folderze js. I łączymy je z naszym index.html przed main.js w ten sposób:
3. Narysuj fajny obraz konturu w programie Adobe Illustrator
- Narysuj nasz szkic w programie Illustrator (najłatwiej to zrobić za pomocą narzędzia Pióro)
- Konieczne jest, aby kontury naszego rysunku nie były zamknięte, ponieważ dla naszego efektu potrzebny jest początek i koniec
- Nie powinno być wypełnień
- Maksymalny rozmiar pliku - 1000 × 1000 px, 40kb
- Przytnij do obiektu\u003e Obszary robocze\u003e Dopasuj do granic obszarów roboczych
- Zapisz w formacie SVG (standardowe ustawienia zapisu będą działać)
Na przykład możesz użyć ikon w załączniku.
4. Przekonwertuj nasz obraz na Lazy Line Converter
Po prostu przeciągnij swoją ikonę do poniższego pola.
Grubość, kolor konturu i szybkość animacji można zmienić w samym kodzie, który pojawi się po konwersji!
5. Wklej wynikowy kod do main.js
Teraz po prostu wklejamy wynikowy kod do pustego pliku main.js.
Parametry:
strokeWidth - grubość konturu
strokeColor - kolor konturu
Możesz także zmienić prędkość rysowania każdego wektora, zmieniając wartości parametru czasu trwania (domyślnie 600)
6. Dodaj do smaku trochę CSS
Usuń akapit z index.html
Witaj świecie! To jest szablon HTML5.
I zamiast tego wstawiamy blok, w którym będzie miała miejsce nasza animacja
następnie dodaj trochę CSS do pliku main.css, aby uzyskać ładniejszy wygląd:
Treść (tło: # F3B71C;) # ikony (pozycja: stała; góra: 50%; lewa: 50%; margines: -300px 0 0 -400px;)
zapisz wszystkie pliki.
Teraz wystarczy otworzyć index.html w nowoczesnej przeglądarce i cieszyć się efektem.
P.S. po uruchomieniu na komputerze lokalnym rozpoczęcie animacji może zostać opóźnione o kilka sekund.
