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

Strona 1

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

GIMP: tworzenie grafiki na potrzeby WWW

(część 2)

Włodzimierz Gajda

Drugie spotkanie z GIMPem poświęcimy selekcjom, linijkom i prowadnicom. Linijki i prowadnice pomagają w

precyzyjnym umiejscowieniu elementów rysunku, natomiast selekcje umoŜliwiają wykonywanie operacji edytorskich

na fragmentach rysunków.

1 stycznia 2004 r.

Spis treści

1. Narzędzia selekcji obszaru

2. Zaznaczanie obszaru

2.1 Ćwiczenie 1

2.2 Ćwiczenie 2

3. Suma, róŜnica oraz część wspólna zaznaczonych obszarów

3.1 Ćwiczenie 3

3.2 Ćwiczenie 4

3.3 Ćwiczenie 5

3.4 Ćwiczenie 6

4. Linijki i prowadnice

4.1 Ćwiczenie 7

4.2 Ćwiczenie 8

5. Modyfikacja kształtu selekcji

5.1 Ćwiczenie 9

Strona 2

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

5.2 Ćwiczenie 10

6. Podsumowanie

1. Narzędzia selekcji obszaru

Narzędzia selekcji obszaru słuŜą do wskazania fragmentu rysunku, na którym będą wykonywane operacje edytorskie.

Kopiowanie fragmentów, wypełnianie farbą, malowanie pędzlem, rozmywanie, rzucanie cienia - te i wiele innych

operacji dotyczy wybranego fragmentu obrazu. Umiejętność zaznaczenia konkretnego obszaru rysunku warunkuje

efektywność naszej pracy z programem GIMP.

W poprzednim odcinku nauczyliśmy się zaznaczać cały rysunek (opcja: "Zaznaczenie -> Wszystko"). Operacją

odwrotną jest usunięcie zaznaczenie: "Zaznaczenie -> Brak". Skróty klawiszowe Ctrl-A oraz Ctrl-Shift-A słuŜą do

zaznaczenia całego rysunku oraz do usunięcia zaznaczenia.

2. Zaznaczanie obszaru

Narzędzia słuŜące do zaznaczania obszaru są dostępne w oknie głównym programu GIMP. Jest to pierwsza seria

przycisków, słuŜąca do wykonywania następujących czynności:

zaznaczanie prostokątnych obszarów (klawisz skrótu: r)

zaznaczanie eliptycznych obszarów (klawisz skrótu: e)

odręczne zaznaczanie obszarów (klawisz skrótu: f)

zaznaczanie sąsiadujących obszarów (klawisz skrótu: z)

PowyŜsze opcje znajdziemy równieŜ w menu podręcznym rysunku. Na przykład zaznaczenie prostokątne

uaktywnimy klikając: "Narzędzia -> Zaznaczenie -> Zaznaczenie prostokątne", zaś zaznaczenie eliptyczne

"Narzędzia -> Zaznaczenie -> Zaznaczenie eliptyczne". Warto zapamiętać skróty klawiszowe wymienione powyŜej:

r, e, f oraz z.

2.1 Ćwiczenie 1

Strona 3

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

Przygotuj ilustrację o wymiarach 256x256 przedstawiającą czerwony prostokąt, zielony owal oraz niebieski rysunek

w kształcie liścia.

wiczenie rozpoczynamy od utworzenia nowego, pustego rysunku (opcja "Plik -> Nowy"). Następnie wybieramy

narzędzie "Zaznaczenie prostokątne". Korzystając z metody ciągnij-upuść rozciągamy wewnątrz rysunku prostokąt.

Widoczny prostokąt jest aktywnym obszarem rysunku. Jeśli teraz uŜyjemy narzędzia do wypełniania kolorem lub

deseniem ("Narzędzia -> Rysowanie -> Wypełnianie kubełkiem"), wówczas wlany kolor wypełni wyłącznie

zaznaczony przez nas prostokąt. Kolor narzędzia "Wypełnianie kolorem lub deseniem" ustalamy wykorzystując

kontrolki "Kolor narzędzia i tła" dostępne w lewym dolnym rogu okna programu GIMP.

