Animowane GIF-y w GIMP-ie Strona 1
Animowane GIF-y w GIMP-ie
WÅ‚odzimierz Gajda
Animowane GIF-y pojawiajÄ… siÄ™ na stronach WWW jako osobne animacje, bÄ…dz
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.
1 lutego 2007 r.
Spis treści
1. Twój pierwszy animowany GIF
2. Zmiana tempa animacji
3. Ka\
da ramka o innym czasie trwania
4. Animacje jednorazowe
5. Widoczność warstw nie ma znaczenia
6. Przykrywanie warstw
7. Przezroczystość ośmiobitowa i jednobitowa
8. Rozwiązanie problemu przezroczystości
9. Paleta 256 barw
10. Podsumowanie
1. Twój pierwszy animowany GIF
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 2
Rysunek 1.
Uruchom program GIMP.
Rysunek 2.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 3
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.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 4
Rysunek 4.
Kliknij myszkÄ… w dowolnym miejscu obrazu i dodaj napis 1.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 5
Rysunek 5.
W podobny sposób dodaj do obrazu zielony napis 2 oraz niebieski napis 3.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 6
Rysunek 6.
Przejdz
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.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 7
Rysunek 7.
Otrzymany obraz zapisz w formacie XCF. Po wybraniu opcji Plik Zapisz wprowadz
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.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 8
Rysunek 9.
W oknie dialogowym Eksport pliku zaznacz opcjÄ™ Zapisz jako animacjÄ™
.
Rysunek 10.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 9
Ostatnie okno dialogowe, jakie ujrzysz pozwala na zmianę właściwości pliku w formacie GIF. W pierwszym obrazie
OK
pozostaw wszystkie opcje domyślne i naciśnij przycisk .
Rysunek 11.
Otrzymany obraz1-2-3.gifmo\
esz umieścić na stronie WWW. Wystarczy, \
e u\
yjesz znacznika:

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.
2. Zmiana tempa animacji
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 10
Rysunek 12.
Wykonaj nowy obraz o wymiarach 200×150. Umieść w nim (na osobnej warstwie) brÄ…zowy prostokÄ…t. Kolejno:
utwórz nowy obraz
zaznacz prostokąt (skrót klawiszowy r)
skopiuj zaznaczenie (Ctrl+C)
wklej zaznaczenie (Ctrl+V)
wklejone zaznaczenie umieść na nowej warstwie:
przejdz
do okna warstw obrazu (skrót klawiszowy Ctrl+L)
naciśnij przycisk Nowa warstwa
zmień kolor wypełnienia na brązowy (identycznie jak zmieniałeś kolor czcionki w ćwiczeniu 1)
wybierz kubełek do wypełniania farbą (skrót klawiszowy Shift+B)
kliknij we wklejony prostokąt (w ten sposób wlejesz w niego brązową farbę)
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 11
Rysunek 13.
Otrzymany obraz będzie posiadał dwie warstwy: białe tło i brązowy prostokąt.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 12
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:
wybierz powielony prostokÄ…t jako aktywnÄ… warstwÄ™ w oknie warstw
przejdz
do okna obrazu
wybierz narzędzie do przesuwania warstw (skrót klawiszowy: m)
naciśnij dziesięć razy strzałkę w prawo (powinieneś zauwa\
yć, \
e warstwa siÄ™ przesuwa).
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 13
Rysunek 15.
Otrzymany obraz będzie posiadał trzy warstwy: białe tło oraz dwa prostokąty.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 14
Rysunek 16.
W podobny sposób wykonaj kolejne 10 lub 11 prostokątów. Ka\
dy kolejny prostokąt wykonaj następująco:
utwórz duplikat poprzedniego prostokąta (przycisk: Utworzenie duplikatu warstwy w oknie
warstw
)
nowo dodany duplikat przesuń w prawo o 10 pikseli
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óz
nienie ramki na 1000
milisekund. Opóz
nienie to będzie dotyczyło wszystkich warstw w obrazie.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 15
Rysunek 18.
OperacjÄ™ zapisywania w formacie GIF wykonaj kilkukrotnie, za ka\
dym razem podając inny czas opóz
nienia ramek.
Przygotuj obrazy o czasach opóz
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.
3. Ka\
da ramka o innym czasie trwania
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 16
Rysunek 19.
Skopiuj wykonany w poprzednim ćwiczeniu plik, w którym ka\
da ramka ma opóz
nienie 1 s (czyli 1000 ms). Otwórz
plik prostokat-1000.gif
w programie GIMP. Przejdz
do okna warstw. PowinieneÅ› zauwa\
yć, \
e czas trwania
ka\
dej ramki jest wpisany w nazwie warstwy.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 17
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
wprowadz
nowy czas trwania.
W ten sposób mo\
esz tworzyć animowane GIF-y, w których ka\
da ramka ma inny czas trwania.
4. Animacje jednorazowe
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 18
Rysunek 21.
Wykonaj obraz zawierajÄ…cy napis HELLO. Ka\
dą literę umieść na osobnej warstwie.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 19
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.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 20
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.
5. Widoczność warstw nie ma znaczenia
Rysunek 24.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 21
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.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 22
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.
6. Przykrywanie warstw
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 23
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):
ró\
owa literÄ™ B
bladoró\
owÄ…
zielonÄ… literÄ™ A
jednolitÄ… o kolorze bladozielonym
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 24
Rysunek 29.
Okno warstw otrzymanego obrazu jest przedstawione na rysunku. Gotowy obraz zapisz w postaci animowanego GIF-
a.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 25
Rysunek 30.
Zapisując obraz zmień opcję: Pozbycie się ramki, kiedy jest nieokreślona. Zapisz 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, \
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.
7. Przezroczystość ośmiobitowa i jednobitowa
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 26
Rysunek 31.
Przygotuj nowy obraz. Umieść w nim jedną warstwę zawierającą niebieską literę A.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 27
Rysunek 32.
Dodaj maskę warstwy. Maskę wypełnij liniowym czarno-białym gradientem.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 28
Rysunek 33.
Po zastosowaniu maski litera A będzie stopniowo znikała.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 29
Rysunek 34.
Otrzymany obraz ma jedna warstwę wraz z maską wypełniona gradientem.
Rysunek 35.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 30
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.
8. Rozwiązanie problemu przezroczystości
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 31
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.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 32
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.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 33
Rysunek 39.
Drugie rozwiązanie nie wykorzystuje przezroczystości. śadna warstwa w obrazie nie stosuje przezroczystości.
Rysunek 40.
Powy\
sze powiększenie pokazuje wyraz
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.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 34
9. Paleta 256 barw
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:
konwersja obrazu do trybu indeksowanego,
ręczne przekolorowanie elementów posiadających plamy i przebarwienia.
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 35
10. Podsumowanie
Format GIF ma następujące cechy:
umo\
liwia tworzenie statycznych obrazów i animacji
posiada jednobitową przezroczystość
posiada kolorystykÄ™ o 256 barwach
animowane GIF-y mogą być odtwarzane w kółko lub jednokrotnie
Warto wiedzieć, \
e format PNG:
nie umo\
liwia tworzenia animacji
posiada przezroczystość ośmiobitową (niedostępną w IE 6 oraz ni\
szych)
ma głębię kolorów RGB
Animowane GIF-y mo\
esz wykonywać w programie GIMP. Pamiętaj, \
e:
ka\
da warstwa obrazu odpowiada jednej klatce animacji
tempo zmiany klatek mo\
esz ustalać w odniesieniu do wszystkich klatek i do ka\
dej klatki z osobna
widoczność warstw w GIMP-ie nie ma znaczenia (ka\
da warstwa, nawet jeśli jest niewidoczna, jest
zamieniana na jednÄ… klatkÄ™),
z racji na jednobitową przezroczystość lepiej stosować technikę łączenia warstw unikniesz wtedy 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ę
lp. Przykład
1. Pierwszy animowany GIF
2. Tempo zmiany klatek
3. Indywidualna zmiana czasu trwania ka\
dej klatki
4. Pętla nieskończona/odtwarzanie jednokrotne
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28
Animowane GIF-y w GIMP-ie Strona 36
5. Widoczność warstw nie ma znaczenia
6. Pokrywanie warstw
7. Przezroczystość: 1b/8b
8. Rozwiązanie problemu przezroczystości
9. Paleta 256 barw
Tabela 1.
Przykłady do pobrania
http://www.gajdaw.pl/gimp/animowane-gif-y-w-gimp-ie/print.html 2008-02-27 20:17:28