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

Strona 1

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

2008-02-27 19:41:09

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

GIMP: tworzenie grafiki na potrzeby WWW

(część 4)

Włodzimierz Gajda

Wraz z selekcjami oraz ścieŜkami warstwy współtworzą Ŝelazny repertuar moŜliwości oferowanych przez

współczesne programy do przetwarzania grafik rastrowych. W GIMPie, z racji na brak obiektów, warstwy nie tylko

wzbogacają obraz o dodatkowy, pionowy wymiar, lecz takŜe umoŜliwiają oddzielenie elementów rysunku.

1 marca 2004 r.

Spis treści

1. Cechy warstw w programie GIMP

2. Dodawanie warstw do rysunku

2.1 Ćwiczenie 1

2.2 Ćwiczenie 2

2.3 Ćwiczenie 3

3. Wyrównanie warstw

3.1 Ćwiczenie 4

3.2 Ćwiczenie 5

4. Spłaszczenie obrazu

4.1 Ćwiczenie 6

5. Efekt cienia

5.1 Ćwiczenie 7

5.2 Ćwiczenie 8

6. Modyfikacja kolorów

Strona 2

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

2008-02-27 19:41:09

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

6.1 Ćwiczenie 9

7. Nieprzepuszczalność warstwy

7.1 Ćwiczenie 10

8. Narzędzia tekstowe

8.1 Ćwiczenie 11

8.2 Ćwiczenie 12

9. Ozdobne napisy

9.1 Ćwiczenie 13

9.2 Ćwiczenie 14

10. Maskowanie warstw

10.1 Ćwiczenie 15

10.2 Ćwiczenie 16

10.3 Ćwiczenie 17

11. Podsumowanie

1. Cechy warstw w programie GIMP

Obrazy przygotowywane GIMPem składają się z warstw. Warstwa jest jak gdyby przezroczystą folią, na której

rysujemy. Nowo utworzony rysunek zawiera przynajmniej jedną warstwę - tło.

Dokładnie jedna spośród wszystkich warstw jest w danym momencie wybrana. Warstwę tą będziemy nazywali

warstwą aktywną. To jej dotyczą bieŜące operacje edytorskie takie jak na przykład malowanie pędzlem, rysowanie

ołówkiem lub wypełnianie kolorem. GIMP nie umoŜliwia ani wyboru kilku aktywnych warstw ani grupowania

warstw.

Jeśli obraz posiada jedynie warstwę tło, wówczas nie musimy zwracać uwagi na aktywną warstwę, bo i tak wszystkie

operacje dotyczą tła. W przypadku grafiki składającej się z wielu warstw naleŜy bacznie śledzić warstwę aktywną. W

przeciwnym razie, edycja rysunku moŜe prowadzić do dziwnych i niepoŜądanych efektów.

Strona 3

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

2008-02-27 19:41:09

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

Wśród cech warstwy moŜemy wyróŜnić nazwę, rozmiar, jej połoŜenie na stosie warstw, widoczność, przynaleŜność

do grupy warstw przesuwanych, tryb przenikania, nieprzepuszczalność oraz maskę. Cechy te są od siebie niezaleŜne

i mogą być dowolnie ustalane dla kaŜdej warstwy z osobna.

Nazywanie warstw jest pomocne w przypadku złoŜonych obrazów. Wprawdzie okno dialogowe warstw wyświetla

miniaturowy obraz zawartości warstwy, jednak w przypadku warstw o podobnym wyglądzie ikony mogą być trudne

do odróŜnienia. Wówczas nazwa wyświetlana z lewej strony ikony powinna pomóc. Nazwa warstwy jest dowolnym

napisem. W nazwach warstw moŜemy uŜywać białych znaków oraz polskich liter z ogonkami. NaleŜy jednak

pamiętać o tym, Ŝe nazwy warstw muszą być unikalne. Jeśli zdarzy nam się nazwać dwie warstwy identycznie,

wówczas druga z nich otrzyma przyrostek #2.

Wszystkie warstwy w programie GIMP są prostokątne. Program nie umoŜliwia tworzenia warstw o innych

kształtach. Nie oznacza to jednak, Ŝe warstwa będzie zawsze widoczna na rysunku w kształcie prostokąta. Część

pikseli warstwy moŜe być przezroczystych, dzięki czemu obraz umieszczony na warstwie moŜe mieć dowolny

kształt.

Rozmiar kaŜdej warstwy moŜe się róŜnić od rozmiaru rysunku. Warstwa moŜe być zarówno mniejsza jak i większa

od całego rysunku. Wymiary i kształt warstwy ograniczają jej zasięg. Innymi słowy nie moŜemy modyfikować

pikseli obrazu leŜących poza aktywną warstwą.

Trzecią waŜną cechą warstwy jest jej miejsce na stosie warstw. Warstwy leŜą jedna na drugiej i w przypadku

zachodzenia na siebie warstwa górna przysłania warstwę dolną. Oczywiście kaŜdą warstwę moŜemy przesuwać

zarówno do góry jak i do dołu.

Kolejna właściwość warstw ułatwiająca pracę to widoczność. KaŜda warstwa moŜe być widoczna lub niewidoczna.

Zmiana widoczności warstw ma dwa waŜne zastosowania. Z jednej strony umoŜliwia obejrzenie rysunku bez

pewnych jego elementów (elementy nie są usunięte a jedynie niewidoczne). Po drugie sterując widocznością

moŜemy wybrać kilka warstw i wykonać na nich operację łączenia bądź wyrównania. Widoczność warstw dzieli

warstwy na dwie grupy: warstwy widoczne i niewidoczne. W ten sposób moŜemy jak gdyby zaznaczyć kilka warstw.

