Animacje oraz ciekawe efekty dostępne w programie GIMP

Podobne dokumenty
Animowane GIF-y w GIMP-ie

Systemy multimedialne 2015

Fotografia cyfrowa obsługa programu GIMP. Cz. 18. Tworzenie ramki do zdjęcia. materiały dla osób prowadzących zajęcia komputerowe w bibliotekach

Animacje cz. 2. Rysujemy koło zębate

Gimp - poznaj jego możliwości!

GIMP fotografia kolorowa i czarno-biała

TECHNIKI MULTIMEDIALNE LABORATORIUM GIMP: Tworzenie animacji

GIMP. Ćwiczenie nr 6 efekty i filtry. Instrukcja. dla Gimnazjum 36 - Ryszard Rogacz Strona 18

Metaliczny button z deseniem.

Ćwiczenia I 2011r. zajęcia stacjonarne Przygotowanie grafiki statycznej i animowanej w programie GIMP

Wstęp do GIMP wycinanie obiektu z obrazka, projekt napisu. Rozpoczynamy prace w GIMP-e

GIMP Grafika rastrowa (Ćwiczenia cz. 2)

TECHNIKI MULTIMEDIALNE LABORATORIUM GIMP: Projektowanie tła

Zaznaczenie prostokątne. Zaznaczenie eliptyczne. Tekst. Okno warstw. Wypełnienie kubełkiem. Gradient. Kolor pierwszo i drugoplanowy

Fotografia cyfrowa obsługa programu GIMP

Gimp. Program do grafiki rastrowej odpowiednik płatnego programu Photoshop

WARSTWY cd. Narzędzia służące do transformacji warstw są przedstawione na poniższym rysunku: Służą one odpowiednio do:

Ćwiczenia 7 Obsługa programu GIMP

Ćwiczenie 5 Animacja tekstu

Scenariusz lekcji. Scenariusz lekcji. opisać działanie narzędzi przybornika. korzystać z Edytora postaci programu Logomocja;

Przedstawione przykłady możesz potraktować jako ćwiczenia doskonalące umiejętność wykorzystywania warstw.

Jak zrobić klasyczny button na stronę www? (tutorial) w programie GIMP

Adobe Photoshop lab. 3 Jacek Wiślicki, 1. Napisy (c.d.) Ogień Miód Metal Aqua...

Tworzenie grafiki na potrzeby WWW

Ćwiczenie 6 Animacja trójwymiarowa

Tworzenie prezentacji w MS PowerPoint

Projekt witryny pt. Oko

Efekt rollover ze wskaźnikiem wybranej opcji

INSTRUKCJA ĆWICZENIOWA NR 4

Temat 1: GIMP selekcje, wypełnienia, ścieżki

Spis treści. Włodzimierz Gajda

Pokażę w jaki sposób można zrobić prostą grafikę programem GIMP. 1. Uruchom aplikację GIMP klikając w ikonę na pulpicie.

WSTĘP; NARZĘDZIA DO RYSOWANIA

Ćwiczenie 1 Automatyczna animacja ruchu

Inkscape. Menu. 1 SVG (ang. Scalable Vector Graphics) uniwersalny format dwuwymiarowej, statycznej i

Studia podyplomowe dla nauczycieli w zakresie nauczania informatyki i technologii informacyjnej

Grażyna Koba. Grafika komputerowa. materiały dodatkowe do podręcznika. Informatyka dla gimnazjum

Opis Edytora postaci Logomocji

MATERIAŁY DYDAKTYCZNE. Streszczenie: w ramach projektu nr RPMA /16. Praca na warstwach w programie GIMP

Odbicie na szkłach okularów

INSTRUKCJA UŻYTKOWNIKA. Spis treści. I. Wprowadzenie II. Tworzenie nowej karty pracy a. Obiekty b. Nauka pisania...

ZAZNACZENIA. Zaznaczenia (inaczej maski) służą do zaznaczania obszarów rysunku.

Photoshop. Tworzenie tekstu

Tworzenie napisu i obrysu.

Tworzenie nowego dokumentu. Ćwiczenie

Prezentacje multimedialne w Powerpoint

Zadanie Wstaw wykres i dokonaj jego edycji dla poniższych danych. 8a 3,54 8b 5,25 8c 4,21 8d 4,85

narzędzie Linia. 2. W polu koloru kliknij kolor, którego chcesz użyć. 3. Aby coś narysować, przeciągnij wskaźnikiem w obszarze rysowania.

