GIMP: tworzenie grafiki na potrzeby WWW (czêœæ 1)

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

Otwieranie obrazu:

Plik | Otwórz

Ctrl-O

Zapisywanie obrazu:

Plik | Zapisz

Ctrl-S

Powiększanie obrazu:

Widok | Powiększ

Pomniejszanie obrazu:

Widok | Pomniejsz

Skalowanie obrazu:

Obraz | Przeskaluj obraz

Kadrowanie, zmiana

rozmiaru:

Narzędzia | Przekształcenie | Kadrowanie lub zmiana rozmiaru

obrazu

Ctrl-C

Zamiana obrazu w czarno-

biały:

Obraz | Tryb | Odcienie szarości

Alt-G

Zamiana obrazu w kolorowy: Obraz | Tryb | RGB

Alt-R

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