Przejrzysty plik GIF w programie Adobe Illustrator wykonuje się w następujący sposób. Przejdź do Plik\u003e Zapisz dla Internetu i urządzeń (Alt + Ctrl + Shift + S). W oknie, które zostanie otwarte, w polu Zoptymalizowany format pliku przejdź najpierw do zakładki Rozmiar obrazu (Rozmiar obrazu). Faktem jest, że cała strona domyślnie wpada w okno optymalizacji, co zwykle nie jest konieczne. Dlatego na karcie Rozmiar obrazu odznacz pole. Klip do obszaru roboczego (Przytnij, aby dopasować do strony) i kliknij Zastosuj.
Następnie na liście wyboru formatu wybierz GIF i zaznacz pole Przezroczystość.
Następnie określamy, które kolory będą przezroczyste. Wszystkie kolory obecne na obrazie są zawarte w zakładce. Tabela kolorów (Karta kolorów) i są wyświetlane jako kolorowe kwadraty. Wybierz narzędzie na pasku narzędzi po lewej stronie okna Kroplomierz (zakraplacz).
Istnieją dwa sposoby definiowania kolorów. Najprostszym sposobem jest określenie koloru za pomocą zakraplacza bezpośrednio na obrazie - po tym kolor zostanie podświetlony na tablicy kolorów ciemnym pociągnięciem. Cóż, jeśli dokładnie wiesz, który kolor powinien być przezroczysty, możesz go wybrać bezpośrednio na tabeli kolorów, klikając odpowiednie pole koloru. 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 musisz poinstruować program, aby był przezroczysty. Aby to zrobić, kliknij ikonę Odwzorowuje wybrane kolory na Przezroczyste (Dodaj wybrane kolory do przezroczystości). Na rysunku ten przycisk jest zakreślony kółkiem, a kolor czerwony jest wybrany jako przezroczysty. Na obrazie pojawi się przezroczysty obszar, a mały kwadrat na tablicy kolorów zmieni swój wygląd - jego część stanie się białym trójkątem. Aby anulować wybrany kolor, wybierz go z Tabeli kolorów, a następnie ponownie kliknij ikonę Mapuj wybrane kolory na Przezroczyste.
Kilka słów o sposobie ustawiania przezroczystości. Odpowiedzialne za to menu rozwijane. Określ algorytm roztrząsania przezroczystości, w języku rosyjskim - algorytm symulujący przezroczystość (ryc. poniżej). Można wybrać cztery opcje: Bez ditheringu przezroczystości - bez algorytmu, Dithering przezroczystości dyfuzyjnej - algorytm rozproszony, Dithering przezroczystości wzoru - algorytm oparty na wzorach i Dithering przezroczystości hałasu - algorytm oparty na szumach. W trybie algorytmu rozproszonego suwak staje się aktywny Kwota (Wartość), co pozwala zmienić wartość dyfuzji. Co stosować w praktyce? W zależności od celu i obrazu. Nie korzystam z tej opcji i zawsze pozostawiam ustawienie domyślne - Bez roztrząsania przezroczystości.
Kliknij Zapisz - przezroczysty plik GIF jest gotowy. Prace zostały wykonane w programie Adobe Illustrator w wersji CS4 (wer. 14), ale wszystkie działania i skróty klawiaturowe są istotne dla wcześniejszej wersji CS3 (wer. 13).
Teraz skomplikujmy to zadanie - stworzymy animowany baner Flash. Mówienie o pełnej animacji Flash, w tym przypadku, oczywiście, nie jest konieczne - są na to specjalne pakiety. Ale aby stworzyć prosty, amatorski film, możesz użyć programu Illustrator.
W programie Adobe Illustrator nie ma specjalnych narzędzi i narzędzi interfejsu, takich jak oś czasu charakterystyczna dla programów do tworzenia animacji. Ale jest jedna subtelność - możesz użyć warstw jako ramek.
Utwórz baner z samym tekstem.
- Grupuj znaki za pomocą polecenia Obiekt ›Grupa (Obiekt ›Grupa).
- Następnym zadaniem jest tworzenie obiektów konturowych ze znaków czcionek, w przeciwnym razie prawidłowe tworzenie warstw nie będzie działać. Aby to zrobić, zaznacz grupę i wybierz Wpisz ›Utwórz kontury (Czcionka ›Ślad).
- Następnie otwórz menu palety Warstwy (Warstwy), klikając przycisk w postaci strzałki na palecie (ryc. 8.11).
Ryc. 8.11. Menu warstw
Interesuje nas polecenie w tym menu. Release to Layer (Sequence) (Konwertuj na warstwy (sekwencyjnie)), który przenosi każdy pojedynczy obiekt na nową warstwę. Należy pamiętać, że podczas stosowania polecenia grupa musi zostać podświetlona Grupa, nie warstwa Warstwa 1.
Sposób, w jaki powinna wyglądać paleta Warstwy (Warstwy) po wykonaniu Release to Layer (Sequence) (Konwertuj na warstwy (sekwencyjnie)), pokazany na ryc. 8.12
Ryc. 8.12. Paleta warstw po wykonaniu Release to Layer (Sekwencja)
To kończy przygotowania, które możesz zapisać Zapisz dla Internetu (Zapisz dla Internetu) w SWF. Swf - Jest to główny format graficzny oparty na technologiach Flash. Dokładniej będzie powiedzieć, że jest to format Flash (ryc. 8.13).
Prawdopodobnie dzisiaj wszyscy użytkownicy są mniej lub bardziej zaznajomieni z Flash. Obecnie jest to najpopularniejszy format animacji w Internecie, za pomocą którego budowana jest ogromna większość multimedialnych stron internetowych.
Oczywiście w programie Adobe Illustrator nie jest zaimplementowana jedna dziesiąta możliwości Flasha, ponieważ program nie jest do tego przeznaczony. Można jednak w nim wykonać statyczny obraz lub prostą animację.
Ryc. 8.13. Ustawienia optymalizacji dla formatu SWF
Istnieją następujące ustawienia.
- Tylko do odczytu (Tylko do odczytu). Jeśli zaznaczysz to pole, plik zostanie zapisany w taki sposób, że nie będzie już można go otworzyć do edycji w żadnym programie. To z jednej strony zmniejsza rozmiar plików, az drugiej chroni Twoje prawa autorskie.
- Ustawienie wskazane przez 1. Parametrem określającym typ zapisu jest obraz lub animacja.
- Jeśli wybierzesz opcję Plik AI do pliku SWF (Plik programu Illustrator do pliku SWF), obraz zostanie zapisany jako obraz statyczny, całkowicie powtarzając to, co widzisz na ekranie podczas pracy w programie Illustrator.
- Warstwy do ramek SWF (Warstwy w ramkach SWF) pozwala tworzyć animacje na podstawie istniejących warstw, które będą prezentowane jako ramki. Musimy wybrać tę opcję.
- Jakość krzywej (Krzywe jakości). Dokładność powtarzania krzywych krzywych pliku oryginalnego obrazu. Gdy ten parametr zostanie zmniejszony, jakość jest znacznie obniżona, szczególnie w obszarze małych części, ale rozmiar pliku jest zmniejszony. W naszym przypadku optymalna wartość to „7”.
- Liczba klatek na sekundę (Opóźnienie ramki). Liczba klatek na sekundę, a co za tym idzie szybkość animacji. Aby efekt był poprawny, ustaw nie więcej niż 4 klatki na sekundę.
- Pętla (Powtórz). Odtwarzaj animację wielokrotnie. Odpowiedni do animacji, dla których ważna jest powtarzająca się pętla. Baner odnosi się do tego typu.
Ostatnio bardzo popularne są różne rodzaje animacji grafiki SVG (Scalable Vector Graphics) na stronach internetowych i aplikacjach. Wynika to z faktu, że wszystkie najnowsze przeglądarki obsługują już ten format. Oto informacje na temat obsługi przeglądarki SVG.
W tym artykule opisano najprostszy przykład animacji wektora SVG za pomocą lekkiej wtyczki Jquery Lazy Line Painter.
Kod źródłowyAby ukończyć i w pełni zrozumieć to zadanie, podstawowa znajomość HTML, CSS, Jquery jest pożądana, ale nie wymagana, jeśli chcesz tylko animować SVG). Zacznijmy!
I tak kroki, które musimy wykonać:
- Utwórz poprawną strukturę plików
- Pobierz i podłącz wtyczkę
- Narysuj fajny obraz konturowy w programie Adobe Illustrator
- Konwertuj nasz obraz na Lazy Line Converter
- Wklej wynikowy kod do main.js
- Dodaj trochę CSS do smaku
1. Utwórz poprawną strukturę pliku
Pomoże nam w tym usługa Initializr, w której musisz wybrać parametry jak na poniższym obrazku.
- Classic H5BP (płyta kotła HTML5)
- Bez szablonu
- Tylko HTML5 Shiv
- Zminimalizowane
- Klasy IE
- Chromowana ramka
- Następnie kliknij Pobierz!
2. Pobierz i podłącz wtyczkę
Ponieważ initializr zawiera najnowszą bibliotekę Jquery, z archiwum musimy pobrać z repozytorium projektu Lazy Line Painter, musimy przenieść tylko 2 pliki do naszego projektu. Pierwszy to „jquery.lazylinepainter-1.1.min.js” (wersja wtyczki może się różnić), znajduje się w katalogu głównym odebranego folderu. Drugi to przykład / js / vendor / raphael-min.js.
Te 2 pliki są umieszczone w folderze js. I podłącz je do naszego index.html przed main.js w następujący sposób:
3. Narysuj fajny obraz konturowy w programie Adobe Illustrator
- Rysujemy nasz kontur obrazu w programie Illustrator (najłatwiej to zrobić za pomocą narzędzia Pióro)
- Konieczne jest, aby kontury naszej figury nie zamykały się, ponieważ dla naszego efektu początek i koniec
- Nie powinno być wypełnienia
- Maksymalny rozmiar pliku - 1000 × 1000 px, 40kb
- Utwórz kadr do granic obiektu Obiekt\u003e Obszary robocze\u003e Dopasuj do granic obszarów roboczych
- Zapisz w formacie SVG (wystarczą standardowe ustawienia zapisu)
Na przykład możesz użyć ikon w załączniku.
4. Konwertuj nasz obraz na Lazy Line Converter
Po prostu przeciągnij ikonę do pola na obrazku poniżej.
Grubość, kolor konturu i szybkość animacji można zmienić w kodzie wyświetlanym po konwersji!
5. Wklej wynikowy kod do main.js
Teraz wystarczy wkleić 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 trochę CSS do smaku
Usuń akapit z index.html
Witaj świecie! To jest Boilerplate HTML5.
I zamiast tego wstawiamy blok, w którym odbędzie się nasza animacja
następnie dodaj trochę CSS do pliku main.css, aby uzyskać ładniejszy wygląd:
Korpus (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. podczas uruchamiania na komputerze lokalnym rozpoczęcie animacji może być opóźnione o kilka sekund.
Dzisiaj mamy niezwykłą lekcję Adobe Illustrator. Ponieważ tym razem nie zrobimy statycznego obrazu, ale prawdziwą animację. Wyobraź sobie, że za pomocą Adobe Illustratora można także rysować bajki :)
I nie potrzebujemy do tego niczego. Właściwa organizacja warstw i eksport końcowej pracy w formacie swf, gdzie każda warstwa jest konwertowana na ramkę animacji. W dzisiejszej lekcji narysujemy animację odliczania w stylu filmu 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ć, stworzyłem dwie pozycje klatki filmowej w osobnym dokumencie, okrąg do zliczania, który jest pocięty na osobne sektory, teksturę i pionowe rysy, 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 to zrobić w nowym dokumencie. W tym przypadku warstwy będziemy odgrywać rolę klatek animacji. I w pierwszej warstwie wystarczy skopiować ramkę filmu. Ustaw go na środku obszaru roboczego.
Teraz utwórz drugą warstwę i skopiuj do niej ramkę filmu, w której otwory wzdłuż krawędzi są wykonane z przesunięciem. To także musi być wyśrodkowane.
Z tych dwóch warstw można już uzyskać animację ruchomego filmu. Ale później potrzebujemy znacznie więcej warstw. Dlatego wybierz pierwsze dwie warstwy, przejdź do opcji panelu i utwórz kopię warstw.
Podobnie musimy zgromadzić 12 warstw z ramkami filmowymi, które określają jego ruch.
Teraz mamy całą masę warstw i wszystkie są widoczne. W tym sensie, że górne warstwy są zasłonięte przez dolne, co nie jest zbyt wygodne do pracy. Dlatego możesz wyłączyć niektóre warstwy, klikając ikonę oka po lewej stronie nazwy warstwy. Aby wyłączyć lub włączyć wszystkie warstwy jednocześnie, przytrzymaj klawisz Alt, klikając ikonę oka. Włączając i wyłączając warstwy, możesz dokładnie zobaczyć, co znajduje się w określonej ramce naszej przyszłej animacji. A teraz, aby dodać drżenia ruchowi filmu, musimy nieco przesunąć klatki w różnych kierunkach. Aby to zrobić, dołącz tylko warstwę, z którą zamierzasz obecnie 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 rozpocząć tworzenie animacji ruchomego koła. Aby to zrobić, skopiuj okrąg składający się z sektorów z dokumentu z częściami z kreskówek i umieść go na pierwszej warstwie na ramce filmu.
Jeśli usuniesz zaznaczenie z koła, będzie ono wyglądać jak pojedyncza całość. Właśnie tego potrzebujemy.
Ale ponieważ składa się z oddzielnych sektorów, możesz, zmieniając ich kolor, bardzo szybko i łatwo tworzyć animacje. Aby to zrobić, skopiuj ten okrąg na drugą warstwę i rozjaśnij pierwszy sektor. Pamiętasz, że nasz film drży podczas ruchu, więc nie jest konieczne umieszczanie koła dokładnie na środku kadru. Ustaw go na oko.
Podobnie musisz skopiować okrąg na każdą kolejną warstwę, jednocześnie malując jeszcze jeden sektor jaśniejszym kolorem niż poprzednio. Te 12 warstw razem tworzy animację ruchu filmu z kółkiem wypełniającym.
Następnie dodaj teksturę do naszych warstw. Włącz pierwszą warstwę i skopiuj teksturę z pliku źródłowego z częściami zamiennymi.
Następnie włącz kolejne warstwy i skopiuj tam tę samą teksturę. Aby wyglądał inaczej na każdej ramce, wystarczy obrócić go o 90 stopni. Jak można się domyślić, musimy dodać teksturę do wszystkich 12 ramek.
Jeśli masz już dość kopiowania w porządku, mogę cię zadowolić - pozostaje 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ę tylko w dwóch warstwach.
Teraz, gdy główna pętla z animacją filmu jest gotowa, pozostaje dodać liczby. Ponieważ liczymy od 3 do 1 oraz 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ć ten rysunek na kolejne warstwy, aż do zakończenia animacji koła. Gdy dojdziesz do następnej kopii warstw, w której okrąg zostanie ponownie całkowicie wypełniony, musisz już wstawić numer dwa. W ten sam sposób skopiuj numer jeden na żądane warstwy. A kiedy dojdziesz do końcowych warstw przeznaczonych do napisu Idź !!!, po prostu usuń okrąg przed skopiowaniem napisu na żądaną warstwę.
To wszystko z animacją. Najważniejsze, żeby się nie pomylić. Możesz nadać warstwom dowolne dogodne nazwy, ale byłem jakoś leniwy :) A jednak, kiedy skończysz pracę, pamiętaj, aby włączyć wszystkie warstwy z powrotem, klikając ikonę oka.
W oknie z ustawieniami eksportu pamiętaj o ustawieniu opcji Eksportuj jako: Warstwy AI do ramek SWF. Ta opcja zamienia warstwy ilustratora w klatki animacji. Następnie kliknij przycisk Zaawansowane.
Zostaną otwarte ustawienia zaawansowane. Tutaj musisz ustawić częstotliwość klatek. Mam 12 klatek na sekundę. Zaznaczenie Pętla odpowiada za cykl animacji. Dzięki niej wideo będzie odtwarzane w kręgu. A opcja Kolejność warstw: od dołu do góry odtwarza warstwy ilustratora od dołu do góry w panelu. Tak właśnie zbudowaliśmy naszą animację.
Na wyjściu otrzymujemy film flash z naszą animacją.
Teraz widzisz, że tworzenie prostych animacji w programie Adobe Illustrator nie jest tak trudne, jak się wydaje na pierwszy rzut oka.
Ale aby tworzyć długie filmy lub aplikacje interaktywne, nadal lepiej jest używać Adobe Flash lub innych edytorów Flash. Na przykład zrobiłem tego kota w starej Macromedia Flash, którą wykopałem w moim miejscu pracy.
Ostatnio coraz częściej do tworzenia animacji wykorzystywane są HTML5 i CSS3. Ten kod jest obsługiwany przez nowoczesne przeglądarki i nie wymaga użycia odtwarzacza flash.
Roman aka dacascas specjalnie dla bloga
Subskrybuj nasz biuletyn, aby nie przegapić niczego nowego:
Optymalizacja grafiki internetowej
Informacje graficzne są przesyłane znacznie wolniej niż tekst, a czas ładowania obrazów jest proporcjonalny do wielkości ich plików graficznych. Dlatego szybkie ładowanie stron internetowych oznacza osadzony w nich niewielki rozmiar obrazów graficznych, co osiąga się poprzez ich optymalizację. Optymalizacja obrazu jest rozumiana jako konwersja, która zapewnia minimalny rozmiar pliku przy zachowaniu wymaganej w tym przypadku jakości obrazu, co osiąga się przede wszystkim poprzez zmniejszenie liczby kolorów obrazów graficznych, użycie skompresowanych i specjalnych formatów plików oraz optymalizację parametrów kompresji dla poszczególnych fragmentów obrazu.
Program Illustrator ma wbudowane narzędzia do optymalizacji obrazu, które zapewniają szybki i wydajny proces optymalizacji za pomocą różnych metod podglądu. Podgląd daje dość dokładne wyobrażenie o tym, jak będzie wyglądał zoptymalizowany obraz w czasie rzeczywistym, co pomaga ocenić wynik optymalizacji i skutecznie wybrać niezbędne ustawienia. Możesz zoptymalizować zarówno obrazy utworzone bezpośrednio w programie Illustrator, jak i inne, takie jak zdjęcia, które mają zostać opublikowane na stronie internetowej.
Parametry optymalizacji są ustawiane w oknie Zapisz dla Internetu (Zapisz dla Internetu), wywoływane przez polecenie o tej samej nazwie z menu Plik (Plik). Program sugeruje użycie jednego z czterech trybów podglądu, ale dwa najlepiej nadają się do oceny jakości optymalizacji:
- 2-up (dwie opcje) - jednoczesne przeglądanie obrazu oryginalnego i zoptymalizowanego zgodnie z określonymi ustawieniami (ryc. 1);
- 4-up (cztery opcje) - w tym trybie obszar wyświetlania jest podzielony na cztery okna (ryc. 2), aby wyświetlić oryginalny obraz i trzy wersje zoptymalizowanego: pierwsza wersja jest tworzona na podstawie ustawionych wartości optymalizacji, a pozostałe dwie są opcjami dla bieżących ustawień optymalizacji.
Oba tryby mogą znacznie zaoszczędzić czas na znalezieniu najlepszej opcji optymalizacji, ponieważ eliminują potrzebę zapisywania obrazów z różnymi ustawieniami optymalizacji i ich późniejszym porównaniem wizualnym. Ponadto można ocenić nie tylko jakość zoptymalizowanego obrazu, ale także jego rozmiar i czas ładowania przy różnych opcjach połączenia. Dla porównania, tryb 4-Up (cztery opcje) jest najwygodniejszy, pozwalając wizualnie ocenić wpływ kompresji lub zmniejszenia palety na jakość i rozmiar obrazu, a ostatecznie określić najlepsze parametry optymalizacji.
Program Illustrator umożliwia optymalizację grafiki internetowej w formatach nie tylko GIF, JPG, PNG-8 i PNG-24, ale także w SWF i SVG. Zindeksowane obrazy z niewielką liczbą kolorów są zapisywane w formacie GIF. Do zapisywania obrazów pełnokolorowych i w skali szarości - fotografii i grafiki nasyconej kolorami, takich jak wypełnienia gradientem - używany jest format JPG. W przypadku obrazów pełnokolorowych z przezroczystymi obszarami używany jest format PNG, który pozwala zapisywać zarówno obrazy indeksowane, jak i kolorowe, natomiast w formacie PNG-8 maksymalna możliwa liczba kolorów zoptymalizowanego obrazu wynosi 256, aw formacie PNG-24 obraz może mieć miliony kolorów, i dlatego jest podobny do formatu JPEG. Różnica między PNG-24 a JPEG polega na tym, że metoda kompresji zastosowana do optymalizacji obrazów PNG-24 nie powoduje utraty jakości, ale w rezultacie zwiększa się rozmiar pliku. Formaty SVG i SWF łączą dane graficzne, tekst i komponenty interaktywne, a także można je optymalizować.
Rozważ konkretny przykład optymalizacji obrazu. Na przykład program Illustrator opracował logo witryny (ryc. 3), pierwotnie zapisane w formacie AI. Próba natychmiastowej optymalizacji dla sieci nie doprowadzi do niczego dobrego, ponieważ w tym przypadku obraz zostanie automatycznie przycięty, aby nie uwzględniono prawdziwej pozycji napisu wynikającego z deformacji (ryc. 4 i 5).
Dlatego spróbujemy wyeksportować logo do formatu PSD za pomocą polecenia Plik \u003d\u003e Eksportuj (Plik \u003d\u003e Eksportuj) - rozmiar utworzonego obrazu wyniesie 143 KB. Otwórz wynikowy plik PSD i użyj polecenia Plik \u003d\u003e Zapisz dla Internetu (Plik \u003d\u003e Zapisz dla Internetu). Biorąc pod uwagę ograniczoną liczbę kolorów zaangażowanych w obraz, format GIF jest w tym przypadku optymalny, z konkretnymi ustawieniami, o których musisz zdecydować. Eksperymentując z ustawieniami, możesz upewnić się, że najlepszą jakość zapewnia algorytm kompresji wybrany domyślnie przez program Selektywne (Selektywne). Jeśli chodzi o wygładzanie, biorąc pod uwagę obecność wypełnień gradientowych, lepiej wybrać algorytm z generowaniem szumu - Hałas (rys. 6). Wynikowy plik optymalizacji będzie miał rozmiar 6,729 KB (ryc. 7), a przezroczystość tła zostanie zachowana, co można łatwo zweryfikować, zapisując obraz w formacie GIF wraz z plikiem HTML (ryc. 8). W rezultacie w tym przykładzie pliki emblem.html i emblem.gif zostały uzyskane w folderze Primer1.
Przyciski
Niezbędnym specyficznym elementem projektu każdej strony internetowej są kontrolki graficzne - przyciski. Wyobrażenie sobie strony bez nich jest po prostu niemożliwe. Dzisiejsze przyciski do rysowania stały się specjalnym gatunkiem, a Illustrator pozwala tworzyć najbardziej skomplikowane opcje. Na przykład przyciski zaprojektowane jako obiekty siatki i (lub) z nakładającymi się maskami wyglądają znacznie bardziej spektakularnie niż zwykle.
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 polecenie siatki Obiekt \u003d\u003e Utwórz siatkę gradientu (Obiekt \u003d\u003e Utwórz siatkę gradientu), określając cztery wiersze i cztery kolumny oraz na liście Wygląd (Widok), wybierając opcję Do centrum Wyróżnij (Podświetlenie) równe 60 (ryc. 10). Wybierz narzędzie Bezpośredni wybór i kliknij w lewym górnym rogu obiektu, podświetlając znajdujące się tam punkty węzłowe (ryc. 11). Zmień kolor odpowiedniej komórki na biały, zaznaczając go na palecie Próbki (rys. 12).
Weź narzędzie Elipsa (Elipsa), umieść znacznik myszy na środku utworzonego wcześniej koła i przytrzymując klawisze Alt i Shift, rozciągnij nowy okrąg na starym, tak aby był o 1-2 piksele większy ze wszystkich stron niż stary. Uczyń ją czarną ramką ( Udar mózgu) Szerokość 1-2 pikseli i wypełnij gradientem radialnym w kierunku od czerwonego do białego (ryc. 13). Przeciągnij utworzony obiekt wektorowy o 1-2 piksele w prawo i w dół, a następnie, nie usuwając zaznaczenia, kliknij go prawym przyciskiem myszy i wybierz polecenie z menu kontekstowego Rozmieść \u003d\u003e Wyślij na spód (Sortuj \u003d\u003e Odeślij). W rezultacie otrzymujemy puste miejsce dla przycisku pokazanego na ryc. 14
Z reguły na każdej stronie internetowej znajduje się kilka przycisków tego samego typu, różniących się na przykład tylko kierunkiem narysowanych na nich strzałek wskazujących kierunek poruszania się po stronie. Rozważ najprostszy przypadek posiadania dwóch przycisków, z których jeden ze strzałką w dół będzie oznaczał przejście do następnej strony, a przycisk ze strzałką w górę - do poprzedniej. Jako pustą strzałkę bierzemy zwykły trójkąt narysowany przez narzędzie Wielokąt (Wielokąt), pomalowane na czarno, a także zaprojektowane jako obiekt siatki dla większego efektu. Przesuń strzałkę do przycisku i dostosuj położenie wszystkich obiektów względem siebie, korzystając z odpowiednich przycisków na palecie Wyrównaj (Wyrównanie). Pierwszy z przycisków pokazano na ryc. 15. Wykonaj kopię warstwy przycisków, wybierając polecenie Powielona warstwa Warstwy, - w rezultacie otrzymujemy dwie identyczne warstwy. Następnie wybierz strzałkę na warstwie kopii i obróć ją o 180 °, wybierając polecenie z menu kontekstowego Przekształć \u003d\u003e Obróć - Transformacja \u003d\u003e Zakręt. Otrzymujemy ten sam przycisk, jak pokazano na rys. 16. Należy pamiętać, że znacznie wygodniej jest przechowywać wszystkie te same przyciski tego samego projektu w jednym pliku na różnych warstwach, co pokazano w tym przypadku.
Teraz musisz zapisać zoptymalizowane opcje dla każdego przycisku. Najpierw uczyń dolną warstwę niewidoczną - w tym przypadku przycisk na górnej warstwie zostanie zapisany. Wybierz zespół Plik \u003d\u003e Zapisz dla Internetu (Plik \u003d\u003e Zapisz dla Internetu), skonfiguruj parametry optymalizacji przycisku, na przykład, jak pokazano na ryc. 17, kliknij przycisk Zapisz (Zapisz) i wprowadź nazwę pliku. Przycisk zapisany jako wynik pokazano na ryc. 18. Teraz przywróć widoczność do dolnej warstwy, spraw, aby górna była niewidoczna i podobnie zapisz drugi przycisk, podając dla niego inną nazwę. Wynik przedstawiono na ryc. 19
Teraz pozostaje upewnić się, że przyciski wyglądają całkiem akceptowalnie na stronie internetowej i umieścić je na dowolnej stronie (ryc. 20). W rezultacie w tym przykładzie plik Primer2.html i dwa obrazy graficzne w folderze obrazów (folderze Podkład 2).
W razie potrzeby podczas procesu optymalizacji przycisk można łatwo zmienić w plasterek. W takim przypadku po wybraniu polecenia Plik \u003d\u003e Zapisz dla Internetu (Plik \u003d\u003e Zapisz dla Internetu) i ustawienia optymalizacji należy wybrać z palety narzędzi Wybierz plasterek(Wybierz wycinek) i kliknij dwukrotnie obraz, który ostatecznie zmieni się w wycinek o numerze seryjnym 1 (ryc. 21). Ponowne dwukrotne kliknięcie otworzy okno Opcje plasterków (Opcje plasterków), w których należy podać link i, w razie potrzeby, zmienić nazwę plasterka (ryc. 22), a następnie zapisać zoptymalizowany obraz. W tym przypadku wynikiem będą pliki Primer3.html (ryc. 23) i Primer3.gif (folder Primer3).
Elementy interaktywne
Jednym ze sposobów na rewitalizację strony jest wprowadzenie elementów projektu, które zmieniają swój wygląd (lub stan) w zależności od zachowania myszy lub, rzadziej, w przypadku innych sytuacji: skalowania, przewijania, ładowania, błędów itp.
Wśród tych elementów najazdy są najsłynniejsze (z angielskiego roll over - roll, roll over) - elementy, które zmieniają wygląd pod wpływem myszy. Przykładami typowych najazdów są animowane przyciski. Rolowania są często używane do tworzenia innych elementów nawigacyjnych witryny. W rzeczywistości każde przejście nie jest jednym, ale kilkoma (maksymalnie czterema) obrazami, z których każdy odpowiada określonemu zdarzeniu. Główne zdarzenia są następujące: Normalny - stan normalny, Over - najechanie kursorem na element i Down - lewy przycisk myszy, gdy wskaźnik myszy znajdzie się nad nim. Teoretycznie mogą być zaangażowane zdarzenia takie jak Click - zwolnienie lewego przycisku myszy po kliknięciu, Up - po zwolnieniu przycisku, Out - opuszczenie aktywnej strefy. Jednak w praktyce często ograniczają się do zmiany elementu tylko na pierwsze trzy lub nawet dwa zdarzenia.
Klasyczne najazdy
W klasycznym sensie rollover to seria obrazów graficznych w formacie GIF i odpowiadającego kodu HTML, dzięki czemu, w zależności od zachowania myszy, jeden obraz zastępuje inny w oknie przeglądarki.
Program Illustrator nie ma na celu bezpośredniego tworzenia najazdów w klasycznym znaczeniu, ale może pomóc w opracowaniu oryginalnych elementów. W tym przypadku chodzi o stworzenie warstwy z obrazem odpowiadającym pierwszemu zdarzeniu. Następnie wykonaj kopię warstwy i przekształć obraz, aby pasował do drugiego zdarzenia itp. Powstały obraz wielowarstwowy jest eksportowany do pliku PSD z zapisywanymi warstwami, na podstawie których najazd jest tworzony w programie Image Ready. Zaletą korzystania z programu Illustrator, podobnie jak w wielu innych przypadkach, jest wiele interesujących funkcji, które nie są dostępne w innych narzędziach programowych, w połączeniu z wygodą przekształcania grafiki wektorowej.
Spróbujmy utworzyć najazd w formie 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 (ryc. 24), zrób jego kopię i umieść w wolnej części ekranu. Przekształć pierwszą kopię prostokąta w obiekt siatki z podświetleniem pośrodku (polecenie Obiekt \u003d\u003e Utwórz siatkę gradientu - Obiekt \u003d\u003e Utwórz siatkę gradientu), określając cztery rzędy i dziesięć kolumn (ryc. 25). Aktywuj drugą kopię prostokąta i dopasuj do niego wypełnienie gradientem w przybliżeniu, jak pokazano na ryc. 26. Umieść obiekt gradientu na siatce, zmniejsz krycie obiektu gradientu do około 80%, a rozmiar - około 1 piksela, aby zasymulować efekt wypukłości. A następnie na obiektach wpisz napis. W oryginalnej formie niech będzie miał biały kolor, który będzie odpowiadał stanowi Normalny (ryc. 27), a następnie, gdy zmieni się stan najazdu, kolor napisu zmieni się, na przykład, na zielony - po najechaniu na niego wskaźnikiem myszy (stan Ponad) i niebieski - po kliknięciu przycisku myszy (stan opuszczenia).
Zwróć uwagę na paletę Warstwy - na tym etapie jest tylko jedna pojedyncza warstwa. Wykonaj dwie kopie tej warstwy za pomocą polecenia Powielona warstwa (Duplikat warstwy) z menu palety Warstwy, - na palecie będą trzy warstwy (ryc. 28). Następnie w pierwszej kopii warstwy zmień kolor napisu na zielony, a w drugiej na niebieski (ryc. 29). W rezultacie uzyskany zostanie niezbędny blank dla najazdu.
Wyeksportuj utworzony obraz do formatu PSD z zachowaniem warstw za pomocą polecenia Plik \u003d\u003e Eksportuj (Plik \u003d\u003e Eksportuj) i wybór modelu kolorów RGB (ryc. 30). Otwórz utworzony plik PSD w ImageReady (rys. 31 i 32). Utwórz ramki na podstawie warstw, wybierając polecenie Twórz ramki z warstw (Twórz ramki z warstw) z menu palety Animacja. Okno animacji będzie wyglądać jak na ryc. 33. Ponadto w palecie Rolowania początkowo zostanie utworzony pojedynczy stan Normalny.
Następnie w oknie Animacjawybierz ramkę odpowiadającą indukowanemu stanowi, będąc w palecie Warstwy warstwa jest wybierana automatycznie Kopiowanie warstwy 1 (rys. 34). Idź do palety Rolowaniai kliknij przycisk Utwórz stan najazdu (Utwórz stan najazdu) - rys. 35, co spowoduje warunek Ponad stanemw palecie Rolowania(Ryc. 36). Podobnie utwórz stan Stan spoczynku. Aktywuj stan Normalne w palecie Rolowania i usuń w palecie Animacja wszystkie ramki oprócz tej, która musi pasować do stanu Normalne. W rezultacie dla każdego stanu najazdu w palecie Animacjabędzie tylko jedna ramka (ryc. 37, 38 i 39).
Ryc. 38. Widok obrazu, okna animacji oraz palety warstw i najazdów dla stanu Ponad stanem
Sprawdź wynik, klikając przycisk. Podgląd w domyślnej przeglądarce (Podgląd w przeglądarce) na pasku narzędzi i przejście do okna przeglądarki (ryc. 40). Następnie zapisz plik za pomocą polecenia Plik \u003d\u003e Zapisz zoptymalizowany (Plik \u003d\u003e Zapisz z optymalizacją) i określając opcję HTML i obrazy (* .html). W rezultacie w tym przykładzie uzyskano plik Primer4.html i serię obrazów graficznych w folderze obrazów.
Ryc. 40. Okno przeglądarki z elementem najazdu
Najazdy SVG
Rosnąca popularność formatu SVG (Scalable Vector Graphics), tworzonego na podstawie standardu XML, pozwala również na uzyskiwanie różnorodnych elementów interaktywnych, w szczególności rollover, ale w praktyce jest to realizowane w zupełnie inny sposób. Warto zauważyć, że tworzenie interaktywnych najazdów SVG, w przeciwieństwie do klasycznych, gdy odpowiedni kod HTML jest generowany całkowicie automatycznie, wymaga znajomości języka JavaScript i zrozumienia podstawowych zasad programowania obiektowego.
Specjalna paleta została zaprojektowana do pracy z obiektami SVG Interaktywność SVGktóry można łatwo otworzyć za pomocą polecenia Window \u003d\u003e SVG Interactivity (Window \u003d\u003e interaktywność SVG) - rys. 41
Rozważ tę opcję tworzenia najazdu na przykładzie interaktywnego przycisku, którego kolor zmieni się z czarnego na niebieski po najechaniu myszą i ponownie zmieni się w czarny, gdy mysz opuści aktywną strefę.
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 na palecie Przezroczysty (Przezroczystość) - w tym przykładzie wartość parametru Krycie (Krycie) jest ustawione na 50%. Zrób kopię przycisku, wypełnij go ciemnozielonym (ryc. 43), a następnie przekonwertuj go na obiekt siatki za pomocą polecenia Obiekt \u003d\u003e Utwórz siatkę gradientu(Obiekt \u003d\u003e Utwórz siatkę gradientu), określając cztery wiersze i dziesięć kolumn i na liście Wygląd(Widok), wybierając opcję Do centrum (Do środka) i ustawienie wartości Wyróżnij (Podświetlenie) równe 100. Zmniejsz krycie warstwy obiektem siatkowym do około 40% (ryc. 44). Umieść obiekt siatki na szczycie gradientu, a przycisk będzie podobny do pokazanego na ryc. 45
Ryc. 44. Przekształcenie kopii przycisku w obiekt siatki
Uzupełnij przycisk o oczekiwany napis i dostosuj jego pozycję za pomocą odpowiednich przycisków na palecie Wyrównaj (Wyrównanie). Powstały obraz będzie zawierał jedną warstwę z trzema obiektami nałożonymi na siebie (ryc. 46). Zaplanowane zdarzenia będą dotyczyły obiektu tekstowego, dlatego dla wygody zmień jego nazwę na SMSklikając dwukrotnie obiekt i wprowadzając nową nazwę. Podobnie zmień nazwę warstwy z Warstwa 1 w warstwie (Ryc. 47).
Przetwarzanie zdarzeń wymaga użycia procedur JavaScript, dlatego należy dołączyć plik z opisem tych procedur. Nazywa się Events.js i jest zapisywany na dysku w folderze Sample Files \\ Sample Art \\ SVG \\ SVG podczas instalacji Adobe Illustratora. Użyj polecenia, aby połączyć plik Events.js Pliki JavaScript Interaktywność SVG (Ryc. 48). Następnie kliknij Dodaj (Dodaj) i znajdź żądany plik na dysku twardym. Kiedy jego nazwisko pojawi się w polu URL (rys. 49), kliknij przycisk Gotowe (Wyjdź).
Ryc. 48. Wybieranie polecenia dotyczącego plików JavaScript
Następnie należy określić reakcję obiektu na zdarzenia myszy. SMS. Wybierz obiekt Text w polu Wydarzenie Palety (zdarzeń) Interaktywność SVG wybierz wydarzenie onmouseover elemColor (evt, „Text”, „# 3333FF”) - będzie to oznaczać, że gdy najedziesz myszką na obiekt SMSjego kolor zmieni się na niebieski (ryc. 50). Aby kolor tekstu zmienił kolor na czarny po opuszczeniu aktywnej strefy, konieczne będzie utworzenie kolejnego zdarzenia onmouseout- wybierz w polu Wydarzenie Palety (zdarzeń) Interaktywność SVG. Następnie na pasku akcji wpisz tekst elemColor (evt, „Text”, „# 000000”)- spowoduje to czarny powrót (ryc. 51).
Ryc. 51. Ostateczny widok palety interaktywności SVG dla obiektu Text
Zapisz utworzony najazd jako plik SVG za pomocą polecenia Plik \u003d\u003e Zapisz jako (Plik \u003d\u003e Typ pliku format Svg, a następnie ustawienie opcji zapisywania pliku SVG, jak pokazano na ryc. 52. Po zapisaniu zostanie odebrany tylko jeden plik z rozszerzeniem SVG, a nie dwa, jak w przypadku klasycznego najazdu - w tym przypadku otrzymano plik Primer5.svg (folder Primer5). Aby jednak przejście działało, musisz dodatkowo skopiować plik Events.js z opisem procedur JavaScript do folderu zawierającego plik SVG. Następnie możesz sprawdzić operację najazdu - wynik będzie wyglądał tak, jak pokazano na ryc. 53
Animacja SVG
Format SVG może również służyć do przesyłania animacji. Spróbujmy stworzyć najprostszy element animacji (w tym przypadku będzie to informacja o firmie), który pojawi się na ekranie po najechaniu wskaźnikiem myszy na odpowiedni obiekt graficzny i zniknie po zdjęciu myszy z elementu interaktywnego.
Utwórzmy w przybliżeniu taką serię obiektów graficznych i tekstowych, jak pokazano na ryc. 54. Zmieniamy nazwy wszystkich utworzonych obiektów w wygodny sposób, klikając kolejno nazwę następnego obiektu na palecie Warstwy i wprowadzenie żądanej nazwy (ryc. 55). Zauważ, że zaznaczone na rys. 56 obiektów - Text1, Text2, Text3 i Ścieżka 1 - zawsze będzie widoczny, a cała reszta - tylko po najechaniu kursorem na obiekt Text1.
Ryc. 54. Oryginalny obraz
Dołącz plik Events.js z opisem procedur JavaScript za pomocą polecenia Pliki JavaScript (Pliki JavaScript) z palety Interaktywność SVGnaciskając przycisk Dodaj(Dodaj), określając żądany plik na dysku twardym i klikając przycisk Gotowe (Wyjdź).
Zdefiniuj reakcję na zdarzenia myszy dla obiektu Text1. Wybierz obiekt SMSw polu Wydarzenie Palety (zdarzeń) Interaktywność SVGwybierz wydarzenie onmouseover aw wierszu poniżej wprowadź tekst elemShow (evt, „Text4”); elemShow (evt, „Path2”). W rezultacie, gdy mysz znajdzie się nad obiektem Text1 obiekty staną się widoczne Text4 i Ścieżka 2. Należy pamiętać, że jeśli kilka zdarzeń ma być wykonanych w momencie ich wystąpienia, należy je oznaczyć znakiem „;”. Następnie wykonaj podobną operację na zdarzeniu onmouseoutpoprzez wpisanie tekstu, który będzie oznaczał ukrywanie obiektów (ryc. 57).
Zapisz wynik jako plik SVG za pomocą polecenia Plik \u003d\u003e Zapisz jako (Plik \u003d\u003e Zapisz jako), określając nazwę pliku i wybierając w polu Typ pliku Format SVG, a następnie ustawienie opcji zapisywania pliku SVG zgodnie z rys. 58. Po zapisaniu zostanie odebrany plik Primer6.svg (folder Primer6). Nie zapomnij skopiować pliku Events.js do folderu z tym plikiem. Jeśli następnie uruchomisz utworzony plik, zobaczysz wynik pokazany na ryc. 59. To jest prawie to, czego potrzebujesz. Jedyną rzeczą, która nie była częścią naszych planów, był początkowy wygląd obiektów SMS4 i Ścieżka2 przy rozruchu. Aby pozbyć się tej wady, wybierz oba dane obiektu naraz i utwórz dla nich akcję elemHide (evt, „Text4”); elemHide (evt, „Path2”) na imprezie obciążenie (Ryc. 60). Zapisz plik ponownie i upewnij się, że obiekty są teraz Text4 i Ścieżka 2 widoczne tylko po najechaniu kursorem na obiekt Text1.
Animacja GIF
Każda strona internetowa jest nie do pomyślenia bez animacji internetowej, w tym animowane gify. Jedną z opcji ich tworzenia jest użycie aplikacji Adobe ImageReady, która umożliwia między innymi tworzenie animacji z warstw. Jednocześnie sam wielowarstwowy obraz można przygotować w różnych aplikacjach, w tym w programie Adobe Illustrator.
Utworzenie animacji na podstawie elementów z palety jest bardzo proste Symbole (Symbole) otwarte przez zespół Okno \u003d\u003e Symbole (Window \u003d\u003e Symbole) lub z jednej z bibliotek symboli, które można otworzyć za pomocą polecenia Window \u003d\u003e Biblioteki symboli (Window \u003d\u003e Biblioteki symboli).
Na przykład spróbujmy zwiększyć rozmiar dowolnego obiektu symbolu, kluczowe etapy procesu zwię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 (ryc. 62). Jeśli bezpośrednio wyeksportujesz ten obraz do formatu PSD, to nie zadziała, ponieważ istnieje tylko jedna warstwa, i oczywiście, podczas otwierania pliku PSD w ImageReady, będzie też tylko jedna warstwa. Dlatego musisz najpierw umieścić obiekty na różnych warstwach. Można to zrobić na różne sposoby - najłatwiejszy sposób, aby najpierw wybrać warstwę Warstwa 1 w palecie Warstwy i użyj polecenia Zwolnij na warstwę (Zwolnij na warstwy). Rezultatem będzie ruch każdego z obiektów na własnej warstwie, ale wszystkie z nich zostaną 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, aby znajdowały się nad warstwą Warstwa 1a następnie pusta warstwa Warstwa 1 po prostu usuń (rys. 63). Wyeksportuj obraz do formatu PSD za pomocą polecenia Plik \u003d\u003e Eksportuj (Plik \u003d\u003e Eksportuj) z ustawieniami jak na rys. 64
Pobierz utworzony plik PSD w ImageReady (ryc. 65 i 66). Otwórz menu palety Animacja Twórz ramki z warstw (Twórz ramki z warstw). W rezultacie powstanie pięć ramek, z których każda będzie odpowiadać własnej warstwie i oknu palety Animacja przyjmie formę jak na rys. 67
Następnie ustaw czas trwania każdej z utworzonych ramek - w tym przypadku czas trwania wynosi 0,2 s dla wszystkich ramek. A następnie zapisz animację z optymalizacją za pomocą polecenia Plik \u003d\u003e Zapisz zoptymalizowany (Plik \u003d\u003e Zapisz z optymalizacją). Uzyskany wynik może przypominać rys. 68
Jeszcze wygodniej jest używać funkcji, aby uzyskać spacje, które można łatwo przekształcić w animację w ImageReady. Mieszanki na żywo Oprogramowanie Illustrator. Takie połączenie 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 za pomocą połączenia mieszanego o odpowiednich parametrach (ryc. 69). Nie można bezpośrednio użyć tego pliku do tworzenia animacji, ponieważ obraz jest na jednej warstwie (ryc. 70). Dlatego najpierw musisz umieścić każdy element mieszanego obiektu na osobnej warstwie. Aby to zrobić, w oknie Warstwy zaznacz linię
Ryc. 70. Stan początkowy okna Warstwy
Wyeksportuj utworzony plik do formatu PSD za pomocą polecenia Plik \u003d\u003e Eksportuj (Plik \u003d\u003e Eksportuj). Otwórz utworzony plik PSD w ImageReady (ryc. 73). Zauważ, że w oknie warstw pojawią się wszystkie warstwy utworzone w programie Illustrator (ryc. 74) oraz w oknie Animacja do tej pory będzie jedna rama.
Aktywuj menu palety Animacjaklikając czarną strzałkę w prawym górnym rogu palety i wybierz polecenie Twórz ramki z warstw (Utwórz ramki z warstw) - w rezultacie w tym przykładzie zostanie utworzonych pięć ramek i okno palety Animacja przyjmie formę zgodnie z ryc. 75. Wybierz wszystkie klatki, przytrzymując klawisz Shifti ustaw odpowiedni czas trwania klatki - w tym przykładzie dla każdej klatki trwa ten sam czas 0,2 s. Następnie zapisz plik za pomocą polecenia optymalizacji Plik \u003d\u003e Zapisz zoptymalizowany(Plik \u003d\u003e Zapisz z optymalizacją), ustawiając na liście Typ pliku opcja Tylko obrazy (* .gif). Animacja będzie przypominać zdjęcie. 76
O wiele bardziej interesujące nie jest poruszanie się, ale płynne zmienianie rozmiaru obiektów mieszanych. Na przykład możesz użyć już utworzonego przejścia mieszania. W takim przypadku po utworzeniu osobnych warstw dla każdego elementu przejścia mieszania umieść wszystkie obiekty jeden na drugim za pomocą przycisków Poziomy środek wyrównania(Wyrównanie do środka w poziomie) i Wyrównanie w pionie (Wyśrodkuj wyrównanie w pionie) Palety Wyrównaj (Ryc. 77).
Wyeksportuj utworzony plik do formatu PSD ( Plik \u003d\u003e Eksportuj- Plik \u003d\u003e Eksportuj) i otwórz utworzony plik PSD w ImageReady (ryc. 78). Twórz klatki animacji na podstawie warstw ( Twórz ramki z warstw - Twórz ramki z warstw) i wybierz dla nich odpowiedni czas trwania (ryc. 79). Następnie, aby animacja była bardziej skuteczna, skopiuj dostępne klatki, ale w odwrotnej kolejności - tak, aby obraz najpierw wzrastał, a następnie zmniejszał i tak dalej w kółku (ryc. 80). Następnie zapisz plik z optymalizacją ( Plik \u003d\u003e Zapisz zoptymalizowany- Plik \u003d\u003e Zapisz z optymalizacją). Powstała animacja jest pokazana na ryc. 81
Ryc. 80. Stan okna animacji po powieleniu klatki
Ryc. 81. Zakończona animacja