Po ustaleniu koloru czerwonego klikamy w zaznaczony prostokąt. Prostokąt powinien zostać wypełniony kolorem

czerwonym.

Następnie zmieniamy narzędzie na "Zaznaczenie eliptycznych obszarów". Zaznaczamy na rysunku elipsę, zmieniamy

kolor wypełnienia na zielony, włączamy narzędzie "Wypełnianie kolorem lub deseniem" i klikamy w elipsę.

Powinniśmy otrzymać zieloną elipsę.

Ostatni etap pracy to odręczne narysowane liścia. Włączamy narzędzie "Odręczne zaznaczanie obszarów", po czym

rysujemy listek. Ponownie zmieniamy kolor wypełnienia na niebieski, uaktywniamy narzędzie "Wypełnianie kolorem

lub deseniem" i klikamy w listek. Efekt naszej pracy przedstawiono na rysunku 1.

Strona 4

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

Rysunek 1. UŜycie narzędzi do selekcji prostokątnej, eliptycznej i odręcznej

Podczas korzystania z narzędzi do selekcji prostokątnej oraz eliptycznej bardzo waŜne są klawisze Shift oraz Ctrl.

Klawisze te posiadają podwójne znaczenie, co często doprowadza początkujących uŜytkowników do frustracji. Po

pierwsze klawisze te umoŜliwiają tworzenie obszarów kwadratowych i okrągłych, po drugie słuŜą do tworzenia sumy

obszarów, róŜnicy i części wspólnej. O działaniu klawiszy Shift oraz Ctrl decyduje moment ich naciśnięcia. Jeśli

najpierw naciśniemy klawisz myszki, a później klawisz Shift lub Ctrl wówczas zmieniamy kształt zaznaczenia

(zamiast prostokąta otrzymamy kwadrat; zamiast elipsy otrzymamy koło). Jeśli natomiast najpierw naciśniemy

klawisz Shift lub Ctrl, a dopiero później klawisz myszki, wówczas tworzymy sumę lub róŜnicę zaznaczeń.

Zapamiętajmy zatem, Ŝe klawisze Ctrl oraz Shift słuŜą zarówno do tworzenia sumy, róŜnicy, części wspólnej

zaznaczeń jak i do modyfikacji kształtu selekcji.

2.2 Ćwiczenie 2

Strona 5

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

Przygotuj ilustrację o wymiarach 256x256 przedstawiającą dwa kwadraty, prostokąt oraz dwa koła i elipsę

wypełnione dowolnym kolorem.

Po utworzeniu nowego rysunku, tworzymy selekcję kwadratową. W tym celu wybieramy narzędzie do selekcji

prostokątnej. Zaznaczamy dowolny kształt prostokątny, a następnie (ciągle trzymając klawisz myszki) naciskamy

klawisz Shift i przesuwamy myszkę. Wybrany obszar powinien przybrać kształt kwadratu. Tak zaznaczony obszar

wypełniamy dowolnym kolorem farby.

Następnie ponownie wybieramy narzędzie do selekcji prostokątnej i zaznaczamy dowolny prostokąt. Trzymając

jeszcze klawisz myszki naciskamy klawisz Ctrl. Kształt prostokąta zostanie tak zmodyfikowany, Ŝe jego środek

cięŜkości wypadnie w miejscu wskazywanym przez myszkę podczas rozpoczęcia operacji zaznaczania. Uzyskany

obszar wypełniamy dowolnym kolorem.

Ponownie zmieniamy narzędzie na selekcję prostokątną. Tym razem, podczas zaznaczania obszaru prostokątnego

naciskamy oba klawisze: Ctrl oraz Shift. Zaznaczany obszar powinien przyjąć kształt kwadratu, zaś jego środek

powinien wypadać w punkcie początkowo wskazywanym przez myszkę. Zaznaczony kwadrat wypełniamy

dowolnym kolorem.

Klawisze Ctrl oraz Shift w podobny sposób modyfikują działanie narzędzia do selekcji eliptycznej. Naciskając Shift

