27
Adobe Photoshop – Tworzenie animowanych obrazków
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.
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.
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.
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 animacji rozpoczniemy od firmowego logo przy użyciu wielowarstwowego obrazu w formacie Photoshopa.
W tej części lekcji będziesz dopasowywać położenie warstwy i zmieniać jej przezroczystość w celu utworzenia pierwszej i ostatniej klatki animacji.
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 oddzielnych 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.
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.
5 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.
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%.
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 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.
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ę.
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.
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 zaznaczone.
2 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).
...
cleeo