9

Tworzenie animowanych obrazków

Tworzoną stronę internetową możesz uatrakcyjnić przez dodanie elementów animowanych. W tym celu z powodzeniem można wykorzystać program Adobe ImageReady. Utworzona w nim animacja będzie miała postać pojedynczych obrazków (klatek animacji) zapisanych w postaci pliku graficznego w formacie GIF. Ze względu na atrakcyjność animowanej grafiki, animowane GIF-y są spotykane na wielu stronach internetowych, a ze względu na niewielki rozmiar pliku wynikowego, nie wydłużają czasu pobierania strony z sieci Internet. ImageReady pozwala na łatwe i wygodne tworzenie takiego rodzaju grafiki. W dzisiejszej lekcji poznasz następujące zagadnienia:

• Wykorzystanie wielowarstwowych obrazków jako podstawy do stworzenia animacji

• Użycie palety warstw w powiązaniu z paletą animacji do utworzenia poszczególnych klatek animacji

• Wprowadzenie zmian w poszczególnej klatce animacji, grupie klatek lub całej animacji

• Przeglądanie utworzonej animacji w programie ImageReady i przeglądarce internetowej

• Otwieranie i zmianę istniejący plików w formacie animowanych GIF-ów

• Optymalizację animacji przy użyciu dostępnych narzędzi optymalizujących

Lekcja powinna zakończyć się po około 120 minutach całkowitym opanowaniem materiału. Wykonywane ćwiczenia dotyczą programu Adobe ImageReady. Przygotuj się do przećwiczenia lekcji i skopiuj do lokalnego katalogu Moje dokumenty katalog Photoshop-Lekcja9 z podanej przez prowadzącego lokalizacji.

Tworzenie animacji

W programie Adobe ImageReady animacja jest tworzona z pojedynczych klatek i zapisywana w formacie animowanego GIF-u. Pod pojęciem „animowany GIF” należy rozumieć sekwencyjną zmianę obrazków lub klatek. Każda klatka nieznacznie rożni się od poprzedniej, iluzja ruchu jest uzyskiwana przez szybkie wyświetlenie całej sekwencji klatek. Animację możesz utworzyć na kilka sposobów:

• Za pomocą przycisku New Frame w palecie Animation można utworzyć klatkę animacji a w palecie Layers zdefiniować, które warstwy mają być widoczne dla poszczególnych klatek animacji.

• Nową ramkę animacji można szybko utworzyć przez zmianę wybranej cechy elementu np. przezroczystości, położenia lub prze zastosowanie efektu. W efekcie pozwoli to nam przesuwać ten element w trakcie animacji lub powodować, że będzie on znikać lub pojawiać się.

• Przez otwarcie w Photoshopie lub ImageReady wielowarstwowego obrazku jako animacji z zamianą każdej warstwy na klatkę.

Podczas tworzenia animacji najlepiej pozostawić widoczne oryginalne obrazki i podczas optymalizacji nie dopuścić do ustraty jakości całości animacji. Możliwe do uzyskania wyjściowe pliki animacji to format GIF lub QuickTime. Nie można zapisać animacji w formacie JPEG lub PNG.

Animacja oparta na warstwach (tłumaczenie z wbudowanej pomocy Adobe Photoshop) Praca z warstwami jest kluczem do utworzenia animacji w programie ImageReady. Każda nowa klatka pojawia się jako duplikat klatki porzedniej. Edycja klatki następuje poprzez dopasowanie warstwy, na której ona się znajduje. Możesz zastosować zmiany do pojedynczej, klatki, grupy klatek lub całości animacji. Kiedy pracujesz z warstwą klatki animacji, możesz utworzyć lub skopiować selekcję warstwy; dopasować kolor i odcień; zmienić przezroczystość warstwy; ustalić tryb nakładania na warstwy dolne; zmienić położenie; dodać efekt warstwy; możesz zrobić wiele innych rzeczy które są możliwe do wykonania na warstwie. Wykorzystanie atrybutów warstwy do utworzenia efektu animacji jest bardzo łatwe i pozwala zapisać animację w formacie Phtoshopa, co pozwala na późniejsze bezproblemowe zmiany. Zapamiętaj, że niektóre zmiany dokonane na warstwie pojawią się tylko w aktywnej klatce, podczas gdy inne wpłyną na wsztkie klatki animacji. Zmiany wpływające na aktywną klatkę - do takich ustawień należą komendy i opcje dostępne w palecie Layers, są to: zmiana przezroczystości warstwy, tryb nakładania warstwy, widoczność, położenie oraz efekty warstwy.

Zmiany globalne - zmiany wpływające na wszystkie klatki animacji to: użycie narzędzi malarskich i edycyjnych, użycie komend dopasowujących kolor i odcień, filtry globalne, narzędzia tekstowe oraz inne narzędzia do edycji obrazu. Tego typu zmiany pojawiają się na każdej ramce animacji. Kiedy pracujesz z maską warstwy i ścieżką wycinającą, zmieniasz jej położenie, stan (włączona lub wyłączona), kiedy zmiany dotyczą pikseli lub grafiki wektorowej, pojawiają się one we wszystkich klatkach.

Rozpoczynamy pracę

Przed rozpoczęciem pracy przywróć domyślne ustawienia aplikacji (otwarte palety, ustawienia narzędzi). Zobacz „Lekcja 1 - Rozpoczęcie pracy z programem”.

