GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 1
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
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 2
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
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 3
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.
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 4
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ózniej 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ózniej 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
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 5
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ózniej 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ę.
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 6
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
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 7
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 wskaznika 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 wskaznik myszki (bez naciskania przycisków myszki). Obok wskazówki myszki pojawi się znak minus
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 8
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 wskaznika 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!
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 9
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.
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 10
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.
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 11
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
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 12
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.
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 13
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.
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 14
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.
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 15
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ć.
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 16
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.
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 17
Rysunek 10.
Logo z ćwiczenia 7 z widocznymi prowadnicami
Rysunek 11.
śółto-czarne logo
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 18
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
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 19
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).
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 20
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.
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 21
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ładz". Jako promień wygładzania podajmy du\ą wartość np. 30.
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 22
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ładz
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)
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
GIMP: tworzenie grafiki na potrzeby WWW (część 2) Strona 23
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 podpowiedz (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.
http://www.gajdaw.pl/gimp/kurs-selekcja/print.html 2008-02-27 19:37:20
Wyszukiwarka
Podobne podstrony:
GIMP tworzenie grafiki na potrzeby WWW (część 5 )10 GIMP tworzenie grafiki na potrzeby WWW (cz3)08 GIMP tworzenie grafiki na potrzeby WWW (cz1)11 GIMP tworzenie grafiki na potrzeby WWW (cz4)GIMP tworzenie grafiki na potrzeby WWW (część 6 )Active Directory tworzenie własnej struktury organizacyjnej na potrzeby szkołyIle wody i soli potrzebujesz www igya plJak zwiekszyc ruch na stronie wwwtworzenie aplikacji na?cebook018 Lista wskazanych załączników na potrzeby konsultacji u lekarza specjalistyZarabianie na stronie WWW reklama kontekstowa2001 09 Gimp Workshop Plugin Featureswięcej podobnych podstron