9

Tworzenie animo-

wanych obrazków

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

2

Tworzoną stronę internetową możesz uatrakcyjnić przez dodanie ele-
mentó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ść animo-
wanej grafiki, animowane GIF-y są spotykane na wielu stronach inter-
netowych, a ze względu na niewielki rozmiar pliku wynikowego, nie
wydłużają czasu pobierania strony z sieci Internet. ImageReady pozwa-
la 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 utworze-

nia poszczególnych klatek animacji

•

Wprowadzenie zmian w poszczególnej klatce animacji, grupie kla-

tek 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 optymali-

zujących

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

Tworzenie animacji

W programie Adobe ImageReady animacja jest tworzona z pojedyn-
czych 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 ru-
chu jest uzyskiwana przez szybkie wyświetlenie całej sekwencji klatek.
Animację możesz utworzyć na kilka sposobów:

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

3

•

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ę wy-
branej cechy elementu np. przezroczystości, położenia lub prze za-
stosowanie efektu. W efekcie pozwoli to nam przesuwać ten ele-
ment 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 po-
rzedniej. 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 sko-
piować selekcję warstwy; dopasować kolor i odcień; zmienić przezro-
czystość 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 po-
zwala na późniejsze bezproblemowe zmiany.

Zapamiętaj, że niektóre zmiany dokonane na warstwie pojawią się tyl-
ko w aktywnej klatce, podczas gdy inne wpłyną na wsztkie klatki ani-
macji.

Zmiany wpływające na aktywną klatkę – do takich ustawień należą
komendy i opcje dostępne w palecie Layers, są to: zmiana przezroczy-
stości warstwy, tryb nakładania warstwy, widoczność, położenie oraz
efekty warstwy.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

4

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.

1 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 wie-
lowarstwowego obrazu w formacie Photoshopa.

Zmiany globalne – zmiany wpływające na wszystkie klatki animacji
to: użycie narzędzi malarskich i edycyjnych, użycie komend dopasowu-
jących kolor i odcień, filtry globalne, narzędzia tekstowe oraz inne na-
rzę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.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

5

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 ani-
macji.

1 Uruchom program ImageReady.

2 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 oddziel-
nych warstwach.

3 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.

4 Jeśli paleta Animation nie jest widoczna, wybierz Window

Show Animation.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

6

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

5 W palecie Animation, kliknij przycisk New Frame -

aby stwo-

rzyć 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.

6 W palecie Layers, wybierz warstwę J.

7 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%.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

7

8 Teraz w palecie Layers wybierz warstwę S.

9 Z wciśniętym klawiszem Shift przeciągnij na obrazie literkę S do

prawej krawędzi.

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

11 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 przezro-
czystość do 20%.

•

Przesuń kreskę do górnego brzegu obrazu i zmień jej przezroczy-
stość do 20%.

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

12 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.

13 Zapisz swoją pracę.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

8

Wtrącanie ramek

Aby doprowadzić animowaną sekwencję do końca, musimy dodać do-
datkowe 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, poinformu-
jesz tym samym ImageReady o konieczności utworzenia klatek pośred-
nich.

1 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 zazna-
czone.

2 W oknie dialogowym Tween, wybierz All layers, Position, Opaci-

ty. (Poza tym masz możliwość wybrania opcji Effects, która spowo-
duje wyliczanie klatek pośrednich z uwzględnieniem efektów
warstw, tutaj jednak nie musisz zaznaczać tej opcji, ponieważ w na-
szym przykładzie nie wykorzystujemy efektów).

3 Wybierz Tween with: Next Frame, aby dodać klatki między ramką

bieżąca i następną. W polu tekstowym Frames to Add wpisz war-
tość 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.

4 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 wy-
brałeś odpowiada za jednokrotne odtworzenie animacji.

5 Kliknij przycisk Play -

, przekonaj się jak wygląda animacja przy

innych opcjach zapętlenia – looping options.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

9

Zachowywanie przezroczystości i optymalizacja animacji

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

1 W palecie Optimize, wybierz jako format pliku GIF, jako paletę ko-

lorów Perceptual, oraz ilość kolorów 256.

2 Wybierz z menu palety, opcję Show Options lub kliknij na przycisk

Show Options na zakładce palety Optimize.

Wtrącanie ramek (tłumaczenie z wbudowanej pomocy Adobe
Photoshop)