W dzisiejszej lekcji stworzymy grafikę dla strony internetowej firmy produkującej świeży sok. Obejrzymy jednak najpierw jak wygląda efekt końcowy w postaci już gotowego kodu HTML.

• Uruchom przeglądarkę internetową, np. Internet Explorer i otwórz plik Jus.html z katalogu Phtoshop-Lekcja9/Jus.

Jeśli obejrzałeś już stronę, zamknij przeglądarkę i przejdź do dalszej części lekcji.

Tworzenie prostego ruchu

Tworzenie animacji rozpoczniemy od firmowego logo przy użyciu wielowarstwowego obrazu w formacie Photoshopa.

Użycie warstw do utworzenia klatek animacji

W tej części lekcji będziesz dopasowywać położenie warstwy i zmieniać jej przezroczystość w celu utworzenia pierwszej i ostatniej klatki animacji.

• Uruchom program ImageReady.

• Wybierz File Open i otwórz plik Logo1.psd z katalogu Phtoshop-Lekcja9 na lokalnym dysku twojego komputera.

Logo składa się z czterech komponentów znajdujących się na oddzielnych warstwach.

• Jeśli paleta Layrs jest niewidoczna, wybierz Windows Show Layers, aby ją pokazać.

Zauważ, że wszystkie warstwy są obecnie widoczne, o czym możesz się przekonać odnajdują w palecie Layers ikonę oka widoczną przy każdej warstwie.

W celu zdefiniowania animacji, użyjesz palety Layers w połączeniu z paletą Animation. Paleta Animation pozwala na stworzenie nowej klatki animacji, zmiany istniejącej, przestawienia klatek i podglądu animacji.

• Jeśli paleta Animation nie jest widoczna, wybierz Window Show Animation.

Paleta Animation otwiera się domyślnie z pojedynczą, pierwszą klatką animacji, która początkowo odzwierciedla stan otwartego obrazu. Zaznaczona klatka animacji jest otoczona obwódka, oznacza to, że możesz zmieniać jej zawartość przez edycję obrazu.

• W palecie Animation, kliknij przycisk New Frame -
  aby stworzyć nową klatkę animacji.

Każda nowo utworzona klatka pojawia się jako kopia klatki poprzedniej. Teraz możesz zmienić położenie elementów składowych logo dla końcowej klatki animacji.

• W palecie Layers, wybierz warstwę J.

• Upewnij się, że w palecie Aniamtion jest wybrana druga klatka animacji i wybierz narzędzie Move Tool -
  . Przytrzymaj wciśnięty klawisz, Shift aby ograniczyć swobodę ruchu i przesuń literę J do lewego brzegu obrazu. W palecie Layers zmień przezroczystość warstwy na 20%.

• Teraz w palecie Layers wybierz warstwę S.

• Z wciśniętym klawiszem Shift przeciągnij na obrazie literkę S do prawej krawędzi.

• W palecie Layers zmień przezroczystość warstwy do 20%.

• Powtórz kroki 7-10 dla warstw U oraz kreska, przesuń zawartość, zmień przezroczystość tych warstw według poniższych wskazówek:

• Przesuń literkę „U” do dolnego brzegu obrazu i zmień jej przezroczystość do 20%.

• Przesuń kreskę do górnego brzegu obrazu i zmień jej przezroczystość do 20%.

Zauważ, że w oknie animacji, druga klatka została uaktualniona i odzwierciedla aktualny stan naszego obrazu. Aby uczynić drugą ramkę ramką początkową animacji, musimy zamienić miejscami klatki.

• W palecie Animation, przeciągnij druga klatkę przed pierwszą i zwolnij przycisk myszki dopiero w momencie, kiedy z lewej strony pierwszej klatki pojawi się czarna kreska.

• Zapisz swoją pracę.

Wtrącanie ramek

Aby doprowadzić animowaną sekwencję do końca, musimy dodać dodatkowe klatki animacji, które będą zawierały płynne przejście między klatkami kluczowymi. Kiedy wprowadzisz zmiany przezroczystości, położenia lub efektu na dowolnej warstwie i klatce kluczowej, poinformujesz tym samym ImageReady o konieczności utworzenia klatek pośrednich.

• Upewnij się, że w palecie Animation jest wybrana pierwsza klatka, a następnie wybierz polecenie Tween z menu palety.

Zmianom możesz poddawać wszystkie warstwy klatki, lub tylko zaznaczone.

• W oknie dialogowym Tween, wybierz All layers, Position, Opacity. (Poza tym masz możliwość wybrania opcji Effects, która spowoduje wyliczanie klatek pośrednich z uwzględnieniem efektów warstw, tutaj jednak nie musisz zaznaczać tej opcji, ponieważ w naszym przykładzie nie wykorzystujemy efektów).

• Wybierz Tween with: Next Frame, aby dodać klatki między ramką bieżąca i następną. W polu tekstowym Frames to Add wpisz wartość 4 i kliknij OK.

ImagaReady utworzy teraz 4 dodatkowe klatki między już istniejącymi i wyliczy w nich pośrednie położenie oraz przezroczystość na wszystkich warstwach biorących udział w animacji.

• Znajdź teraz w dolnym lewym rogu palety Animation rozwijane menu Select looping options, rozwiń go i wybierz pozycję Once. Opcje te są odpowiedzialne za powtarzanie animacji, ta, która wybrałeś odpowiada za jednokrotne odtworzenie animacji.

