Autor: Andy Ziegler www.linuxnetmag.com
Tłumaczył: Robert Sobieski www.linuxpub.pl
Ostatnia modyfikacja : 03.05.2001

W tym tutorialu, stworzymy animowany baner.
Po pierwsze, potrzebujemy ramki o standardowym rozmiarze: 468x60 pixeli. Wybierz menu File->New i stwórz nową czystą ramkę (frame). Tyb obrazka - "Image Type" - może być RGB jeżeli chcemy stworzyć kolorowy obraz. Typ wypełnienia - "Fill Type" - powinien być przezroczysty (trnasparent).
Po naciśnięciu OK Gimp otworzy nowe okno o wybranej wysokości i długości. Wypełnienie szachownicą pokazuje że obrazek ma przezroczyste tło.

Następny krok, powinniśmy otworzyć menu warstw (layer). Prawym przyciskiem myszy klikamy na nowym obrazku i wybieramy menu Layers->Layers & Channels.
Ważna część każdej pracy z Gimpem zależy od czegoś co nazywamy warstwami (Layers). Możesz sobie wyobrazić czym są warstwy jeżeli weźmiemy pod uwagę kilka przenikających się części. Jeżeli chcemy zmienić obrazek tylko troszeczkę możemy to zrobić na nowej warstwie, bez zniszczenia naszego głównego obrazka, możemy też usunąć zmiany jeżeli po prostu usuniemy warstwę która przykrywa główny obrazek, pozostawiając go nietkniętym.
Jednak warstwy oferują znacznie więcej funkcji. Możemy komfortowo pracować z rozproszonymi (semi-transparent) obiektami które są ważną częścią animowanych GIFów.

Obrazek Tuxa (pingwina) powinien zawierać każdy dobry linuksowy baner. Jeżeli nie masz takiego obrazka, możesz sobie skopiować np. tego poniżej ;-) (penguin.gif).
Otworzymy ten obrazek używając Gimpa (menu File->Open).

Po otwarciu okna Gimpa z pingwinem, powinniśmy zmienić format obrazka na RGB. Maksymalna ilość kolorów w formacie GIF to 256 a to nie wystarczy dla naszej prezentacji. Format GIF (nazywany też formatem indeksowym - indexed-format) nie obsługuje semi-transparent i kilka narzędzi nie może być użytych przy formacie GIF. Dlatego najlepiej zmienić format GIF na RGB.
Przed nagraniem obrazka w formacie GIF, powinniśmy przetransferować go z powrotem na format indeksowy.
Kliknij prawym przyciskiem myszy na pingwinie i wybierz menu Image->RGB.
Tło naszego obrazka jest nadal białe, a my chcemy zmienić je na przeźroczyste, aby nie przykrywało później innych obrazków.
Najpierw musimy dodać do obrazka coś co nazywa się "Alpha-Channel". Wybierz Layers->Add Alpha Channel.
Dodana zostanie nowa przeźroczysta warstwa. Jeżeli usuniemy część naszego obrazka będziemy mogli "zobaczyć" przeźroczystą warstwę pod spodem.
Następnie spróbujemy usunąć białe tło. Możemy to zrobić na dwa sposoby. Bardzo pomocnym narzędziem jest "Select by color" które wybiera wszystkie części obrazka z wybranym kolorem. Naszym problemem jest to że oczy i brzuszek naszego pingwina są również białe, i są wybierane razem z tłem.
Innym narzędziem jest : "Fuzzy selection", dostępne w głównym oknie Gimpa (spójrz poniżej).
Podwójne kliknięcie na przycisk otwiera kolejne okno z dodatkowymi opcjami

W otwartym oknie opcji, odznacz wszystkie opcje. Antialising uniknie ostrych cięć przy krawędzi pingwina ale spowoduje miękkie przejście pomiędzy pingwinem a przeźroczystym tłem. To da cienką białą otoczkę która może być użyteczna w innym wypadku, ale nie teraz.

