Optymalizacja grafiki internetowej
Informacje graficzne jest znacznie wolniejszy niż tekst, a czas ładowania obrazków jest proporcjonalny do wielkości ich plików graficznych. Dlatego szybkie ładowanie Strony internetowe wymagają niewielkich rozmiarów osadzonych w nich obrazów graficznych, co osiąga się poprzez ich optymalizację. Przez optymalizację obrazu rozumie się jego przekształcenie, które zapewnia minimalną wielkość pliku przy zachowaniu wymaganej w tym przypadku jakości obrazu, co osiąga się przede wszystkim poprzez zmniejszenie liczby kolorów w obrazach graficznych, stosowanie skompresowanych i specjalnych formatów plików oraz optymalizację ustawień kompresji dla poszczególnych fragmenty obrazu.
Program Illustrator ma wbudowane narzędzia do optymalizacji obrazu, które zapewniają różne metody podgląd szybkiego i wydajnego procesu optymalizacji. Zapowiedź daje dość dokładne wyobrażenie o tym, jak będzie wyglądał optymalizowany obraz w czasie rzeczywistym, co pomaga ocenić wynik optymalizacji i wybrać ten właściwy żądane ustawienia. Możesz zoptymalizować zarówno obrazy utworzone bezpośrednio w programie Illustrator, jak i inne, takie jak zdjęcia, które zamierzasz umieścić na stronie internetowej.
W oknie ustawiane są parametry optymalizacji Zapisz dla Internetu(Save for Web), wywoływany poleceniem o tej samej nazwie z menu plik(Plik). Program oferuje skorzystanie z jednego z czterech trybów podglądu, ale dwa są najlepsze do oceny jakości optymalizacji:
- 2-Up(dwie opcje) jednoczesne oglądanie obrazu oryginalnego i zoptymalizowanego zgodnie z określonymi ustawieniami (rys. 1);
- 4-Up(cztery opcje) w tym trybie obszar podglądu jest podzielony na cztery okna (rys. 2) do wyświetlenia oryginalny obraz oraz trzy wersje zoptymalizowane: pierwsza wersja jest generowana na podstawie ustawionych wartości optymalizacji, a dwie pozostałe to warianty bieżących ustawień optymalizacji.
Oba tryby pozwalają znacznie zaoszczędzić czas na znalezieniu najlepszej opcji optymalizacji, ponieważ eliminują konieczność zapisywania obrazów z różne ustawienia optymalizacji i późniejszego ich wizualnego porównania. Ponadto możliwa jest ocena nie tylko jakości zoptymalizowanego obrazu, ale także jego rozmiaru i czasu pobierania dla różnych opcji połączenia. Dla porównania najwygodniejszym trybem jest 4-Up (cztery opcje), który pozwala wizualnie ocenić wpływ kompresji lub zmniejszenia palety na jakość i rozmiar obrazu, a ostatecznie określić najlepsze parametry optymalizacyjne.
Program Illustrator umożliwia optymalizację grafiki internetowej nie tylko w formatach GIF, JPG, PNG-8 i PNG-24, ale także w formatach SWF i SVG. Indeksowane obrazy, które mają niewielką liczbę kolorów, są zapisywane w formacie GIF. Do zapisywania obrazów w pełnym kolorze iw skali szarości, zdjęć i bogatej w kolory grafiki, takiej jak wypełnienia gradientowe, używany jest format JPG. W przypadku pełnokolorowych obrazów z przezroczystymi obszarami zastosuj formacie PNG, co pozwala na zapisywanie zarówno obrazów indeksowanych, jak i pełnokolorowych, podczas gdy w PNG-8 maksymalna możliwa liczba kolorów zoptymalizowanego obrazu wynosi 256, aw PNG-24 obraz może mieć miliony kolorów, a zatem wygląda to tak formacie JPEG. Różnica między PNG-24 a JPEG polega na tym, że metoda kompresji używana do optymalizacji obrazów PNG-24 nie powoduje utraty jakości, ale zwiększa rozmiar pliku. Formaty SVG i SWF łączą elementy graficzne, tekstowe i interaktywne, a ponadto można je optymalizować.
Rozważać konkretny przykład optymalizacja obrazu. Powiedzmy, że w programie Illustrator opracowano emblemat strony (ryc. 3), pierwotnie zapisany w formacie AI. Próba natychmiastowego zoptymalizowania go pod kątem sieci nie doprowadzi do niczego dobrego, gdyż w takim przypadku obraz zostanie automatycznie przycięty, co nie uwzględni rzeczywistej pozycji napisu uzyskanej w wyniku deformacji (ryc. 4 i 5).
Dlatego spróbujmy wyeksportować logo do formacie PSD zespół Plik=>Eksportuj(Plik=>Eksportuj) Rozmiar wygenerowanego obrazu wyniesie 143 KB. Otwórz wynikowy plik PSD i użyj polecenia Plik=>Zapisz dla Internetu(Plik=>Zapisz dla Internetu). Biorąc pod uwagę ograniczoną liczbę kolorów zawartych w obrazie, w tym przypadku format GIF jest optymalny, z określonymi ustawieniami, o których musisz zdecydować. Eksperymentując z ustawieniami, możesz to zobaczyć najwyższa jakość podaje domyślny algorytm kompresji programu selektywny(Selektywny). Jeśli chodzi o wygładzanie, to biorąc pod uwagę obecność wypełnienia gradientowego, lepiej wybrać algorytm z generowaniem szumu hałas(Rys. 6). Rozmiar wynikowego pliku optymalizacji wyniesie 6,729 KB (rys. 7), przy czym przezroczystość tła zostanie zachowana, co łatwo zweryfikować zapisując obraz GIF wraz z plikiem HTML (rys. 8). W rezultacie w ten przykład pliki emblem.html i emblem.gif zostały znalezione w folderze Primer1 .
guziki
Nieodzownym specyficznym elementem projektu każdej strony internetowej są graficzne przyciski sterujące. Po prostu nie sposób wyobrazić sobie strony bez nich. Przyciski do rysowania stały się dziś specjalnym gatunkiem, a program Illustrator umożliwia tworzenie najbardziej skomplikowanych opcji. Na przykład przyciski zaprojektowane jako obiekty siatki i (lub) z maskami wyglądają znacznie efektywniej niż zwykłe.
Rozważ opcję utworzenia okrągłego wypukłego przycisku w programie Illustrator. Narysuj obiekt wektorowy wypełniony dowolnym kolorem w postaci koła (ryc. 9) i przekształć go w siatkę za pomocą polecenia Obiekt=>Utwórz siatkę gradientu(Obiekt=>Utwórz siatkę gradientu), określając cztery wiersze i cztery kolumny, a na liście Wygląd(Widok), wybierając opcję Do Centrum atrakcja(Podświetlenie) do 60 (Rysunek 10). Wybierz narzędzie Wybór bezpośredni i kliknij po lewej stronie górny róg obiektu, podkreślając znajdujące się tam punkty węzłowe (ryc. 11). Zmień kolor odpowiedniej komórki na biały, wybierając ją na palecie Próbki(Rys. 12).
Weź narzędzie Elipsa(Elipsa), ustaw znacznik myszy na środku okręgu utworzonego wcześniej i trzymając wciśnięte klawisze alt I Zmiana, rozciągnij nowy okrąg na starym, tak aby był większy od starego o 1-2 piksele ze wszystkich stron. Zrób z tego czarną ramkę Udar) o szerokości 1-2 pikseli i wypełnij go radialnym gradientem od czerwieni do bieli (Rysunek 13). Przeciągnij utworzony obiekt wektorowy o 1-2 piksele w prawo iw dół, a następnie bez usuwania zaznaczenia kliknij go prawym przyciskiem myszy i wybierz polecenie z menu kontekstowego Rozmieść=>Prześlij na spód(Organizuj => Odeślij). W rezultacie otrzymujemy puste miejsce na przycisk pokazany na ryc. 14.
Z reguły na dowolnej stronie internetowej znajduje się kilka przycisków tego samego typu, różniących się na przykład tylko kierunkiem narysowanych na nich strzałek, które wskazują kierunek poruszania się po witrynie. Rozważmy najprostszy przypadek posiadania dwóch przycisków, z których jeden ze strzałką w dół oznacza przejście do następnej strony, a przycisk ze strzałką w górę do poprzedniej. Jako puste miejsce na strzałkę weźmy zwykły trójkąt narysowany narzędziem Wielokąt(Wielokąt) wypełniony czernią, a także stylizowany na obiekt siatkowy dla uzyskania większego efektu. Przesuń strzałkę na przycisk i dostosuj położenie wszystkich obiektów względem siebie za pomocą odpowiednich przycisków palety Wyrównywać(Wyrównanie). Pierwszy z otrzymanych przycisków pokazano na ryc. 15. Utwórz kopię warstwy przyciskiem wybierając polecenie Zduplikowana warstwa Warstwy, w efekcie otrzymujemy dwie identyczne warstwy. Następnie wybierz strzałkę na kopii warstwy i obróć ją o 180°, wybierając polecenie z menu kontekstowego Przekształć=>Obróć Transformacja=>Obróć. Otrzymujemy ten sam przycisk, jak pokazano na ryc. 16. Należy pamiętać, że znacznie wygodniej jest przechowywać wszystkie przyciski tego samego typu jednego projektu w jednym pliku na różnych warstwach, co zostało zademonstrowane w tym przypadku.
Teraz musisz zapisać zoptymalizowane opcje dla każdego z przycisków. Najpierw spraw, aby dolna warstwa była niewidoczna, w takim przypadku przycisk na górnej warstwie zostanie zachowany. Wybierz drużynę Plik=>Zapisz dla Internetu(File=>Save for Web), skonfiguruj parametry optymalizacji przycisku, na przykład, jak pokazano na rys. 17, kliknij przycisk Ratować(Zapisz) i wprowadź nazwę pliku. Zapisany w wyniku przycisk jest pokazany na rys. 18. Teraz spraw, aby dolna warstwa była widoczna, górna warstwa była niewidoczna i w ten sam sposób zapisz drugi przycisk, nadając mu inną nazwę. Wynik pokazano na ryc. 19.
Teraz pozostaje tylko upewnić się, że przyciski dobrze wyglądają na stronie internetowej i umieścić je na stronie niestandardowej (Rysunek 20). W rezultacie w tym przykładzie uzyskano plik Primer2.html oraz dwa obrazy graficzne w folderze obrazy (folder Podkład2).
W razie potrzeby podczas procesu optymalizacji przycisk można łatwo przekształcić w wycinek. W tym przypadku po wybraniu polecenia Plik=>Zapisz dla Internetu(Plik => Zapisz dla Internetu) i ustawienia optymalizacji należy wybrać z palety narzędzi Wybierz plasterek(Wybór plasterka) i kliknij dwukrotnie obraz, który automatycznie zmieni się w plasterek z numer seryjny 1 (ryc. 21). Powtarzający się podwójne kliknięcie mysz otworzy okno Opcje plasterków(Slice Options), w którym będziesz musiał podać link iw razie potrzeby zmienić nazwę plasterka (ryc. 22), a następnie zapisać zoptymalizowany obraz. Rezultatem w tym przypadku będą pliki Primer3.html (ryc. 23) i Primer3.gif (folder Primer3).
Elementy interaktywne
Jednym ze sposobów urozmaicenia strony jest wprowadzenie elementów projektu, które ją zmieniają wygląd(lub stan) w zależności od zachowania myszy lub rzadziej w przypadku jakichkolwiek innych sytuacji: powiększania, przewijania, ładowania, błędów itp.
Wśród tych elementów najbardziej znane są rollovery (z angielskiego roll over to roll, roll over) elementy zmieniające swój wygląd pod wpływem myszy. Animowane przyciski to przykłady typowych najazdów. Najazdy są często używane podczas tworzenia innych elementów nawigacji w witrynie. W rzeczywistości każdy najazd to nie jeden, ale kilka (do czterech) obrazów, z których każdy odpowiada określonemu zdarzeniu. Za główne zdarzenia uważa się: normalny stan normalny, najechanie kursorem myszy na element i naciśnięcie lewego przycisku myszy podczas najechania na niego. Teoretycznie w grę mogą wchodzić zdarzenia takie jak Kliknięcie zwalniające lewy przycisk myszy po kliknięciu, Góra po zwolnieniu przycisku, Wyjście po opuszczeniu aktywnej strefy. Jednak w praktyce częściej ogranicza się to do zmiany elementu tylko na pierwsze trzy lub nawet dwa zdarzenia.
Klasyczne przewroty
W klasycznym ujęciu rollover to seria obrazów graficznych w formacie GIF i odpowiadającego im kodu HTML, dzięki czemu w zależności od zachowania myszy jeden obraz zastępuje drugi w oknie przeglądarki.
Program Illustrator nie jest przeznaczony do bezpośredniego tworzenia najazdów w klasycznym tego słowa znaczeniu, ale może pomóc w opracowaniu ich początkowych elementów. Pomysł w tym przypadku polega na utworzeniu warstwy z obrazem odpowiadającym pierwszemu zdarzeniu. Następnie wykonaj kopię warstwy i przekształć obraz, aby pasował do drugiego zdarzenia i tak dalej. Powstały warstwowy obraz eksportowany jest do pliku PSD z zachowaniem warstw, na podstawie którego tworzony jest rollover w Program obrazu Gotowy. Zaletą korzystania z programu Illustrator, podobnie jak w wielu innych przypadkach, jest szereg jego ciekawych funkcji, które nie są dostępne w innych narzędziach programowych, w połączeniu z wygodą transformacji grafiki wektorowej.
Spróbujmy stworzyć najazd w postaci napisu, który zmienia kolor w zależności od zachowania myszy. Otwórz program Illustrator i utwórz kształt w postaci zaokrąglonego i wypełnionego czarnym prostokątem (rys. 24), wykonaj jego kopię i umieść w wolnej części ekranu. Przekonwertuj pierwszą kopię prostokąta na obiekt siatki z podświetleniem w środku (polecenie Obiekt=>Utwórz siatkę gradientu Object=>Create Gradient Mesh), określając cztery wiersze i dziesięć kolumn (Rys. 25). Aktywuj drugą kopię prostokąta i ustaw dla niej wypełnienie gradientowe, podobne do pokazanego na ryc. 26. Nałóż obiekt gradientu na siatkę, zmniejsz krycie obiektu gradientu do około 80%, a rozmiar obiektu gradientu do około 1 piksela, aby na końcu zasymulować efekt wybrzuszenia. A następnie nad przedmiotami wydrukuj napis. W pierwotnej postaci niech ma kolor biały, który będzie odpowiadał stanowi Normal (Rys. 27), a następnie, gdy zmieni się stan najazdu, kolor napisu zmieni się np. na zielony, gdy znacznik myszy unosił się nad nim (stan Over) i zmieniał kolor na niebieski po naciśnięciu przycisku myszy (stan Down).
Zwróć uwagę na paletę Warstwy na tym etapie ma tylko jedną warstwę. Utwórz dwie kopie tej warstwy za pomocą polecenia Zduplikowana warstwa(Powiel warstwę) z menu palety Warstwy, w palecie będą trzy warstwy (ryc. 28). Następnie w pierwszym egzemplarzu warstwy zmień kolor napisu na zielony, aw drugim na niebieski (ryc. 29). W rezultacie uzyskany zostanie niezbędny półfabrykat do przewrócenia.
Wyeksportuj utworzony obraz do formatu PSD z zachowaniem warstw za pomocą polecenia Plik=>Eksportuj(File=>Export) i wybraniu modelu kolorów RGB (Rys. 30). Otwórz wygenerowany plik PSD w ImageReady (rysunki 31 i 32). Twórz ramki na podstawie warstw, wybierając polecenie Twórz ramki z warstw(Utwórz ramki z warstw) z menu palety animacja. Okno animacji będzie wyglądać jak na rys. 33. W tym samym czasie w palecie Najazdy Początkowo zostanie utworzony pojedynczy stan Normalny.
Potem w oknie animacja wybierz ramkę odpowiadającą stanowi najechania na paletę Warstwy warstwa jest wybierana automatycznie Kopia warstwy 1(Rys. 34). Przejdź do palety Najazdy i kliknij przycisk Utwórz stan najazdu(Tworzenie stanu najazdu) rys. 35, co spowoduje pojawienie się stanu Nad stanem w palecie Najazdy(Rys. 36). Utwórz państwo w ten sam sposób Stan w dół. Aktywuj stan Normalna w palecie Najazdy i usuń w palecie animacja wszystkie ramki z wyjątkiem tej, która powinna pasować do stanu Normalna. W rezultacie dla każdego stanu najazdu w palecie animacja będzie tylko jedna ramka (ryc. 37, 38 i 39).
Ryż. 38. Widok obrazu, okno Animacja oraz palety Warstwy i Najazdy dla stanu Over
Sprawdź wynik, klikając przycisk Podgląd w domyślnej przeglądarce(Podgląd przeglądarki) na pasku narzędzi i przechodząc do okna przeglądarki (Rysunek 40). Następnie zapisz plik za pomocą polecenia Plik=>Zapisz zoptymalizowane(Plik=>Zapisz z optymalizacją) i określając opcję HTML i obrazy (*.html). W rezultacie w tym przykładzie uzyskano plik Primer4.html oraz serię obrazów graficznych w folderze images.
Ryż. 40. Okno przeglądarki z elementem Rollover
Najazdy SVG
Zyskuje popularność formacie SVG(Scalable Vector Graphics skalowalna grafika wektorowa), stworzona w oparciu o standard XML, pozwala również na uzyskanie różnorodnych elementów interaktywnych, w szczególności najazdów, tylko w praktyce jest to realizowane w zupełnie inny sposób. Warto zaznaczyć, że tworzenie interaktywnych najazdów SVG, w przeciwieństwie do klasycznych, gdzie odpowiedni kod HTML generowany jest całkowicie automatycznie, wymaga wiedzy język JavaScript oraz zrozumienie podstawowych zasad programowania obiektowego.
Specjalna paleta jest przeznaczona do pracy z obiektami SVG. Interaktywność SVG, który można łatwo otworzyć za pomocą polecenia Okno=>Interaktywność SVG(Okno=>interaktywność SVG) ryc. 41.
Rozważać ta opcja utworzenie rolloveru na przykładzie interaktywnego przycisku, którego kolor etykiety na którym będzie się zmieniał z czarnego na niebieski po najechaniu myszką i z powrotem na czarny po opuszczeniu aktywnego obszaru.
Utwórz prostokątny przycisk z zaokrąglonymi krawędziami i wybierz dla niego odpowiednie wypełnienie gradientowe, na przykład, jak pokazano na ryc. 42. Dostosuj przezroczystość przycisku w palecie Przezroczystość(Przezroczystość) w tym przykładzie wartość parametru Nieprzezroczystość(Krycie) jest ustawione na 50%. Zrób kopię przycisku, wypełnij go ciemnozielonym (Rys. 43), a następnie przekształć go w obiekt typu mesh za pomocą polecenia Obiekt=>Utwórz siatkę gradientu(Obiekt=>Utwórz siatkę gradientu), określając cztery wiersze i dziesięć kolumn, a na liście Wygląd(Widok), wybierając opcję Do Centrum(w kierunku środka) i ustawienie wartości atrakcja(Wyróżnij) na 100. Zmniejsz krycie warstwy obiektu siatki do około 40% (Rysunek 44). Umieść obiekt siatki na obiekcie gradientu, a przycisk będzie wyglądał jak ten pokazany na ryc. 45.
Ryż. 44. Przekształcanie kopii przycisku w obiekt siatki
Uzupełnij przycisk odpowiednim napisem i dostosuj jego położenie za pomocą odpowiednich przycisków palety Wyrównywać(Wyrównanie). Powstały obraz będzie zawierał jedną warstwę z trzema obiektami nałożonymi na siebie (ryc. 46). Zaplanowane wydarzenia będą odwoływać się do obiektu tekstowego, więc dla wygody zmień jego nazwę na Tekst klikając dwukrotnie obiekt i wprowadzając nową nazwę. Podobnie zmień nazwę warstwy z Warstwa 1 do warstwy(Rys. 47).
Przetwarzanie zdarzeń wiąże się z wykorzystaniem procedur JavaScript, dlatego należy załączyć plik z opisem tych procedur. Nazywa się Events.js i jest zapisywany na dysku w folderze Sample Files\Sample Art\SVG\SVG po zainstalowaniu programu Adobe Illustrator. Aby dołączyć plik Events.js, użyj polecenia Pliki JavaScript Interaktywność SVG(Rys. 48). Następnie musisz nacisnąć przycisk Dodać(dodaj) i znajdź żądany plik na dysku twardym. Kiedy jego imię pojawia się w polu Adres URL(rys. 49), kliknij przycisk Zrobione(Wychodzić).
Ryż. 48. Wybór polecenia Pliki JavaScript
Następnie należy zdefiniować reakcję obiektu na zdarzenia myszy Tekst. Wybierz obiekt Tekst w polu wydarzenie Palety (wydarzenia). Interaktywność SVG wybierz wydarzenie najedź myszką elemColor(evt, "Tekst", "#3333FF") będzie to oznaczać, że gdy mysz znajdzie się nad obiektem Tekst jego kolor zmieni się na niebieski (Rys. 50). Aby kolor tekstu zmienił się na czarny po opuszczeniu aktywnej strefy przez mysz, musisz utworzyć jeszcze jedno zdarzenie mysz wybierz go w polu wydarzenie Palety (wydarzenia). Interaktywność SVG. Następnie w wierszu akcji wprowadź tekst elemColor(evt, "Tekst", "#000000") spowoduje to powrót do koloru czarnego (Rys. 51).
Ryż. 51. Ostateczny wygląd palety SVG Interactivity dla obiektu Text
Zapisz wygenerowany najazd jako plik SVG za pomocą polecenia Plik=>Zapisz jako(Plik=> Typ pliku format SVG, a następnie ustawienie opcji zapisu pliku SVG, jak pokazano na rys. 52. Po zapisaniu uzyskany zostanie tylko jeden plik z rozszerzeniem SVG, a nie dwa, jak w przypadku klasycznego najazdu, w tym przypadku uzyskano plik Primer5.svg (folder Primer5). Aby jednak rollover naprawdę zadziałał, należy dodatkowo skopiować plik Events.js z opisem procedur JavaScript do folderu z plikiem SVG. Następnie możesz sprawdzić wydajność najazdu, wynik będzie wyglądał tak, jak pokazano na ryc. 53.
animacja SVG
Format SVG może być również używany do przekazywania animacji. Spróbujmy stworzyć prosty element animacji (w tym przypadku będzie to informacja o firmie), który pojawi się na ekranie po najechaniu myszką na odpowiedni obiekt graficzny i zniknie po odsunięciu myszki od elementu interaktywnego.
Stwórzmy w przybliżeniu taką serię obiektów graficznych i tekstowych, jak pokazano na ryc. 54. Zmień nazwy wszystkich tworzonych obiektów w wygodny sposób, klikając kolejno na nazwę kolejnego obiektu w palecie Warstwy i wpisując żądaną nazwę (Rys. 55). Zwróć uwagę, że zaznaczone na ryc. 56 pozycji Tekst1, Tekst2, Tekst3 I Ścieżka1 będą zawsze widoczne, a wszystkie inne tylko po najechaniu na obiekt Tekst 1.
Ryż. 54. Oryginalny widok obrazu
Dołącz plik Events.js z opisem procedur JavaScript, używając polecenia Pliki JavaScript(pliki JavaScript) z palety Interaktywność SVG naciskając przycisk Dodać(Dodaj), wybierając żądany plik na dysku twardym i klikając przycisk Zrobione(Wychodzić).
Zdefiniuj reakcję na zdarzenie myszy dla obiektu Tekst 1. Wybierz obiekt Tekst, w polu wydarzenie Palety (wydarzenia). Interaktywność SVG wybierz wydarzenie najedź myszką i w wierszu poniżej wpisz tekst elemShow(evt, "Tekst4"); elemShow(evt, "Ścieżka2"). W rezultacie, gdy mysz znajdzie się nad obiektem Tekst 1 obiekty staną się widoczne Tekst4 I Ścieżka2. Należy pamiętać, że jeśli po wystąpieniu zdarzenia należy wykonać kilka czynności, należy je określić za pomocą znaku „;”. Następnie zrób to samo dla wydarzenia mysz, wpisując dla niego tekst, co będzie oznaczać ukrywanie obiektów (ryc. 57).
Zapisz wynik jako plik SVG za pomocą polecenia Plik=>Zapisz jako(Plik=>Zapisz jako), określając nazwę pliku, wybierając w polu Typ pliku formatu SVG, a następnie ustawienie opcji zapisu pliku SVG zgodnie z Rys. 58. Po zapisaniu zostanie uzyskany plik Primer6.svg (folder Primer6). Nie zapomnij skopiować pliku Events.js do folderu z tym plikiem. Jeśli po tym uciekniesz coz dany plik zobaczysz wynik pokazany na ryc. 59. To jest prawie to, czego potrzebujesz. Jedyne, czego nie uwzględniliśmy w naszych planach, to początkowy wygląd obiektów Tekst 4 i Ścieżka 2 podczas ładowania. Aby pozbyć się tego mankamentu, zaznacz oba te obiekty naraz i utwórz dla nich akcję elemHide(evt, "Tekst4"); elemHide(evt, "Ścieżka2") na imprezie załaduj(Rys. 60). Zapisz plik ponownie i upewnij się, że obiekty są teraz Tekst4 I Ścieżka2 widoczne tylko po najechaniu myszką na obiekt Tekst 1.
animacja GIF-ów
Żadna strona internetowa jest nie do pomyślenia bez animacji internetowej, w tym animowanych gifów. Jednym ze sposobów ich tworzenia jest skorzystanie z aplikacji Adobe ImageReady, która między innymi umożliwia tworzenie animacji z warstw. W takim przypadku sam obraz wielowarstwowy można przygotować w różne aplikacje, w tym w programie Adobe Illustrator.
Bardzo łatwo jest stworzyć animację na podstawie elementów z palety Symbolika(Symbole) otwierane poleceniem Okno=>Symbole(Okno=>Symbole) lub z jednej z bibliotek symboli, które można otworzyć za pomocą polecenia Okno=>Biblioteki symboli(Okno=>Biblioteki symboli).
Na przykład spróbujmy zwiększyć rozmiar dowolnego obiektu-symbolu, kluczowe etapy procesu powiększania obiektu muszą być ustawione na osobnych warstwach. Najpierw po prostu umieść obiekty symboli jeden nad drugim, a następnie zwiększ rozmiar każdego kolejnego obiektu, na przykład, jak pokazano na ryc. 61. W rezultacie w palecie Warstwy zostanie utworzona jedna warstwa z wieloma obiektami (Rys. 62). Jeśli wyeksportujesz ten obraz bezpośrednio do formatu PSD, to nie zadziała, ponieważ jest tylko jedna warstwa i oczywiście po otwarciu pliku PSD w ImageReady będzie również tylko jedna warstwa. Dlatego musisz najpierw umieścić obiekty na różnych warstwach. To może być skończone różne sposoby najłatwiejszym sposobem jest najpierw wybranie warstwy Warstwa 1 na palecie Warstwy i użyj polecenia Zwolnij do warstwy(Wydanie w warstwach). Rezultatem będzie przeniesienie każdego z obiektów do własnej warstwy, ale wszystkie będą zagnieżdżone w warstwie Warstwa 1. Dlatego będziesz musiał ręcznie przeciągnąć wszystkie zagnieżdżone warstwy na górę palety Warstwy, tak aby znajdowały się nad warstwą Warstwa 1, a następnie pustą warstwę Warstwa 1łatwe do usunięcia (ryc. 63). Wyeksportuj obraz do formatu PSD za pomocą polecenia Plik=>Eksportuj(Plik=>Eksport) z ustawieniami jak na rys. 64.
Załaduj utworzony plik PSD do programu ImageReady (rys. 65 i 66). Otwórz menu palety animacjaTwórz ramki z warstw(Tworzenie ramek z warstw). W rezultacie powstanie pięć ramek, z których każda będzie odpowiadać swojej warstwie i oknie palety animacja będzie wyglądać jak na rys. 67.
Następnie ustaw czas trwania każdej z utworzonych klatek, w tym przypadku czas trwania wszystkich klatek jest ustawiony na 0,2 s. A następnie zapisz zoptymalizowaną animację za pomocą polecenia Plik=>Zapisz zoptymalizowane(Plik=>Zapisz z optymalizacją). Otrzymany wynik może przypominać rys. 68.
Korzystanie z funkcji jest jeszcze wygodniejsze Mieszanki na żywo oprogramowanie Illustrator. To połączone użycie programów Illustrator i ImageReady znacznie przyspiesza proces tworzenia animacji GIF.
Na przykład narysuj dwa dowolne wielokolorowe obiekty, a następnie połącz je z odpowiednimi parametrami (ryc. 69). Nie można użyć tego pliku bezpośrednio do stworzenia animacji, ponieważ obraz znajduje się na jednej warstwie (ryc. 70). Dlatego najpierw musisz umieścić każdy element obiektu mieszania na osobnej warstwie. Aby to zrobić, w oknie Warstwy zaznacz linię
Ryż. 70. Stan początkowy okna Warstwy
Wyeksportuj utworzony plik do formatu PSD za pomocą polecenia Plik=>Eksportuj(Plik=>Eksportuj). Otwórz utworzony plik PSD w ImageReady (rys. 73). Należy pamiętać, że wszystkie warstwy utworzone w programie Illustrator pojawią się w oknie warstw (ryc. 74), a w oknie animacja będzie tylko jedna ramka.
Aktywuj menu palety animacja, klikając czarną strzałkę w prawym górnym rogu palety i wybierając polecenie Twórz ramki z warstw(Utwórz klatki z warstw) na koniec, w tym przykładzie, zostanie utworzonych pięć ramek i okno palety animacja przyjmie postać zgodnie z rys. 75. Zaznacz wszystkie klatki, przytrzymując klawisz Zmiana i ustawić odpowiedni czas trwania ramki, w tym przykładzie dla każdej z ramek przyjmowany jest ten sam czas 0,2 s. Następnie zapisz plik za pomocą polecenia optymalizacji Plik=>Zapisz zoptymalizowane(Plik=>Zapisz z optymalizacją) ustawienie na liście Typ pliku opcja Tylko obrazy (*.gif). Animacja będzie przypominać rys. 76.
Znacznie bardziej interesujący nie jest ruch, ale płynna zmiana rozmiaru mieszanych obiektów. Na przykład możesz użyć już utworzonego przejścia mieszanego. W takim przypadku po utworzeniu oddzielnych warstw dla każdego elementu przejścia mieszanego umieść wszystkie obiekty jeden na drugim za pomocą przycisków Wyrównaj poziomo do środka(Wyrównanie względem środka poziomego) i Wyrównaj w pionie do środka Palety (wyrównanie do środka w pionie). Wyrównywać(ryc. 77).
Wyeksportuj utworzony plik do formatu PSD ( Plik=>Eksportuj Plik=>Eksportuj) i otwórz utworzony plik PSD w programie ImageReady (Rys. 78). Twórz klatki animacji na podstawie warstw ( Twórz ramki z warstw Utwórz klatki z warstw) i wybierz dla nich odpowiedni czas trwania (ryc. 79). A następnie, aby animacja była bardziej efektywna, skopiuj istniejące klatki, ale w odwrotnej kolejności, aby obraz najpierw wzrastał, a następnie zmniejszał się i tak dalej w kółko (ryc. 80). Następnie zapisz plik optymalizacji ( Plik=>Zapisz zoptymalizowane Plik=>Zapisz z optymalizacją). Wynikowa animacja jest pokazana na ryc. 81.
Ryż. 80. Stan okna animacji po zduplikowaniu klatek
Ryż. 81. Gotowa animacja
Cześć wszystkim! Dzisiaj postaram się zrobić opis funkcji programu Adobe Ilustrator, porównując to z możliwościami spłukiwania. To nie będzie globalna analiza programu kości, a raczej opis niektórych interesujących chipów, które odkryłem w tym programie. Zebrałem informacje kawałek po kawałku, gdy je studiowałem, aby umieścić je wszystkie w jednym poście. Od razu muszę przyznać, że nie jestem super doświadczonym użytkownikiem ilustratora, dopiero od pół roku używam go do rysowania (wcześniej wszystko rysowałem we flashu). Wielu narzeka, że ilustrator jest złożony, nie zawsze intuicyjny. Do pewnego stopnia zgadzam się, że po flashowaniu ten program jest trudny. Ale najważniejsze jest, aby nie rezygnować, ale kontynuować naukę. A po kilku tygodniach pojawia się myśl, jak wcześniej sobie bez niej radziłam!
Czyli co mi się podobało w ilustratorze i co znalazłem dla siebie, co nie jest we flashu.
1. Zacznę od najprostszego, ale jednocześnie niezbędnego. Spróbuj ułożyć przedmioty w kółko w mgnieniu oka. Wcześniej był Narzędzie dekoracyjne, ale został usunięty, najwyraźniej uznany za zbędny. Uznaliśmy, że fajniej będzie zrobić to ręcznie. Illustrator ma tę funkcję: Efekt - Zniekształcenie i przekształcenie - Przekształcenie.
Wszystko jest szybkie i proste, wartości (odległość między obiektami, ilość kopii) ustalamy sami w ustawieniach.
2. Zygzak
Jeszcze prostsza, ale mimo to przydatna rzecz. Wydawałoby się to drobiazgiem, ale we flashu musisz rysować ręcznie, w ilustratorze jest to kwestia sekund.
3. Deformacja obiektów (Wypaczenie)
We Flashu nie ma czegoś takiego. W poniższym przykładzie pokazałem tylko 2 sposoby deformacji prostych kształtów (Efekt - Warp - Łuk / Ryba). Właściwie jest ich 15. Ostatnia wersja programy.
4. Automatyczne zaokrąglanie rogów (Round Corners)
Można to zrobić ręcznie: na obiekcie graficznym po zaznaczeniu w rogu (we wszystkich rogach) pojawia się biała kropka i znak zaokrąglonej linii. Przeciągnij myszą, dostosuj do swojego gustu.
Ale dotyczy to tylko kształtów, z linią ołówka trochę inaczej - zastosuj efekt zaokrąglenia ( Efekt - Stylizacja - Zaokrąglone rogi). Na wyjściu otrzymujemy ten sam wynik.
5. Szorstkować
Efekt jest stosowany do prostych kształtów ( Efekt-zniekształcenie i przekształcenie-zgrubienie). W efekcie otrzymujemy coś na kształt modeli 3D low-poly. Myślę, że jest spoko :) A co najważniejsze - bardzo proste.
6 Pucker&Bloat(Wciągnij i napompuj)
Przykład na poniższym obrazku:
7. Rozszerzenie formularza (ścieżka przesunięcia)
We flashu jest funkcja Expand Fill (rozszerzenie wypełnienia), 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 przykładowe zdjęcie poniżej:
9. Pędzel do tekstur (Pędzle do tekstur)
W ilustratorze jest też wiele pędzli tekstur, o których pisałem i jak pojawiły się w nowej wersji flasha - . Zauważono, że korzystanie z pędzli w programie Adobe Animate jest strasznie powolne. Otóż to:(
10. Nie jestem pewien, czy to sztuczka, ale chcę skupić się na pędzlu o zabawnej nazwie kropelkaSzczotka. Znajduje się na pasku narzędzi, bardzo przyjemny w użyciu pędzel. Ma kilka ustawień, podoba mi się bardziej niż zwykle. Trudno opisać jego zalety słowami, lepiej spróbować raz.
10. Podziel na siatkę
Kolejną przydatną funkcją jest funkcja Split to Grid (Object-Path-Split to Grid), która pozwala podzielić formatkę na równe segmenty. Co nam to przypomina? Zgadza się - okna w wieżowcu. Jak dla mnie fajna sprawa do rysowania np miejskich pejzaży ;)
Inny użyteczne narzędzie, prezentowane w ilustratorze, prawdopodobnie od pierwszego wydania. Dzięki niemu możesz tworzyć na przykład tekstury drewna:
12. Ruszaj się (w prawo – Przekształć – Ruszaj się)
Odsuń obiekt o określoną odległość. W razie potrzeby możesz natychmiast utworzyć kopię, która zostanie umieszczona w żądanej odległości od wybranego obiektu w poziomie / lub w pionie. Wcześniejsza wersja Flasha miała taką wtyczkę ta funkcja. Niestety nie pamiętam jego nazwy.
Tworzenie bezszwowych wzorów w programie Illustrator jest bardzo wygodne ( Obiekt-Wzór-Make). Pamiętam, jak szaleńczo celowałem we flashu, tworząc pliki . W ilustratorskiej wersji CC 2015 wszystko jest zautomatyzowane, kilka ustawień pomoże Ci stworzyć wzór w dziesiątkach wariantów, mając pod ręką zaledwie kilka elementów graficznych. We wcześniejszych wersjach programu wszystko trzeba było robić ręcznie, tak jak do tej pory we flashu.
(Uwaga - wzór można przekształcić w edytowalny obiekt wektorowy za pomocą funkcji parsowania ( Wygląd rozwinięcia obiektu).
14. Mozaika przedmiotowa (Mozaika)
Utwórz paletę kolorów na podstawie istniejącego obrazu. Następnie zaimportuj obraz, który Ci się podoba, do ilustracji (Otwórz). Obiekt — Utwórz mozaikę obiektów. W ustawieniach określamy częstotliwość podziału w wysokości i szerokości.
A na wyjściu otrzymujemy:
15. Mieszanie (mieszanie)
Służy do tworzenia gradientów. Możesz tworzyć przejścia krok po kroku, jak na przykład na obrazku. Nie mogę powiedzieć, że używam go często, ale może się komuś przydać. Wydaje mi się, że można go wykorzystać do tworzenia prostych obrazków tła.
Narzędzie może być również używane do klonowania obiektów. Umieszczamy dwa obiekty w pewnej odległości od siebie i stosujemy Blend Options, wybieramy ilość kroków (ilość sklonowanych obiektów).
16. Narzędzie budowania kształtu. Bardzo przydatna rzecz do pracy z prymitywami. W mgnieniu oka, jak mi się wydawało, jest to mniej wygodne.
Przytrzymując Alt i klikając wybrane segmenty - usuń segmenty. Jeśli po prostu przeciągniemy myszką nad kilkoma wybranymi obszarami - połączeniami.
Dodatek - narzędzie pomagające automatycznie ciąć, łączyć itp. wybrane formy. Jak dla mnie nie jest to zbyt wygodne, częściej z niego korzystam Zbudować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, czyli sceny ( Scena 1,2,3..) znajdują się osobno i trzeba się między nimi przełączać (Shift + F2). W programie Illustrator wszystkie można umieścić przed oczami. Jest to wygodne, gdy tworzysz kilka wersji tego samego rysunku, aby wszystkie opcje były przed oczami w celu porównania.
19. Izometryczny ze stylami graficznymi
I ostatnia rzecz to tworzenie izometrii bez użycia 1 kliku (a raczej 3 klików, bo mamy 3 boki;) przy użyciu stylów graficznych ( Style graficzne). Jak to się robi, napiszę następnym razem.
To, co ilustrator ma wspólnego z flashem, to możliwość zapisania obiektu do symbolu (symbolu) i ten symbol można również bez problemu przenieść do flasha (otworzyć plik .ai we flashu, Importuj — Importuj na scenę).
Symbol w programie Illustrator ma takie same właściwości jak we Flashu.
I na koniec napiszę, co moim zdaniem w ilustratorze jest gorsze od flasha. Tak, tak i jest. A to jest narzędzie do wypełniania ( wiadro farby). Bez względu na to, jak bardzo staram się przyzwyczaić do tego w illa, we flashu jest to wygodniejsze.
Jeśli moje notatki stały się dla Ciebie przydatne lub jeśli chcesz dodać coś od siebie - zapraszamy do komentarzy! Powodzenia wszystkim;)
Masz jedną lub dwie ikony, które chciałbyś ożywić za pomocą animacji. Gdzie byś zaczął? Załóżmy, że masz pliki SVG, Illustrator CC i After Effects CC, ale rozwiązanie ci umyka.
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 eksporcie i renderowaniu.
Efekt końcowy pracy.
Przejdźmy teraz do najciekawszej części - naucz się 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 rozdzielić wszystkie obiekty na warstwy. Możesz to zrobić ręcznie lub użyć Zwolnij do warstw (sekwencja) aby przyspieszyć proces. Zanim zaimportujemy plik do After Effects, musimy zapisać go w formacie pliku programu Illustrator.
Możemy rozgrupować obiekty za pomocą Zwolnij do warstw (sekwencja), aby nie tracić cennego czasu. Importowanie i organizowanie pliku w After Effects CC
Możesz teraz importować do After Effects CC. Użyjmy skrótu klawiaturowego Ctrl+I (Windows) Lub Komenda+I (Prochowiec) aby załadować okno dialogowe importować plik lub przejdź do Plik > Importuj > 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. Wybierać kompozycja z rozwijanej listy tzw Rodzaj importu.
Więcej szybki sposób import pliku - kliknij dwukrotnie na miejsce kolumny na panelu projektu. W panelu osi czasu zobaczymy nową kompozycję. Klikamy na niego dwukrotnie. Powinniśmy teraz zobaczyć warstwy programu Illustrator CC z pomarańczowymi ikonami po lewej stronie ich nazw.
Zanim przejdziemy do rzeczy, musimy przekonwertować wszystkie te warstwy na warstwy kształtu. Musimy wybrać je wszystkie za pomocą Ctrl+A/Command+A lub ręcznie za pomocą Shift + Lewy przycisk myszy. Następnie kliknij prawym przyciskiem myszy warstwę i wybierz Utwórz > Utwórz kształty z warstwy wektorowej.
Po wybraniu nowych warstw przeciągnij je na górę panelu nad warstwami programu Illustrator CC, a następnie usuń warstwy programu Illustrator CC, aby nie przeszkadzały.
Konwertowanie warstw programu Illustrator CC na warstwy kształtów w programie After Effects CC Chociaż nie jest to konieczne, ważne jest, abyśmy nadali każdej warstwie odpowiednią nazwę i/lub kolor. Umożliwi nam to wydajniejszą pracę, ponieważ skupimy się na klatkach kluczowych. W poniższym przykładzie kolory etykiet mniej więcej odpowiadają wypełnieniom odpowiednich warstw.
Etykietowanie warstw kształtu odpowiednimi nazwami, kolorami, etykietami i pozycjami jest bardzo praktyczne. Użyj skrótu klawiaturowego, aby skonfigurować ustawienia Ctrl+K/Command+K Lub Kompozycja > Ustawienia kompozycji… W ustawieniach kompozycji musimy wybrać szerokość, wysokość, liczbę klatek na sekundę i czas trwania dla szerokości, wysokości, liczby klatek na sekundę i czasu trwania. W tym projekcie wybrałem 60 fps, aby animacja była płynna.
W tym momencie wszystko wydaje się być gotowe, ale jest jeszcze jedna rzecz, którą należy zrobić. Musimy pogrupować pewne warstwy razem, aby ich ruchy były zsynchronizowane z główną warstwą, którą możemy kontrolować. Ta metoda nazywa się rodzicielstwo.
Użyj Pick Whip, aby przypisać warstwę macierzystą do wielu warstw. W naszym przykładzie mniej znaczące warstwy (warstwy podrzędne), takie jak przednia szyba, części ciała, drewno i liny, przypisałem do podstawowej warstwy ciała (warstwy macierzystej). Pozwoliło mi to kontrolować pozycję i obrót całego samochodu (z wyłączeniem kół) za pomocą warstwy nadrzędnej.
Tworzenie animacji
Chciałem, żeby samochód uderzył w skałę i zawisł trochę w powietrzu. Chciałem też, aby drzewo poruszało się w górę i w dół oraz otwierało pień. Zacząłem od zbudowania kamienia, samochodu i kół. Potem przyszedł czas na pokonanie największej przeszkody – umieszczenie akcji na drzewku. Kiedy to zrobiłem, zabrałem się za drobne szczegóły, takie jak stojak i liny.
Szkic opisujący animację Pierwszym krokiem było utworzenie elementu skalnego lub warstwy, ale zamiast wracać do programu Illustrator CC w celu dodania kolejnej warstwy, po prostu użyłem narzędzia Pióro w programie After Effects CC. To pozwoliło mi szybko zaprojektować mały kamień.
Och, potężne narzędzie Pióro! Kufer był stosunkowo prostym zadaniem. Zainstalowałem go z tyłu samochodu i zrobiłem punkt kontrolny w lewym dolnym wierzchołku. Używając Pick Whip , przypisałem go do nadrzędnej warstwy ciała. Przedostatnim krokiem było nadanie efektu obrotu, co z kolei urealniło moment podskakiwania samochodu.Bodymovin w połączeniu z mobilną biblioteką Lottie.
PS możesz znaleźć moje pliki Illustrator CC i After Effects CC.
Zestaw ikon jest dostępny do bezpłatnego pobrania pod adresem .
Dziś mamy nie do końca to, co zwykle Lekcja Adobe'a Ilustrator. Bo tym razem nie zrobimy statycznego obrazka, a prawdziwą animację. Wyobraź sobie, okazuje się, że przy pomocy Adobe Illustratora można też rysować bajki :)
I nic nam do tego nie jest potrzebne. Właściwa organizacja warstw i eksport finalnej pracy do formatu swf, gdzie każda warstwa jest zamieniana na klatkę animacji. W dzisiejszym tutorialu narysujemy animację odliczania w stylu retro. Wynikiem powinien być film flash z tym samym odliczaniem.
Pierwszą rzeczą do zrobienia jest narysowanie wszystkich niezbędnych elementów do przyszłej animacji. W tym celu wykonałem dwie pozycje kadru filmu w osobnym dokumencie, dla odniesienia koło, które zostało pocięte na osobne sektory, teksturę i pionową rysę dla dodania efektu starożytności, a także wszystkie cyfry i napisy.
Kiedy wszystkie części naszej kreskówki są gotowe, możesz przystąpić do tworzenia 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ć klatkę filmu. Umieść go na środku obszaru roboczego.
Teraz utwórz drugą warstwę i skopiuj do niej klatkę filmu, w której otwory na krawędziach są wykonane z przesunięciem. Musi być również wyśrodkowany.
Z tych dwóch warstw można już uzyskać animację ruchomego filmu. Ale później będziemy potrzebować dużo więcej warstw. Wybierz więc dwie pierwsze warstwy, przejdź do opcji panelu i wykonaj kopię warstw.
W podobny sposób musimy zgromadzić 12 warstw z klatkami filmu, które definiują jego ruch.
Teraz mamy całą masę warstw i wszystkie są widoczne. W tym sensie, że górne warstwy blokują dolne, co nie jest zbyt wygodne w pracy. Dlatego możesz wyłączyć niektóre warstwy, klikając ikonę oka po lewej stronie nazwy warstwy. Aby jednocześnie wyłączyć lub włączyć wszystkie warstwy, przytrzymaj klawisz Alt podczas klikania ikony 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 poruszenie do ruchu filmu, musimy nieco przesunąć otrzymane klatki różne strony. 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 przejściu przez wszystkie warstwy i dodaniu małego przesunięcia, możesz zacząć tworzyć animację poruszającego się koła. Aby to zrobić, skopiuj okrąg składający się z sektorów z dokumentu części rysunkowych i umieść go na pierwszej warstwie na górze klatki filmu.
Jeśli usuniesz zaznaczenie z koła, będzie ono wyglądać jak pojedyncza całość. To jest dokładnie to, czego potrzebujemy.
Ale ponieważ składa się z oddzielnych sektorów, zmieniając ich kolor, można bardzo szybko i łatwo stworzyć animację. Aby to zrobić, skopiuj ten okrąg na drugą warstwę i rozjaśnij pierwszy sektor. Pamiętasz, że film trzęsie się podczas ruchu, więc nie jest konieczne umieszczanie koła dokładnie na środku kadru. Umieść go na oku.
Podobnie musisz skopiować okrąg na każdą następną warstwę, malując jaśniejszym kolorem o jeden sektor więcej niż poprzednio. Razem te 12 warstw tworzy animację ruchu filmu z wypełniającym okręgiem.
Następnie musimy dodać teksturę do naszych warstw. Włącz pierwszą warstwę i skopiuj teksturę z pliku źródłowego z częściami zamiennymi.
Następnie włączamy po kolei kolejne warstwy i kopiujemy tam tę samą teksturę. Aby na każdej klatce wyglądał inaczej, wystarczy obrócić go o 90 stopni. Jak można się domyślić, musimy dodać teksturę do wszystkich 12 klatek.
Jeśli masz już dość kopiowania, to mogę Cię zadowolić - zostało bardzo niewiele. Najtrudniejsza część się skończyła. Pozostaje dodać pionowe rysy 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ę już przy dwóch warstwach.
Teraz, gdy główny cykl z animacją filmową jest gotowy, pozostaje dodać liczby. Ponieważ liczymy od 3 do 1 plus słowo Go!!!, potrzebujemy jeszcze więcej warstw. Nie 12, ale aż 48. Aby to zrobić, musisz 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ę figurę na kolejne warstwy, aż skończy się animacja koła. Kiedy dojdziesz do następnej kopii warstw, gdzie okrąg ponownie zostanie całkowicie wypełniony, musisz umieścić numer dwa. W ten sam sposób skopiuj numer jeden do żądanych warstw. A kiedy dojdziesz do ostatnich warstw etykiety Go!!!, po prostu usuń kółko przed skopiowaniem etykiety na żądaną warstwę.
To wszystko z animacją. Najważniejsze tutaj, aby się nie pomylić. Możesz nadać warstwom jakieś wygodne nazwy, ale jakoś byłem zbyt leniwy :) A jednak, kiedy skończysz, pamiętaj, aby ponownie włączyć wszystkie warstwy, klikając ikonę oka.
W oknie ustawień eksportu pamiętaj o ustawieniu Eksportuj jako: Warstwy AI na Ramki SWF. To właśnie ta opcja zamienia warstwy programu Illustrator w klatki animacji. Następnie kliknij przycisk Zaawansowane.
Będzie otwarte dodatkowe ustawienia. Tutaj musisz ustawić liczbę klatek na sekundę. Mam 12 klatek na sekundę. Pole wyboru Looping odpowiada za obracanie animacji. Dzięki niej wideo będzie odtwarzane w kółko. A opcja Kolejność warstw: od dołu do góry renderuje warstwy ilustratora od dołu do góry w panelu. Dokładnie tak zbudowaliśmy naszą animację.
W rezultacie otrzymujemy film flash z naszą animacją.
Teraz to widzisz prosta animacja robienie w programie Adobe Illustrator nie jest takie trudne, jak się wydaje na pierwszy rzut oka.
Ale do tworzenia długich filmów lub interaktywnych aplikacji nadal lepiej jest go używać Adobe Flash lub inne edytory flash. Na przykład zrobiłem tego kota w starym Macromedia Flash które wykopałam w pracy.
Również ostatnio HTML5 i CSS3 są coraz częściej wykorzystywane do tworzenia animacji. Podany kod utrzymany nowoczesne przeglądarki i nie wymaga użycia Flash Playera.
Roman zwany dacascas specjalnie dla bloga
Zapisz się do naszego newslettera, aby nie przegapić niczego nowego:
Format Plik Flasha(SWF) na podstawie Grafika wektorowa i jest przeznaczony do skalowalnej, kompaktowej grafiki do Internetu. Ponieważ ten format pliku jest oparty na grafice wektorowej, obiekt zachowuje jakość obrazu w dowolnej rozdzielczości i jest idealny do tworzenia klatek animacji. W programie Illustrator można tworzyć pojedyncze klatki animacji na warstwach, a następnie eksportować warstwy obrazów jako pojedyncze klatki do wykorzystania w witrynie internetowej. Możesz też zdefiniować symbolika w pliku programu Illustrator, aby zmniejszyć rozmiar animacji. Podczas eksportu każdy symbol jest zdefiniowany tylko raz w pliku SWF.
Polecenie eksportu (SWF)
Zapewnia największą kontrolę nad animacją i kompresją bitów.
Zapewnia większą kontrolę nad połączeniem formatów SWF i map bitowych w pofragmentowanym układzie. To polecenie oferuje mniej opcji obrazu niż polecenie Eksportuj (SWF), ale korzysta z ostatnio używanych opcji polecenia Eksportuj (patrz ).
Przygotowując obiekt do zapisania jako SWF, należy pamiętać o następujących wskazówkach.
Używając Urządzenie z aplikacjami Central, możesz zobaczyć, jak grafika programu Illustrator będzie wyglądać w aplikacji Odtwarzacz Flash na różnych urządzeniach przenośnych.
Wstawianie grafiki programu Illustrator
Grafika stworzona w programie Illustrator może być szybko, łatwo i łatwo skopiowana i wklejona Aplikacja flashowa.
Podczas wklejania grafiki programu Illustrator do aplikacji Flash zachowywane są następujące atrybuty.
Grubość kreski
Definicje 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 funkcje podczas wklejania 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 przez program Flash na formacie RGB. Kolory RGB włożone w zwykły sposób.
Podczas importowania lub wklejania kompozycji programu Illustrator można użyć różnych opcji, aby zapisać określone efekty (takie jak cień rzucany przez tekst) jako filtry Flash.
Flash zapisuje maski programu Illustrator.
Eksportuj pliki SWF z programu Illustrator
Pliki SWF wyeksportowane z programu Illustrator mają taką samą jakość i kompresję jak pliki SWF wyeksportowane z programu Flash.
Podczas eksportowania można wybierać spośród wielu wstępnie zdefiniowanych stylów w celu uzyskania optymalnych wyników i określić sposób używania wielu obszarów roboczych oraz sposób konwertowania znaków, warstw, tekstu i masek. Można na przykład wybrać opcję eksportowania symboli programu Illustrator jako filmów lub grafiki albo tworzyć symbole SWF z warstw programu Illustrator.
Importowanie plików programu Illustrator do aplikacji Flash
Aby utworzyć kompletny układ w programie Illustrator, a następnie zaimportować go do programu Flash w jednym kroku, możesz zapisać kompozycję w natywnym formacie programu Illustrator (AI) i zaimportować ją z dużą dokładnością do programu Flash, korzystając z obszaru poleceń Plik > Importuj do obszaru roboczego. Plik” > „Importuj do biblioteki”.
Jeśli plik programu Illustrator zawiera wiele obszarów roboczych, wybierz obszar roboczy do zaimportowania w oknie dialogowym Flash Import i określ ustawienia dla każdej warstwy w tym obszarze roboczym. Wszystkie obiekty w wybranym obszarze roboczym zostaną zaimportowane do program flashowy jako pojedyncza warstwa. Podczas importowania innego obszaru roboczego 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 program Flash zachowuje te same atrybuty, co po wklejeniu obiekty graficzne Ilustrator. Ponadto, jeśli importowany plik programu Illustrator zawiera warstwy, można je zaimportować, korzystając z jednej z poniższych metod.
Konwertuj warstwy programu Illustrator na warstwy Flash.
Konwertuj warstwy programu Illustrator na ramki Flash.
Konwertuj wszystkie warstwy programu Illustrator na jedną warstwę Flash.