• Kliknij przycisk Play -
  , przekonaj się jak wygląda animacja przy innych opcjach zapętlenia - looping options.

Wtrącanie ramek (tłumaczenie z wbudowanej pomocy Adobe Photoshop) Funkcja Wtrącania służy do automatycznego dodawania lub modyfikowania serii ramek umieszczonych pomiędzy dwiema istniejącymi ramkami, poprzez równomierne zróżnicowanie atrybutów warstw (położenie, krycie lub parametry efektów) nowych ramek tak, by wywołać wrażenie ruchu. Na przykład, aby wygasić warstwę, należy określić jej krycie w ramce początkowej na 100%, a w ramce końcowej na 0%. Po wtrąceniu dwóch ramek, krycie warstwy zostanie proporcjonalnie zmniejszone w nowych ramkach. Technika wtrącania skraca czas potrzebny do tworzenia efektów animacji takich jak wygaszanie lub pojawianie się oraz poruszanie się elementów animacji w kadrze. Wtrącone ramki mogą być edytowane oddzielnie po ich utworzeniu. Jeśli przy wtrącaniu zaznaczono jedną ramkę, to należy określić, czy ma to być ramka przed, czy za ramkami wtrąconymi. Jeśli zaznaczono dwie ramki umieszczone obok siebie, to nowe ramki zostaną umieszczone pomiędzy nimi. Jeśli zaznaczono więcej, niż jedną ramkę, to ramki pomiędzy pierwszą zaznaczoną ramką i ostatnią zaznaczoną ramką zostaną zastąpione nowymi ramkami. Jeśli zaznaczona zostanie pierwsza i ostatnia ramka animacji, to ramki zostaną potraktowane jak ramki umieszczone jedna za drugą, a ramki wtrącone zostaną umieszczone za ramką ostatnią. (Metoda takiego wtrącania jest wygodna przy wielokrotnych pętlach w animacji.) Uwaga: Przy wtrącaniu nie można zaznaczyć kilku ramek rozmieszczonych w dowolnych odstępach.

Zachowywanie przezroczystości i optymalizacja animacji

Następnym krokiem będzie zoptymalizowanie naszej animacji w formacie GIF z zachowaniem przezroczystego tła i obejrzenie wyników w przeglądarce internetowej. Pamiętaj, że tylko format GIF daje możliwość zapisania poklatkowej animacji.

• W palecie Optimize, wybierz jako format pliku GIF, jako paletę kolorów Perceptual, oraz ilość kolorów 256.

• Wybierz z menu palety, opcję Show Options lub kliknij na przycisk Show Options na zakładce palety Optimize.

• 
  Zaznacz teraz w opcjach pole Transparency, aby zabezpieczyć tło oryginalnego obrazku a następnie wybierz biały kolor z rozwijanego menu Matte.

Wybór białego koloru można znacznie sobie uprościć, jeśli kliknie się ikonę kolorów domyślnych a następnie wybierze pozycję Backroud color w menu Matte palety Optimize.

• Teraz w menu palety Animation wybierz Select All Frames Frazes kliknij na którejkolwiek ramce prawym przyciskiem myszki, wywołasz w ten sposób menu kontekstowe Disposal Method.

• Zmień metodę na Automatic.

Opcje Disposal Method dotyczą sposobu, w jaki mają być usuwane już wyświetlone klatki (metoda Automatic i Restore to Background). Metoda Do Not Dispose nie usuwa poprzedniej klatki, co w wyniku może przynieść dosyć nieoczekiwane efekty, ponieważ wszystkie wyświetlane ramki będą nakładane na siebie. Dla większości animacji najbardziej odpowiednią metodą jest Automatic. Ta opcja jest oparta na badaniu czy w animacji występują lub nie występują obszary przeźroczyste. I jeśli następna klatka animacji zawiera warstwę przeźroczystą to bieżąca ramka po wyświetleniu zostaje usunięta.

Teraz zajmiemy się ustawieniami opcji optymalizacji animacji.

• Wybierz Optimize Aniamtion z menu palety Animation

Podczas optymalizacji animacji opartej na formacie graficznym GIF, oprócz tradycyjnych technik optymalizacji obrazów dochodzi też kilka innych metod, właściwych jedynie dla sekwencji animowanych. Jęsli podczas optymalizacji animowanych GIF-ów wykorzystasz palety kolorów: adaptive, perceptual lub selective, ImageReady generuje jedną wspólną paletę dla wszystkich klatek animacji. W przypadku, kiedy są stosowane specjalne techniki symulacji nieobecnych kolorów - dithering są one oparte na jednolitym wzorze dla wszystkich klatek animacji w celu uniknięcia efektu migotania podczas odtwarzania. Pyzatym w pliku animacji są zapisywane tylko te fragmenty poszczególnych klatek, które zmieniają się z klatki na klatkę, redukuje to znacznie rozmiar pliku. Opisane metody optymalizacji powodują to zwiększenie czasu potrzebnego na zmniejszenie objętości pliku niż w przypadku statycznego obrazku GIF.

• Wybierz metodę optymalizacji Bounding Box, aby dać wskazówkę ImageReady do zachowywania z każdej ramki tylko tych obszarów, które są zmieniane w trakcie animacji. Użycie tej opcji spowoduje zmniejszenie objętości wynikowego pliku, ale nie będzie on kompatybilny z innymi programami do edycji animowanych GIF-ów, które nie wspierają tej opcji. Ta opcja jest domyślnie zaznaczona i zaleca się jej używanie.

• Wybierz metodę optymalizacji Redundant Pixel Removal. Ta opcja usuwa zbędne piksele, jeśli wszystkie piksele ramki, które nie różnią się od pikseli ramki wcześniejszej mają być przezroczyste. Opcja jest również wybrana domyślnie i zaleca się jej używanie. Kiedy opcja jest wybrana, metoda Disposal Method musi być ustawiona na opcję Automatic.

• W oknie obrazu kliknij na zakładkę Optimized, aby ImageReady zbudował zoptymalizowaną wersję animowanej sekwencji. Następnie kliknij na zakładkę 2-Up i porównaj wersje zoptymalizowaną z oryginałem. Dodatkowo są podawane informacje o rozmiarze pliku wynikowego, te informacje znajdziesz na dole okna obrazu. Aby zmniejszyć rozmiar pliku możesz eksperymentować z różnymi paletami kolorów, oraz ilością kolorów.

• Wybierze File Preview In, a następnie wskaż zainstalowaną na swoim komputerze przeglądarkę internetową z podmenu. Ta komenda spowoduje odtworzenie edytowanej animacji w oknie przeglądarki.

• Powróć teraz do programu ImageReady.

• Wybierz File Save Optimized As, nadaj nazwę dla utworzonej animacji i kliknij przycisk Save.

Ustawianie metody znikania ramek (tłumaczenie z wbudowanej pomocy Adobe Photoshop) Metody znikania ramek (Disposal Method) określają czy ramka bieżąca ma zniknąć przed wyświetleniem ramki następnej. Metoda znikania jest określana dla animacji z przezroczystym tłem, w której ramka bieżąca może być widoczna spod obszarów przezroczystych ramki następnej. Ikona metody znikania ramek wskazuje czy ramka posiada opcję Do not dispose, czy Restore to background. Ikony metody znajdują poniżej każdej ramki (Ikony nie są wyświetlane przy automatycznym wybieraniu metody znikania.) Opcja Automatic włącza automatycznie wybieranie metody znikania ramki bieżącej, jeśli ramka następna posiada przezroczystość warstw. W większości animacji, opcja Automatic działa poprawnie, ale animacje z efektami specjalnymi powinny być opracowywane oddzielnie. Uwaga: Opcja Automatic powinna być wybierana dla optymalizacji Redundant Pixel Removal tak, by program mógł zachować ramki z obszarami przezroczystymi. Opcja Do not dispose zachowuje ramkę bieżącą w czasie wyświetlania ramki następnej. Ramka bieżąca (i ramki poprzednie) mogą być wyświetlane spod przezroczystych obszarów ramek następnych. Opcja Restore to backhround włącza całkowite zniknięcie ramki bieżącej przed wyświetleniem ramki następnej. Wyświetlana jest tylko jedna ramka, a ramka bieżąca nie jest widoczna spod przezroczystych obszarów ramki następnej.

Sterowanie klatkami animacji

Możesz używać numerycznej techniki do przeglądania i przewijania klatek animacji.

• Użyj poniższych elementów sterujących w celu przećwiczenia sterowania animacją.

• Możesz zaznaczać klatkę przez kliknięcie jej miniaturki w palecie Animation. Okno obrazu i paleta Layers zostanie automatycznie uaktualnione, tak, aby przedstawić stan wybranej klatki.

A - menu zapętlenia, B - Powrót do pierwszej klatki, C - Cofnięcie o jedną klatkę, D - zatrzymanie odtwarzania animacji, E - Odtwarzaj, F - jedna klatka do przodu, G - wtrącanie klatek, H - nowa klatka, J - klatka animacji

• W palecie Animation, masz możliwość przesuwania się o jedną klatkę do przodu lub do tyłu, a także szybko powrócić do pierwszej klatki animacji.

• Również w palecie Layers znajdują się dwa przyciski umożliwiające przychodzenie o jedną klatkę do przodu lub do tyłu. Są one szczególnie przydatne przy modyfikowaniu warstw na kolejnych klatkach animacji.

• Kiedy poznasz wszystkie mechanizmy sterowania klatkami, zamknij plik bez zapisywania zmian.

Tworzenie przejścia między obrazami

Teraz zajmiemy się animacją opartą na przeźroczystości warstw, stworzymy iluzje stopniowego przejścia jednego obrazu w inny.

• Wybierz File Open i otwórz plik Logo2.psd z folderu z bieżącą lekcją.

Otwarty obrazek zawiera dwie warstwy, które prezentują różne style tła. Obecnie jako tło jest użyte zdjęcie drzewa pomarańczy.

• Teraz w palecie Layers wyłącz warstwę Zdjecie. Po tej operacji pojawi się dolna warstwa Ilustracja a na niej ręcznie namalowane drzewko.

Stworzymy teraz animację, która będzie pokazywać zmieniające się tło (z warstwy ze zdjęciem na rysowane odręcznie).

• Uczyń teraz z powrotem widoczna warstwę Zdjecie oraz pozostaw widoczną warstwę Ilustracja.

Przy takim zestawieniu warstw uzyskujemy punkt początkowy animacji. W palecie Animation jest w tej chwili widoczna pierwsza klatka, która odzwierciedla aktualny stan obrazu.

Stworzymy teraz ostatnią klatkę animacji.

• W palecie Animation, kliknij przycisk tworzenia nowej klatki, New Frame -
  .

• W palecie Layers, kliknij ikonę z okiem przy warstwie Zdjecie, aby wyłączyć tą warstwę w tej klatce animacji.

Warstwa Zdjecie widoczna - pierwsza klatka	Warstwa Zdjecie ukryta - ostatnia klatka	Efekty naszej pracy w palecie Animation

• Wybierz opcję Tween z menu palety Animation. W oknie dialogowym zaznacz opcję All Layers, odznacz Position i Effects, pozostaw Opacity. W sekcji Tween With, wybierz Previous Frame, a liczbę ramek do dodania ustaw na 4, kliknij OK.

ImageReady doda teraz cztery przejściowe klatki, w który będzie się zmieniać przezroczystość warstwy Zdjecie, aż do momentu całkowitego ukrycia warstwy.

• W palecie Animation wybierz opcję Once z rozwijanego menu Looping options.

• Kliknij Play, aby odtworzyć animację.

Podczas przeglądania animacji, ImageReady może niedokładnie wyświetlać animację, jeśli chodzi o czas jej trwania. Dzieje się tak, dlatego, że program musi budować każda klatkę osobno podczas odtwarzania i może mu to zająć trochę czasu. Aby być pewnym końcowego efektu należy animację obejrzeć w przeglądarce internetowej.

• Wybierz File Preview In, i wybierz przeglądarkę internetową zainstalowaną w twoim komputerze z podmenu.

• Po zakończeniu przeglądania animacji w przeglądarce, zamknij ją i wróć do programu ImageReady.

• Wybierz File Save Optimized As, nazwij plik logo2.gif i kliknij Save.

ImageReady zapisze teraz naszą animację w formacie GIF i użyje ustawień z palety Optimize w celu zmniejszenia objętości pliku wyjściowego. Pamiętaj, że masz możliwość wpływania na rozmiar końcowego obrazku przez zmianę ilości i paletę kolorów.

• Zamknij teraz obrazek i nie zapisuj zmian w oryginalnym pliku.

Tworzenie animacji dwu-krokowej

Możesz utworzyć prostą animację dwukrokową przez przełączanie widoczności dwóch warstw. Przykładem takiej animacji może być naprzemienna zmiana dwóch różnych stanów obrazku lub ruch obiektu tam i z powrotem odbywający się według prostego schematu. W tej części lekcji ożywimy rysunkowy mikser wyciskający sok z owoców.




• Otwórz plik Mikser.psd z katalogu z bieżącą lekcją.

Plik zawiera kilka warstw. Utworzysz teraz animację, w której naprzemiennie będą chowane i pokazywane dwie warstwy przedstawiające korpus miksera w różnych położeniach.

Spójrz teraz na paletę Layers i określ, które warstwy są w tej chwili widoczne.

• Przejdź teraz do palety Animation i utwórz nową klatkę animacji (przycisk New Frame Buton).

• Teraz w palecie Layers włącz warstwę Layer 2. Ponieważ ta warstwa znajduje się powyżej warstwy Layer 1, przykryje ona częściowo warstwę poniższą, ukrywając i zmieniając położenie części miksera.

Widoczna tylko warstwa Layer 1	Widoczna warstwa Layer 1 i 2

• Upewnij się, że w palecie Animation, w rozwijanym menu Looping jest wybrana opcja Forever (ustawienie domyślne).

• Kliknij przycisk Play, aby odtworzyć animację, przeanalizuj sposób przełączania warstw i kliknij Stop.

• Wybierz File Preview In, i wybierz przeglądarkę internetową, aby w niej podejrzeć animację, następnie zamknij przeglądarkę i powróć do programu ImageReady.

• Zapisz teraz swoja pracę, wybierając komendę File Save As, pod nazwą Mikser.gif.

Tworzenie klatek z transformacją warstw

Teraz naszym zadaniem będzie utworzyć spadającą krople soku. W tym celu będziemy musieli zmieniać istniejące elementy animacji, dodawać nowe. Poprzez sukcesywne kopiowanie i zmienienia kształtu oraz położenia obiektu można uzyskać realistyczny efekt ruchu.

Teraz rozpoczniemy tworzenie efektu spadającej kropli soku, która pojawia się w momencie pracy miksera.

Przed dodaniem nowej warstwy do obrazu, dobrym pomysłem jest utworzenie najpierw nowej klatki, ochroni to istniejące klatki animacji przed niezamierzonymi zmianami.

• W palecie Animation, wybierz ramkę numer 2. Następnie kliknij przycisk tworzenia nowej klatki - New Frame -
  . Nowa klatka pojawi się po klatce numer 2.

• W palecie Layers uczyń widoczną warstwę Kropla.

Zauważ, że kropla soku pojawiła się teraz w górnym lewym rogu obrazu miksera.

• Teraz w menu palety Animation wyłącz opcję New Layers Visible In All Frames.

• Kliknij teraz prawym przyciskiem myszki na warstwie Kropla w palecie Layers i wybierz z menu kontekstowego komendę Duplicate Layers.

Uwaga: W przypadku pozostawienia włączonej opcji New Layers Visible In All Frames, nowa warstwa byłaby widoczna we wszystkich ramkach.

• Upewnij się, że warstwa Kropla copy jest zaznaczona i wybierz Edit Free Transform.

• Umieść kursor na zewnątrz prostokątnego zaznaczenia (wskaźnik przybierze postać podwójnej strzałki -
  ) i przeciągnij myszką tak, aby obrócić kroplę soku przeciwnie do ruchu wskazówek zegara. Następnie umieść kursor wewnątrz prostokąta edycji (kształt wskaźnika zmieni się na
  ) i zmień położenie kopii kropli, tak jak pokazano na ilustracji. Możesz pracować przy powiększeniu, po zakończeniu transformacji, zatwierdź zmiany np. za pomocą naciśnięcia klawisza Enter.

Wybrana warstwa z kopią warstwy Kropla	Obrót warstwy Kropla copy	Przemieszczenie warstwy Kropla copy

• Teraz powtórz punkt 4, ale tym razem dla warstwy Kropla copy.

• Za pomocą swobodnej transformacji (Edit Free Transform) zmień położenie i kąt padania kolejnej kropli soku. Zobacz na poniższy rysunek.

Po zakończeniu prac nad kroplą powinieneś mieć dwie dodatkowe warstwy z kopiami kropli, które są odpowiednio zmodyfikowane i symulują prawdziwą drogę spadającej kropli.

• Zapisz teraz swoją pracę za pomocą polecenia File Save, zachowasz w ten sposób nowe warstwy i wszystkie dotychczasowe ustawienia.

Synchronizacja animacji na kilku warstwach

Teraz utworzymy animację spadania kropli, oderwanej od miksera. Będziemy na przemian włączać i wyłączać warstwy, które przed chwilą utworzyliśmy. Poza tym musimy zsynchronizować z ruchem kropli przesuwanie się korpusu miksera.

• Upewnij się, że w palecie Animation jest zaznaczona trzecie klatka. W palecie Layers, wybierz warstwę Layer 1, pozostaw widoczną warstwę Kropla, a wszystkie inne ukryj.

W momencie, kiedy ukrywasz lub pokazujesz warstwy w ramce, robisz to tylko w bieżącej klatce.

Teraz dodamy klatkę, na której pokażemy ruch korpusu miksera oraz kolejne położenie spadającej kropli.

• Na palecie Animation kliknij przycisk tworzenia nowej klatki - Duplicates Current Frame, utworzysz w ten sposób czwartą klatkę animacji.

• W palecie Layers zrób widoczną warstwę Layer 2 wraz z warstwą Layer 1 i Kropla copy.

• Kontynuuj tworzenie nowych klatek oraz powiązanych z nimi warstw w palecie Layers według poniższego schematu.

• Dla klatki numer 5, zrób widoczną warstwę Kropla copy 2 i Layer 1

• Dla klatki numer 6, zrób widoczną warstwę Layer 2 i Layer 1.

Teraz ustawimy odstęp czasowy między poszczególnymi ramkami animacji.

• Z menu palety Animation wybierz Select All Frames. Kliknij teraz na czas poniżej pierwszej ramki animacji i wybierz z rozwijanego menu pozycję Other. W oknie dialogowym Set Frame Delay, wprowadź wartość 0,05 w polu tekstowym Set Delay For All Frames. Domyślną wartością w tym polu jest 0 sekund. Kliknij OK.

Czas, który się pojawił poniżej każdej klatki oznacza, że odstęp czasowy jest ustawiony dla każdej z nich. Istnieje możliwość ustalania czasu indywidualnie, ale w naszym przypadku jest on taki sam dla wszystkich klatek.

• Odtwórz teraz animację klikając na przycisk Play -
  .

Krople soku powinny teraz w charakterystyczny sposób spadać a mikser podczas pracy powinien trząść się.

• Zatrzymaj animację.

• Teraz podejrzyj ją w przeglądarce internetowej (File Preview In i wybierz przeglądarkę zainstalowaną na twoim komputerze).

• Wybierz teraz File Save Optimized As. Upewnij się, że plik nazywa się Blednder.gif i podmień istniejący plik na nową wersję.

• Zamknij teraz obrazek i zapisz wszystkie zmiany, które dokonałeś.

Tworzenie sekwencyjnego montażu

W tej części lekcji zajmiemy się montażem szybko zmieniającej się sekwencji przedstawiającej zdjęcia owoców. Podczas zmian kolejnych obrazków będziemy sukcesywnie włączać i wyłączać warstwy zawierające zdjęcia owoców.




Uporządkowanie sekwencji

Będziemy pracować z obrazem zawierającym kilka warstw przedstawiających różne owoce.

• Otwórz plik Owoce.psd, który znajduje się w katalogu z bieżącą lekcją.

• Z menu palety Animation wybierz Makes Frames From Layers.

Po wydaniu tego polecenia wszystkie warstwy z obrazu zostaną przeniesione do animacji jako kolejne klatki. W palecie Animation będzie widocznych teraz 6 klatek, z których każda przedstawia inną warstwę.

• W palecie Animation zaznacz wszystkie klatki, np. z wciśniętym klawiszem Shift albo przez wybranie odpowiedniej opcji w menu palety. Następnie rozwiń menu z czasem przejścia ramki, np. klikając na 1 klatce, i ustaw czas na 0,25 s. Przy zaznaczaniu ramek możesz również wykorzystać klawisz Ctrl - pozwala na wybiórcze zaznaczanie poszczególnych klatek.

• W palecie Animation rozwiń menu Looping i wybierz ustawienie Once. Teraz odtwórz sekwencję kilkakrotnie za pomocą przycisku Play.