Często zdarza się, Ŝe wzajemne połoŜenie pewnych warstw jest bardzo waŜne. Tak będzie na przykład w przypadku

warstw tworzących menu. Warstwy takie naleŜy przesuwać razem, w przeciwnym razie kaŜde przesunięcie będzie się

Strona 4

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

2008-02-27 19:41:09

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

wiązało z mozolnym układaniem kolejnych elementów tworzących całość. Operacja przesuwania warstw dotyczy

warstwy aktywnej oraz warstw, które dodamy do grupy warstw modyfikowanych operacją przesuwania.

Wzajemnym przenikaniem warstw sterują właściwości tryb oraz nieprzepuszczalność. Nieprzepuszczalność jest

ustalana w procentach (od 0% do 100%) i określa jak bardzo dana warstwa jest przezroczysta. Natomiast tryb

warstwy określa, w jaki sposób piksele danej warstwy mają modyfikować wygląd całego obrazu. Dostępnych jest

piętnaście róŜnych trybów, które umoŜliwiają miedzy innymi wyświetlanie tylko kolorów jaśniejszych, tylko kolorów

ciemniejszych oraz wypalanie.

Ostatnią i zarazem najbardziej skomplikowaną cechą warstwy jest jej maska. Maska warstwy to oddzielny obraz

związany z dana warstwą. Zadaniem maski jest przysłonięcie części warstwy.

Rysunki pierwszy oraz drugi ilustrują opisane właściwości warstw. Przedstawiony rysunek składa się z pięciu warstw

o nazwach Ŝółta, kot, róŜowa, pies oraz tło. Warstwą najwyŜszą jest warstwa o nazwie Ŝółta, zaś najniŜszą - warstwa

tło. Aktywna jest warstwa szczytowa o nazwie Ŝółta. Informuje nas o tym niebieskie tło w oknie dialogowym

warstw. Ikona "oko" widoczna z lewej strony włącza widoczność warstwy. Na przedstawionym rysunku widoczne są

wszystkie warstwy oprócz warstwy o nazwie pies. Ikona o kształcie krzyŜa włączona dla dwóch warstw róŜowej oraz

ółtej powoduje, Ŝe warstwy te będą przesuwane razem, zachowując swoje wzajemne połoŜenie. Ponadto warstwa

ółta ma ustawioną nieprzepuszczalność na 52.2 procent, zaś warstwa róŜowa posiada zdefiniowana maskę

(prostokątny rysunek z lewej strony nazwy warstwy).

Na warstwie Ŝółtej jest narysowane Ŝółte koło. Warstwa ta jest umieszczona na samej górze, zatem przykrywa

wszystkie inne warstwy. Z racji na swoją 52.2 procentową nieprzepuszczalność, Ŝółte koło jest nieco przezroczyste i

nie przysłania całkowicie ani napisu "kot" ani róŜowej figury. Drugą warstwą jest warstwa o nazwie kot. Na niej jest

umieszczony czarny napis "kot". Napis "kot" przysłania całkowicie róŜową figurę, gdyŜ nieprzepuszczalność

warstwy kot wynosi 100% (jest to wartość domyślna). Kolejną warstwą jest warstwa róŜowa. Na warstwie tej

narysowano róŜowy prostokąt. Maska warstwy róŜowej usuwa naroŜnik prostokąta. Przedostatnia warstwa ma nazwę

pies. Wprawdzie na warstwie tej jest umieszczony napis "pies", ale warstwa ta nie jest widoczna. Ostatnią warstwą

jest białe tło rysunku.

Strona 6

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

2008-02-27 19:41:09

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

Rysunek 2. Warstwy rysunku 1

Widoczność warstwy zmieniamy klikając w ikonę oka. Jeśli ikona oka się nie pojawia, wówczas warstwa jest

niewidoczna. Ponowne kliknięcie w miejsce, w którym znajduje się ikona oka dla danej warstwy włącza jej

widoczność. Jeśli przytrzymamy klawisz Shift i klikniemy w ikonę oka wówczas widoczna stanie się wyłącznie

kliknięta warstwa. Ponowne kliknięcie z przytrzymanym klawiszem Shift spowoduje włączenie widoczności

wszystkich warstw.

Strona 7

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

2008-02-27 19:41:09

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

W podobny sposób dołączamy warstwę do grupy warstw wspólnie przesuwanych. Kliknięcie w ikonę krzyŜa (lub w

miejsce, gdzie ta ikona się znajduje) włącza oraz wyłącza przesuwanie warstwy.

Nazwę warstwy zmieniamy klikając podwójnie w zadaną warstwę w oknie dialogowym Warstwy, kanały i ścieŜki.

Natomiast maskę warstwy dodajemy korzystając z menu kontekstowego okna dialogowego warstw. Po wybraniu

opcji Dodaj maskę warstwy pojawi się okno dialogowe, w którym ustalamy pierwotną zawartość maski. W celu

usunięcia maski wybieramy opcje Usuń maskę dostępną poniŜej opcji dodającej maskę.

Jeśli lista warstw nie mieści się w oknie Warstwy, kanały i ścieŜki, wówczas warto okno to nieco zwiększyć.

Uwaga, menu kontekstowe obrazu oraz menu kontekstowe okna warstw róŜnią się między sobą. Jeśli szukając danej

opcji nie moŜemy jej znaleźć w menu kontekstowym okna warstw, to naleŜy zajrzeć do menu kontekstowego obrazu.

2. Dodawanie warstw do rysunku

Nowe warstwy w rysunku pojawiają się po naciśnięciu jednego z przycisków Nowa warstwa lub Duplikuje warstwę

dostępnych w oknie warstw. Okno dialogowe warstw jest dostępne po wybraniu opcji Warstwy | Warstwy, kanały i

