Animacje oraz ciekawe efekty dostępne w programie GIMP

Transkrypt

1 Animacje oraz ciekawe efekty dostępne w programie GIMP Tworzenie Gifów Aby zobrazować różnice w tworzeniu plików z rozszerzeniem gif wykonamy na początek krótkie ćwiczenie. 1.Utwórz niebieską warstwę nad tłem, następnie utwórz warstwę z literą G. Te dwie warstwy scal, a następnie za pomocą różdżki zaznacz niebieski kolor i Wyczyść. Na koniec usuń warstwę z tłem i zapisz całość jako gif. 2.Drugi gif powstał w następujący sposób: na warstwie z tłem została umieszczona warstwa z literą, następnie została usunięta warstwa tła i plik został zapisany jako gif. Aby utworzyć gif animowany musimy zwrócić uwagę na to, w jaki sposób nasz plik ma się zachowywać. W trakcie wykładu postaram się Państwu przedstawić różne sposoby jakie program Gimp nam oferuje aby utworzyć ciekawą animację. Najprostszym sposobem jest: Wybierz opcję Plik Nowy i utwórz nowy, biały obraz o wymiarach pikseli. Zmień kolor narzędzia na czerwony. Następnie wybierz narzędzie tekstowe. Kliknij myszką w dowolnym miejscu obrazu i dodaj napis 1. W podobny sposób dodaj do obrazu zielony napis 2 oraz niebieski napis 3. 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. Otrzymany obraz zapisz w formacie XCF. Po wybraniu opcji Plik Zapisz wprowadź nazwę pliku: xcf. XCF jest formatem stosowanym przez program GIMP. Zachowuje on wszystkie warstwy, zaznaczenia, ścieżki i kanały. Na koniec przekształć otrzymany obraz na animowanego GIF-a. Wybierz operację Plik Weksportuj jako i podaj nazwę gif. W oknie dialogowym Eksport pliku zaznacz opcję Zapisz jako animację. 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. 1

2 Podczas eksportowania pliku do formatu gif jedną z możliwości było opóźnienie ramki na 1000 milisekund (oczywiście czas możemy sobie ustalać dowolnie). Opóźnienie to będzie dotyczyło wszystkich warstw w obrazie i spowoduje, że każda warstwa będzie wyświetlana przez dokładnie taki czas jaki został ustawiony w oknie dialogowym. Ogólnie rzecz ujmując tworząc animowany gif możemy pokusić się o stwierdzenie, że: Poszczególne klatki gifa są umieszczone na poszczególnych warstwach, przy czym warstwy są nazywane następująco: nazwa(9999ms)(tryb) gdzie 9999ms oznacza czas trwania klatki, a tryb - tryb występowania klatki (combine - dodaj do poprzedniej klatki lub replace - zastąp poprzednią klatkę). W celu zapoznania się z efektem animacji nie musimy zapisywać tworzonego projektu w postaci gif, a jedynie dokonać podglądu efektu. Gimp umożliwia nam to poprzez Filtry -> Animacja -> Odtwarzanie animacji. Mamy tu możliwość zarówno odtworzenia całej animacji jak również przechodzenie pomiędzy poszczególnymi warstwami krok po kroku. Pliki graficzne zapisywane jako gif są bardzo często wykorzystywane na stronach internetowych, dlatego ważny jest ich rozmiar. Im mniejszy plik tym szybciej jest pobierany na stronę WWW, a co za tym idzie strona zawierająca taki element szybciej się otwiera. Aby uzyskać jak najmniejszy rozmiar gifów zawsze należy przeprowadzić optymalizację pliku. Jednocześnie należy pamiętać, że zawsze pracujemy na projekcie w formacie xcf, a dopiero gotowy projekt eksportujemy do innego typu. W naszym przypadku należy pamiętać, że optymalizację będziemy wykonywać na projekcie zapisanym w formacie xcf, który jest już gotowy do wyeksportowania do formatu gif. Aby wykonać optymalizację należy wybrać Filtry -> Animacja -> Optymalizuj. Aby zobrazować powyższe informacje spróbujmy przeanalizować następujące dwa przykłady. 2

3 Aby otrzymać animacje jednorazowe tzn. takie, które nie będą się zapętlać należy podczas eksportowania pliku do formatu gif odznaczyć opcję Powtarzaj w nieskończoność. 3

4 Podsumowując należy zauważyć, ż: 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. Należy pamiętać, że animowane GIF-y można wykonywać w programie GIMP oraz:. 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ę. Na zakończenie zwróćmy uwagę na poniższy przykład, który pokazuje wykorzystanie gifów. 4

