Animowane GIF-y pojawiają sie na stronach WWW jako osobne animacje bądź jako efekty wzbogacające interfejs witryny. Wyjaśnimy podstawowe cechy formatu GIF i pokażemy w jaki sposób tworzyć animowane GIF-y w programie GIMP.
Pierwszy animowany GIF
Uruchamiamy program GIMP.
Wybieramy opcje Plik | Nowy i tworzymy nowy,
biały obraz o wymiarach 400 x 300 pikseli.
Zmieniamy kolor narzędzia na czerwony. Służy
do tego przycisk oznaczony na rysunku litera A.
Następnie wybieramy narzędzie tekstowe oznaczone
litera B.
Klikamy myszka w dowolnym miejscu obrazu
i dodajemy napis 1.
W podobny sposób dodajemy do obrazu zielony
napis 2 oraz niebieski napis 3.
Przechodzimy do okna warstw obrazu. Słuzy do tego
skrót klawiszowy Ctrl+L. Obraz składa sie
z czterech warstw: białego tła, czerwonego napisu
1, zielonego napisu 2 oraz niebieskiego napisu 3.
Otrzymany obraz zapisujemy w formacie XCF. Po
wybraniu opcji Plik | Zapisz wprowadzamy nazwę
pliku: 1-2-3.xcf. XCF jest formatem stosowanym
przez program GIMP. Zachowuje on wszystkie
warstwy, zaznaczenia, ścieżki i kanały.
Na koniec przekształcamy otrzymany obraz na
animowanego GIF-a. Wybieramy operacje Plik
| Zapisz jako i podajemy nazwę 1-2-3.gif.
W oknie dialogowym Eksport pliku zaznaczamy
opcje Zapisz jako animacje.
Ostatnie okno dialogowe pozwala na zmiane
właściwości pliku w formacie GIF. W pierwszym
obrazie pozostawiamy wszystkie opcje domyślne
i naciskamy przycisk OK.
Otrzymany obraz 1-2-3.gif możemy umieścić na
stronie WWW. Wystarczy, ze użyjemy znacznika:{html}
![\"\"](\"1-2-3.gif\")
{/html}
a na stronie WWW ujrzymy własnoręcznie wykonanego
animowanego GIF-a.
Pamiętajmy, ze każda klatka animowanego GIF-a
tworzonego w GIMP-ie pochodzi z osobnej warstwy
obrazu.
Zmiana tempa animacji
Wykonamy nowy obraz o wymiarach 200 x 150.
Umieścimy w nim (na osobnej warstwie) brązowy
prostokąt. Kolejno:
• tworzymy nowy obraz,
• zaznaczamy prostokąt (skrót klawiszowy r),
• kopiujemy zaznaczenie (Ctrl+C),
• wklejamy zaznaczenie (Ctrl+V),
• wklejone zaznaczenie umieszczamy na nowej
warstwie:
– przechodzimy do okna warstw obrazu
(skrót klawiszowy Ctrl+L),
– naciskamy przycisk Nowa warstwa,
- zmieniamy kolor wypełnienia na brązowy
(identycznie jak kolor czcionki w ćwiczeniu 1), - wybieramy kubełek do wypełniania farba
(skrót klawiszowy Shift+B), - klikamy wklejony prostokąt (w ten sposób
wlejemy w niego brązowa farbę)
Otrzymany obraz będzie zawierał dwie warstwy:
białe tło i brązowy prostokąt.
Wykonujemy duplikat warstwy z brazowym
prostokątem. Służy do tego przycisk Utworzenie
duplikatu warstwy w oknie dialogowym warstw.
Powielona warstwę przesuwamy o 10 pikseli
w prawo.
Kolejno:
• wybieramy powielony prostokąt jako aktywna
warstwę w oknie warstw,
• przechodzimy do okna obrazu,
• wybieramy narzędzie do przesuwania warstw
(skrót klawiszowy: m),
• naciskamy dziesięć razy strzałkę w prawo
(warstwa sie przesuwa).
Otrzymany obraz będzie zawierał trzy warstwy:
białe tło oraz dwa prostokąty.
W podobny sposób wykonujemy kolejne 10 lub
11 prostokątów:
• tworzymy duplikat poprzedniego prostokąta
(przycisk: Utworzenie duplikatu warstwy
w oknie warstw),
• nowo dodany duplikat przesuwamy w prawo
o 10 pikseli.
Otrzymany obraz powinien zawierać ponad 10
warstw.
Gotowy obraz zapisujemy w formacie animowany
GIF. W oknie właściwości eksportu ustalamy
opóźnienie ramki na 1000 milisekund. Opóźnienie
to będzie dotyczyć wszystkich warstw w obrazie.
Operacje zapisywania w formacie GIF wykonujemy
kilkakrotnie, za każdym razem podając inny
czas opóźnienia ramek. Tworzymy obrazy o czasach
opóźnienia: 1 ms, 10 ms, 100 ms, 200 ms,
500 ms oraz 1000 ms. Wszystkie obrazy umieszczamy
na jednej stronie WWW.
Zauważymy, ze wszystkie czasy poniżej 100 ms
dają identyczne tempo wymiany ramek, czyli minimalnym
czasem wyświetlania ramki jest 100 ms.
Każda ramka o innym czasie trwania
Kopiujemy wykonany w poprzednim ćwiczeniu
plik, w którym każda ramka ma opóźnienie
1 s (czyli 1000 ms). Otwieramy plik prostokąt-
1000.gif w programie GIMP. Przechodzimy do
okna warstw. Czas trwania każdej ramki jest
wpisany w nazwie warstwy.
Pierwsze piec ramek pozostawiamy niezmienione.
Następnym pięciu zmieniamy czas trwania
na 10 ms. Ostatnie cztery ramki niech maja czas
trwania 2000 ms.
Czas trwania ramki zmieniamy wprowadzając inna
wartość w nazwie warstwy (klikamy podwójnie
nazwę warstwy i wprowadzamy nowy czas
trwania).
W ten sposób możemy tworzyć animowane GIF-y,
w których każda ramka ma inny czas trwania.
Animacje jednorazowe
Tworzymy obraz zawierający napis HELLO. Kazda
literę umieszczamy na osobnej warstwie.
Obraz powinien zawierać sześć warstw: białe tło
i piec czarnych liter. Litery h, e, l, l oraz o powinny
być ułożone od dołu do góry.
Obraz zapisujemy w formacie animowany GIF.
W oknie dialogowym eksportu pliku odznaczamy
pole Zapętlanie na zawsze. W ten sposób animacja
będzie wyświetlana jeden raz. Jeśli tak
przygotowany plik umieścimy na stronie WWW,
to odświeżając stronę ponownie odtworzymy
animacje. Uwaga: przeglądarka Firefox 2 wyświetla
animacje jednokrotnie, nie pomaga odświeżenie
strony.
Widoczność warstw
Tworzymy obraz zawierający dwie warstwy.
Pierwsza z nich wypełniamy kolorem różowym
i umieszczamy na niej czerwone koło.
Druga warstwę wypełniamy kolorem bezowym
i rysujemy na niej zielone koło
W otrzymanym obrazie wyłączamy widoczność
jednej z warstw. Jeśli tak przygotowany obraz
zapiszemy jako animowanego GIF-a, to widoczne
sa wszystkie warstwy obrazu.
Przykrywanie warstw
Tworzymy obraz zawierający cztery warstwy.
Warstwy te układamy w oknie warstw od najwyzszej
do najniższej w kolejnosci:
• różową literę B
• bladoróżową
• zielona literę A,
• jednolita o kolorze bladozielonym.
Okno warstw otrzymanego obrazu jest przedstawione
na rysunku. Gotowy obraz zapisujemy
w postaci animowanego GIF-a.
Zapisując obraz zmieniamy opcje: Pozbycie sie
ramki, kiedy jest nieokreślona. Zapisujemy obraz
w dwóch wersjach:
- a-b-ver1.gif: Kumulacja warstw (składanie),
- a-b-ver2.gif: Jedna ramka na warstwę (zastępowanie).
Opcja ta ma wpływ na obrazy, w których niektóre
warstwy nie pokrywają całego obrazu (tak jak
litery A oraz B w przygotowywanym ćwiczeniu).
Kumulacja warstw powoduje, ze przez przezroczyste
tło dookoła litery A widać bladozielona
warstwę. Jedna ramka na warstwę powoduje, ze
przez przezroczysty obszar otaczający literę A widać
tło strony WWW. Bladozielona warstwa obrazu
nie jest wówczas w ogóle widoczna. Jednej
ramce animacji GIF odpowiada dokładnie jedna
warstwa obrazu z uwzględnieniem obszaru
przezroczystego.
Paleta 256 kolorów
Ostatnim zagadnieniem jest kolorystyka. Pliki GIF mogą mieć do 256 kolorów.
Powoduje to problemy w odniesieniu do części obrazów. Na
przykład jeden z gradientów dostępnych w GIMP-ie o nazwie Golden po
przekształceniu do palety 256 kolorów będzie wyglądać nieatrakcyjnie.
Pojawia sie w nim różne przebarwienia.
Przebarwienia te nie pojawiają sie w obrazie XCF, ponieważ XCF przechowuje domyślnie kolory w formacie
RGB. Paleta RGB liczy 224 = 16777216 barw.
Zamianę obrazu RGB na obraz o zadanej palecie wykonamy wykorzystując opcje Obraz | Tryb | Indeksowany
(operacje cofamy skrótem Ctrl+Z). Mamy wówczas pewna kontrole nad konwersja kolorystyki.
Praktyczne rozwiązanie jest następujące:
- konwersja obrazu do trybu indeksowanego,
- ręczne przekolorowanie elementów zawierających plamy i przebarwienia.
Przezroczystość osmio- i jednobitowa
Tworzymy nowy obraz. Umieszczamy w nim jedna
warstwę zawierającą niebieska literę A.
Dodajemy maskę warstwy. Maskę wypełniamy
liniowym czarno-białym gradientem.
Po zastosowaniu maski litera A będzie stopniowo
znikała.
Otrzymany obraz ma jedna warstwę wraz z maska
wypełniona gradientem.
Tak wykonany obraz eksportujemy do dwóch
formatów: PNG oraz GIF. Formaty te różnią sie
głębia przezroczystości. Format PNG obsługuje
przezroczystość osmiobitowa (możliwych jest
256 rożnych stopni przezroczystości – od zupełnie
przezroczystego do zupełnie przysłaniającego).
Natomiast format GIF stosuje przezroczystość
jednobitowa. Każdy piksel może być całkowicie
przysłaniający lub całkowicie przezroczysty.
Nie ma żadnych stanów pośrednich.
Dodatkowo sprawę komplikuje fakt, ze przeglądarka
IE w wersjach 6 i niższych nie obsługuje
jednobajtowej przezroczystości formatu PNG.
Rysunek przedstawia stronę WWW wyświetlana
przez IE. Strona zawiera dwa obrazy: jeden
w formacie PNG, drugi – GIF. W formacie PNG IE
wyświetla białe tło, zaś w formacie GIF – wskutek
jednobitowej przezroczystości – połowa litery
znika zupełnie.
Firefox poprawnie obsługuje jednobajtowa
przezroczystość obrazów PNG.
Rozwiązanie problemu przezroczystości
Tworzymy obraz o niebieskim tle. Umieszczamy
w nim trzy duże litery A, B, C. Każda z nich ma
inny kolor.
W pierwszym rozwiązaniu litery dodajemy do obrazu,
wykorzystując narzędzie tekstowe. Każda litera
jest umieszczana na osobnej warstwie. Warstwy
z literami maja duże przezroczyste obszary.
Drugie rozwiązanie nie wykorzystuje przezroczystości.
Żadna warstwa w obrazie nie stosuje
przezroczystości.
Powyższe powiększenie pokazuje wyraźnie różnice.
Obraz stosujący przezroczystość (z lewej
strony) zawiera ostre poszarpania. Natomiast obraz
bez przezroczystości (z prawej strony) ma
miękkie krawędzie liter.
Cechy formatu GIF:
- umożliwia tworzenie statycznych obrazów i animacji,
- ma jednobitowa przezroczystość,
- ma kolorystykę o 256 barwach,
- animowane GIF-y mogą być odtwarzane w kółko lub jednokrotnie.
Cechy formatu PNG:
- nie umożliwia tworzenia animacji,
- ma przezroczystość osmiobitowa (niedostępna w IE6 oraz starszych),
- ma głębie kolorów RGB.
Animowane GIF-y możemy wykonywać w programie
GIMP. Pamiętajmy, że:
- każda warstwa obrazu odpowiada jednej klatce animacji,
- tempo zmiany klatek możemy ustalać w odniesieniu do wszystkich klatek i do każdej klatki z osobna,
- widoczność warstw nie ma znaczenia (każda warstwa, nawet jeśli jest niewidoczna, jest zamieniana na jedna klatkę),
- z powodu jednobitowej przezroczystości lepiej stosować technikę łączenia warstw (unikniemy ostrych, poszarpanych pikseli),
- ponieważ paleta GIF-a ma tylko 256 barw, należy ręcznie konwertować obrazy do formatu Obraz | Tryb | Indeksowany i ręcznie poprawiać ich kolorystykę.