cieŜki z menu kontekstowego obrazu (skrót Ctrl+L). Przycisk Duplikuje warstwę tworzy kopię warstwy aktywnej,

zaś przycisk Nowa warstwa wyświetla okno dialogowe, w którym uŜytkownik ustala nazwę warstwy, jej wymiary

oraz sposób wypełnienia (warstwa moŜe być przezroczysta, wypełniona kolorem farby lub tła).

2.1 Ćwiczenie 1

Wykonaj rysunek zawierający cztery warstwy o nazwach róŜowa, zielona, czerwona oraz tło. Na warstwie róŜowej

narysuj róŜowy kwadrat, na zielonej - zielone koło, zaś na czerwonej - czerwony prostokąt.

Wykonanie ćwiczenia rozpoczynamy od utworzenia nowego obrazu. Następnie w oknie warstw tworzymy kolejno

trzy warstwy nazywając je róŜowa, zielona oraz czerwona. Domyślnie, rozmiar nowej warstwy jest równy

rozmiarowi całego rysunku. Ustalmy typ wypełnienia nowo tworzonych warstw na przezroczysty.

Następnie przystępujemy do narysowania figur. W celu narysowania róŜowego kwadratu wybieramy jako aktywną

warstwę róŜową (naleŜy kliknąć w nazwę warstwy w oknie dialogowym warstw). Po wybraniu aktywnej warstwy

tworzymy selekcję w kształcie kwadratu i wypełniamy ją farbą koloru róŜowego.

Strona 8

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

2008-02-27 19:41:09

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

Pracę nad zielonym kołem rozpoczynamy od wyboru aktywnej warstwy. Klikamy w nazwę "zielona" w oknie

warstw. Następnie zaznaczamy obszar okrągły i wypełniamy go farbą.

Ostatnią z figur, czerwony prostokąt, wykonujemy identycznie: wybieramy aktywną warstwę o nazwie "czerwona",

zaznaczamy obszar prostokątny i wypełniamy go farbą.

Rysunek 3. Kilkuwarstwowy rysunek z ćwiczenia pierwszego

Kolejność warstw moŜemy zmieniać korzystając z odpowiednich przycisków dostępnych w dolnej części okna

warstw oraz z menu kontekstowego Warstwy | Stos. Obie moŜliwości ilustruje rysunek 4.

Strona 9

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

2008-02-27 19:41:09

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

Rysunek 4. Menu kontekstowe oraz przyciski okna Warstwy, kanały i ścieŜki zmieniające kolejność warstw

Operacja usuwania warstw jest wykonywana przy uŜyciu przycisku z ikoną kosza, którego naleŜy szukać w dolnej

części okna warstw. Oczywiście po naciśnięciu przycisku usunięta zostanie warstwa bieŜąca. Operacja usuwania

warstwy posiada skrót Ctrl+X.

Jeśli zdarzy się tak, Ŝe nieopatrznie usuniemy potrzebną warstwę to naleŜy pamiętać, Ŝe operacja cofnij (skrót

Ctrl+Z) przywróci poprzedni stan rysunku.

2.2 Ćwiczenie 2

Dysponujesz sześcioma ilustracjami budownictwo.jpg, przyroda.jpg, miasto.jpg, rekreacja.jpg, rolnictwo.jpg oraz

transport.jpg. KaŜdy z obrazów ma rozmiar 800x600 pikseli. Przygotuj ilustrację prezentującą sześć podanych plików

na białym tle w pomniejszonych rozmiarach. Obraz przygotuj tak, by kaŜda miniaturka była umieszczona na osobnej

warstwie.

Po utworzeniu nowego obrazu o dostatecznie duŜych rozmiarach (np. 800x600) moŜemy przystąpić do kopiowania

miniatur. Kopiowanie kaŜdej z miniatur przebiega następująco: otwieramy plik z obrazem np. budownictwo.jpg.

Obraz skalujemy do Ŝądanych rozmiarów np. 200x150 pikseli (operacja Obraz | Przeskaluj obraz). Następnie

Strona 10

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

2008-02-27 19:41:09

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

zaznaczamy cały obraz (Ctrl+A) i kopiujemy (Ctrl+C). Przechodzimy do nowo tworzonego obrazu i wykonujemy

operację wklejania (Ctrl+V). Wklejony obraz wyląduje w tzw. pływającym zaznaczeniu. W celu utworzenia nowej

warstwy zawierającej właśnie wklejony obraz przechodzimy do okna warstw i naciskamy przycisk Nowa warstwa

(moŜemy skorzystać ze skrótu Ctrl+N; najwygodniej operację taką wykonać wciskając kolejno Ctrl+V, Ctrl+L oraz

Ctrl+N). W ten sposób wklejany obraz trafia na osobną warstwę. Nazwę warstwy moŜemy zmienić podwójnie

klikając w oknie warstw w dodaną warstwę.

Wklejane obrazy wylądują w róŜnych miejscach, ale zazwyczaj nie tam, gdzie chcielibyśmy je ujrzeć. W celu

przesunięcia warstwy naleŜy wybrać narzędzie Przesuwanie warstw i zaznaczeń, a następnie złapać warstwę myszką

i przesunąć. Ustawienie prowadnic bardzo ułatwia dokładne pozycjonowanie warstw.

Dodatkowo, do przesuwania warstw moŜemy uŜyć czterech strzałek z klawiatury. Przytrzymanie klawisza Shift

zmienia odległość, o jaką strzałki przesuwają warstwę.

Strona 12

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

2008-02-27 19:41:09

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

Rysunek 5. Obraz zawierający sześć pomniejszonych plików jpg oraz zawartość okna warstw