Teraz wybierzemy tło pingwina. Powinna ukazać się przerywana czarno-biała linia wszędzie gdzie został wybrany obszar. Menu Edit->Cut wytnie ten obszar. Część lewa, prawa i pomędzy nie są ze sobą połączone więc musimy wyciąć wszystkie pięć części oddzielnie. Po wycięciu białego tła, w jego miejscu powinna pojawić się szachownica.

Następnie musimy ustawić rozmiar pingwina do banera. Użyj menu Image->Scale. Wprowadzimy wysokość 150 pixels w istniejące aktualnie 257 pixels. Przycisk "Constant Ratio" powoduje że szerokość jest również zmieniana.
Po naciśnięciu OK obrazek robi się mniejszy i jest dłuższy blisko dwa razy niż baner.
Z menu Select->All wybieramy cały obrazek i poleceniem Edit->Copy kopiujemy obrazek do bufora.
Na banerze wybieramy Edit->Paste aby skopiować obrazek z bufora. Teraz możemy zobaczyć pingwina w ramce banera. Ale nie ma on prawidłowej pozycji. Zanim coś zmienimy spójrzmy na okno warstw. Pojawiła się tam dodatkowa zakładka z opisem "Floating Selection". Aby umieścić pingwina na własnej warstwie wybierz w lewym dolnym rogu okna "Layer & Channel" pustą kartka papieru.
Teraz pingwin jest umieszczony na własnej warstwie i może być edytowany oddzielnie od reszty rysunku.
Następnie musimy przesunąć pingwina, tak aby jego głowa była lepiej widoczna. Wybierz "Move Tool" (patrz obrazek poniżej).
Z tym narzędziem kliknij na pingwina i przesuń go aby jego głowa była widoczna nad dolną krawędzią banera.

Ale głowa jest nadal zbyt duża. Możemy to zmienić używając "Transform Tool" .
Podwójne kliknięcie otworzy okno z dodatkowymi opcjami (ostatnim razem podobnie otwieraliśmy opcje przy narzędziu "Fuzzy selection" jednak teraz pokaże nowe opcje).
Wybierz opcje skalowania (scaling) i kliknij na pingwinie w banerze. Możemy teraz zmniejszać rozmiar pingwina używając jedynie przycisków myszy. Jeżeli naciśniesz klawisze Ctrl i Shift przy ruchu myszy, Gimp zachowa proporcje wysokości do szerokości. Po zmniejszeniu, możemy przesunąć pingwina przy użyciu opcji "Move Tool" na pozycję na której chcemy aby się znajdował.

Pingwin jest zbyt ładny aby został sam na banerze . Skopujemy naszego Tuxa naciskając prawym przyciskiem myszy i wybierając "Edit->Copy" i "Edit->Paste".
Teraz nową pojawiającą się "Floating selection" w oknie "Layers & Channels". Kliknięcie na pustą kartkę papieru ustawi drugiego pingwina na własnej warstwie. Możemy przesunąć drugą warstwę trochę na bok ponieważ przykrywa pierwszy rysunek. (Użyj "Move Tools").
Tą procedurę należy powtarzać aż uzyskamy pięć pingwinów. każdy obrazek na własnej warstwie

Na koniec możemy nazwać każdą warstwę tak aby bardziej się wyróżniały. Podwójne kliknięcie na wybraną warstwę w oknie "Layers & Channels" otworzy małe okienko gdzie możesz zmienić nazwę warstwy.
Co powiesz na nazwy od "Tux1" do "Tux5"?
Kliknięcie na "oko" po lewej stronie wiersza warstwy ustawia czy warstwa ma być pokazywana czy nie. To bardzo przydatne narzędzie przy skomplikowanych obrazkach z wiloma obiektami.

