Przezroczysty plik GIF w programie Adobe Illustrator jest wykonywany w następujący sposób. Przejdź do menu Plik\u003e Zapisz dla Internetu i urządzeń (Alt + Ctrl + Shift + S). W oknie, które zostanie otwarte, w polu Zoptymalizowany format pliku należy najpierw przejść do zakładki Rozmiar obrazu (Rozmiar obrazu). Faktem jest, że domyślnie cała strona trafia do okna optymalizacji i zwykle nie jest to konieczne. Dlatego na karcie Rozmiar obrazu usuń zaznaczenie pola wyboru Klip do obszaru roboczego (Przytnij do rozmiaru strony) i kliknij przycisk Zastosuj.
Następnie wybierz GIF z listy wyboru formatu i zaznacz pole wyboru Przezroczystość.
Następnie określimy, które kolory będą przezroczyste. Wszystkie kolory obecne na obrazku są zawarte w zakładce Tabela kolorów (Tablica kolorów) i są wyświetlane jako kolorowe kwadraty. Wybierz narzędzie na pasku narzędzi po lewej stronie okna Kroplomierz (pipeta).
Istnieją dwa sposoby definiowania kolorów. Najłatwiej jest określić kolor kroplomierzem bezpośrednio na obrazku - po tym kolor zostanie podświetlony w tabeli kolorów ciemnym obrysem. Cóż, jeśli wiesz dokładnie, jaki kolor powinien być przezroczysty, możesz go wybrać bezpośrednio w tabeli kolorów, klikając odpowiedni kolorowy kwadrat. W pierwszym i drugim przypadku, jeśli chcesz wybrać kilka kolorów, musisz pracować z wciśniętym klawiszem Shift (lub Ctrl). Po wybraniu koloru należy poinstruować program, aby był przezroczysty. Aby to zrobić, kliknij ikonę Odwzorowuje wybrane kolory na przezroczyste (Dodaj wybrane kolory do przezroczystości). Na ilustracji ten przycisk jest zakreślony, a czerwony jest zaznaczony jako przezroczysty. Na obrazie pojawi się przezroczysty obszar, a kwadrat na tablicy kolorów zmieni swój wygląd - jego część stanie się białym trójkątem. Aby anulować wybrany kolor, należy go zaznaczyć w Tabeli kolorów, a następnie ponownie kliknąć ikonę Mapuj wybrane kolory na przezroczysty.
Kilka słów o sposobie ustawiania przezroczystości. Odpowiada za to rozwijane menu. Określ algorytm roztrząsania przezroczystości, w języku rosyjskim - Algorytm symulacji przezroczystości (rys. poniżej). Można dokonać czterech wyborów: No Transparency Dither - brak algorytmu, Diffusion Transparency Dither - rozproszone, Pattern Transparency Dither - algorytm wzorcowy i Noise Transparency Dither - oparte na szumie algorytm. W trybie algorytmu rozproszonego suwak staje się aktywny Ilość (Kwota), która pozwala zmienić wartość przenikania. Co wcielić w życie? W zależności od celu i wizerunku. Nie używam tej opcji i zawsze zostawiam ustawienie domyślne - No Transparency Dither.
Kliknij Zapisz - przezroczysty GIF jest gotowy. Praca została wykonana w programie Adobe Illustrator w wersji CS4 (v. 14), ale wszystkie czynności i skróty klawiaturowe są odpowiednie dla wcześniejszej wersji CS3 (v. 13).
Masz jedną lub dwie ikony, które chcesz animować za pomocą animacji. Gdzie byś zaczął? Załóżmy, że masz pliki SVG, Illustrator CC i After Effects 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ż, w jaki sposób można przekonwertować go na warstwy kształtu i dodać ruch. Na koniec porozmawiajmy o eksportowaniu i renderowaniu.
Efekt końcowy pracy.
Przejdźmy teraz 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 Warstwy kształtu... 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 na górę panelu nad warstwy 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ć. Pozwoli nam to pracować wydajniej, ponieważ skupimy się na klatkach kluczowych. W poniższym przykładzie kolory etykiet mniej więcej odpowiadają wypełnieniu odpowiednich warstw.
Etykietowanie warstw kształtów za pomocą odpowiednich nazw, kolorów, etykiet i lokalizacji jest bardzo praktyczne. Użyj skrótu klawiaturowego, aby skonfigurować opcje Ctrl + K / Command + K lub Kompozycja\u003e Ustawienia kompozycji… Z ustawień kompozycji musimy wybrać szerokość, wysokość, liczbę klatek na sekundę i czas trwania. W tym projekcie wybrałem 60 klatek na sekundę, aby animacja była płynna.
W tym momencie wydaje się, że wszystko jest gotowe, 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 kamienia, 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. Położyłem go z tyłu samochodu i zrobiłem punkt kotwiczący w lewym dolnym wierzchołku. 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 Illustrator CC i After Effects CC.
Zestaw ikon jest dostępny do bezpłatnego pobrania pod adresem.
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 wszystkie najnowsze przeglądarki obsługują już 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!
I tak są kroki, które musimy wykonać:
- Utwórz poprawną strukturę plików
- Pobierz i podłącz wtyczkę
- Narysuj fajną grafikę konturową w programie Adobe Illustrator
- Przekonwertuj 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 zarys 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.
Format pliku Flash (SWF) jest oparty na wektorach i został zaprojektowany z myślą o skalowalnej, kompaktowej grafice internetowej. Ponieważ ten format pliku jest oparty na grafice wektorowej, obiekt zachowuje jakość obrazu w dowolnej rozdzielczości i jest idealny do tworzenia ramek animacji. W programie Illustrator możesz tworzyć oddzielne klatki animacji na warstwach, a następnie eksportować warstwy obrazu jako oddzielne ramki do użytku w witrynie internetowej. Możesz także zdefiniować symbolika w pliku programu Illustrator, aby zmniejszyć rozmiar animacji. Podczas eksportowania każdy symbol jest definiowany tylko raz w pliku SWF.
Polecenie eksportu (SWF)
Zapewnia największą kontrolę nad animacją i kompresją bitową.
Zapewnia większą kontrolę nad połączeniem formatów SWF i bitmap w układzie pofragmentowanym. To polecenie oferuje mniej opcji obrazu niż polecenie Eksportuj (SWF), ale używa ostatnio używanych ustawień dla polecenia Eksportuj (zobacz).
Podczas przygotowywania obiektu do zapisania w formacie SWF należy pamiętać o następujących wskazówkach.
Możesz użyć programu Device Central, aby zobaczyć, jak grafika programu Illustrator będzie wyglądać w programie Flash Player na różnych urządzeniach przenośnych.
Wstawianie grafiki programu Illustrator
Grafikę utworzoną w programie Illustrator można szybko, łatwo i łatwo skopiować i wkleić do programu Flash.
Następujące atrybuty są zachowywane po wklejeniu grafiki programu Illustrator do programu Flash.
Grubość linii
Definicja gradientów
Tekst (w tym czcionki OpenType)
Powiązane obrazy
Tryby mieszania
Kontury i kształty
Ponadto programy Illustrator i Flash obsługują następujące elementy podczas wstawiania grafiki.
Zaznaczenie całych warstw najwyższego poziomu w kompozycji programu Illustrator i wklejenie ich do programu Flash zachowuje warstwy i ich właściwości (widoczność i blokowanie).
Formaty kolorów programu Illustrator inne niż RGB (CMYK, skala szarości i formaty niestandardowe) są konwertowane na RGB przez Flash. Kolory RGB są wklejane w zwykły sposób.
Podczas importowania lub wklejania kompozycji programu Illustrator można użyć różnych opcji, aby zachować określone efekty (np. Cień rzucany przez tekst) jako filtry Flash.
Flash zapisuje maski programu Illustrator.
Eksportowanie plików SWF z programu Illustrator
Pliki SWF wyeksportowane z programu Illustrator są zgodne z jakością i współczynnikiem kompresji plików SWF wyeksportowanych z programu Flash.
Podczas eksportowania możesz wybierać spośród wielu predefiniowanych stylów, aby uzyskać optymalne wyniki, oraz określać, jak używać wielu obszarów roboczych, jak konwertować symbole, warstwy, tekst i maski. Na przykład, możesz eksportować symbole programu Illustrator jako filmy lub grafikę i tworzyć symbole SWF z warstw programu Illustrator.
Importowanie plików programu Illustrator do Flash
Aby utworzyć kompletny układ w programie Illustrator, a następnie zaimportować go do Flash w jednym kroku, możesz zapisać kompozycję w rodzimym formacie programu Illustrator (AI) i zaimportować ją z dużą wiernością do Flash, używając poleceń Plik\u003e Importuj na pulpit. obszar lub Plik\u003e Importuj do biblioteki.
Jeśli plik programu Illustrator zawiera wiele obszarów roboczych, wybierz obszar roboczy do zaimportowania w oknie dialogowym Importuj Flash i określ ustawienia dla każdej warstwy w tym obszarze roboczym. Wszystkie obiekty w wybranym obszarze roboczym są importowane do programu Flash jako pojedyncza warstwa. Gdy importujesz inny obszar roboczy z tego samego pliku AI, obiekty z tego obszaru roboczego są importowane do programu Flash jako nowa warstwa.
Podczas importowania kompozycji programu Illustrator jako plików AI, EPS lub PDF, Flash zachowuje te same atrybuty, co podczas wklejania kompozycji Illustrator. Ponadto, jeśli importowany plik programu Illustrator zawiera warstwy, możesz je zaimportować na jeden z poniższych sposobów.
Konwertuj warstwy programu Illustrator na warstwy Flash.
Konwertuj warstwy programu Illustrator na ramki Flash.
Konwertuj wszystkie warstwy programu Illustrator na jedną warstwę Flash.
Dziś mamy nietypowy tutorial 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ć 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 kadru filmu, okrąg odniesienia, który został pocięty na oddzielne 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 również być 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 dodać lekkie drżenie do ruchu filmu, musimy trochę przesunąć powstałe klatki w różnych kierunkach. Aby to zrobić, włącz tylko warstwę, z którą zamierzasz w danym momencie pracować, a następnie przesuń ramkę o kilka pikseli w dowolnym kierunku.
Po przejrzeniu wszystkich warstw i dodaniu niewielkiego przesunięcia możesz rozpocząć tworzenie animacji ruchomego 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. Będziesz pamiętać, że nasz film trzęsie się w 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 razem tworzy 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 48. Aby to zrobić, należy wykonać jeszcze trzy kopie gotowych warstw z animacją filmu.
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 pracę, pamiętaj, aby cofnąć 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ę. 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 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:
