Strona 1
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
GIMP: tworzenie grafiki na potrzeby WWW
(część 1)
Włodzimierz Gajda
Program GIMP jest bezpłatnym narzędziem oferującym bogate możliwości obróbki grafiki komputerowej. Z powodu
różnic interfejsu programu w stosunku do aplikacji Windows, GIMP potrafi skutecznie odstraszyć początkujących
użytkowników. W jaki sposób ujarzmić GIMPa? O tym traktuje niniejszy artykuł, który rozpoczyna cykl mający na
celu przedstawienie możliwości programu oraz metod pracy ze szczególnym uwzględnieniem tworzenia grafiki na
potrzeby serwisów WWW.
1 grudnia 2003 r.
Spis treści
1. Instalacja i uruchomienie
2. Skalowanie rysunków
2.1 Ćwiczenie 1
2.2 Ćwiczenie 2
3. Kadrowanie oraz zmiana rozmiaru obrazów
3.1 Ćwiczenie 3
3.2 Ćwiczenie 4
3.3 Ćwiczenie 5
4. Obrazy czarno-białe i jednobarwne
4.1 Ćwiczenie 6
4.2 Ćwiczenie 7
5. Wygładzanie brzegu obrazu
Strona 2
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
5.1 Ćwiczenie 8
5.2 Ćwiczenie 9
5.3 Ćwiczenie 10
6. Obrazy rzucające cień
6.1 Ćwiczenie 11
6.2 Ćwiczenie 12
7. Połączenie poznanych operacji
7.1 Ćwiczenie 13
7.2 Ćwiczenie 14
1. Instalacja i uruchomienie
Program GIMP możemy zdobyć odwiedzając witrynę
http://www.gimp.org
. Należy pamiętać o tym, by wraz z
programem instalacyjnym GIMPa skopiować bibliotekę GTK. Instalację oprogramowania trzeba rozpocząć od
biblioteki GTK.
Poza standardowymi opcjami takimi jak docelowy folder czy tworzenie ikony na pulpicie, program instalacyjny
umożliwia wybór wersji językowej. Po wybraniu polskiej wersji językowej cały interfejs GIMPa będzie
przetłumaczony na język polski. Niestety, w obecnej wersji pomoc dołączana do programu jest dostępna jedynie w
języku angielskim.
Strona 3
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
Rysunek 1. Okno główne programu GIMP
2. Skalowanie rysunków
Pracę z GIMPem rozpoczniemy od skalowania rysunków. Operacja skalowania jest przydatna m.in. przy
przygotowywaniu galerii internetowej lub menu strony. Dysponując dużym rysunkiem chcemy na stronie umieścić
jego miniaturkę. Wykonując skalowanie rysunku nauczymy się także otwierać i zapisywać obraz, wyświetlać menu
kontekstowe obrazu, a także powiększać i pomniejszać widok obrazu.
2.1 Ćwiczenie 1
Dysponujesz plikiem
kwiatek.jpg
o wymiarach: szerokość - 800 pikseli, wysokość - 600 pikseli (w skrócie:
800x600) zapisanym w formacie JPEG. Przygotuj miniaturki o rozmiarach 400x300 oraz 200x150 i zapisz je do
plików
kwiatek-400.jpg
oraz
kwiatek-200.jpg
.
Ć
wiczenie rozpoczynamy od wczytania zdjęcia z pliku
kwiatek.jpg
. Służy do tego opcja menu głównego
Plik |
Otwórz
.
Podobnie jak pozostałe okienka dialogowe GIMPa tak i okienko "Odczyt obrazu" różni się wizualnie od aplikacji
Windows. Wynika to z faktu, że GIMP jest dostępny na różne platformy (m.in. Linux oraz FreeBSD) i operację
"Odczyt obrazu" wykonuje za pośrednictwem funkcji biblioteki GTK, a nie Windows API. Druga różnica w
Strona 4
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
stosunku do innych aplikacji Windows jest taka, że w programie GIMP niemal każde okienko dialogowe będzie
widoczne w postaci osobnego przycisku na pasku zadań.
Obraz wyświetlany po otwarciu pliku możemy powiększać i pomniejszać wykorzystując opcje
Widok |
Powiększ
oraz
Widok | Pomniejsz
dostępne w menu kontekstowym obrazu. W celu wyświetlenia menu
kontekstowego, należy kliknąć prawym przyciskiem myszy w otwarty obraz. Jest to kolejna różnica w stosunku do
rodzimych aplikacji Windows. Programy Corel Photo Paint oraz Adobe Photoshop zawierają większą część swoich
opcji w menu głównym, podczas gdy w GIMPie operacje dotyczące danego obrazu są dostępne w menu
kontekstowym.
Rysunek 2. Plik kwiatek.jpg po pomniejszeniu do rozmiaru 33%
Ponieważ operacje powiększania i pomniejszania są wykonywane bardzo często, więc dla wygody warto zapamiętać
dwa skróty klawiszowe: znak - (minus) pomniejsza widok, zaś znak = (znak równości) powiększa widok
wyświetlanego obrazu. Belka tytułowa okna z obrazem informuje nas o stopniu powiększenia widoku obrazka w
stosunku do oryginału (np. 50%).
Strona 5
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
Oczywiście operacje zwiększania i zmniejszania widoku nie powodują skalowania obrazu. Zapisanie obrazu po
wykonaniu operacji "Pomniejsz" spowoduje, że zapisany obraz będzie identyczny jak oryginał (tj. jego wymiary nie
ulegną zmianie).
Operację skalowania wykonujemy klikając opcję
Obraz | Przeskaluj obraz
w menu kontekstowym obrazu.
Okno dialogowe "Skalowanie obrazu" umożliwia wybór jednostki, w jakiej podawane są wymiary obrazu, podanie
nowej szerokości obrazu lub wysokości oraz zmianę współczynników X i Y. Domyślnie współczynniki X oraz Y są
połączone, co powoduje, że obraz jest skalowany proporcjonalnie (zmiana wysokości z 600 na 300 spowoduje
automatycznie zmianę szerokości z 800 na 400). Jeśli chcemy zmieniać niezależnie szerokość i wysokość obrazu
należy rozłączyć współczynniki X oraz Y klikając w przycisk o wyglądzie spinacza.
Rysunek 3. Okno dialogowe "Skalowanie obrazu"
Ustalmy szerokość obrazu na 200, zaś jego wysokość na 150. Operację zakończmy naciskając przycisk OK.
Pozostało nam zapisanie obrazu. Próżno szukać opcji
Zapisz
lub
Zapisz jako...
w menu głównym GIMPa.
Podobnie jak i poprzednio wykonywane przez nas operacje opcje związane z zapisem obrazu są dostępne w menu
Strona 6
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
kontekstowym danego obrazu. Należy zatem kliknąć prawym guzikiem w przeskalowany obraz, a następnie wybrać
Plik | Zapisz jako ...
.
W przypadku plików graficznych bardzo ważny jest format zapisywanego pliku. GIMP umożliwia dwa sposoby
wyboru formatu zapisu. Po pierwsze na podstawie rozszerzenia (takie są ustawienia domyślne programu). Zatem
wpisanie nazwy
kwiatek-400.jpg
spowoduje zapis pliku w formacie JPEG. Druga metoda polega na wybraniu z
menu domyślnego formatu. Dodajmy, że format plików programu GIMP ma rozszerzenie XCF. Będzie to ważne w
przypadku wykonywania skomplikowanych operacji graficznych. Zapis w formacie JPEG, GIF czy PNG (formaty
stosowane na stronach WWW) powoduje utratę informacji takich jak: umiejscowienie prowadnic, zaznaczone
obszary czy warstwy obrazu.
Rysunek 4. Menu kontekstowe wyświetlane prawym kliknięciem w obraz
Strona 7
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
Rysunek 5. Okno dialogowe "Zapis obrazu"
Po podaniu nazwy
kwiatek-400.jpg
i naciśnięciu przycisku OK pojawi się okno dialogowe "Zapis jako JPEG".
Okno to umożliwia zmianę parametrów pliku JPEG. Zmieniając jakość obrazu suwakiem możemy zmniejszyć
rozmiar pliku kosztem jakości obrazu lub poprawić jakość obrazu powiększając rozmiar pliku. Przycisk "Podgląd"
umożliwia podejrzenie zmian, powodowanych suwakiem "Jakość". Oczywiście należy dążyć do jak najmniejszych
plików. Zazwyczaj ustawienie suwaka jakości około 50 - 70 procent daje optymalny efekt. Włączmy również opcję
"Przyrostowy" oraz "Optymalizacja". Dzięki przyrostowemu zapisowi nasz obraz będzie zajmował na stronie WWW
stały rozmiar nawet, jeśli nie został jeszcze wczytany do końca.
Strona 8
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
Rysunek 6. Okno dialogowe "Zapis jako JPEG"
Drugą miniaturkę wykonujemy identycznie jak pierwszą, zmieniając jedynie nową szerokość obrazu na 200.
2.2 Ćwiczenie 2
W drugim zajmiemy się przygotowaniem piętnastu miniatur. Dane do ćwiczenia stanowi piętnaście plików o
nazwach
cw01.jpg
,
cw02.jpg
, ...,
cw15.jpg
o wymiarach 400x300. Ilustracje przedstawiają przykładowe
konfiguracje sieci ethernet. Przygotuj piętnaście miniatur o wymiarach 100x75 pikseli i zapisz je w folderze o nazwie
100x75.
Strona 9
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
Rysunek 7. Ćwiczenie 2
Ć
wiczenie wykonujemy następująco. Rozpoczynamy od utworzenia folderu o nazwie 100x75. Następnie kolejno
otwieramy każdy z rysunków i skalujemy do rozmiaru 100x75, po czym przeskalowany obraz zapisujemy do pliku.
Ć
wiczenia pierwsze i drugie zapoznały nas z otwieraniem i zapisywaniem obrazów w formacie JPEG,
powiększaniem i pomniejszaniem obrazów, a także z operacją skalowania. Nauczyliśmy się także posługiwać menu
kontekstowym.
3. Kadrowanie oraz zmiana rozmiaru obrazów
Drugą dość podstawową umiejętnością związaną z obróbką plików graficznych jest przygotowywanie obrazów o
zadanych rozmiarach.
3.1 Ćwiczenie 3
Naszym zadaniem jest wycięcie fragmentów ilustracji. Dysponujemy plikiem o nazwie
zolty.jpg
(wymiary
200x267) przedstawiającym żółty kwiat. Należy utworzyć następujące pliki:
zolty-120-200.jpg
o wymiarach
120x200,
zolty-150-100.jpg
o wymiarach 150x100,
zolty-150-150.jpg
o wymiarach 150x150,
zolty-
Strona 10
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
200-30.jpg
o wymiarach 200x30 oraz
zolty-20-267.jpg
o wymiarach 20x267. Każdy z nowych plików ma
przedstawiać fragment oryginalnego zdjęcia z pliku
zolty.jpg
.
Rysunek 8. Okno dialogowe "Informacje o kadrowaniu i zmianie rozmiaru"
Wykonanie ćwiczenia rozpoczynamy od odczytania pliku
zolty.jpg
(opcja
Plik | Otwórz
). Następnie z menu
kontekstowego obrazu wybieramy opcję
Narzędzia | Przekształcenie | Kadrowanie i zmiana
rozmiaru
. Po wybraniu opcji na ekranie powinno pojawić się okno dialogowe
Informacje o kadrowaniu i
zmianie rozmiaru
, zaś w oknie, w którym wyświetlany jest obraz
zolty.jpg
pojawią się cztery czarne
kwadraciki służące do wyboru obszaru obrazu. Kwadraciki lewy dolny i prawy górny umożliwiają przesuwanie
selekcji, zaś kwadraciki lewy górny i prawy dolny - zmianę jej rozmiarów. Rozmiar i umiejscowienie wybranego
fragmentu możemy również modyfikować wprowadzając wartości liczbowe w oknie dialogowym. Jeśli zależy nam
na konkretnym rozmiarze uzyskiwanego obrazu to należy w oknie dialogowym wpisać żądane wielkości szerokości i
wysokości, po czym korzystając z narożników do przesuwania odpowiednio umiejscowić selekcję.
Strona 11
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
Rysunek 9. Obraz zolty.jpg podczas kadrowania
Gdy selekcja jest gotowa naciskamy przycisk
Zmień rozmiar
(okno
Informacje o kadrowaniu ...
). Po
naciśnięciu przycisku rozmiar i zawartość obrazu ulegną zmianie. Tak uzyskany obraz zapisujemy i zamykamy.
Opisaną procedurę powtarzamy dla każdych zadanych wymiarów.
Opisana metoda umożliwia nam uzyskanie obrazu o dowolnych wymiarach i proporcjach. Oczywiście, jeśli z obrazu
prostokątnego 800x600 pikseli utworzymy kwadrat o rozmiarach 100x100 to musi się to odbyć albo kosztem
fragmentu rysunku albo jego proporcji!
3.2 Ćwiczenie 4
Strona 12
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
Dysponując czterema zdjęciami o wymiarach 320x240 przedstawiającymi kwiaty i owoce przygotuj kwadratowe
miniaturki (cztery sztuki) o rozmiarach 80x80. Miniaturki przygotuj w taki sposób, by zawierały najbardziej
atrakcyjny fragment dużej fotografii, na przykład kwiatek, porzeczkę. Nie zmieniaj proporcji obrazu.
Rysunek 10. Efekt wykonania ćwiczenia 4
Ć
wiczenie to, bazuje na ćwiczeniu pierwszym i trzecim. Należy najpierw z każdego zdjęcia wyciąć kwadrat
(wizualnie atrakcyjny o dowolnych wymiarach np. 149x149). Następnie wycięte kwadraty należy przeskalować do
rozmiaru 80x80. W ten sposób uzyskamy kwadratowe miniaturki.
3.3 Ćwiczenie 5
Dysponując czterema zdjęciami 300x400 przedstawiającymi drzewa, utwórz miniaturki o wymiarach 75x100.
Strona 13
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
Rysunek 11. Efekt wykonania ćwiczenia 5
Wykonanie ćwiczenia przebiega niemal identycznie jak wykonanie ćwiczenia 4. Kolejno otwieramy każdą fotografię,
wycinamy ciekawy fragment o zadanych wymiarach i zapisujemy. Jeśli interesujący nas fragment obrazu jest zbyt
duży (większy niż 75x100) pikseli, to na początku skalujemy obraz do takich rozmiarów, by dany fragment mieścił
się w prostokącie o wymiarach 75x100. W przypadku, gdy przeskalujemy obraz i nie jesteśmy zadowoleni z wyniku
tej operacji, należy użyć opcji
Edycja | Cofnij
o skrócie klawiszowym Ctrl+Z.
4. Obrazy czarno-białe i jednobarwne
Ilustracje wykonywane programem GIMP mogą być kolorowe lub czarno białe. Ilustrację kolorową możemy
zamienić na czarno białą wykonując operację
Obraz | Tryb | Odcienie szarości
. Po wykonaniu operacji
obraz straci kolory. Jeśli teraz zapiszemy otrzymany obraz, wówczas będzie on czarno-biały.
Strona 14
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
Obraz czarno-biały możemy przekształcić w obraz "jednobarwny". Należy w tym celu otworzyć uprzednio zapisany
obraz czarno-biały, zmienić jego tryb na RGB (opcja
Obraz | Tryb | RGB
), a następnie stosując okno dialogowe
"Balans kolorów" (opcja
Obraz
) ustawić odpowiednie barwy obrazu.
Rysunek 12. Okno dialogowe "Balans kolorów"
4.1 Ćwiczenie 6
Dany jest plik
zachod.jpg
o rozmiarach 150x200 przedstawiający kolorową fotografię zachodu słońca. Utwórz
plik
bw-zachod.jpg
przedstawiający tę samą fotografię w wersji czarno-białej. Następnie utwórz pliki
brazawy-zachod.jpg
,
zielony-zachod.jpg
,
czerwony-zachod.jpg
,
niebieski-zachod.jpg
przedstawiające tą samą fotografię w kolorystyce brązowej, zielonej, czerwonej oraz niebieskiej odpowiednio.
Strona 15
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
Rysunek 13. Ćwiczenie 6
Ć
wiczenie rozpoczynamy od wykonania obrazu czarno-białego. Otwieramy plik
zachod.jpg
, zmieniamy tryb na
odcienie szarości i zapisujemy otrzymany obraz w pliku
bw-zachod.jpg
. Kolejne obrazy wykonujemy
następująco. Otwieramy obraz czarno-biały, zmieniamy tryb na RGB, w okienku dialogowym
Balans kolorów
ustawiamy odpowiedni odcień obrazu, po czym uzyskany obraz zapisujemy.
4.2 Ćwiczenie 7
Dysponując obrazem
zaglowki.jpg
o rozmiarach 80x533 przedstawiającym kilka żaglówek, przygotuj osiem
obrazów o nazwach
zaglowki-1.jpg
, ...,
zaglowki-8.jpg
przedstawiających wycinek obrazu
zaglowki.jpg
. Każdy wycinek ma prezentować ten sam fragment obrazu oryginalnego. Wszystkie wycinki mają
mieć rozmiar 150x150. Przygotowane obrazy mają się różnić odcieniem.
Strona 16
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
Rysunek 14. Ćwiczenie 7
Ć
wiczenie siódme wykorzystuje umiejętność skalowania obrazu poznaną w ćwiczeniu 3 oraz przygotowywanie
ilustracji jednobarwnych z ćwiczenia 6. Wykonanie ćwiczenia rozpoczynamy od wycięcia fragmentu 150x150 z
ilustracji oryginalnej. Następnie obraz o rozmiarach 150x150 przekształcamy w tryb odcienie szarości i zapisujemy
do pliku. Kilkukrotnie otwieramy plik czarno-biały, zmieniamy tryb na RGB, zmieniamy odcień i zapisujemy.
5. Wygładzanie brzegu obrazu
Kolejnym efektem, jaki opanujemy będzie wygładzanie brzegu obrazu. Efekt ten przede wszystkim zapozna nas z
narzędziem selekcji. W programie GIMP aktywnym obszarem jest fragment wybrany przy pomocy narzędzi selekcji.
Narzędzi selekcji jest kilka (selekcja prostokątna, eliptyczna czy z wolnej ręki). Wszelkie operacje edytorskie, takie
jak rysowanie po obrazie czy wlewanie farby działają w stosunku do wybranego obszaru. Efekt jest taki, że farba
"wlewana" w obraz wypełnia jedynie obszary objęte selekcją. Najprostszym przykładem selekcji jest wybranie całego
Strona 17
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
obrazu (opcja
Zaznaczenie | Wszystko
). Wówczas możemy rysować po dowolnym fragmencie obrazu.
Selekcję możemy zmniejszyć. Służy do tego opcja
Zaznaczenie | Zmniejsz
. Zmniejszając selekcję podajemy
liczbę pikseli, o jaką selekcja ma zostać pomniejszona. Opcja
Zaznaczenie | Odwróć
umożliwia zmianę
obszaru zaznaczonego tak, by to, co było zaznaczone stało się niezaznaczone, zaś obszar uprzednio niezaznaczony
stał się zaznaczony. Wreszcie operacja
Zaznaczenie | Wygładź zaznaczenie
wygładza zaznaczenie.
Wykorzystując powyższe operacje dotyczące zaznaczenia oraz operację wypełniania kolorem możemy brzeg rysunku
zalać farbą w taki sposób, by krawędź była płynnie wtopiona w tło.
5.1 Ćwiczenie 8
Przekształć ilustrację zapisaną w pliku
zachod-1.jpg
w taki sposób, by brzeg ilustracji płynnie przechodził w
biały kolor.
Rysunek 15. Ćwiczenie 8
Rozpoczynamy otwierając obraz
zachod-1.jpg
. Po otwarciu zaznaczamy cały obraz. Wykorzystujemy do tego
operację
Zaznaczenie | Wszystko
. Warto zapamiętać skrót klawiszowy Ctrl+A. Następnie zmniejszamy
zaznaczenie o 20 pikseli: opcja
Zaznaczenie | Zmniejsz
. Teraz odwracamy zaznaczenie:
Zaznaczenie |
Odwróć
(skrót klawiszowy Ctrl+I). Wreszcie wygładzamy zaznaczenie:
Zaznaczenie | Wygładź
. Podajmy
promień wygładzania 20. Teraz należy uzyskane zaznaczenie zalać białą farbą wykorzystując opcję
Wypełnianie
kubełkiem
dostępną w menu kontekstowym obrazu
Narzędzia | Rysowanie
. Kolor wypełnienia zmieniamy
Strona 18
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
na biały stosując
Kolor narzędzia i tła
- przyciski dostępne w lewym dolnym rogu okna głównego GIMPa.
Uzyskany obraz zapisujemy do pliku.
5.2 Ćwiczenie 9
Dane są cztery zdjęcia zachodów słońca. Przygotuj kwadratowe (200x200) ilustracje zawierające fragmenty zdjęć
oryginalnych. Przygotowane ilustracje powinny mieć wygładzone krawędzie.
Rysunek 24. Zachody słońca
Ć
wiczenie to opiera się o poprzednio wykonane ćwiczenia związane ze skalowaniem i zmianą rozmiaru obrazu.
Prace rozpoczynamy przygotowując obrazy kwadratowe. Następnie, każdy obraz przekształcamy według metody
opisanej w ćwiczeniu 8.
5.3 Ćwiczenie 10
Dane jest zdjęcie o rozmiarach 600x400 przedstawiające kwiat. Przygotuj dwie kwadratowe miniaturki (100x100) o
wygładzonych krawędziach. Przygotowane ilustracje powinny być jednobarwne.
Strona 19
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
Rysunek 16. Ćwiczenie 10 łączy wszystkie poznane do tej pory umiejętności
Ć
wiczenie to łączy wszystkie do tej pory poznane efekty. W celu wykonania ćwiczenia należy kolejno:
otworzyć obraz oryginalny,
wyciąć z obrazu oryginalnego interesujący nas kwadratowy fragment (dowolnych rozmiarów; np. 250x250),
przeskalować otrzymany obraz kwadratowy do rozmiaru 100x100,
wykonać płynny brzeg obrazu
zaznaczyć cały obraz,
zmniejszyć zaznaczenie,
odwrócić zaznaczenie,
wygładzić zaznaczenie,
wlać farbę koloru tła (np. białą) w zaznaczenie,
przekształcić obraz w czarno-biały i zapisać.
Dysponując czarno-białym kwadratem przygotowujemy dwa końcowe rysunki. Należy dwukrotnie wykonać poniższe
kroki:
Strona 20
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
otworzyć obraz czarno-biały,
przekształcić obraz w kolorowy i odpowiednio ustawić odcień rysunku,
zapisać otrzymany obraz.
6. Obrazy rzucające cień
Kolejny etap naszej pracy w GIMPie wzbogaci nasze ilustracje o cień. Jest to bardzo często spotykany efekt.
Wykonanie tego efektu jest stosunkowo skompilowane, bo wymaga znajomości warstw. Każdy obraz otwarty w
programie GIMP składa się z warstw. Domyślnie, obraz po otwarciu posiada jedną warstwę (obraz w formacie
JPEG). Jeśli otworzony obraz poddamy efektowi rzucania cienia (z menu kontekstowego należy wybrać
Script-Fu
| Cień | Rzucany cień
) wówczas cień dodany do naszego rysunku zostanie umieszczony na osobnej warstwie.
Przed zapisaniem obrazu do pliku musimy dodać do obrazu warstwę białą (ewentualnie o innym kolorze - będzie to
kolor tła rysunku), przesunąć ją na spód i połączyć wszystkie warstwy. W ten sposób nasz obraz znowu stanie się
płaski, zaś jego fragmenty niewypełnione staną się białe. Warstwami obrazu zarządzamy poprzez okno dialogowe
Warstwy, kanały i ścieżki
dostępne w menu kontekstowym (
Warstwy | Warstwy, kanały i ścieżki
)
.
Strona 21
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
Rysunek 17. Okno dialogowe "Script-FU: Cień/Rzucany cień"
Rysunek 18. Okno zarządzające warstwami
Nowe warstwy do obrazu dodajemy przyciskiem
Nowa warstwa
. Kolejność warstw natomiast zmieniamy
przyciskami
Obniża warstwę
lub
Podnosi warstwę
. Przyciski
Obniża warstwę
,
Podnosi warstwę
oraz
Nowa warstwa
są dostępne w oknie dialogowym
Warstwy, kanały i ścieżki
.
Strona 22
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
Rysunek 19. Okno dialogowe "Opcje nowej warstwy"
W celu połączenia wszystkich warstw obrazu w jedną warstwę należy wybrać opcję
Warstwy | Spłaszcz obraz
z menu kontekstowego obrazu.
6.1 Ćwiczenie 11
Dane są dwa obrazy:
maszyny-1.jpg
,
pociag-1.jpg
. Dodaj do obrazów efekt rzucanego cienia.
Strona 23
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
Rysunek 23. Ilustracja rzucająca cień
Bezpośrednio po otwarciu obrazu wykonaj operację
Script-Fu | Cień | Rzucany cień
. Wywołanie tej opcji
spowoduje wyświetlenie okna dialogowego
Script-Fu: Cień/Rzucany cień
. W oknie tym ustawiamy
parametry cienia, po czym naciskamy przycisk OK. Uzyskany obraz będzie się składał z dwóch warstw. By się o tym
przekonać należy wyświetlić okno dialogowe
Warstwy, kanały, ścieżki
(opcja
Warstwy | Warstwy,
kanały i ścieżki
menu kontekstowego obrazu). W oknie warstw dodajemy do obrazu nową warstwę. Służy do
tego przycisk:
Nowa warstwa
. Niech nowa warstwa będzie biała. Decyduje o tym przycisk
typ
wypełnienia warstwy
okna właściwości nowej warstwy. Może się okazać, że teraz nasz obraz jest cały biały.
Jeśli biała warstwa znajduje się na górze, to będzie ona przysłaniała wszystkie inne warstwy. Oczywiście warstwy
możemy dowolnie przesuwać do dołu i do góry. Służą do tego przyciski
Obniża warstwę
oraz
Podnosi
warstwę
dostępne w oknie
Warstwy, kanały i ścieżki
. Przesuńmy białą warstwę na spód, a następnie
scalmy wszystkie widoczne warstwy (opcja
Warstwy | Spłaszcz obraz
). Po połączeniu warstw zapisujemy
obraz do pliku. Wykonanie drugiej ilustracji przebiega identycznie.
6.2 Ćwiczenie 12
Znajdź w Internecie dwa zdjęcia samochodów i jedno zdjęcie samolotu. Przekształć tak każdy z danych obrazów, by
przedstawiał wyłącznie samolot lub samochód. Każdy z uzyskanych obrazów przyozdób cieniem.
Strona 24
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
Rysunek 20. Ćwiczenie 12. Dodajemy cień do kilku wyciętych ilustracji
Ć
wiczenie to wymaga wycięcia fragmentu rysunku (to ćwiczyliśmy w ćwiczeniu trzecim). Następnie należy
otrzymany obraz przyozdobić cieniem sposobem opisanym w zadaniu 11.
7. Połączenie poznanych operacji
Dzisiejsze spotkanie z GIMPem zapoznało nas z podstawowymi operacjami, jakie grafik komputerowy musi umieć
wykonać na obrazie takie jak skalowanie, zmiana rozmiarów czy kolorów obrazu. Tabela 1 przedstawia listę
wszystkich operacji.
lp.
Funkcja
Opcja menu
Klawisz
skrótu
Strona 25
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
1.
Otwieranie obrazu:
Plik | Otwórz
Ctrl-O
2.
Zapisywanie obrazu:
Plik | Zapisz
Ctrl-S
3.
Powiększanie obrazu:
Widok | Powiększ
=
4.
Pomniejszanie obrazu:
Widok | Pomniejsz
-
5.
Skalowanie obrazu:
Obraz | Przeskaluj obraz
6.
Kadrowanie, zmiana
rozmiaru:
Narzędzia | Przekształcenie | Kadrowanie lub zmiana rozmiaru
obrazu
Ctrl-C
7.
Zamiana obrazu w czarno-
biały:
Obraz | Tryb | Odcienie szarości
Alt-G
8.
Zamiana obrazu w kolorowy: Obraz | Tryb | RGB
Alt-R
9.
Balans kolorów:
Obraz | Kolory | Balans kolorów
10. Zaznaczenie całego obrazu:
Zaznaczenie | Wszystko
Ctrl-A
11. Zmniejszanie zaznaczenia:
Zaznaczenie | Zmniejsz
12. Odwrócenie zaznaczenia:
Zaznaczenie | Odwróć
Ctrl-I
13. Wygładzanie zaznaczenia:
Zaznaczenie | Wygładź zaznaczenie
14. Wypełnianie kubełkiem:
Narzędzia | Rysowanie | Wypełnianie kubełkiem
15. Rzucanie cienia:
Script-Fu | Cień | Rzucany cień
16.
Zarządzanie warstwami
obrazu:
Warstwy | Warstwy, kanały i ścieżki
17. Dodawanie nowej warstwy:
Nowa warstwa (okno "Warstwy, kanały i ścieżki")
18. Spłaszczenie obrazu:
Warstwy | Spłaszcz obraz
Tabela 1. Poznane funkcje programu GIMP
Warto również pamiętać, że uaktywnienie menu kontekstowego obrazu osiągniemy klikając prawym przyciskiem
myszy w rysunek.
Strona 26
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
Na zakończenie wykonajmy samodzielnie dwa ćwiczenia wykorzystujące wszystkie poznane możliwości programu
GIMP.
7.1 Ćwiczenie 13
Znajdź w Internecie cztery dowolne fotografie zwierząt, a następnie wykonaj na nich efekty widoczne na rysunku 21.
Każda ilustracja ma posłużyć do przygotowania dwóch plików. Pierwszy z nich jest kwadratem o wymiarach
400x400 pikseli. Rysunek ma rzucać cień. Drugi z rysunków ma być jednobarwna miniaturką o wymiarach 100x100
o rozmytym brzegu.
Rysunek 21. Ćwiczenie 13 pt. "Zwierzęta" łączy wszystkie poznane efekty
Strona 27
GIMP: tworzenie grafiki na potrzeby WWW (część 1)
2008-02-27 19:46:06
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html
7.2 Ćwiczenie 14
Przygotuj siedem ilustracji dotyczących środków komunikacji. Wyszukaj w Internecie pliki przedstawiające okręt,
rakietę, itd. Każdy rysunek przekształć, by był kwadratową, jednobarwną miniaturką 150x150.
Rysunek 22. Ćwiczenie 14 pt. "Transport"