Obrazek powinien wyglądać mniej/więcej tak:
Aby to osiągnąć, możesz obracać warstwy. Aby to osiągnąć, użyjemy "Transform Tool" . W oknie z dodatkowymi opcjami, musimy znaleźć i wybrać "Rotation" (obrót). Teraz możemy wybrać inną warstwę i obrócić odpowiadającego jej pingwina, używając do tego myszy. Po obróceniu wszystkich pingwinów, powinny być tak ustawione aby było widać ich głowy. Aby uniknąć niepotrzebnych kłopotów, powinniśmy nagrywać nasz baner co jakiś czas. Kliknij prawym przyciskiem myszy na okno banera i wybierz menu File->Save As. Po wybraniu katalogu w którym chcemy umieścić obrazek, zostanie on zachowany. Wybierzmy sobie nazwę w stylu "penguinbanner" ale bez jakichkolwiek rozszerzeń, jak .gif czy .jpg. Musimy pamiętać że używamy trybu RGB który nie jest obsługiwany przez format GIF. JPEG nie obsługuje warstw ani przeźroczystego tła, tracimy to podczas kompresji.
Najlepszym wyborem jest format "gzip" który znajduje się na końcu listy; "gzip" to format XCF, używany przez Gimpa który jest kompresowany przez gzip'a aby zaoszczędzić trochę miejsca na dysku (XCF zajmuje bardzo dużo miejsca). Ten format pozwala zachować obrazek wraz ze wszystkimi warstwami i wszystkimi ustawieniami.
Możemy zaobserwować, że Gimp automatycznie dodaje poprawne rozszerzenia na końcu nazwy pliku, a nasz obrazek powinien nazywać się "penguinbanner.xcf.gz".

Po zapisaniu naszej pracy, możemy przejść do następnego kroku. Na początek skopiujemy wszystkie warstwy. Powinniśmy mieć dwie kopie naszej sceny. Wystarczy kliknąc prawym przyciskiem myszy na każdej warstwie w oknie "Layers & Channels" i wybrać "Duplicate Layer" (duplikacja warstwy). Po skopiowaniu wszystkich warstw posortujemy je, tak aby oryginalne warstwy i ich duplikaty były pogrupowane. Kliknij na belce warstwy i przesuń ją używając przycisków(strzałek) na dole okna. Nasz baner powinien wyglądać tak jakby pingwiny poruszały głowami w stronę środka banera. Powinniśmy też zrobić tylko fragmenty głów naszych pingwinów.
Aby zachować nienaruszone oryginały , musimy odznaczyć oryginalne warstwy. Kliknij na oko odpowiadające danej warstwie. Teraz odznaczone warstwy nie będą widoczne.
Teraz zaznaczymy każdą skopiowaną warstwę i przesuniemy ją troszeczkę na zewnątrz banera używając "Move Tool". Po skopiowaniuwszyskich warstw ponownie otrzymamy warstwy o nazwie np: "Tux1 copy copy". Posortujemy je, najpierw "copy" a następnie "copy copy". Następnie odznaczymy (przycisk oko) warstwy z jednym "copy" żeby ułatwić sobie prace z warstwą "copy copy".
Teraz możemy przesunąc pingwiny troszeczkę na zewnątrz banera. Nastepnie możemy połączyć warstwy w jeden obrazek, to znaczy wyświetlamy wszystkie warstwy w jednym widoku (pierwsza oryginalna warstwa, następnie pierwsza kopia a potem warstwa "copy copy").
Wybierzemy wszystkie warstwy w jednym widoku (tzn. niech obrazek będzie takim jakim jest)
Wybierzemy opcję "Merge visible Layers" używając prawego przycisku myszy w menu warstw.
Ale wcześniej Gimp zapyta jak obrazek ma być połączony. Ponieważ pingwiny położne są praktycznie na zewnątrz ramek obrazka, Gimp zaoferuje opcje "expanded as necessary". Ale to nie jest dokładnie to o co nam chodzi. Zamiast tego zaznacz opcję "clipped to bottom layer".
Musimy to zrobić dla każdej warstwy. (Uwaga: Po prostu wybierz warstwy które chcesz wykorzystać.) Teraz, widać tylko trzy warstwy, które są razem połączone, jak na poniższym obrazku: Aby baner poruszał się we właściwy sposób, musisz ułożyć prawidłowo warstwy: warstwa na której głowy najlepiej widać będzie pierwsza, warstwa na której widać tylko fragmenty głów będzie ostania.
Teraz zmienimy nazwy warstw. Proszę nadać im nazwy zaczynając od góry:
Layer1 (2000ms)
Layer2 (180ms)
Layer3 (250ms)

Wartość pomiędzy nawiasami ustawia czas jaki jest odliczany pomiędzy przejściem z jednej warstwy do następnej, kiedy tworzymy animowany baner.
Te czasy są opracowane metodą pró i błędów, nie żadnym algorytmem ;).
Aby obejrzeć baner możesz użyć menu "Filters->Animation->Animation Playback" i wybrać "Start/Stop".
Animowany baner powinien wyglądać jak poniższy przykład: Jak możemy zobaczyć, animacja nie jest perfekcyjna. Pingiwny są po prostu rysowany na swoich poprzednich kopiach. Czasami widać część poprzedniego pingwina.
Także sam baner nie wygląda zbyt dobrze z białym tłem. Małe badania przyniosły informacje że niebieskie banery są znacznie częściej "klikane".
Teraz dodamy czwartą warstwę z niebieskim tłem.
Wybierz przycisk "New Layer" (pusta kartka paieru na dole okna "Channels and Layers") żeby stworzyć nową warstwę. Ta warstwa automatycznie przybierze rozmiar taki jak istniejący baner. Wybierz "Layer Fill Type: Transparent". Wybierzemy kolor później. Teraz wybierzemy nową warstwę żeby można było ją edytować. Inne warstwy powinny być nadal widoczne. To w sumie nie ma znaczenia bo nasza praca i tak pozostawi poprzednie warstwy nietknięte.
Kliknij dwukrotnie na przycisk koloru (okno z narzędziami), powinno pojawić się okno "Color selection". Wybierzemy teraz miły niebieski kolor jako podstawowy (foreground). Teraz podwójne kliknięcie na ono kolory tła (również okno narzędzi). Wybierzemy troszeczkę ciemniejszy niebieski.
Natępnie wybierzmy opcję "Fill with a color gradient" . W oknie dodatkowym (podwójne kliknięcie na ikonę), wybierzemy menu "Blend: FG to BG (RGB)".
Ta opcja stworzy łagodne przejście między jaśniejszym niebieskim (podstawowy kolor) a ciemniejszym (tłem).
Użyjemy myszy aby odpowiednio ustawić zasięg i kierunek wypełnienia przejściem.
Możesz zobaczyć jak wybrana warstwa się zmieniła.
Warstwę z niebieskim tłem skopujemy cztery razy ("Duplicate Layer").
Każdą warstwy z pingwinami połączymy z kolejną kopią niebieskiej warstwy ("Merge visible Layers") pozostaje tylko jedna niebieska warstwa (będziemy jej potrzebować później). Przeniesiemy warstwy z pingwinami ponad warstwę tła zanim je połączmy, w przeciwnym wypadku pingwiny zostaną ukryte.
Po połączeniu musimy znowu zmienić nazwy:
Layer1 (2000ms)
Layer2 (180ms)
Layer3 (250ms)

