Animowane GIF-y pojawiają się na stronach WWW jako osobne animacje, bądź jako efekty wzbogacające interfejs witryny. Przewodnik ten wyjaśni Ci podstawowe cechy formatu GIF i pokaże, w jaki sposób tworzyć animowane GIF-y w programie GIMP.
Rysunek 1.
Uruchom program GIMP.
Rysunek 2.
Wybierz opcję Plik → Nowy i utwórz nowy, biały obraz o wymiarach 400×300 pikseli.
Rysunek 3.
Zmień kolor narzędzia na czerwony. Służy do tego przycisk oznaczony na rysunku literą A. Następnie wybierz narzędzie tekstowe oznaczone literą B.
Rysunek 4.
Kliknij myszką w dowolnym miejscu obrazu i dodaj napis 1.
Rysunek 5.
W podobny sposób dodaj do obrazu zielony napis 2 oraz niebieski napis 3.
Rysunek 6.
Przejdź do okna warstw obrazu. Służy do tego skrót klawiszowy Ctrl+L. Obraz składa się z czterech warstw: białego tła, czerwonego napisu 1, zielonego napisu 2 oraz niebieskiego napisu 3.
Rysunek 7.
Otrzymany obraz zapisz w formacie XCF. Po wybraniu opcji Plik → Zapisz wprowadź nazwę pliku: 1-2-3.xcf. XCF jest formatem stosowanym przez program GIMP. Zachowuje on wszystkie warstwy, zaznaczenia, ścieżki i kanały.
Rysunek 8.
Na koniec przekształć otrzymany obraz na animowanego GIF-a. Wybierz operację Plik → Zapisz jako i podaj nazwę 1-2-3.gif.
Rysunek 9.
W oknie dialogowym Eksport pliku zaznacz opcję Zapisz jako animację.
Rysunek 10.
Ostatnie okno dialogowe, jakie ujrzysz pozwala na zmianę właściwości pliku w formacie GIF. W pierwszym obrazie pozostaw wszystkie opcje domyślne i naciśnij przycisk OK.
Rysunek 11.
Otrzymany obraz 1-2-3.gif możesz umieścić na stronie WWW. Wystarczy, że użyjesz znacznika:
...brak dostępu...
a na stronie WWW ujrzysz własnoręcznie wykonanego animowanego GIF-a.
Pamiętaj, że każda klatka animowanego GIF-a tworzonego w GIMP-ie pochodzi z osobnej warstwy obrazu.
Rysunek 12.
Wykonaj nowy obraz o wymiarach 200×150. Umieść w nim (na osobnej warstwie) brązowy prostokąt. Kolejno:
Rysunek 13.
Otrzymany obraz będzie posiadał dwie warstwy: białe tło i brązowy prostokąt.
Rysunek 14.
Wykonaj duplikat warstwy z brązowym prostokątem. Służy do tego przycisk Utworzenie duplikatu warstwy w oknie dialogowym warstw.
Powieloną warstwę przesuń o 10 pikseli w prawo. Kolejno:
Rysunek 15.
Otrzymany obraz będzie posiadał trzy warstwy: białe tło oraz dwa prostokąty.
Rysunek 16.
W podobny sposób wykonaj kolejne 10 lub 11 prostokątów. Każdy kolejny prostokąt wykonaj następująco:
Otrzymany obraz powinien posiadać ponad 10 warstw.
Rysunek 17.
Gotowy obraz zapisz w formacie animowany GIF. W oknie właściwości eksportu ustal opóźnienie ramki na 1000 milisekund. Opóźnienie to będzie dotyczyło wszystkich warstw w obrazie.
Rysunek 18.
Operację zapisywania w formacie GIF wykonaj kilkukrotnie, za każdym razem podając inny czas opóźnienia ramek. Przygotuj obrazy o czasach opóźnienia: 1 ms, 10 ms, 100 ms, 200 ms, 500 ms oraz 1000 ms. Wszystkie obrazy umieść na jednej stronie WWW.
Dzięki temu zauważysz, że wszystkie czasy poniżej 100 milisekund dają identyczne tempo wymiany ramek. Innymi słowy minimalnym czasem wyświetlania ramki jest 100 ms.
Rysunek 19.
Skopiuj wykonany w poprzednim ćwiczeniu plik, w którym każda ramka ma opóźnienie 1 s (czyli 1000 ms). Otwórz plik prostokat-1000.gif w programie GIMP. Przejdź do okna warstw. Powinieneś zauważyć, że czas trwania każdej ramki jest wpisany w nazwie warstwy.
Rysunek 20.
Pierwsze pięć ramek pozostaw niezmienione. Następnym pięciu zmień czas trwania na 10 ms. Ostatnie cztery ramki niech mają czas trwania 2000 ms.
Czas trwania ramki zmienisz wprowadzając inną wartość w nazwie warstwy. Kliknij podwójnie w nazwę warstwy i wprowadź nowy czas trwania.
W ten sposób możesz tworzyć animowane GIF-y, w których każda ramka ma inny czas trwania.
Rysunek 21.
Wykonaj obraz zawierający napis HELLO. Każdą literę umieść na osobnej warstwie.
Rysunek 22.
Obraz powinien zawierać sześć warstw: białe tło i pięć czarnych liter. Zwróć uwagę, by litery h, e, l, l oraz o były ułożone od dołu do góry.
Rysunek 23.
Obraz zapisz w formacie animowany GIF. W oknie dialogowym eksportu pliku odznacz pole Zapętlanie na zawsze.
W ten sposób animacja będzie wyświetlana jeden raz. Jeśli tak przygotowany plik umieścisz na stronie WWW, to odświeżając stronę ponownie odtworzysz animację. Uwaga: przeglądarka Firefox 2 wyświetla animację jednokrotnie. Nic nie pomaga odświeżenie strony.
Rysunek 24.
Wykonaj obraz zawierający dwie warstwy. Pierwszą z nich wypełnij kolorem różowym i umieść na niej czerwone koło.
Rysunek 25.
Drugą warstwę wypełnij kolorem beżowym i narysuj na niej zielone koło.
Rysunek 26.
W otrzymanym obrazie wyłącz widoczność jednej z warstw. Jeśli tak przygotowany obraz zapiszesz jako animowanego GIF-a, to zauważysz, że widoczność warstw w obrazie nie ma żadnego znaczenia: w animowanym GIF-ie widoczne są wszystkie warstwy obrazu.
Rysunek 27.
Wykonaj obraz zawierający cztery warstwy.
Rysunek 28.
Warstwy te ułóż w oknie warstw w następującej kolejności (od najwyższej do najniższej):
Rysunek 29.
Okno warstw otrzymanego obrazu jest przedstawione na rysunku. Gotowy obraz zapisz w postaci animowanego GIF-a.
Rysunek 30.
Zapisując obraz zmień opcję: Pozbycie się ramki, kiedy jest nieokreślona. Zapisz obraz w dwóch wersjach:
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, że przez przezroczyste tło dookoła litery A widać bladozieloną warstwę.
Jedna ramka na warstwę powoduje, że 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.
Rysunek 31.
Przygotuj nowy obraz. Umieść w nim jedną warstwę zawierającą niebieską literę A.
Rysunek 32.
Dodaj maskę warstwy. Maskę wypełnij liniowym czarno-białym gradientem.
Rysunek 33.
Po zastosowaniu maski litera A będzie stopniowo znikała.
Rysunek 34.
Otrzymany obraz ma jedna warstwę wraz z maską wypełniona gradientem.
Rysunek 35.
Tak wykonany obraz eksportuj do dwóch formatów: PNG oraz GIF. Formaty te różnią się głębią przezroczystości. Format PNG obsługuje przezroczystość ośmiobitową (czyli: możliwych jest 256 różnych stopni przezroczystości, od zupełnie przezroczystego, do zupełnie przysłaniającego). Natomiast format GIF stosuje przezroczystość jednobitową. 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, że przeglądarka IE w wersjach 6 i niższych nie obsługuje jednobajtowej przezroczystości formatu PNG.
Rysunek przedstawia stronę WWW wyświetlaną 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 — z racji na jednobitową przezroczystość — połowa litery znika zupełnie.
Rysunek 36.
Firefox poprawnie obsługuje jednobajtową przezroczystość obrazów PNG.
Rysunek 37.
Przygotuj obraz o niebieskim tle. Umieść w nim trzy duże litery A, B, C. Każda z nich niech ma inny kolor.
Rysunek 38.
Pierwsze rozwiązanie polega na tym, że litery dodajemy do obrazu wykorzystując narzędzie tekstowe. Każda litera jest umieszczana na osobnej warstwie. Warstwy z literami posiadają duże przezroczyste obszary.
Rysunek 39.
Drugie rozwiązanie nie wykorzystuje przezroczystości. Żadna warstwa w obrazie nie stosuje przezroczystości.
Rysunek 40.
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.
Rysunek 41.
Ostatnim zagadnieniem, jakie należy znać w odniesieniu do formatu GIF, jest kolorystyka. Pliki GIF mogą posiadać do 256 kolorów. Powoduje to, w odniesieniu do części obrazów, problemy. 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. Pojawią się w nim różne przebarwienia.
Przebarwienia te nie pojawiają się w obrazie XCF z racji na to, że XCF przechowuje domyślnie kolory w formacie RGB. Paleta RGB liczy 224 = 16777216 barw.
Zamianę obrazu RGB na obraz o zadanej palecie wykonasz wykonując opcję Obraz → Tryb → Indeksowany. (Skutki tej operacji, jeśli nie są zadowalające, mogą być wycofane skrótem Ctrl+Z.) Masz wówczas pewną kontrolę nad konwersją kolorystyki.
Praktyczne rozwiązanie jest następujące:
Format GIF ma następujące cechy:
Warto wiedzieć, że format PNG:
Animowane GIF-y możesz wykonywać w programie GIMP. Pamiętaj, że:
Tabela 1. Przykłady do pobrania