uzyskamy obszar okrągły. Klawisz Ctrl zmienia środek elipsy. Nowym środkiem staje się punkt, od którego

rozpoczęliśmy zaznaczenie obszaru. Oczywiście podobnie jak w przypadku selekcji prostokątnej moŜemy nacisnąć

równocześnie klawisze Shift oraz Ctrl. Uzyskamy wówczas koło o zadanym środku.

UWAGA: naleŜy pamiętać, by najpierw rozpocząć operację zaznaczania obszaru (tj. najpierw nacisnąć lewy klawisz

myszki), a dopiero później nacisnąć klawisze Shift lub Ctrl.

Wykorzystując opisane działanie klawiszy Ctrl oraz Shift w stosunku do selekcji eliptycznej kończymy ćwiczenie 2

rysując dwa koła i jedną elipsę.

Strona 6

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

Rysunek 2. Klawisze Shift oraz Ctrl umoŜliwiają selekcję kwadratów i kół, oraz zmianę środka zaznaczanego

obszaru

3. Suma, róŜnica oraz część wspólna zaznaczonych obszarów

Poznane przez nas przed chwilą klawisze Ctrl oraz Shift posiadają jeszcze jedną waŜną funkcję. UmoŜliwiają

tworzenie złoŜonych obszarów składających się z wielu okręgów czy kwadratów. Klawisz Shift umoŜliwia tworzenie

sumy zaznaczeń, klawisz Ctrl słuŜy do wykonania róŜnicy zaznaczeń. Naciśnięcie obydwu klawiszy Ctrl oraz Shift

spowoduje wykonanie operacji części wspólnej na zaznaczeniach.

W celu wykonania jednej z powyŜszych operacji naleŜy najpierw nacisnąć klawisze Shift lub Ctrl a dopiero potem

nacisnąć klawisz myszki. Po rozpoczęciu przesuwania myszki moŜemy juŜ klawisze Ctrl oraz Shift puścić, gdyŜ w

tym momencie ich przytrzymanie modyfikuje kształt zaznaczenia (otrzymujemy koło lub kwadrat).

3.1 Ćwiczenie 3

Strona 7

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

Wykonaj rysunek prezentujący krzyŜyk, oraz drabinkę. Rysunek wykonaj wykorzystując operacje sumy oraz róŜnicy

zaznaczeń prostokątnych.

Rysunek 3. Suma i róŜnica zaznaczeń prostokątnych

Po utworzeniu nowego rysunku zaznaczamy prostokątny obszar, który będzie stanowił belkę krzyŜa. Gdy na rysunku

jest widoczne zaznaczenie prostokątne, natomiast aktywnym narzędziem jest selekcja prostokątna naciskamy klawisz

Shift. Jeśli teraz poruszymy wskazówką myszki (bez naciskania przycisku), wówczas obok wskaźnika myszki

powinien się pojawić znak plus. Trzymając klawisz Shift zaznaczamy obszar, który będzie stanowił belkę krzyŜa. Po

rozpoczęciu zaznaczania (czyli po naciśnięci klawisza myszki) naleŜy zwolnić klawisz Shift. W momencie, gdy

kształt krzyŜa jest zadowalający zwalniamy klawisz myszki. Otrzymane zaznaczenie powinno być połączeniem

obydwu zaznaczonych prostokątów. Otrzymane zaznaczenie wypełniamy dowolnym kolorem farby.

W podobny sposób rysujemy drabinkę. Najpierw zaznaczamy duŜy prostokąt. Następnie przyciskamy klawisz Ctrl i

przesuwamy wskaźnik myszki (bez naciskania przycisków myszki). Obok wskazówki myszki pojawi się znak minus

Strona 8

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

informujący nas o tym, Ŝe będziemy wykonywali róŜnicę zaznaczeń. Trzymając klawisz Ctrl rozpoczynamy operację

zaznaczania. Po rozpoczęciu operacji zaznaczania (tj. po naciśnięciu lewego przycisku myszki) zwalniamy klawisz

Ctrl. Po ustaleniu Ŝądanego rozmiaru prostokąta zwalniamy klawisz myszki. Operację tą powtarzamy kilkukrotnie

