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 17

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

2008-02-27 19:37:20

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

Rysunek 10. Logo z ćwiczenia 7 z widocznymi prowadnicami

Rysunek 11. śółto-czarne logo

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

e

Zaznaczanie odręczne:

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

f

Zaznaczanie rozmyte:

Narzędzia->Zaznaczenie->Zaznaczenie rozmyte

z

Wypełnianie kubełkiem:

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

Shift-B

Rysowanie pędzlem:

Narzedzia->Rysowanie->Pędzel

P

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ń

m

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.