Teraz zmienimy kolejność wyświetlania klatek tak, aby jako pierwsza klatka animacji była wyświetlana klatka ze zdjęciem cytryny.

• W palecie Animation kliknij na ramkę z cytryną i przeciągaj ją w lewo, do momentu, kiedy przed pierwszą klatką pojawi się pionowa linia, wtedy zwolnij przycisk myszki.





Teraz jako pierwsza klatka w animacji będzie występować cytryna.

• Zobacz jak wygląda teraz animacja a następnie zapisz sekwencję w pliku o nazwie Owoce.gif za pomocą polecenia File Save Optimized As.

Płynne przejście miedzy ramkami

Teraz zmienimy naszą animowaną sekwencję tak, aby przejście między niektórymi klatkami było bardziej płynne. Zajmiemy się ramkami z truskawkami i pomarańczą.

• W palecie Animation wybierz klatkę przedstawiającą truskawki. Główne okno obrazu oraz paleta Layers w tym momencie będą odzwierciedlać aktualny stan ramki.

• Kliknij teraz przycisk Duplicates Current Frames aby utworzyć kopię bieżącej ramki. Nowa ramka ustawi się tuż za swoim pierwowzorem.

• W palecie Layers zmień przezroczystość warstwy Truskawki na 1% w polu Opacity.

• Z menu palety Aniamtion wybierz polecenie Tween. W oknie dialogowym wybierz: Selected Layers; odznacz Position i Effects, zaznacz Opacity; w polu Frames to Add wpisz 4; a w polu Tween with wybierz Previous Frame. Zatwierdź ustawienia klikając OK.

• W rozwijanym menu Looping Options palety Animation zmień sposób zapętlania animacji na Forever i obejrzyj całą sekwencję w ruchu. Jeśli masz ochotę, dodaj ten efekt dla pozostałych owoców.




• Zapisz teraz zmiany w animacji.

Zmiana rozmiaru obiektu podczas animacji

Aby jeszcze bardziej wzbogacić naszą animację, zastosujemy teraz zmianę rozmiaru obiektu, a konkretnie pomarańczy.

Pierwszą rzeczą jest kilkukrotne skopiowanie i zmiana rozmiaru warstwy z pomarańczą.

• W palecie Animation zaznacz klatkę zawierającą pomarańczę.

• W palecie Layers utwórz duplikat warstwy Pomarancze.

Uwaga: Przed duplikowaniem warstwy upewnij się, że w menu palety Animation jest wyłączona opcja New Layers Visible In All Frames.

• Powtórz krok, 2 aby ostatecznie w palecie Layers znalazly się 4 kopie warstwy Pomarancze.

• Kliknij dwukrotnie na warstwie Pomarancze copy, w oknie dialogowym Layer Options zmień nazwę warstwy na Pomarancze 20% i kliknij OK.

• Powtórz krok 4, zmieniając nazwy dla poszczególnych duplikatów warstwy Pomarancze na: Pomarancze 40%, Pomarancze 60% oraz Pomarancze 80%.

• W palecie Layers uczyń widoczną warstwę Pomarancze 20%, a wszystkie inne warstwy ukryj.

Teraz zmienimy poszczególne kopie warstwy pomarańczy tak, aby zawierały skokowo zmieniający się rozmiar owocu.

• Wybierz Edit Transform Numeric. W sekcji Scale okna dialogowego Numeric Transform, w polu Percent, wprowadź wartość 20. Upewnij się, że opcja Constrain Proportion jest zaznaczona i kliknij OK.

• Wykonaj następujące czynności dla następnej ramki:

• W palecie Animation utwórz nową klatkę animacji, powinna ona zawierać zdjęcie pomarańczy z poprzedniej klatki.

• W palecie Layers ukryj warstwę Pomarancze 20% i uczyń widoczną warstwę Pomarancze 40%.

• Wybierz Edit Transform Numeric i wprowadź 40% w polu Percent, sekcji Scale.

• Powtórz krok 8 dla warstw: Pomarancze 60%, Pomarancze 80%. Zmieniaj rozmiar warstwy w zależność od wartości procentowej, podanej w nazwie. Jako ostatnią klatkę utwórz ramkę zawierającą tylko warstwę Pomarancze, czyli niezmienioną przez nas oryginalną warstwę ze zdjęciem pomarańczy.

• Odtwórz teraz animację i jeśli trzeba popraw według własnego uznania czasy wyświetlania poszczególnych klatek lub zmień ich kolejność.

• Zapisz gotową animację do pliku za pomocą polecenia File Save Optimized. Następnie zamknij otwarty plik i zapisz wszystkie zmiany.

Tworzenie animacji z wykorzystaniem zaawansowanych technik pracy z warstwami

W tej części lekcji nauczysz się wykorzystywać zaawansowane techniki pracy na warstwach takie jak: Layer Mask, Clipping Pahts oraz Clipping Groups, w celu stworzenia efektownej animacji.

Będziemy teraz pracować z wersją logo, którą widziałeś na początku lekcji.




Użycie warstwy maski w celu utworzenia animacji

Najpierw użyjemy maski wycinającej (Clipping Path) w celu stworzenia iluzji powolnego wypełniania sokiem literki „U” w logo firmy.

• Otwórz plik Logo3.psd z katalogu z bieżącą lekcją.

• W palecie Layers ukryj warstwę Zdjecie i pozostaw widoczne warstwy Sok i Tekst.