(tj. z oryginalnego kwadratu wycinamy kilka prostokątów), po czym uzyskane zaznaczenie wypełniamy dowolnym

kolorem.

Efekt naszej pracy jest widoczny na rysunku 3.

3.2 Ćwiczenie 4

Wykonaj rysunek prezentujący operacje sumy oraz róŜnicy zaznaczeń eliptycznych.

wiczenie to wykonujemy niemal identycznie jak poprzednie. Zatem po zaznaczeniu duŜej elipsy, wycinamy oczy.

W tym celu wykorzystujemy klawisz Ctrl, po naciśnięciu którego, powinniśmy ujrzeć minus obok wskaźnika myszy

(pamiętajmy o przesunięciu myszki!). Po wycięciu oczu selekcję malujemy w paski korzystając z narzędzia

"Malowanie rozmytymi pociągnięciami pędzla".

Połączone koła uzyskujemy wykonując operację sumy zaznaczeń dla dwóch kół. Zwróćmy uwagę, Ŝe w tym

przypadku naleŜy wykorzystać klawisz Shift podwójnie: do wykonania sumy zaznaczeń oraz do zmiany kształtu

zaznaczenia z elipsy na okrąg!

Strona 9

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

Rysunek 4. Suma i róŜnica zaznaczeń eliptycznych

Kolejne ćwiczenie zapozna nas z bardzo waŜnym narzędziem nazwanym "Zaznaczanie sąsiadujących obszarów". Jest

ono niezmiernie przydatne w sytuacjach, gdy chcemy dokonać selekcji fragmentu rysunku na podstawie koloru.

3.3 Ćwiczenie 5

Pomaluj wszystkie figury z rysunku 1 Ŝółtym kolorem.

Strona 10

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

Rysunek 5. Rysunek z ćw. 1 przemalowany na Ŝółto

Cała trudność ćwiczenia piątego polega na zaznaczeniu kilku niespójnych obszarów o zadanych kolorach

czerwonym, zielonym i niebieskim. Wybierzmy z menu narzędzie "Zaznaczanie sąsiadujących obszarów." Jeśli teraz

klikniemy wewnątrz czerwonego prostokąta, spowoduje to selekcję obszaru niemal identycznego z prostokątem.

RóŜnice wynikają ze stosowanego formatu zapisu. OtóŜ podczas konwersji do formatu JPEG nasz obraz ulega

kompresji stratnej (jakość obrazu i stopień kompresji regulujemy odpowiednim suwakiem w okienku dialogowym

"Zapis jako JPEG"). Po wykonaniu kompresji na naszym obrazku pojawiły się piksele o kolorze róŜnym od

zastosowanego przez nas do wypełnienia obszaru. Tak naprawdę nasz rysunek powinien zawierać jedynie cztery

kolory: biały, czerwony, zielony oraz niebieski, a jeśli go powiększymy odpowiednio to zauwaŜymy gdzieniegdzie

bladoszare piksele.

Zapamiętajmy zatem, Ŝe jeśli istnieje ryzyko, Ŝe będziemy musieli poprawić nasz rysunek to koniecznie naleŜy

oryginał zapisać w formacie XCF.

Strona 11

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

Powróćmy do ćwiczenia. Do zaznaczonego obszaru prostokątnego chcemy teraz dodać fragment owalny wypełniony

kolorem zielonym. Pamiętając, Ŝe klawisz Shift wykonuje operację sumy na selekcjach wystarczy nacisnąć Shift, a

następnie kliknąć wewnątrz elipsy. W identyczny sposób dodajemy do naszego zaznaczenia niebieski listek:

naciskamy klawisz Shift, a następnie klikamy wewnątrz niebieskiego listka.

W ten sposób wykonaliśmy niespójne zaznaczenie obejmujące swoim zasięgiem trzy figury. Jeśli teraz chcemy