Istnieje równieŜ moŜliwość wklejenia obrazu bezpośrednio w jedną z istniejących juŜ warstw. SłuŜy do tego przycisk

z ikoną kotwicy znajdujący się w dolnej części okna warstw. Jeśli po wykonaniu operacji wklej uŜyjemy przycisku

zakotwiczania, wówczas wklejany obraz trafi na aktywną warstwę. Głównym minusem zakotwiczania warstw jest to,

e po zakotwiczeniu nie moŜemy juŜ niezaleŜnie modyfikować wklejonego elementu.

2.3 Ćwiczenie 3

Wykonaj widokówkę zatytułowaną "Zima" przedstawioną na rysunku 6. Do pracy wykorzystaj pięć gotowych zdjęć.

Zdjęcia wklej na osobne warstwy, a następnie umieść w sposób przedstawiony na rysunku.

Rysunek 6. Widokówka "Zima"

Pracę rozpoczynamy od utworzenia nowego obrazu o wymiarach 860x660 pikseli. Potem kolejno wklejamy pięć

zdjęć pamiętając o skalowaniu zdjęć do rozmiarów 400x300. Zdjęcia wklejamy tak, by trafiły na osobne warstwy. Po

wklejeniu fotografii ustalamy prowadnice poziome oraz pionowe, po czym przesuwamy wklejone fotografie.

Strona 13

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

2008-02-27 19:41:09

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

3. Wyrównanie warstw

Przy obrazach składających się z wielu warstw ręczne wyrównywanie połoŜenia z wykorzystaniem prowadnic jest

dosyć pracochłonne. Operacja wyrównywania warstw powoduje przemieszczenie widocznych warstw według

określonych reguł. Jeśli chcemy uŜyć tej operacji naleŜy najpierw ustalić, by widoczne były tylko te warstwy, które

mają zostać przemieszczone, a następnie w oknie dialogowym wybrać sposób rozmieszczenia.

3.1 Ćwiczenie 4

Przygotuj rysunek prezentujący cztery róŜnokolorowe kwadraty. Kwadraty rozłóŜ w równych odległościach od siebie

w kierunku pionowym oraz poziomym, tak jak to przedstawiono na rysunku 7.

Strona 15

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

2008-02-27 19:41:09

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

Rysunek 7. Operacja Wyrównaj widoczne warstwy

Wykonanie rysunku rozpoczynamy od przygotowania kwadratów. Na pustym rysunku posiadającym jedynie warstwę

tła wypełnioną białym kolorem tworzymy kwadratowe zaznaczenie. Zaznaczenie to kopiujemy (Ctrl+C), po czym

wklejamy (Ctrl-V). Wklejony kwadrat umieszczamy na nowej warstwie podobnie jak to robiliśmy w ćwiczeniu

drugim (Ctrl+V, Ctrl+L, Ctrl+N). W ten sposób dodaliśmy do obrazu warstwę o rozmiarach równych zaznaczonemu

kwadratowi. Warstwie nadajemy nazwę czerwona, po czym kwadrat wypełniamy kolorem czerwonym. W identyczny

sposób (tj. wykonując operacje kopiuj/wklej) wzbogacamy obraz o trzy warstwy, z których kaŜda zawiera kwadrat

innego koloru. Gdy obraz liczy pięć warstw przystępujemy do równomiernego rozłoŜenia kwadratów. Przesuwamy

kwadraty w dowolne miejsca rysunku, a następnie aktywujemy opcję Warstwy | Wyrównaj widoczne warstwy. W

oknie dialogowym ustalamy rodzaj wyrównania, po czym zatwierdzamy dokonane zmiany.

Oczywiście korzyści związane z automatycznym wyrównywaniem widocznych warstw są tym większe, im więcej

warstw chcemy wyrównać.

3.2 Ćwiczenie 5

Strona 16

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

2008-02-27 19:41:09

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

Dysponujesz szesnastoma zdjęciami o wymiarach 800x600 pikseli. Przygotuj jedną ilustracje 800x600 prezentującą

tabelkę 4x4 szesnastu fotografii. Zadbaj o równe ułoŜenie wszystkich fotografii.

Celem tego ćwiczenia jest przygotowanie ilustracji widocznej na rysunku 8. Oczywiście pierwszym krokiem będzie

utworzenie nowego rysunku i wklejenie doń szesnastu miniaturek o wymiarach 200x150 pikseli tak, by kaŜda

miniaturka trafiła na osobną warstwę. Następnie przystępujemy do wyrównania miniatur. Ustawiamy widoczność tak,

by widoczne były wyłącznie fotografie z pierwszej kolumny. Przesuńmy najwyŜszą fotografię tak, by stykała się z

górną krawędzią obrazu, oraz dolną fotografię tak, by stykała się z dolną krawędzią obrazu. Teraz wybieramy

operację Warstwy | Wyrównaj widoczne warstwy, zaś w oknie dialogowym ustalamy:

styl poziomy - zbierz oraz pozioma podstawa - lewa krawędź (spowoduje to przesunięcie zdjęć do lewej

krawędzi obrazu),

styl pionowy - wypełnij z góry na dół oraz pionowa podstawa - górna krawędź (spowoduje to równomierne

rozmieszczenie widocznych warstw od góry do dołu),

zaznaczamy wykorzystanie dolnej (niewidocznej) warstwy jako bazy.

Po potwierdzeniu ustalonych parametrów przyciskiem OK, zdjęcia pierwszej kolumny zostaną rozmieszczone

zgodnie z naszymi oczekiwaniami. W podobny sposób rozkładamy pozostałe warstwy.

Strona 17

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

2008-02-27 19:41:09

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

Rysunek 8. Kratka szesnastu zdjęć