Następnie będziemy edytować samotną warstwę niebieską. Wybierzemy biały jako kolor podstawowy i dodamy tekst poprzez opcję kliknięcie na przycisku "Add text to the image" .
Kliknięcie na banerze otworzy okno z parametrami tekstu.
Wybierzemy tekst o wysokości 35 pixeli a fonty "charter". Wprowadź tekst np: "What can be so"
Po naciśnięciu "OK" i przesunięciu tekstu w górny lewy róg stworzymy niwą warstwę do umieszenia na niej tego tekstu.
Teraz dopiszemy kolejny tekst tym razem o wysokości 44 pixele. Po prostu napisz np: "interesting here?" i umieść to na własnej warstwie a następnie przesuń w prawy dolny róg. Baner powinien przypominać poniższy przykład, ale z angielskim, czy polskim tekstem: Teraz połączymy te trzy warstwy (niebieskie tło i dwie warstwy z napisami).
Teraz będziemy edytować jeszcze jedną warstwę z niebieskim tłem. Po prostu wpisz na nią swój internetowy adres strony. Używając tej samej procedury co wcześniej.
Wybierz fonty "courier". i maksymalna wysokość aby adres był czytelny i mieścił się na baerze.
Przed połączeniem tych warstw (tła i tekstu) powinieneś zmienić nazwę i dodać czas w milisekundach a by zdefiniować jak długo tekst ma się wyświetlać.
Dla "tekstu pytającego" (tego pierwszego), proponujemy czas 2700 milisekund. Adres internetowy powinien być widoczny przez 3000 milisekund.
Na koniec powinniśmy poukładać warstwy we właściwy sposób, np: adres internetowy powinien być pierwszy, następnie pytanie a na koniec trzy pingwiny.
Animowany baner powinien przypominać poniższy przykład: Następnym nagranie całej naszej pracy. Ponieważ obrazek będzie zapisany w formacie GIF, musimy przekonwertować go na tryb indeksowy używając menu Image->Indexed.
W oknie które otworzy się po wybraniu tej opcji będziesz mógł wybrać paletę 255 kolorów (jeden kolor jest zarezerwowany dla przeźroczystego tła), lub paletę dla stron WWW, lub jeżeli chcesz własną paletę kolorów.
Sugerujemy wybranie palety 255 kolorów. Format WWW potrzebuje znacznie mniej miejsca lecz nie wygląda zbyt ciekawie.

Jeżeli jesteś zadowolony ze swojej animacji (możesz ją obejrzeć poprzez menu Filters->Animation->Animation Playback), możemy zredukować troszeczkę rozmiar pliku. W tej chwili Gimp nagrywa pięć kompletnych obrazków tak jak je pokazuje, jeden po drugim. ale obrazki nie zmieniają się zbytnio. Tło jest identyczne na wszystkich i tylko pingwiny troszeczkę się poruszają.
Aby trochę zaoszczędzić miejsca Gimp oferuję opcję nagrywania tylko tego fragmentu animacji który się zmienia. To pozwoli na zmniejszenie rozmiaru pliku i jego ładowanie się będzie szybsze.
Menu Filters->Animation->Animation Optimize daje to rozszerzenie.
To menu otwiera się w nowym oknie dla optymalizowanego obrazka aby można było powrócić do starego na wszelki wypadek.
Możemy w końcu nagrać nasz baner. Wybierz menu File->Save As w nowym oknie i a następnie wybierz "Determine File-Type" format GIF. Nie zapomnij podać nazwy banera.
GIMP nie przestaje zadawać pytania. Możesz dodać komentarz do każdego obrazka formatu GIF, komentarz ten jest wyświetlany w niektórych programach. Domyślnie zobaczymy tutaj "Made with Gimp". Możesz zmienić ten napis jeżeli chcesz lub po prostu wyłączyć tą opcję.
Kiedy nagrywamy GIFa z więcej niż jedną warstwą, dostępna jest kolejna opcja "Animated Gif Options". Tutaj możesz podać czy chcesz aby odtwarzany był w niekończącej się pętli (opcja "loop"). Sugerujemy aby była włączona.
Następnie możesz ustawić domyślne opóźnienie między ramkami dla których nie zostało podane - "Default delay between Frames where unspecified". Tutaj możesz zmienić czas oczekiwania kiedy przejdzie do następnego obrazka. Ale w naszym przykładzie już podaliśmy ten czas (czas w nawiasach za nazwą warstwy).
Ostatnia z listy opcji pozwala nadpisywać nową warstwę na starą i można zobaczyć starą warstwę pod nową, lub wybrać usuwanie starej przed nadpisaniem nowej.
Jeżeli użyjemy optymalizacji banera w połączeniu z tą opcją (tak jak w naszym przykładzie), to ustawienie niczego nie zmieni.
Po naciśnięciu "OK", obrazek zostanie zapisany.

Właśnie stworzyłeś swój pierwszy baner w Gimpie. Gratulacje!