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 5

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

2008-02-27 19:41:09

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

Rysunek 1. Przykładowy rysunek wielowarstwowy

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 11

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

2008-02-27 19:41:09

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

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 14

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

2008-02-27 19:41:09

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

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 19

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

2008-02-27 19:41:09

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

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

1.

Tworzenie nowej warstwy

Nowa warstwa

Ctrl+N

2.

Zmiana kolejności warstw

Stos

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

Ctrl+Shift+F

3.

Duplikowanie istniejącej warstwy

Zduplikuj warstwę

Ctrl+C

4.

Zakotwiczanie pływającego zaznaczenia

Zakotwicz warstwę

Ctrl+H

5.

Usuwanie warstwy

Usuń kanał

Ctrl+X

6.

Łączenie warstw widocznych

Połącz widoczne

warstwy

Ctrl+M

7.

Łączenie wszystkich warstw

Spłaszcz obraz

-

8.

Dodawanie maski

Dodaj maskę warstwy

-

9.

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

1.

Wyrównanie

Warstwy | Wyrównaj widoczne warstwy

-

2.

Narzędzie tekstowe

Narzędzia | Tekst

t

3.

Paleta kolorów

Okna dialogowe | Palety

Ctrl+P

4.

Magiczna różdżka

Narzędzia | Zaznaczanie | Zaznaczanie rozmyte

z

5.

Wypełnianie kolorem

Narzędzia | Rysowanie | Wypełnianie

kubełkiem

Shift+B

6.

Wypełnianie gradientem

Narzędzia | Rysowanie | Gradient

l

7.

Przesuwanie warstw

Narzędzia | Przekształcanie | Przesuń

m

8.

Przesuwanie warstw

-

strzałki, Shift+strzałki

9.

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