4. Spłaszczenie obrazu

Jeśli obraz zawiera zbyt wiele warstw wówczas edycja staje się uciąŜliwa. Wykonanie niemal kaŜdej operacji

wymaga szukania potrzebnej warstwy, zmiany widoczności warstw itd. Operacją odwrotną do dodawania nowych

warstw jest spłaszczanie obrazu. Mamy moŜliwość połączyć ze sobą wszystkie warstwy, warstwy widoczne lub

warstwy od bieŜącej w dół. Wszystkie powyŜsze operacje są dostępne w menu kontekstowym okna warstw.

4.1 Ćwiczenie 6

Opierając się na ćwiczeniu 5 wykonaj ilustrację prezentującą szesnaście ilustracji z ćwiczenia 5.

PoniewaŜ w ćwiczeniu 5 wystąpiło szesnaście rysunków, a teraz mamy wykonać kolejne szesnaście miniatur, zatem

umieszczenie kaŜdej z miniatur na osobnej warstwie sprawiłoby, Ŝe obraz liczyłby 257 warstw! Wyrównanie tak

wielkiej liczby warstw to zadanie dość karkołomne! Znacznie łatwiej wykonać to ćwiczenie przygotowując

spłaszczoną wersję ćwiczenia 5. Po otworzeniu pliku xcf będącego wynikiem ćwiczenia 5, wykonujemy operację

Warstwy | Spłaszcz obraz. Tak otrzymany obraz kopiujemy i wklejamy do otwartego dokumentu. Po wklejeniu

czterech identycznych obrazów i równym ich rozłoŜeniu ponownie wykonujemy operację łączącą warstwy, lecz tym

razem łączymy jedynie cztery miniaturki. NaleŜy wyłączyć widoczność tła, po czym wykonać Warstwy | Połącz

widoczne warstwy (skrót klawiszowy Ctrl+M). Otrzymaną warstwę kopiujemy i wklejamy trzy razy. Tak otrzymane

cztery warstwy (kaŜda z nich jest identyczna i przedstawia cztery miniaturki rysunku z ćwiczenia 5) równo

rozkładamy przy pomocy komendy wyrównywania widocznych warstw.

Strona 18

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

2008-02-27 19:41:09

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

Rysunek 9. Kratka 256 miniatur

5. Efekt cienia

Efekt cienia jest dostępny w menu kontekstowym Script-Fu | Cień | Rzucany cień. Efekt ten działa w oparciu o

bieŜące zaznaczenie. Rzucany cień jest cieniem, jakie rzuca zaznaczenie. Wykonanie efektu cienia powoduje dodanie

do rysunku nowej warstwy o nazwie "Drop shadow", na której jest umieszczony cień.

5.1 Ćwiczenie 7

Przygotuj rysunek kwadratu, który rzuca cień.

Po utworzeniu nowego obrazu o białym tle wykonujemy kwadratowe zaznaczenie. Zaznaczenie to wypełniamy

kolorem niebieskim. Następnie wybieramy z menu kontekstowego efekt cienia. Rysunek 10 prezentuje otrzymany

kwadrat, warstwy obrazu oraz parametry, jakie są dostępne dla efektu cienia.

Strona 20

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

2008-02-27 19:41:09

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

Rysunek 10. Rzucanie cienia

5.2 Ćwiczenie 8

Dysponując pięcioma fotografiami morza przygotuj widokówkę przedstawioną na rysunku 11. ZauwaŜ, Ŝe wszystkie

zdjęcia rzucają niewielki cień.

wiczenie to jest pewnym rozszerzeniem ćwiczenia 3. Pracę rozpoczynamy więc identycznie jak w ćwiczeniu

trzecim i kontynujemy aŜ do uzyskania pięciu zdjęć odpowiednio rozmieszczonych. Teraz dokonujemy zaznaczenia

białego obszaru dookoła fotografii. Najłatwiej wykonamy to zadanie korzystając z magicznej róŜdŜki (tj. narzędzia o

nazwie Zaznaczanie sąsiadujących obszarów; skrót z). Pojedyncze kliknięcie w biały obszar otaczający zdjęcia

dokona odpowiedniej selekcji (warstwą aktywną powinno być tło, zaś narzędzie Zaznaczanie sąsiadujących

obszarów powinno mieć zaznaczoną opcję Próbkowanie z kanałem alfa i ustalony próg próbkowania około 10).

Teraz wykonujemy efekt cienia i widokówka jest gotowa.

Strona 21

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

2008-02-27 19:41:09

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

Rysunek 11. Widokówka "Fale"

Efekt cienia stanowi przykład operacji, która po wykonaniu dodaje do obrazu warstwę. Innymi przydatnymi efektami

tego typu są dodawanie krawędzi, ramki czy siatki do obrazu.

6. Modyfikacja kolorów

Kolejne waŜne zastosowanie warstw to modyfikacja kolorów rysunku. Kolorystyka warstw, podobnie jak połoŜenie,

moŜe być zmieniana niezaleŜnie.

6.1 Ćwiczenie 9

Przekształć ilustrację z ćwiczenia 2 tak, by kaŜda warstwa miała inny odcień (patrz rysunek 12).

Po otworzeniu rysunku z zadania 2 przystępujemy do modyfikacji kolorów. Operacja Obraz | Kolory | Desaturacja

przekształca aktywną warstwę w obraz czarno-biały. Następnie wyświetlamy okno dialogowe zmieniające balans

kolorów Obraz | Kolory | Balans kolorów i korzystając z suwaków nadajemy warstwie Ŝądany odcień.

W identyczny sposób postępujemy z następnymi warstwami.

Strona 22

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

2008-02-27 19:41:09

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