pomalować zaznaczony obszar na Ŝółto wystarczy uŜyć "kubełka" do wypełniania farbą (operacja "Wypełnianie

kolorem lub deseniem" posiada skrót klawiszowy Shift-B).

3.4 Ćwiczenie 6

Pomaluj figury z ćwiczenia 2 na kolor niebieski.

Rysunek 6. Rysunek z ćw. 2 przemalowany na niebiesko

Strona 12

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

Wykonajmy to ćwiczenie w nieco inny sposób niŜ ćwiczenie poprzednie. Wybierzmy narzędzie "Zaznaczanie

sąsiadujących obszarów". Lecz tym razem zamiast klikać w figury kliknijmy w białe tło. Otrzymana selekcja będzie

obejmowała cały rysunek za wyjątkiem trzech kolorowych figur. Jeśli teraz odwrócimy selekcję (operacja

"Zaznaczenie -> Odwróć zaznaczenie" posiada skrót klawiszowy Ctrl - I) wówczas selekcja obejmie mniej więcej

nasze trzy figury. Podobnie jak w poprzednim przypadku selekcja nie jest dokładna, poniewaŜ otworzony obraz był

zapisany w formacie JPEG i zawiera piksele o delikatnym szarawym, zielonkawym, czerwonawym i niebieskawym

odcieniu.

Pierwsze sześć ćwiczeń stanowi abecadło jeśli chodzi o wykorzystanie narzędzi selekcji. Sprawne posługiwanie się

narzędziami do zaznaczania obszaru oraz klawiszami Ctrl i Shift jest konieczne, jeśli chcemy wykorzystać GIMPa do

zadań webmasterskich.

4. Linijki i prowadnice

Wykonanie ćwiczeń od pierwszego do szóstego wymagało zaznaczania niemalŜe dowolnych fragmentów. Nie było

dla nas istotne ani dokładne połoŜenie selekcji ani jej rozmiar. Oczywiście przygotowywanie elementów graficznych

na strony WWW będzie nas wielokrotnie zmuszało do uzyskania selekcji o zadanym rozmiarze i usytuowanej w

konkretnym miejscu rysunku (z dokładnością do piksela). W jaki zatem sposób umiejscowić naszą selekcję i ustalić

jej rozmiar? SłuŜą do tego prowadnice. Prowadnice są linijkami, które dodajemy do rysunku. W przygotowanej

ilustracji nie są one oczywiście widoczne. Prowadnice słuŜą do dokładnego pozycjonowania róŜnych elementów

naszej kompozycji graficznej m.in. selekcji, warstw czy ścieŜek.

Na rysunku 7 widoczne są linijki. Umieszczenie prowadnic na naszym rysunku wykonujemy następująco. NaleŜy

kliknąć lewym przyciskiem myszki na linijce i przeciągnąć kursor myszy (cały czas trzymamy guzik myszki) na

obszar rysunku. Tak jak byśmy chcieli przesunąć linijkę. W miejscu, w którym zwolnimy klawisz myszki pojawi się

na rysunku przerywana linia. Jest to właśnie prowadnica. Prowadnice poziome uzyskujemy korzystając z poziomej

linijki, natomiast prowadnice pionowe - z pionowej. Zarówno linijki jak i prowadnice moŜemy ukryć wykorzystując

opcję "Widok -> Linijki" oraz "Widok -> Prowadnice". Opcje te posiadają skróty Ctrl-Shift-R oraz Ctrl-Shift-T.

Strona 13

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

Rysunek 7. Okno rysunku ze wskazanymi linijkami

Raz ustawioną prowadnicę moŜemy dowolnie przesuwać. W tym celu naleŜy uŜyć narzędzia "Przesuwanie warstw

oraz zaznaczeń" aktywowanego skrótem klawiszowym m.

Przesunięcie prowadnicy na linijkę powoduje jej usunięcie. Jeśli chcemy umiejscowić prowadnicę z dokładnością do

piksela to z pomocą przyjdzie nam poznana juŜ operacja powiększania i pomniejszania widoku rysunku (klawisze -

oraz =). W prawym dolnym rogu okna rysunku wyświetlane są współrzędne bieŜącego połoŜenia kursora myszki.

Rysunek 8 przedstawia okno z ustawioną jedną prowadnicą i wskazanym miejscem, w którym wyświetlane są

współrzędne kursora myszki.

Strona 14

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

Rysunek 8. Prowadnica i współrzędne kursora myszki

Dodatkowo do upewnienia się, Ŝe prowadnica wypada w zaplanowanym miejscu moŜemy uŜyć narzędzia "Mierzenie

odległości i kątów" (prawy dolny guzik w oknie głównym programu GIMP). Wykorzystując to narzędzie moŜemy

sprawdzić, czy odległość między prowadnicami jest zgodna z naszymi oczekiwaniami. Przykład pomiaru jest

przedstawiony na rysunku 9.

Strona 15

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

Rysunek 9. Wyniki pomiaru odległości dwóch prowadnic

4.1 Ćwiczenie 7

Wykonaj logo przedstawiające Ŝółte i czarne kwadraty. Wynik pracy zapisz w formatach XCF, JPEG oraz PNG.

Wynikiem naszej pracy ma być ilustracja widoczna na rysunku 10. Swoją pracę rozpoczynamy od utworzenia

nowego rysunku o rozmiarach 30x30 pikseli. Następnie do rysunku dodajemy prowadnice. Ustalamy dwie

prowadnice pionowe oraz dwie prowadnice poziome tak, by rysunek był podzielony na kwadraty o rozmiarze 10x10

pikseli. Rysunek 9 pokazuje, co powinniśmy otrzymać.

Strona 16

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

Teraz przystępujemy do dokonania selekcji fragmentu rysunku. Chcemy zaznaczyć trzy kwadraty leŜące na

przekątnej i pomalować je na Ŝółto (patrz rysunek 10).

Wybieramy narzędzie do selekcji prostokątnej i zaznaczamy pierwszy kwadrat. Następnie naciskamy klawisz Shift i

zaznaczamy drugi kwadrat. W podobny sposób do otrzymanej selekcji dodajemy trzeci kwadrat.

Jeśli teraz wyłączymy widoczność prowadnic (Ctrl-Shift-T), wówczas powinniśmy ujrzeć selekcję obejmującą trzy

kwadraty. Selekcję wypełniamy kolorem Ŝółtym.

Następnie odwracamy selekcję (Ctrl-I). Teraz selekcja obejmuje biały obszar naszego rysunku. Selekcję wypełniamy

kolorem czarnym.

Uzyskany obraz zapisujemy w formacie XCF. Pamiętajmy, Ŝe zapisanie obrazu w jakimkolwiek innym formacie

spowoduje utratę prowadnic i selekcji! Jeśli dysponujemy obrazem w formacie XCF to oczywiście bez trudu

moŜemy uzyskać obraz w innym formacie. Wystarczy otworzyć nasz obraz i wykonać operacje "Zapisz jako...".

Zapiszmy wykonany rysunek dodatkowo w formatach JPEG oraz PNG.

Jeśli porównamy rozmiary otrzymanych plików to okaŜe się, Ŝe plik PNG jest mniejszy. Ponadto jakość obrazu

zapisanego w pliku PNG będzie lepsza. Zapamiętajmy zatem, by rysunki przedstawiające figury geometryczne

powypełniane kilkoma kolorami zapisywać w formacie PNG. Format JPEG sprawdza się w stosunku do fotografii.

Rysunek 11 przedstawia ćwiczenie 7 i dwa rysunki w formacie PNG oraz JPEG.

Strona 18

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

4.2 Ćwiczenie 8

Wykonaj rysunki przedstawiające znaki lotnictwa japońskiego, polskiego oraz RAFu. Wynik pracy zapisz w

formatach XCF, JPEG oraz PNG.

Rysunek 12. Godła lotnictwa polskiego, japońskiego i alianckiego

Wykonanie godła lotnictwa polskiego rozpoczynamy od ustawienia prowadnic. Rysunek o wymiarach 30x30 pikseli

dzielimy prowadnicami na fragmenty zgodnie z rysunkiem 13. Po ustaleniu połoŜenia prowadnic zaznaczamy obszar

przeznaczony na kolor czerwony. Wykorzystujemy w tym celu narzędzie do selekcji prostokątnej i klawisz Shift

słuŜący do tworzenia sumy selekcji. Dodajemy kolejne prostokąty i kwadraty aŜ do uzyskania selekcji obejmującej

cały czerwony obszar rysunku. Następnie selekcję wypełniamy kolorem czerwonym, a sam obraz zapisujemy do

plików XCF, PNG oraz JPEG.

Godło lotnictwa japońskiego to po prostu czerwone koło na białym tle. Utwórzmy obraz o rozmiarze 31x31 pikseli,

następnie dodajmy prowadnice poziomą w odległości 15 pikseli od górnej krawędzi rysunku oraz prowadnicę

pionową w odległości 15 pikseli od lewej krawędzi obrazu.

Teraz wykonujemy selekcje eliptyczną rozpoczynając od punktu przecięcia prowadnic. W trakcie rozpinania

eliptycznej selekcji naciskamy klawisze Ctrl oraz Shift. Nasza selekcja powinna przybrać kształt koła o środku w

Strona 19

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

punkcie przecięcia prowadnic. Jeśli rozepniemy selekcję aŜ do brzegu rysunku to powinniśmy zauwaŜyć, Ŝe selekcja

z kaŜdej strony dotyka krawędzi obrazu. Innym słowy selekcja jest umiejscowiona w środku rysunku. Selekcję

wypełniamy czerwona farbą.

Godło lotnictwa alianckiego wykonujemy identycznie jak godło japońskie. PoniewaŜ godło aliantów zawiera

pierścienie niebieski, biały i czerwony, zatem musimy trzykrotnie powtórzyć selekcję, za kaŜdym razem zmniejszając

jej promień.

Rysunek 13. Prowadnice do rysunku godła polskiego lotnictwa

5. Modyfikacja kształtu selekcji

Potrafimy juŜ zaznaczyć dowolny kształt składający się z prostokątów, kwadratów, elips i okręgów. Następny etap

nauki to dokonywanie przekształceń selekcji. Jedno z przekształceń juŜ się pojawiło w dzisiejszej serii ćwiczeń:

odwrócenie zaznaczenia ("Zaznaczenie -> Odwróć zaznaczenie", skrót Ctrl-I).

Strona 20

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

Kolejnymi operacjami, jakie moŜemy wykonać na selekcjach są:

zwiększanie zaznaczonego obszaru

zmniejszanie zaznaczonego obszaru

wygładzanie kształtu zaznaczonego obszaru

wyostrzenie kształtu zaznaczonego obszaru

Wszystkie powyŜsze operacje znajdziemy w menu kontekstowym obrazu w opcji "Zaznaczenie". Oczywiście kaŜde z

powyŜszych przekształceń moŜemy wykonywać bez względu na to, w jaki sposób selekcja została osiągnięta.

PoniŜsze dwa ćwiczenia demonstrują uŜycie wybranych operacji przekształcania selekcji.

5.1 Ćwiczenie 9

Wykorzystując operację zmniejszania zaznaczenia wykonaj rysunek nr 14. Wynik pracy zapisz w formacie PNG

Rysunek 14. Przykład uŜycia operacji zmniejszania zaznaczenia

Utwórzmy kwadratowy rysunek o wymiarach 30x30 pikseli. Następnie zaznaczmy cały rysunek (klawisz Ctrl-A).

Zaznaczony rysunek wypełniamy kolorem czerwony. Następnie zmniejszamy zaznaczenie: "Zaznaczenie ->

Zmniejsz" o 5 pikseli. Uzyskane zmniejszone zaznaczenie wypełniamy kolorem czarnym. Operacje zmniejszania

zaznaczenia i wypełniania kolorem powtarzamy Ŝądaną liczbę razy.

Strona 21

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

5.2 Ćwiczenie 10

Dysponujesz fotografią przedstawiającą zachód słońca. Wykorzystując operację wygładzania selekcji wykonaj

rysunek przedstawiający kwadratowy fragment oryginalnej fotografii. Niech brzeg nowopowstałego obrazu wtapia

się w tło.

Rysunek 15. Obraz wtopiony w tło przy pomocy wygładzania selekcji

Po otworzeniu danego rysunku zaznaczamy na środku w dowolnym miejscu kwadrat. Uzyskaną selekcję

wygładzamy wybierając opcje "Zaznaczenie -> Wygładź". Jako promień wygładzania podajmy duŜą wartość np. 30.

Strona 22

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

Następnie odwracamy zaznaczenie. Na koniec otrzymane zaznaczenie wypełniamy kolorem tła stosują "kubełek" do

wlewania farby.

6. Podsumowanie

Drugi odcinek spotkań z GIMPem zapoznał nas z narzędziami selekcji, linijkami oraz prowadnicami. Tabela 1

przedstawia listę wszystkich operacji niezbędnych do wykonania opisanych ćwiczeń.

Funkcja

Opcja menu

Klawisz skrótu

Zaznaczanie prostokątne:

Narzędzia->Zaznaczenie->Zaznaczenie prostokątne r

Zaznaczanie eliptyczne:

Narzędzia->Zaznaczenie->Zaznaczenie eliptyczne

Zaznaczanie odręczne:

Narzędzia->Zaznaczenie->Zaznaczenie odręczne

Zaznaczanie rozmyte:

Narzędzia->Zaznaczenie->Zaznaczenie rozmyte

Wypełnianie kubełkiem:

Narzędzia->Rysowanie->Wypełnianie kubełkiem

Shift-B

Rysowanie pędzlem:

Narzedzia->Rysowanie->Pędzel

Odwracanie zaznaczenia:

Narzędzia->Zaznaczenie->Odwróć

Ctrl-I

Zwiększenie zaznaczenia:

Narzędzia->Zaznaczenie->Powiększ

Zmniejszenie zaznaczenia:

Narzędzia->Zaznaczenie->Zmniejsz

Wygładzanie zaznaczenia:

Narzędzia->Zaznaczenie->Wygładź

Wyostrzanie zaznaczenia:

Narzędzia->Zaznaczenie->Wyostrz

Widok linijek:

Widok->Linijki

Ctrl-Shift-R

Widok prowadnic:

Widok->Prowadnice

Ctrl-Shift-T

Widok zaznaczenia:

Widok->Zaznaczenie

Ctrl-T

Przesuwanie warstw i zaznaczeń: Narzędzia->Przekształcenie->Przesuń

Mierzenie odległości i kątów

(operacja dostępna z okienka programu GIMP)

Strona 23

GIMP: tworzenie grafiki na potrzeby WWW (część 2)

2008-02-27 19:37:20

http://www.gajdaw.pl/gimp/kurs-selekcja/print.html

Tabela 1. Poznane funkcje programu GIMP

Po oswojeniu się z tym, Ŝe niemal wszystkie operacje związane z otworzonym rysunkiem wykonujemy za pomocą

menu kontekstowego kolejnym wyzwaniem jest działanie klawiszy Ctrl oraz Shift w stosunku do selekcji. UwaŜne,

kilkukrotne wykonanie ćwiczeń 1-6 powinno w tym pomóc.

Na koniec zwróćmy uwagę na pewne potknięcia GIMPa.

Dwa narzędzia w programie GIMP mają dwie róŜne nazwy w róŜnych miejscach. Narzędzie do wypełniania kolorem

nazywa się w menu "Narzędzia -> Rysowanie -> Wypełnianie kubełkiem", natomiast podpowiedź (ang. hint)

pojawiająca się po wskazaniu kursorem myszki odpowiedniego guzika w oknie głównym GIMPa brzmi

"Wypełnianie kolorem lub deseniem". Podobnie, hint operacji "Narzędzia -> Zaznaczenie -> Zaznaczenie rozmyte"

brzmi "Zaznaczanie sąsiadujących obszarów".

Zwróćmy równieŜ uwagę, Ŝe skróty klawiszowe operacji selekcji prostokątnej, eliptycznej czy z wolnej ręki są

napisane w menu błędnie duŜymi literami. Poprawne skróty to: r, e, f, z.