Funkcja Wtrącania służy do automatycznego dodawania lub modyfiko-
wania serii ramek umieszczonych pomiędzy dwiema istniejącymi ram-
kami, poprzez równomierne zróżnicowanie atrybutów warstw (położe-
nie, 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 kry-
cie 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 po-
trzebny do tworzenia efektów animacji takich jak wygaszanie lub poja-
wianie 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ą umiesz-
czone 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ą umiesz-
czone 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 rozmieszczo-
nych w dowolnych odstępach.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

10

3 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 co-
lor w menu Matte palety Optimize.

4 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.

5 Zmień metodę na Automatic.

Opcje Disposal Method dotyczą sposobu, w jaki mają być usuwane już
wyświetlone klatki (metoda Automatic i Restore to Background). Meto-
da 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.

6 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 kolo-
ró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 – dither-
ing są one oparte na jednolitym wzorze dla wszystkich klatek animacji
w celu uniknięcia efektu migotania podczas odtwarzania. Pyzatym w

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

11

pliku animacji są zapisywane tylko te fragmenty poszczególnych klatek,
które zmieniają się z klatki na klatkę, redukuje to znacznie rozmiar pli-
ku. Opisane metody optymalizacji powodują to zwiększenie czasu po-
trzebnego na zmniejszenie objętości pliku niż w przypadku statycznego
obrazku GIF.

7 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 kompa-
tybilny 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.

8 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.

9 W oknie obrazu kliknij na zakładkę Optimized, aby ImageReady

zbudował zoptymalizowaną wersję animowanej sekwencji. Następ-
nie 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 pale-
tami kolorów, oraz ilością kolorów.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

12

10 Wybierze File

Preview In, a następnie wskaż zainstalowaną na

swoim komputerze przeglądarkę internetową z podmenu. Ta ko-
menda spowoduje odtworzenie edytowanej animacji w oknie prze-
glądarki.

11 Powróć teraz do programu ImageReady.

12 Wybierz File

Save Optimized As, nadaj nazwę dla utworzonej

animacji i kliknij przycisk Save.

Sterowanie klatkami animacji

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

1 Użyj poniższych elementów sterujących w celu przećwiczenia stero-

wania animacją.

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 wybiera-
niu 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 Re-
dundant Pixel Removal tak, by program mógł zachować ramki z obsza-
rami przezroczystymi.

• Opcja Do not dispose zachowuje ramkę bieżącą w czasie wyświetla-
nia 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.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

13

•••• 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 szcze-
gólnie przydatne przy modyfikowaniu warstw na kolejnych klatkach
animacji.

2 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, stwo-
rzymy iluzje stopniowego przejścia jednego obrazu w inny.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

14

1 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.

2 Teraz w palecie Layers wyłącz warstwę Zdjecie. Po tej operacji po-

jawi 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).

3 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.

4 W palecie Animation, kliknij przycisk tworzenia nowej klatki, New

Frame -

.

5 W palecie Layers, kliknij ikonę z okiem przy warstwie Zdjecie, aby

wyłączyć tą warstwę w tej klatce animacji.

Warstwa Zdjecie wi-
doczna

–

pierwsza

klatka

Warstwa Zdjecie ukry-
ta – ostatnia klatka

Efekty naszej pracy w palecie
Animation

6 Wybierz opcję Tween z menu palety Animation. W oknie dialogo-

wym zaznacz opcję All Layers, odznacz Position i Effects, pozo-
staw Opacity. W sekcji Tween With, wybierz Previous Frame, a
liczbę ramek do dodania ustaw na 4, kliknij OK.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

15

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

7 W palecie Animation wybierz opcję Once z rozwijanego menu Lo-

oping options.

8 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, dlate-
go, że program musi budować każda klatkę osobno podczas odtwarza-
nia i może mu to zająć trochę czasu. Aby być pewnym końcowego efek-
tu należy animację obejrzeć w przeglądarce internetowej.

9 Wybierz File

Preview In, i wybierz przeglądarkę internetową za-

instalowaną w twoim komputerze z podmenu.

10 Po zakończeniu przeglądania animacji w przeglądarce, zamknij ją i

wróć do programu ImageReady.

11 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ńco-
wego obrazku przez zmianę ilości i paletę kolorów.

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

Tworzenie animacji dwu-krokowej

Możesz utworzyć prostą animację dwukrokową przez przełączanie wi-
doczności dwóch warstw. Przykładem takiej animacji może być na-
przemienna 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.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

16

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

Plik zawiera kilka warstw. Utworzysz teraz animację, w której naprze-
miennie 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 wi-
doczne.

2 Przejdź teraz do palety Animation i utwórz nową klatkę animacji

(przycisk New Frame Buton).

3 Teraz w palecie Layers włącz warstwę Layer 2. Ponieważ ta war-

stwa znajduje się powyżej warstwy Layer 1, przykryje ona częścio-
wo warstwę poniższą, ukrywając i zmieniając położenie części mik-
sera.

Widoczna tylko warstwa Layer 1