Rysunek 12. Modyfikacja kolorów poszczególnych warstw

7. Nieprzepuszczalność warstwy

Dzięki właściwości o nazwie nieprzepuszczalność warstwy mogą się częściowo przysłaniać. Zmniejszając

nieprzepuszczalność spowodujemy, Ŝe warstwa stanie się w pewnym stopniu przezroczysta. Najprostszy przykład

wykorzystania nieprzepuszczalności to częściowe rozjaśnienie pewnych fragmentów rysunku.

7.1 Ćwiczenie 10

Przygotuj widokówkę "Zima" z ćwiczenia 3 dodając efekty widoczne na rysunku 13.

Zmiany oryginalnej widokówki polegają na wybieleniu oraz zaokrągleniu naroŜników czterech fotografii

znajdujących się w tle.

Rozpocznijmy od wybielenia. Do rysunku dodajemy warstwę białą. Umieszczamy ją poniŜej fotografii środkowej,

ale ponad fotografiami naroŜnymi. Jeśli warstwa ta jest widoczna, wówczas przesłania ona fotografie naroŜne. Jeśli

teraz zmniejszymy nieprzepuszczalność dodanej białej warstwy do około 50%, wówczas fotografie naroŜne staną się

widoczne jak za mgłą.

Strona 23

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

2008-02-27 19:41:09

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

Drugi efekt, zaokrąglenie naroŜników wymaga zaznaczenia białego obszaru dookoła wszystkich fotografii. Ustalmy

widoczność warstw tak, by widoczne były warstwy tło oraz cztery naroŜne fotografie. Następnie zmieńmy

właściwości narzędzia Zaznaczanie sąsiadujących obszarów (naleŜy kliknąć dwukrotnie w ikonę narzędzia -

magiczną róŜdŜkę - w oknie głównym GIMPa). We właściwościach narzędzia zaznaczamy opcję Próbkowanie z

kanałem alfa oraz ustalamy próg próbkowania na 2.4. Jeśli teraz klikniemy w biały obszar obrazu wówczas selekcja

obejmie całą białą przestrzeń pomiędzy fotografiami (upewnijmy się, Ŝe aktywną warstwą jest tło oraz usuńmy

ewentualne zaznaczenie Ctrl+Shift+A).

Po zaznaczeniu białego obszaru wykonujemy operację wygładzania selekcji o promieniu 30 pikseli (opcja

Zaznaczenie | Wygładź), po czym ponownie wyostrzamy zaznaczenie (opcja Zaznaczenie | Wyostrz).

Następnie dodajemy do obrazu nową warstwę i wypełniamy na niej zaznaczenie białym kolorem. Jeśli warstwę

umieścimy w stosie warstw pomiędzy fotografią środkową a fotografiami naroŜnymi, wówczas otrzymamy efekt

zaokrąglonych rogów.

Rysunek 13. Nieprzepuszczalność warstw

8. Narzędzia tekstowe

Strona 24

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

2008-02-27 19:41:09

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

Narzędzie tekstowe słuŜy do wzbogacania tworzonych obrazów o napisy. Podobnie jak w przypadku operacji

wklejania mamy dwie moŜliwości uŜycia narzędzia: napis moŜemy zakotwiczyć na jednej z istniejących warstw lub

umieścić na nowej warstwie. Z powodów identycznych jak w przypadku wklejania, umieszczanie napisów na

oddzielnych warstwach jest wygodniejsze.

8.1 Ćwiczenie 11

Przygotuj rysunek zawierający napis "Witamy w programie GIMP!". KaŜdy wyraz napisz innym kolorem i czcionką.

Rysunek 14. Przykład uŜycia narzędzia tekstowego

Po wybraniu narzędzia tekstowego z okna głównego programu (skrót klawiszowy: t), klikamy w dowolne miejsce

obrazu. Na ekranie pojawi się okno dialogowe umoŜliwiające wybór kroju czcionki, wielkości liter oraz stylu pisma

(kursywa, pogrubienie). Gdy ustalimy wszystkie parametry oraz wpiszemy tekst "Witamy" naleŜy zamknąć okno

Strona 25

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

2008-02-27 19:41:09

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

dialogowe. Teraz przechodzimy do okna warstw i tworzymy nową warstwę. Wpisany przed chwilą napis powinien

pojawić się w edytowanym dokumencie na nowo utworzonej warstwie.

Kolor czcionki zmieniamy wykorzystując przyciski Kolor narzędzia i tła w lewym dolnym rogu GIMPa lub

wykorzystując paletę kolorów (skrót Ctrl+P).

Jeśli dodane napisy umieścimy na nowych warstwach, wówczas kaŜdy z nich moŜemy niezaleŜnie przesuwać i

zmieniać. Zmianę koloru napisu juŜ dodanego realizujemy następująco. Modyfikowana warstwa powinna być

warstwą aktywną. Operacja Warstwy | Zaznaczenie z kanału alfa spowoduje zaznaczenie wprowadzonego napisu.

Teraz korzystamy z narzędzia do wypełniania farbą (skrót Shift+B) i wlewamy w napis dowolny inny kolor. W

identyczny sposób moŜemy zmienić kolor kaŜdego napisu (o ile jest on umieszczony na osobnej warstwie, a nie

zakotwiczony).

8.2 Ćwiczenie 12

Przygotuj logo firmy "ABC" przedstawione na rysunku 15.

Rysunek 15. Logo firmy ABC

Logo zawiera trzy prostokąty, dwa czarne i jeden Ŝółty, oraz dwa napisy. Pracę rozpoczynamy od narysowania

prostokątów. Wykorzystujemy do tego zaznaczenie prostokątne oraz narzędzie kubełek słuŜące do wypełniania