Personalizowanie wirtualnych pokojów

Rozmiar i wielkość dokumentu

Ćwiczenia z grafiki komputerowej 4 PRACA NA WARSTWACH. Miłosz Michalski. Institute of Physics Nicolaus Copernicus University.

Kurs Adobe Photoshop Elements 11

Tworzenie infografik za pomocą narzędzia Canva

Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0

Google Earth. Co to jest Google Earth? Co to jest KML? Skąd można pobrać Google Earth?

Prezentacja multimedialna MS PowerPoint 2010 (podstawy)

NARZĘDZIA DO ZAZNACZANIA

Ćwiczenia GIMP. S t r o n a Uruchom program gimp: 2. I program się uruchomił:

Tworzenie stempla W poniższym poradniku zostanie zaprezentowany ciekawy sposób na stworzenie

Animacje z zastosowaniem suwaka i przycisku

Maskowanie i selekcja

Ćwiczenie 12 Różdżka, szybkie zaznaczanie i zakres koloru

I Tworzenie prezentacji za pomocą szablonu w programie Power-Point. 1. Wybieramy z górnego menu polecenie Nowy a następnie Utwórz z szablonu

Kolory elementów. Kolory elementów

edycja szablonu za pomocą serwisu allegro.pl

Woda na powierzchniach. Rafał Chylaszek & Tomasz Krok 5 czerwiec 2009

Adobe Photoshop Dodatek do lab4 J.Wiślicki, A.Romanowski;

Górnicki Mateusz 17681

Grafika Komputerowa. Zajęcia X

Edytor tekstu OpenOffice Writer Podstawy

Spis treści. Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego str. 1

I. Program II. Opis głównych funkcji programu... 19

GRAFIKA SIECIOWA. WYKŁAD 2 Optymalizacja grafiki. Jacek Wiślicki Katedra Informatyki Stosowanej

Materiały dla studentów pierwszego semestru studiów podyplomowych Grafika komputerowa i techniki multimedialne rok akademicki 2011/2012 semestr zimowy

Ćwiczenie 2 Warstwy i kształty podstawowe

Metodyka wykonania kartogramu z podziałem na klasy wg punktów charakterystycznych wraz z opracowaniem kartogramicznej legendy.

Wstawianie nowej strony

Spis treści. strona 1 z 10

etrader Pekao Podręcznik użytkownika Strumieniowanie Excel

Adobe InDesign lab.1 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Podstawy pracy z aplikacją Układ strony... 2.

Compas 2026 Vision Instrukcja obsługi do wersji 1.07

Tworzenie strony www - jako projektu z Mechaniki i budowy maszyn

POMOC / INSTRUKCJA OBSŁUGI

1 TEMAT LEKCJI: 2 CELE LEKCJI: 3 METODY NAUCZANIA 4 ŚRODKI DYDAKTYCZNE. Scenariusz lekcji. Scenariusz lekcji. 2.1 Wiadomości: 2.

Minimalna wspierana wersja systemu Android to zalecana 4.0. Ta dokumentacja została wykonana na telefonie HUAWEI ASCEND P7 z Android 4.

Podstawy tworzenia prezentacji w programie Microsoft PowerPoint 2007

OBSŁUGA PRACY DYPLOMOWEJ W APD PRZEZ RECENZENTA

Grafika komputerowa. Zajęcia 8

PIXLR EDITOR - Autor: mgr inż. Adam Gierlach

1. Wstęp Pierwsze uruchomienie Przygotowanie kompozycji Wybór kompozycji Edycja kompozycji...

Nagrywamy podcasty program Audacity

Jak przygotować pokaz album w Logomocji

Główne elementy zestawu komputerowego

Jak dodać własny szablon ramki w programie dibudka i dilustro

Jak uzyskać efekt 3D na zdjęciach z wykorzystaniem programu InkScape

wersja 1.0 ośrodek komputerowy uj cm ul. mikołaja kopernika 7e, Kraków tel

Przed rozpoczęciem pracy otwórz nowy plik (Ctrl +N) wykorzystując szablon acadiso.dwt

Instrukcja obsługi szablonów aukcji

3.7. Wykresy czyli popatrzmy na statystyki

Transkrypt:

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 400 300 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: 1-2-3.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ę 1-2-3.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

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

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

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

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

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

- 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

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