Widoczna warstwa Layer 1 i 2

4 Upewnij się, że w palecie Animation, w rozwijanym menu Looping

jest wybrana opcja Forever (ustawienie domyślne).

5 Kliknij przycisk Play, aby odtworzyć animację, przeanalizuj sposób

przełączania warstw i kliknij Stop.

6 Wybierz File

Preview In, i wybierz przeglądarkę internetową,

aby w niej podejrzeć animację, następnie zamknij przeglądarkę i
powróć do programu ImageReady.

7 Zapisz teraz swoja pracę, wybierając komendę File

Save As, pod

nazwą Mikser.gif.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

17

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 po-
jawia 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.

1 W palecie Animation, wybierz ramkę numer 2. Następnie kliknij

przycisk tworzenia nowej klatki – New Frame -

. Nowa klatka

pojawi się po klatce numer 2.

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

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

3 Teraz w menu palety Animation wyłącz opcję New Layers Visible

In All Frames.

4 Kliknij teraz prawym przyciskiem myszki na warstwie Kropla w pa-

lecie Layers i wybierz z menu kontekstowego komendę Duplicate
Layers.

Uwaga: W przypadku pozostawienia włączonej opcji New Layers Visi-
ble In All Frames, nowa warstwa byłaby widoczna we wszystkich ram-
kach.

5 Upewnij się, że warstwa Kropla copy jest zaznaczona i wybierz

Edit

Free Transform.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

18

6 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. Na-
stępnie umieść kursor wewnątrz prostokąta edycji (kształt wskaźni-
ka 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

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

8 Za pomocą swobodnej transformacji (Edit

Free Transform)

zmień położenie i kąt padania kolejnej kropli soku. Zobacz na poniż-
szy rysunek.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

19

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

9 Zapisz teraz swoją pracę za pomocą polecenia File

Save, zacho-

wasz w ten sposób nowe warstwy i wszystkie dotychczasowe usta-
wienia.

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 prze-
suwanie się korpusu miksera.

1 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.

2 Na palecie Animation kliknij przycisk tworzenia nowej klatki - Du-

plicates Current Frame, utworzysz w ten sposób czwartą klatkę
animacji.

3 W palecie Layers zrób widoczną warstwę Layer 2 wraz z warstwą

Layer 1 i Kropla copy.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

20

4 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 ani-
macji.

5 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 Fra-
mes. 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 czaso-
wy jest ustawiony dla każdej z nich. Istnieje możliwość ustalania czasu
indywidualnie, ale w naszym przypadku jest on taki sam dla wszystkich
klatek.

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

.

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

7 Zatrzymaj animację.

8 Teraz podejrzyj ją w przeglądarce internetowej (File

Preview In

i wybierz przeglądarkę zainstalowaną na twoim komputerze).

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

21

9 Wybierz teraz File

Save Optimized As. Upewnij się, że plik na-

zywa się Blednder.gif i podmień istniejący plik na nową wersję.

10 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ę se-
kwencji przedstawiającej zdjęcia owoców. Podczas zmian kolejnych ob-
razkó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 przedstawia-
jących różne owoce.

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

cją.

2 Z menu palety Animation wybierz Makes Frames From Layers.

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

3 W palecie Animation zaznacz wszystkie klatki, np. z wciśniętym

klawiszem Shift albo przez wybranie odpowiedniej opcji w menu pa-
lety. 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 zaznacza-
nie poszczególnych klatek.

4 W palecie Animation rozwiń menu Looping i wybierz ustawienie

Once. Teraz odtwórz sekwencję kilkakrotnie za pomocą przycisku
Play.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

22

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

5 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.

6 Zobacz jak wygląda teraz animacja a następnie zapisz sekwencję w

pliku o nazwie Owoce.gif za pomocą polecenia File

Save Optimi-

zed 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 tru-
skawkami i pomarańczą.

1 W palecie Animation wybierz klatkę przedstawiającą truskawki.

Główne okno obrazu oraz paleta Layers w tym momencie będą od-
zwierciedlać aktualny stan ramki.

2 Kliknij teraz przycisk Duplicates Current Frames aby utworzyć

kopię bieżącej ramki. Nowa ramka ustawi się tuż za swoim pierwo-
wzorem.

3 W palecie Layers zmień przezroczystość warstwy Truskawki na

1% w polu Opacity.

4 Z menu palety Aniamtion wybierz polecenie Tween. W oknie dia-

logowym 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.

5 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.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

23

6 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 war-
stwy z pomarańczą.

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

2 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.

3 Powtórz krok, 2 aby ostatecznie w palecie Layers znalazly się 4

kopie warstwy Pomarancze.

4 Kliknij dwukrotnie na warstwie Pomarancze copy, w oknie dialo-

gowym Layer Options zmień nazwę warstwy na Pomarancze
20% i kliknij OK.

5 Powtórz krok 4, zmieniając nazwy dla poszczególnych duplikatów

warstwy Pomarancze na: Pomarancze 40%, Pomarancze 60%
oraz Pomarancze 80%.

6 W palecie Layers uczyń widoczną warstwę Pomarancze 20%, a

wszystkie inne warstwy ukryj.

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

7 Wybierz Edit

Transform

Numeric. W sekcji Scale okna dia-

logowego Numeric Transform, w polu Percent, wprowadź wartość
20. Upewnij się, że opcja Constrain Proportion jest zaznaczona i
kliknij OK.

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

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

24

• 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ń wi-

doczną warstwę Pomarancze 40%.

• Wybierz Edit

Transform

Numeric i wprowadź 40% w polu

Percent, sekcji Scale.

9 Powtórz krok 8 dla warstw: Pomarancze 60%, Pomarancze

80%. Zmieniaj rozmiar warstwy w zależność od wartości procento-
wej, podanej w nazwie. Jako ostatnią klatkę utwórz ramkę zawiera-
jącą tylko warstwę Pomarancze, czyli niezmienioną przez nas ory-
ginalną warstwę ze zdjęciem pomarańczy.

10 Odtwórz teraz animację i jeśli trzeba popraw według własnego

uznania czasy wyświetlania poszczególnych klatek lub zmień ich ko-
lejność.

11 Zapisz gotową animację do pliku za pomocą polecenia File

Save

Optimized. Następnie zamknij otwarty plik i zapisz wszystkie zmia-
ny.

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.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

25

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

2 W palecie Layers ukryj warstwę Zdjecie i pozostaw widoczne war-

stwy Sok i Tekst.

Warstwa Sok zawiera wektorową ścieżkę wycinającą, o czym świadczy
miniaturka w odcieniach szarości po prawej stronie miniaturki przed-
stawiają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.

3 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.

4 Wybierz narzędzie Move Tool -

.

5 W palecie Layers, kliknij na miniaturkę warstwy Sok, dokonasz w

ten sposób wyboru, który element tej złożonej warstwy chcesz
zmieniać.

6 Teraz umieść wskaźnik narzędzia Move Tool na obrazie, nad poma-

rańczowym obszarem i przeciągnij ten obszar na dół, tak, aby cał-
kowicie schował się on pod literkę „U”.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

26

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

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

8 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.

9 W palecie Animation zaznacz wszystkie ramki a następnie w pale-

cie Layers włącz warstwę Zdjecie. Powinna ona teraz pojawić się
we wszystkich klatkach.

10 Odtwórz teraz animację w programie ImageReady a także jej zop-

tymalizowana wersję w wybranej przeglądarce internetowej, za po-
mocą polecenia File

Preview In.

11 Zapisz animację w pliku za pomocą polecenia File

Save Optimi-

zed As, np. pod nazwą Logo3.gif.

12 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.

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

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

27

2 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).

