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

Transkrypt

1 Projekt zaliczeniowy z ćwiczeń do przedmiotu Podstawy technik cyfrowego przetwarzania informacji obejmuje utworzenie strony internetowej na temat Moje hobby lub Ulubione zakątki w miejscu zamieszkania w oparciu o materiały własne obejmujące: grafikę rastrową statyczną i animowaną, grafikę wektorową, dźwięk, wideo. Szczegóły w ćwiczeniach 7/8. Termin przesłania projektu do oceny upływa 13 lutego Ćwiczenia 1 Data: Temat: 15 I 2011r. zajęcia stacjonarne Przygotowanie grafiki statycznej i animowanej w programie GIMP Program GIMP można pobrać ze strony Zadanie 1. Grafika statyczna Wykonaj pocztówkę zatytułowaną Wydział Matematyki i Informatyki według własnego pomysłu lub wzorca poniżej. Do pracy wykorzystaj pięć wybranych zdjęć z katalogu morasko. Etapy wykonania pocztówki: 1. Pracę rozpoczynamy od utworzenia nowego obrazu o wymiarach 950x750 pikseli. 2. Kolejno otwieramy wybrane zdjęcie budynku Wydziału MiI. Skalujemy je (Obraz -> Skaluj obraz) do rozmiarów 400 x 300. Dodajemy efekt zaokrąglenia rogów i cień za pomocą filtru (Filtry -> Dekoracja -> Zaokrąglone rogi ). Spłaszczamy obraz (Obraz -> Spłaszcz obraz ) i strona 1/7

2 zapisujemy go do schowka poleceniem Edycja -> Kopiuj. Następnie wklejamy do nowego obrazu poleceniem Edycja-> Wklej. Wklejony obraz stanowić będzie niepełnowartościową warstwę, tzw. Oderwane zaznaczenie. Aby z wklejonego obrazu (Oderwane zaznaczenie) zrobić warstwę należy: Wybrać jako aktywne Oderwane zaznaczenie (patrz rysunek obok), Kliknij ikonę Nowa warstwa w oknie warstw. 3. Czynności z punktu 2. Powtarzamy czterokrotnie. Do pozycjonowania fotografii przydadzą się prowadnice poziome oraz pionowe. Ściąga się je z linijek przy wciśniętym lewym klawiszu myszy. Rozkładamy wklejone fotografie w sposób przedstawiony na pocztówce. 4. Dodajemy fotografię środkową. Po przeskalowaniu obrazu wykonujemy trzypikselowe obramowanie. W tym celu zaznaczamy cały obraz (Zaznaczenie -> Wszystko [Ctrl+A]) i obramowujemy go (Zaznaczenie -> Obramuj). Wypełniamy całe zaznaczenie kolorem czarnym (wypełnianie kubełkiem z opcją Całe zaznaczenie). Teraz można obraz skopiować do schowka i wkleić do pocztówki. 5. Jako efekt dodatkowy można wstawić warstwę (o białym tle) między górne zdjęcie a cztery dolne zdjęcia. Następnie ustawić przezroczystość tej warstwy na 50%. Da to wrażenie przymglenia pocztówki. Całość zapisujemy jako plik w formacie natywnym xcf (do dalszej obróbki). 6. Można dodać efekt poszarpanej krawędzi w kolorze szarym (Filtry ->Dekoracja -> Poszarpana krawędź). Wynik końcowy zapisz w formacie gif lub jpg. Zadanie 2. Grafika animowana Utwórz w programie GIMP animację, polegającą na przejściu jednego obrazu w drugi. Do pracy wykorzystaj dwa wybrane zdjęcia z katalogu zima. Etapy wykonania: 1. Włączamy GIMP-a i otwieramy w nim kolejno oba obrazy, między którymi chcemy zrobić przejście poleceniem Plik-> Otwórz jako warstwy Zwróć uwagę, czy obrazy zostały umieszczone na osobnych warstwach. W tym celu otwórz okno warstw poleceniem Okna -> Dokowalne okna dialogowe -> Warstwy [Ctrl+L]. Ważne by obrazki były tych samych rozmiarów. By to osiągnąć strona 2/7

3 możemy np. skorzystać z narzędzia Skalowanie [Shift+T] lub Kadrowanie [Shift+C]. Mamy więc dwie warstwy, z których zrobimy przejście za pomocą 6 klatek. Wygląda to tak: 2. Następnie duplikujemy każdą warstwę 4 razy Duplikuj warstwę [Shift+Ctrl+D] i układamy w pary wszystkie warstwy oprócz oryginalnych: 3. Naszym celem jest stworzenie sześciu klatek, w których od dołu (na początku) jest widoczne ABC i powoli przechodzi w XYZ. Ustawiamy kolejno krycie dla każdej kolejnej warstwy XYZ (XYZ2-20%, XYZ3-40%, XYZ4-60%, XYZ5-80%): => 4. Następnie łączymy pary ABCcyfra XYZcyfra klikając prawym klawiszem myszki po warstwach XYZcyfra (dla cyfra =2,3,4,5) i wybierając połącz w dół: strona 3/7

