GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 1
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
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 2
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.
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 3
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ądz
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ę
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 4
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.
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 5
Rysunek 1.
Przykładowy rysunek wielowarstwowy
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 6
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.
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 7
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 znalez
ć 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.
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 8
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.
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 9
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
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 10
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ę.
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 11
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 12
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.
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 13
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.
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 14
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 15
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
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 16
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ędz
(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ędz
(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.
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 17
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.
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 18
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.
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 19
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 20
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.
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 21
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.
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 22
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łą.
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 23
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ładz
), 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
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 24
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
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 25
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ą.
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 26
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.
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 27
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.
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 28
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.
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 29
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
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 30
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
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 31
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.
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 32
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
Ctrl+B, Ctrl+F, Ctrl+Shift+B,
2. Zmiana kolejności warstw Stos
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
Połącz widoczne
6. A
ączenie warstw widocznych Ctrl+M
warstwy
7. A
ączenie wszystkich warstw Spłaszcz obraz -
8. Dodawanie maski Dodaj maskę warstwy -
9. Usuwanie maski warstwy Usuń maskę warstwy -
Zaznaczenie nieprzezroczystego fragmentu Zaznaczenie z kanału
10. -
warstwy alfa
Tabela 1.
Opcje menu kontekstowego okna Warstwy, kanały i ście\
ki
lp. Funkcja Opcja menu Klawisz skrótu
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09
GIMP: tworzenie grafiki na potrzeby WWW (część 4) Strona 33
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
Narzędzia | Rysowanie | Wypełnianie
5. Wypełnianie kolorem Shift+B
kubełkiem
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
Obni\
anie/podnoszenie Shift+PgUp,
10. -
warstwy 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
http://www.gajdaw.pl/gimp/kurs-warstwy/print.html 2008-02-27 19:41:09