3 W palecie Layers zaznacz warstwę Truskawki, następnie wybierz

Layer

Group with Previous.

Zauważ, jakie zmiany nastąpiły teraz w edytowanym obrazie. Truskaw-
ki 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.

4 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.

5 W palecie Layers zaznacz warstwę Truskawki a następnie wybierz

narzędzie Move Tool -

.

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

7 Odtwórz teraz animację w programie ImageReady a także jej zop-

tymalizowana wersję w wybranej przeglądarce internetowej, za po-
mocą polecenia File

Preview In.

Lekcja 9

Adobe Photoshop – Tworzenie animowanych obrazków

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

28

8 Jeśli masz na to ochotę, poeksperymentuj z ustawianiem czasu wy-

świetlania ramek, dobierz odległość i kierunek przesunięcie.

9 Jeśli animacja jest gotowa, zapisz ją w pliku za pomocą polecenia

File

Save Optimized As, np. pod nazwą Logo4.gif.

10 Zamknij i zapisz zmiany w pliku Logo4.psd.

Pytania Kontrolne

1 Opisz, w jaki najprostszy sposób można wykonać animację w pro-

gramie ImageReady.

2 W jakim celu i kiedy możesz zastosować mechanizm Tween Frames

podczas tworzenia animacji?

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

4 Co daje optymalizacja animacji i jakich korzyści można się po niej

spodziewać?

5 W jakim celu jest włączana funkcja Disposal Method? Której odmia-

ny tej funkcji używa się najczęściej?

6 Czy istnieje możliwość sterowania czasem wyświetlania poszczegól-

nych ramek animacji?

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

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

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