4 Powinno wyjść: 5. Filtry -> Animacja -> Optymalizuj (dla formatu gif) otworzy nam się nowe okno (bez nazwy) ze zoptymalizowaną animacją (zajmuje mniej miejsca). W oknie warstw tego obrazu można zmieniać czas wyświetlania poszczególnych klatek, klikając na nazwie klatki prawym klawiszem myszki i wybierając polecenie Modyfikuj atrybuty warstwy Standardowo dla wszystkich klatek ustawiony czas wyświetlania to 100ms. Ustaw 2000ms (2 sekundy) dla oryginalnych klatek ABC i XYZ. Obejrzyj wynik poleceniem Filtry -> Animacja -> Odtwórz Teraz wystarczy plik zapisać poleceniem Plik -> Zapisz jako... nadając mu rozszerzenie gif, (nazwa.gif). W otwartym oknie należy wybrać opcję Zapisz jako animację i sprawdzić, czy zaznaczone jest Zapętlanie na zawsze. Post Scriptum Dobrze jest jeszcze dorzucić animację powrotną, (nie będzie przeskoku) wystarczy zduplikować warstwy pośrednie i zamienić ich kolejność. strona 4/7

5 Zadanie 3. Grafika animowana Utwórz w GIMPie napis MOJE HOBBY lub ZAPRASZAM z efektem zamalowywania. Etapy wykonania: 1. Tworzymy nowy obrazek (Plik -> Nowy... [Ctrl+N]) o wymiarach 900x200 px i dowolnym kolorze tła (nie zaleca się przeźroczystego tła). 2. Wybieramy narzędzie Tekst [T] i piszemy napis w odpowiadającym nam kolorze i pogrubioną czcionką, np. Courier New Bold, w rozmiarze co najmniej 90 px. 3. Na warstwie tekstowej wchodzimy w Warstwa -> Przezroczystość -> Kanał alfa na zaznaczenie. Powiększamy zaznaczenie (Zaznaczenie -> Powiększ...) o 1 px. 4. Na tej samej warstwie wchodzimy w Warstwa -> Połącz w dół. 5. Za pomocą narzędzia Gumka [Shift+E] wycieramy cały tekst z zaznaczenia. 6. Duplikujemy warstwę (Warstwa -> Duplikuj warstwę [Shift+Ctrl+D]. 7. Wybierz narzędzie Pędzel [P] i zamaluj trochę zaznaczenia takim kolorem jakiego użyłeś/aś do napisania tekstu. 8. Kroki od 6 do 7 powtórz, aż do zamalowania całego napisu. Można sprawdzić efekt animacji (Filtry -> Animacja -> Odtwórz). 9. Aby obrazek był mniejszy wchodzimy w Filtry -> Animacja -> Optymalizuj (dla formatu GIF) i czekamy. 10. Pojawi nam się nowy obrazek ze zoptymalizowaną animacją. Zapisujemy go w formacie gif jako animację. strona 5/7

6 Zadanie 4. Logo napis wypełniony obrazem Utwórz dowolny napis, np. imię lub nazwisko wypełniony obrazem. Przekopiuj do swojego katalogu obraz wybrany jako wypełnienie napisu (w naszym przykładzie jest to plik Lilie wodne.jpg.) Etapy wykonania logo: I. Wykonanie napisu. 1. Utwórz nowy plik o wymiarach , a w nim napisz tekst (duży napis px, grubą czcionką). Krój czcionki dowolny. 2. Utwórz z tekstu zaznaczenie (korzystając np. Zaznaczenie Według koloru ). 3. Zapisz zaznaczenie do kanału (Zaznaczenie Zapisz do kanału). 4. Otwórz okno warstw (Okna Dokowalne okna dialogowe Warstwy patrz. rys. poniżej). Usuń warstwę tekstu. (Zaznaczenie powinno pozostać!) widoczność warstwy zakotwiczanie warstwy zmiana kolejności warstw na obrazie usuwanie warstwy II. Wypełnienie go obrazem 1. Otwórz obrazek, który będzie stanowił tło, np. Lilie wodne.jpg. (otworzy się nowe okno.) Skopiuj go do schowka (Edycja Skopiuj). 2. W oknie z napisem wklej obrazek poprzez operację Edycja Wklej do. strona 6/7

7 3. Obrazek możemy przesuwać tak, aby otrzymać najlepszy efekt wypełnienia. Następnie należy zakotwiczyć warstwę tła (obrazek) poprzez Warstwa Zakotwicz warstwę. III. Cień Utwórz cień za tekstem używając skryptu Filtry Światło i cień Rzucanie cienia. Ustal parametry i wykonaj skrypt. IV. Dodaj kolorowe tło. Odwróć zaznaczenie (Zaznaczenie Odwróć) oraz wypełnij je wybranym kolorem (Kubełek). Zaznacz opcję uwzględniany obszar: Całe zaznaczenie. V. Obramowanie Ponownie odwróć zaznaczenie (Zaznaczenie Odwróć), a następnie opcję Zaznaczenie Obramuj. Ustal szerokość obramowania na 5pt. Wypełnij obramowanie dowolnym kolorem używając narzędzia Kubełek. (Pamiętaj o zaznaczeniu opcji uwzględniany obszar: Całe zaznaczenie!) Zadanie 5. Loga w oparciu o skrypty Poeksperymentuj ze skryptami do tworzenia ciekawych napisów. Wykonaj trzy różne napisy. 1. Utwórz nowy plik o wymiarach , a w nim napisz tekst (duży napis pikseli). Krój czcionki dowolny. 2. Wybierz jeden ze skryptów Filtry Alfa na logo Oto kilka przykładów: strona 7/7