Warstwa Sok zawiera wektorową ścieżkę wycinającą, o czym świadczy miniaturka w odcieniach szarości po prawej stronie miniaturki przedstawiającej zawartości warstwy. Ścieżka wycinająca ma kształt litery „U” i jej zadaniem jest ograniczanie obszaru, w którym widoczne jest pomarańczowe wypełnienie przedstawiane przez warstwę sok. Inaczej mówiąc ścieżka wycinająca spełnia tutaj rolę „dziurki od klucza”, przez który widać tylko fragment całości, znajdującej się po drugiej stronie.

Przy obecnym położeniu warstw, literka „U” jest wypełniona po brzegi sokiem. Możemy przesunąć zawartość warstwy Sok, tak, aby utworzyć nową klatkę animacji, bez soku.

• W palecie Animation utwórz nową klatkę. W palecie Layers wyłącz połączenie warstwy Sok i ścieżki wycinającej, kliknij między dwoma miniaturkami, na symbolu łańcucha.

Wyłączenie powiązania między warstwą i ścieżką wycinającą, daje tobie możliwość zmiany położenia tych obiektów niezależnie od siebie.

• Wybierz narzędzie Move Tool -
  .

• W palecie Layers, kliknij na miniaturkę warstwy Sok, dokonasz w ten sposób wyboru, który element tej złożonej warstwy chcesz zmieniać.

• Teraz umieść wskaźnik narzędzia Move Tool na obrazie, nad pomarańczowym obszarem i przeciągnij ten obszar na dół, tak, aby całkowicie schował się on pod literkę „U”.

• 
  W palecie Animation zamień miejscami klatki animacji 1 i 2.






Ponieważ zdefiniowaliśmy teraz początek i koniec animacji przez przesuniecie pojedynczej warstwy, możemy automatycznie utworzyć klatki pośrednie przy użyciu poznanej już komendy Tween.

• Z menu palety Animation wybierz Tween. W oknie dialogowym ustaw All Layers oraz Position, odznacz Opacity i Effects. Dla Tween With wybierz Next Frame a dla Frames to Add wpisz 5 klatek. Kliknij OK.

• W palecie Animation zaznacz wszystkie ramki a następnie w palecie Layers włącz warstwę Zdjecie. Powinna ona teraz pojawić się we wszystkich klatkach.

• Odtwórz teraz animację w programie ImageReady a także jej zoptymalizowana wersję w wybranej przeglądarce internetowej, za pomocą polecenia File Preview In.

• Zapisz animację w pliku za pomocą polecenia File Save Optimized As, np. pod nazwą Logo3.gif.

• Zamknij i zapisz zmiany w pliku Logo3.psd.

Użycie grupy wycinającej w celu stworzenia animacji

Teraz utworzymy efekt miksowania truskawek wewnątrz tekstowego logo.

• Otwórz plik Logo4.psd z katalogu z bieżącą lekcją.

• W palecie Layers upewnij się, że są widoczne obydwie warstwy Truskawki i Tekst.

Aby truskawki były widoczne tylko wewnątrz tekstu musimy utworzyć grupę wycinającą (Clipping Group).

• W palecie Layers zaznacz warstwę Truskawki, następnie wybierz Layer Group with Previous.

Zauważ, jakie zmiany nastąpiły teraz w edytowanym obrazie. Truskawki zostały zgrupowane z warstwą niższą a więc z tekstowym logiem i przez niego ograniczone. Obok miniaturki warstwy Truskawki pojawił się odpowiedni znacznik informujący o zgrupowaniu warstw.

• W palecie Animation utwórz nową klatkę.

Dla nowej klatki animacji przesuniemy nieco warstwę truskawki, co wywoła później efekt wstrząsania truskawek wewnątrz logo.

• W palecie Layers zaznacz warstwę Truskawki a następnie wybierz narzędzie Move Tool -
  .

• Przesuń teraz na obrazie warstwę z truskawkami lekko w prawo.





• Odtwórz teraz animację w programie ImageReady a także jej zoptymalizowana wersję w wybranej przeglądarce internetowej, za pomocą polecenia File Preview In.

• Jeśli masz na to ochotę, poeksperymentuj z ustawianiem czasu wyświetlania ramek, dobierz odległość i kierunek przesunięcie.

• Jeśli animacja jest gotowa, zapisz ją w pliku za pomocą polecenia File Save Optimized As, np. pod nazwą Logo4.gif.

• Zamknij i zapisz zmiany w pliku Logo4.psd.

Pytania Kontrolne

• Opisz, w jaki najprostszy sposób można wykonać animację w programie ImageReady.

• W jakim celu i kiedy możesz zastosować mechanizm Tween Frames podczas tworzenia animacji?

• W jaki sposób można zoptymalizować animację?

• Co daje optymalizacja animacji i jakich korzyści można się po niej spodziewać?

• W jakim celu jest włączana funkcja Disposal Method? Której odmiany tej funkcji używa się najczęściej?

• Czy istnieje możliwość sterowania czasem wyświetlania poszczególnych ramek animacji?

• W jaki sposób możesz zmieniać istniejące ramki animacji?

• Jak możesz podejrzeć ostateczny efekt wyświetlania animacji?

• W jakim formacie plików można zapisać animację?

28

Lekcja 9

Adobe Photoshop - Tworzenie animowanych obrazków

27

Lekcja 9

Adobe Photoshop - Tworzenie animowanych obrazków

Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław

Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław

---