GIMP
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.
Otworzymy ten obrazek używając Gimpa (menu File->Open).
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
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.
. 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ł.
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
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:
. 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.
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.
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".
Teraz możemy przesunąc pingwiny troszeczkę na zewnątrz banera.
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 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".
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.
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 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.
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.
Ahh, Właśnie stworzyłeś swój pierwszy baner w Gimpie. Gratulacje!