5 Ciekawe efekty Perła Aby uzyskać przedstawiony po prawej stronie efekt należy wykonać poniższe operacje. Na oddzielnej warstwie należy namalować kółko wypełnione gradientem (czarno-białym) Warstwę z kółkiem należy zduplikować i dla zduplikowanej warstwy zastosować filtr Filtry -> Zniekształcenia -> Deformacja z ustawieniem Zwinięcie PWZ. Tryb warstwy należy ustawić na Pokrywanie Na kolejnej warstwie należy namalować bordowe kółko. Tryb warstwy należy ustawić na Pokrywanie Dodać na nowej warstwie refleks świetlny. Namalować białe kółeczko i zastosować dla niego filtr Filtry -> Rozmywanie -> Rozmycie Gaussa z promieniem 10 Wytłuszczone litery Stwórz czerwoną literę A i wybierz Kanał alfa na zaznaczenie Na nowej warstwie wypełnij pomniejszone i zmiękczone zaznaczenie na biało. Tryb warstwy ustaw na Pokrywanie Stwórz nową czarną warstwę umieszczoną na samej górze i ustaw jej tryb na Przesiewanie Dla czerwonej litery A wybierz Kanał alfa na zaznaczenie i zapisz zaznaczenie do kanału Dla kanału zastosuj rozmycie Gaussa z promieniem 20 Przy zaznaczonej czarnej warstwie wybierz polecenie Filtry -> Efekty świetlne -> Efekty świetlne. Ustaw światło na kierunkowe o współrzędnych x=-1, y=-1, z=0,5. Na zakładce Materiał wpisz kolejno następujące wartości: 5

6 Otaczające=0, Rozproszone=0,25, Rozproszone=0, Odbłysków=5, Podświetlenie=5. Na zakładce Mapowanie wypukłości wybierz mapowanie wypukłości na kanału Dodaj cień Stare złoto Stwórz na nowej warstwie brązowy (kolor #aa7829) pierścień i wybierz Kanał alfa na zaznaczenie Na nowej warstwie wypełnij pomniejszone zaznaczenie na biało. Tryb warstwy ustaw na Pokrywanie Wybierz ponownie Kanał alfa na zaznaczenie dla warstwy z brązowym pierścieniem i na nowej warstwie wypełnij zaznaczenie za pomocą filtru Filtry -> Renderowanie -> Chmury -> Plazma. Dla tej warstwy wybierz desaturację. Następnie zaznacz dowolny tej warstwy obszar za pomocą zaznaczenia na podstawie kolorów i wyczyść zaznaczony obszar (Edycja -> Wyczyść). Ustaw tryb warstwy na Pokrywanie. Zduplikuj ostatnią warstwę i wykonaj dla niej mapowanie wypukłości na podstawie jej samej Okno na świat przycisk Warstwa tła ma kolor #2f70e9. Rysunek ma wymiary 300 x 300 pikseli Kolejną warstwą jest warstwa z granatową kulką o kolorze #0d2042. Jest ona umieszczona centralnie na rysunku i ma wymiary 150 x 150 pikseli Na kolejnej warstwie jest jasny refleks świetlny o kolorze #1286c9. Należy dla refleksów świetlnych dostosować krycie warstwy. Refleks wykonujemy następująco: - dla granatowej kulki wybieramy Kanał alfa na zaznaczenie; - zaznaczenie wypełniamy kolorem refleksu; - zaznaczenie powiększamy z promieniem 12 zmiękczamy z promieniem 70; 6

7 - zaznaczenie przesuwamy w odpowiednie miejsce i odwracamy je; - zaznaczenie czyścimy Na kolejnej jest drugi refleks świetlny o kolorze jaśniejszym niż poprzedni. Refleks wykonujemy następująco: - dla granatowej kulki wybieramy Kanał alfa na zaznaczenie; - zaznaczenie zmniejszamy o 5 pikseli i zmiękczamy o 5 pikseli; - zaznaczenie wypełniamy kolorem refleksu; - powiększamy zaznaczenie o 100 pikseli; - przesuwamy zaznaczenie w odpowiednie miejsce; - odwracamy zaznaczenie i zmiękczamy z promieniem 17 pikseli; - zaznaczenie czyścimy Na kolejną warstwę wklejamy rysunek okna. Dla tej warstwy wykonujemy przekształcenie Filtry -> Odwzorowanie -> Odwzorowanie na obiekt. Wybieramy odwzorowanie na sferę i przezroczyste tło i brak światła. Na zakładce Ułożenie dostosowujemy współrzędne x, y, z tak, aby podgląd był odpowiedni do naszych potrzeb. Tryb warstwy należy ustawić na Przesiewanie. Należy wyczyścić odpowiednie obszary warstwy i dostosować krycie warstwy Dodajemy za pomocą pędzelka biały refleks świetlny w lewym górnym rogu Mapowanie strony WWW 7

8 Do mapowania obrazka używamy polecenia Filtry -> Sieć WWW -> Mapa obrazu. Wywołujemy to polecenie po spłaszczeniu i zapisaniu obrazu z rozszerzeniem.jpg. Teraz w okienku do mapowania zaznaczamy na obrazku kształty, pod które mają być podpięte linki. W okienku Ustawienia obszaru numer... wpisujemy adres strony, do której ma prowadzić link. W polu Tekst alternatywny wpisujemy komentarz, który zostanie wyświetlony po najechaniu na link. Teraz zapisujemy plik z mapą z rozszerzeniem.txt. W pliku tym został zapisany kod html mapy obrazku. Wystarczy ten kod skopiować do naszej strony. Można też dopisać w naszym pilku <html> <title>moja strona </title> <body> tutaj jest kod mapy </body> </html> i zapisać z rozszerzeniem.html 8