obszarów farbą.

Strona 26

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

2008-02-27 19:41:09

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

Następnie dodajemy do rysunku napis "ABC Web Solutions" pisany Ŝółtą czcionką. Napis ten umieszczamy na

osobnej warstwie. Warstwę z napisem kopiujemy stosując przycisk Duplikuje warstwę (okno warstw). Skopiowany

napis przesuwamy nieco do góry, po czym zmieniamy jego kolor na czarny.

Oczywiście ćwiczenie moŜemy równieŜ wykonać umieszczając na Ŝółto-czarnych prostokątach trzy napisy "ABC",

"Web" oraz "Solutions".

9. Ozdobne napisy

Oprócz zwykłego narzędzia tekstowego umoŜliwiającego pisanie tekstów standardowymi czcionkami

zainstalowanymi w systemie GIMP posiada bibliotekę skryptów generujących róŜnorodne napisy ozdobne. Ozdobne

napisy znajdziemy w menu głównym wybierając kolejno opcje Dodatki | Script-Fu | Loga.

KaŜdy ze skryptów tworzących loga posiada pewną liczbę właściwości takich jak wielkość liter, krój czcionki czy

tekstury. Po wykonaniu skryptu tworzony jest rysunek zawierający logo.

9.1 Ćwiczenie 13

Przygotuj napis "Witamy w GIMPie!" widoczny na rysunku 16.

Strona 27

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

2008-02-27 19:41:09

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

Rysunek 16. Ozdobny napis wykonany skryptem Lśniące

Napis ten jest generowany skryptem menu główne | Dodatki | Script-Fu | Loga | Lśniące. Po wpisaniu tekstu

"Witamy w GIMPie!" i zatwierdzeniu zostanie przygotowane Ŝądane logo. Jak widać na rysunku 16, skrypt tworzy

obraz wielowarstwowy. Na osobnych warstwach zostały umieszczone litery, cień oraz efekty.

9.2 Ćwiczenie 14

Wykorzystując skrypt Lśniące przygotuj logo firmy ABC widoczne na rysunku 17.

Strona 28

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

2008-02-27 19:41:09

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

Rysunek 17. Logo firmy ABC zawierające wklejone litery wykonane skryptem Lśniące

Logo składa się z kilku elementów. Po pierwsze widzimy duŜy kwadrat zawierający trzy kwadraty czarne, trzy Ŝółte

oraz trzy białe. DuŜy kwadrat rysujemy na tle wykorzystując narzędzie do prostokątnego zaznaczania obszarów,

prowadnice oraz kubełek do wlewania farby. Następnym elementem jest cień rzucany przez duŜy kwadrat. Cień

dodajemy zaznaczając duŜy kwadrat i wykonując skrypt Script-Fu | Cień | Rzucany cień. Trzecim elementem loga

jest czarny napis "ABC Web Solutions". Napis dodajemy wykorzystując narzędzie tekstowe. Ostatnim elementem są

trzy lśniące litery A, B, C. KaŜdą z liter wykonujemy uruchamiając poznany juŜ skrypt Lśniące. W skrypcie

zmieniamy gradient na Golden. Tworzymy logo zawierające literę A. W uzyskanym rysunku wyłączamy widoczność

warstwy tła, i łączymy widoczne warstwy: Warstwy | Połącz widoczne warstwy. Teraz zaznaczamy cały rysunek

przedstawiający literę A (Ctrl+A), następnie go kopiujemy i wklejamy w opracowywane logo na osobną warstwę.

Podobnie postępujemy z literami B oraz C: tworzymy literę skryptem Lśniące, wyłączamy widoczność tła, łączymy

widoczne warstwy, zaznaczamy całość, kopiujemy i wklejamy na osobną warstwę rysunku z logiem firmy ABC.

Strona 29

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

2008-02-27 19:41:09

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

Otrzymane logo powinno zawierać sześć warstw: tło (z rysunkiem kwadratu), cień, warstwę z czarnym napisem oraz

trzy warstwy z literami A, B oraz C.

10. Maskowanie warstw

Ostatnim etapem zgłębiania wiedzy na temat warstw jest maskowanie. KaŜda warstwa moŜe posiadać własną maskę.

Maska jest czarno-białym obrazem, który modyfikuje widoczność warstwy. Kolor biały maski przepuszcza zaś czarny

ukrywa zawartość warstwy. Po masce warstwy malujemy wykorzystując wszystkie dostępne narzędzia takie jak

pędzel, wypełnianie kolorem, wypełnianie gradientem czy narzędzie tekstowe.

10.1 Ćwiczenie 15

Do obrazu z ćwiczenia 8 dodaj maskę warstwy, która przepuszcza napis "Kto?" tak jak to przedstawiono na rysunku

18.

Rysunek 18. Rysunek z ćwiczenia 8 wzbogacony o maskę

Po otworzeniu obrazu z ćwiczenia 8 łączymy wszystkie warstwy oprócz tła, tak by otrzymany obraz posiadał

warstwę białe tło oraz warstwę zawierająca wszystkie miniaturki. Następnie do warstwy z miniaturkami dodajemy

maskę: Warstwy | Dodaj maskę warstwy. Dodając maskę ustalamy jej kolor na czarny (pełna przezroczystość). Teraz

przechodzimy do edycji maski. Klikamy w ikonę maski w oknie warstw. Wszystkie operacje edycyjne odnoszą się

teraz do maski. Zmieniamy kolor narzędzia na biały, a następnie wybieramy narzędzie tekstowe. Wprowadzamy

napis "Kto?", zamykamy okno narzędzia tekstowego i przechodzimy do okna warstw. Teraz nie mamy moŜliwości

Strona 30

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

2008-02-27 19:41:09

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

