GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 1
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
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 2
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.
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 3
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.jpgo 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 kwiatek-200.jpg
oraz .
Plik |
Ćwiczenie rozpoczynamy od wczytania zdjęcia z pliku kwiatek.jpg. Słu\
y do tego opcja menu głównego
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
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 4
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 Widok | Pomniejsz dostępne w menu kontekstowym obrazu. W celu wyświetlenia menu
oraz
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%).
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 5
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 Zapisz jako... w menu głównym GIMPa.
lub
Podobnie jak i poprzednio wykonywane przez nas operacje opcje związane z zapisem obrazu są dostępne w menu
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 6
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 nazwykwiatek-400.jpgspowoduje 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
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 7
Rysunek 5.
Okno dialogowe "Zapis obrazu"
Po podaniu nazwykwiatek-400.jpgi 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.
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 8
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
nazwachcw01.jpg, cw02.jpg, ..., cw15.jpgo 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.
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 9
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.jpgo wymiarach
120x200, zolty-150-100.jpgo wymiarach 150x100, zolty-150-150.jpgo wymiarach 150x150, zolty-
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 10
o wymiarach 200x30 oraz o wymiarach 20x267. Ka\
dy z nowych plików ma
200-30.jpg zolty-20-267.jpg
przedstawiać fragment oryginalnego zdjęcia z pliku zolty.jpg.
Rysunek 8.
Okno dialogowe "Informacje o kadrowaniu i zmianie rozmiaru"
Plik | Otwórz
Wykonanie ćwiczenia rozpoczynamy od odczytania pliku zolty.jpg(opcja ). Następnie z menu
kontekstowego obrazu wybieramy opcję Narzędzia | Przekształcenie | Kadrowanie i zmiana
rozmiaru Informacje o kadrowaniu i
. Po wybraniu opcji na ekranie powinno pojawić się okno dialogowe
zmianie rozmiaru pojawią się cztery czarne
, zaś w oknie, w którym wyświetlany jest obraz zolty.jpg
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ę.
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 11
Rysunek 9.
Obraz zolty.jpg podczas kadrowania
Gdy selekcja jest gotowa naciskamy przycisk Zmień rozmiar Informacje o kadrowaniu ...
(okno ). 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
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 12
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.
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 13
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
Obraz | Tryb | Odcienie szarości
zamienić na czarno białą wykonując operację . Po wykonaniu operacji
obraz straci kolory. Jeśli teraz zapiszemy otrzymany obraz, wówczas będzie on czarno-biały.
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 14
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.jpgo 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.
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 15
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 obrazemzaglowki.jpgo 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.
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 16
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
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 17
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ładz
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ędz
była płynnie wtopiona w tło.
5.1 Ćwiczenie 8
Przekształć ilustrację zapisaną w pliku zachod-1.jpgw taki sposób, by brzeg ilustracji płynnie przechodził w
biały kolor.
Rysunek 15.
Ćwiczenie 8
Rozpoczynamy otwierając obrazzachod-1.jpg. Po otwarciu zaznaczamy cały obraz. Wykorzystujemy do tego
Zaznaczenie | Wszystko
operację . Warto zapamiętać skrót klawiszowy Ctrl+A. Następnie zmniejszamy
zaznaczenie o 20 pikseli: opcja Zaznaczenie | Zmniejsz Zaznaczenie |
. Teraz odwracamy zaznaczenie:
Odwróć Zaznaczenie | Wygładz

(skrót klawiszowy Ctrl+I). Wreszcie wygładzamy zaznaczenie: . Podajmy
promień wygładzania 20. Teraz nale\
y uzyskane zaznaczenie zalać białą farbą wykorzystując opcję Wypełnianie
kubełkiem Narzędzia | Rysowanie
dostępną w menu kontekstowym obrazu . Kolor wypełnienia zmieniamy
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 18
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.
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 19
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:
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 20
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
.
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 21
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ę Podnosi warstwę Obniża warstwę Podnosi warstwę
lub . Przyciski ,
oraz Nowa warstwa są dostępne w oknie dialogowym Warstwy, kanały i ścieżki
.
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 22
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.
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 23
Rysunek 23.
Ilustracja rzucająca cień
Bezpośrednio po otwarciu obrazu wykonaj operację Script-Fu | Cień | Rzucany cień
. Wywołanie tej opcji
Script-Fu: Cień/Rzucany cień
spowoduje wyświetlenie okna dialogowego . 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
Warstwy, kanały, ścieżki Warstwy | Warstwy,
przekonać nale\
y wyświetlić okno dialogowe (opcja
kanały i ścieżki menu kontekstowego obrazu). W oknie warstw dodajemy do obrazu nową warstwę. Słu\
y do
Nowa warstwa typ
tego przycisk: . Niech nowa warstwa będzie biała. Decyduje o tym przycisk
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ę Podnosi
oraz
warstwę Warstwy, kanały i ścieżki
dostępne w oknie . 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
Znajdz
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.
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 24
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.
Klawisz
lp. Funkcja Opcja menu
skrótu
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 25
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
Kadrowanie, zmiana Narzędzia | Przekształcenie | Kadrowanie lub zmiana rozmiaru
6. Ctrl-C
rozmiaru: obrazu
Zamiana obrazu w czarno-
7. Obraz | Tryb | Odcienie szarości Alt-G
biały:
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ładz
zaznaczenie
14. Wypełnianie kubełkiem: Narzędzia | Rysowanie | Wypełnianie kubełkiem
15. Rzucanie cienia: Script-Fu | Cień | Rzucany cień
Zarządzanie warstwami
16. Warstwy | Warstwy, kanały i ście\
ki
obrazu:
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.
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 26
Na zakończenie wykonajmy samodzielnie dwa ćwiczenia wykorzystujące wszystkie poznane mo\
liwości programu
GIMP.
7.1 Ćwiczenie 13
Znajdz
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
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06
GIMP: tworzenie grafiki na potrzeby WWW (część 1) Strona 27
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"
http://www.gajdaw.pl/gimp/kurs-podstawy/print.html 2008-02-27 19:46:06