dodania wprowadzonego tekstu na oddzielnej warstwie. Naciskamy przycisk zakotwiczenia, przez co napis "Kto?"

zostanie umieszczony na masce. Kliknijmy ikonę maski przytrzymując przycisk Ctrl. Operacja Ctrl+klik powoduje

włączenie/wyłączenie działania maski.

10.2 Ćwiczenie 16

Wykonaj plakat p.t. "Lubisz las - zbieraj makulaturę".

Rysunek 19. Plakat "Lubisz las - zbieraj makulaturę"

Plakat "Lubisz las ..." zawiera pięć warstw: tło, widokówkę, warstwę białą, która rozjaśnia widokówkę, drugą

warstwę z widokówką, warstwę z napisem oraz warstwę z czarną obwódką napisu. Druga warstwa z widokówką

zawiera maskę, która przepuszcza jedynie napis "Lubisz las ...". Dodanie do obrazu warstwy z napisem ułatwia

zmianę maski. Warstwę z napisem przesuwamy w dowolne miejsce. W momencie, gdy napis jest gotowy

zaznaczamy go (zaznaczenie z kanału alfa dla warstwy z napisem), po czy przechodzimy do edycji maski i

wypełniamy zaznaczenie kolorem białym.

10.3 Ćwiczenie 17

Strona 31

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

2008-02-27 19:41:09

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

NałóŜ na siebie dwie fotografie tak, by przejście z jednej fotografii do drugiej było płynne.

Zadanie to wykonujemy wklejając dwie fotografie na osobne warstwy. KaŜdej z nich dodajemy maskę, na której

umieszczamy liniowy gradient zmieniający się od koloru białego do czarnego.

Rysunek 20. Płynne przenikanie zdjęć

11. Podsumowanie

Korzyści z wykorzystania warstw w tworzonych grafikach polegają na oddzieleniu róŜnych elementów rysunku.

KaŜda warstwa moŜe być modyfikowana niezaleŜnie od pozostałych. Zmianom podlegają takie cechy jak połoŜenie,

rozmiar czy kolorystyka. Dzięki temu przegrupowanie elementów rysunku sprowadza się do przesuwania warstw

oraz zmiany ich kolejności.

Główny zarzut do warstw w GIMPie to brak moŜliwości grupowania i rozgrupowywania. Bez operacji grupowania

warstw wykonanie efektu dla wielu osobnych elementów będzie wymagało wiele pracy (kaŜdą warstwę będzie trzeba

uczynić aktywną, wykonać zaznaczenie a następnie sam efekt). Ponadto, jeśli nie grupujemy warstw, to zarządzanie

długą listą w oknie dialogowym równieŜ nie jest wygodne.

Strona 32

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

2008-02-27 19:41:09

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

Tabele 1 oraz 2 przedstawiają opcje programu GIMP wykorzystane w omówionych ćwiczeniach. Tabela 1 zawiera

opcje menu kontekstowego okna Warstwy, kanały i ścieŜki, które aktywujemy prawym kliknięciem w jedną z warstw

wewnątrz okna. Opcje przedstawione w tabeli 2 są dostępne w menu kontekstowym obrazu aktywowanym po

prawym kliknięciu w obraz.

Kolejne drobne błędy w GIMPie to nazwa opcji Usuń kanał w menu kontekstowym okna warstw (powinno być:

Usuń warstwę) oraz skrót klawiszowy Prior w menu kontekstowym obrazu Warstwy | Stos | Poprzednia warstwa

(powinno być: PgUp).

lp.

Funkcja

Opcja menu

Klawisz skrótu

Tworzenie nowej warstwy

Nowa warstwa

Ctrl+N

Zmiana kolejności warstw

Stos

Ctrl+B, Ctrl+F, Ctrl+Shift+B,

Ctrl+Shift+F

Duplikowanie istniejącej warstwy

Zduplikuj warstwę

Ctrl+C

Zakotwiczanie pływającego zaznaczenia

Zakotwicz warstwę

Ctrl+H

Usuwanie warstwy

Usuń kanał

Ctrl+X

Łączenie warstw widocznych

Połącz widoczne

warstwy

Ctrl+M

Łączenie wszystkich warstw

Spłaszcz obraz

Dodawanie maski

Dodaj maskę warstwy

Usuwanie maski warstwy

Usuń maskę warstwy

10.

Zaznaczenie nieprzezroczystego fragmentu

warstwy

Zaznaczenie z kanału

alfa

Tabela 1. Opcje menu kontekstowego okna Warstwy, kanały i ścieŜki

lp.

Funkcja

Opcja menu

Klawisz skrótu

Strona 33

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

2008-02-27 19:41:09

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

Wyrównanie

Warstwy | Wyrównaj widoczne warstwy

Narzędzie tekstowe

Narzędzia | Tekst

Paleta kolorów

Okna dialogowe | Palety

Ctrl+P

Magiczna róŜdŜka

Narzędzia | Zaznaczanie | Zaznaczanie rozmyte

Wypełnianie kolorem

Narzędzia | Rysowanie | Wypełnianie

kubełkiem

Shift+B

Wypełnianie gradientem

Narzędzia | Rysowanie | Gradient

Przesuwanie warstw

Narzędzia | Przekształcanie | Przesuń

Przesuwanie warstw

strzałki, Shift+strzałki

Zmiana bieŜącej warstwy

PgDown/PgUp

10.

ObniŜanie/podnoszenie

warstwy

Shift+PgUp,

Shift+PgDown

11. Warstwa na szczyt/na dół

Ctrl+PgUp, Ctrl+PgDown

12. Działanie maski

Ctrl+klik w maskę

Tabela 2. Opcje menu kontekstowego obrazu