Strona 1

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

2008-02-27 19:46:06

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

GIMP: tworzenie grafiki na potrzeby WWW

(część 1)

Włodzimierz Gajda

Program GIMP jest bezpłatnym narzędziem oferującym bogate możliwości obróbki grafiki komputerowej. Z powodu

różnic interfejsu programu w stosunku do aplikacji Windows, GIMP potrafi skutecznie odstraszyć początkujących

użytkowników. W jaki sposób ujarzmić GIMPa? O tym traktuje niniejszy artykuł, który rozpoczyna cykl mający na

celu przedstawienie możliwości programu oraz metod pracy ze szczególnym uwzględnieniem tworzenia grafiki na

potrzeby serwisów WWW.

1 grudnia 2003 r.

Spis treści

1. Instalacja i uruchomienie

2. Skalowanie rysunków

2.1 Ćwiczenie 1

2.2 Ćwiczenie 2

3. Kadrowanie oraz zmiana rozmiaru obrazów

3.1 Ćwiczenie 3

3.2 Ćwiczenie 4

3.3 Ćwiczenie 5

4. Obrazy czarno-białe i jednobarwne

4.1 Ćwiczenie 6

4.2 Ćwiczenie 7

5. Wygładzanie brzegu obrazu

Strona 2

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

2008-02-27 19:46:06

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

5.1 Ćwiczenie 8

5.2 Ćwiczenie 9

5.3 Ćwiczenie 10

6. Obrazy rzucające cień

6.1 Ćwiczenie 11

6.2 Ćwiczenie 12

7. Połączenie poznanych operacji

7.1 Ćwiczenie 13

7.2 Ćwiczenie 14

1. Instalacja i uruchomienie

Program GIMP możemy zdobyć odwiedzając witrynę

http://www.gimp.org

. Należy pamiętać o tym, by wraz z

programem instalacyjnym GIMPa skopiować bibliotekę GTK. Instalację oprogramowania trzeba rozpocząć od

biblioteki GTK.

Poza standardowymi opcjami takimi jak docelowy folder czy tworzenie ikony na pulpicie, program instalacyjny

umożliwia wybór wersji językowej. Po wybraniu polskiej wersji językowej cały interfejs GIMPa będzie

przetłumaczony na język polski. Niestety, w obecnej wersji pomoc dołączana do programu jest dostępna jedynie w

języku angielskim.

Strona 3

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

2008-02-27 19:46:06

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

Rysunek 1. Okno główne programu GIMP

2. Skalowanie rysunków

Pracę z GIMPem rozpoczniemy od skalowania rysunków. Operacja skalowania jest przydatna m.in. przy

przygotowywaniu galerii internetowej lub menu strony. Dysponując dużym rysunkiem chcemy na stronie umieścić

jego miniaturkę. Wykonując skalowanie rysunku nauczymy się także otwierać i zapisywać obraz, wyświetlać menu

kontekstowe obrazu, a także powiększać i pomniejszać widok obrazu.

2.1 Ćwiczenie 1

Dysponujesz plikiem

kwiatek.jpg

o wymiarach: szerokość - 800 pikseli, wysokość - 600 pikseli (w skrócie:

800x600) zapisanym w formacie JPEG. Przygotuj miniaturki o rozmiarach 400x300 oraz 200x150 i zapisz je do

plików

kwiatek-400.jpg

oraz

kwiatek-200.jpg

.

Ć

wiczenie rozpoczynamy od wczytania zdjęcia z pliku

kwiatek.jpg

. Służy do tego opcja menu głównego

Plik |

Otwórz

.

Podobnie jak pozostałe okienka dialogowe GIMPa tak i okienko "Odczyt obrazu" różni się wizualnie od aplikacji

Windows. Wynika to z faktu, że GIMP jest dostępny na różne platformy (m.in. Linux oraz FreeBSD) i operację

"Odczyt obrazu" wykonuje za pośrednictwem funkcji biblioteki GTK, a nie Windows API. Druga różnica w

Strona 4

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

2008-02-27 19:46:06

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

stosunku do innych aplikacji Windows jest taka, że w programie GIMP niemal każde okienko dialogowe będzie

widoczne w postaci osobnego przycisku na pasku zadań.

Obraz wyświetlany po otwarciu pliku możemy powiększać i pomniejszać wykorzystując opcje

Widok |

Powiększ

oraz

Widok | Pomniejsz

dostępne w menu kontekstowym obrazu. W celu wyświetlenia menu

kontekstowego, należy kliknąć prawym przyciskiem myszy w otwarty obraz. Jest to kolejna różnica w stosunku do

rodzimych aplikacji Windows. Programy Corel Photo Paint oraz Adobe Photoshop zawierają większą część swoich

opcji w menu głównym, podczas gdy w GIMPie operacje dotyczące danego obrazu są dostępne w menu

kontekstowym.

Rysunek 2. Plik kwiatek.jpg po pomniejszeniu do rozmiaru 33%

Ponieważ operacje powiększania i pomniejszania są wykonywane bardzo często, więc dla wygody warto zapamiętać

dwa skróty klawiszowe: znak - (minus) pomniejsza widok, zaś znak = (znak równości) powiększa widok

wyświetlanego obrazu. Belka tytułowa okna z obrazem informuje nas o stopniu powiększenia widoku obrazka w

stosunku do oryginału (np. 50%).

Strona 5

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

2008-02-27 19:46:06

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

Oczywiście operacje zwiększania i zmniejszania widoku nie powodują skalowania obrazu. Zapisanie obrazu po

wykonaniu operacji "Pomniejsz" spowoduje, że zapisany obraz będzie identyczny jak oryginał (tj. jego wymiary nie

ulegną zmianie).

Operację skalowania wykonujemy klikając opcję

Obraz | Przeskaluj obraz

w menu kontekstowym obrazu.

Okno dialogowe "Skalowanie obrazu" umożliwia wybór jednostki, w jakiej podawane są wymiary obrazu, podanie

nowej szerokości obrazu lub wysokości oraz zmianę współczynników X i Y. Domyślnie współczynniki X oraz Y są

połączone, co powoduje, że obraz jest skalowany proporcjonalnie (zmiana wysokości z 600 na 300 spowoduje

automatycznie zmianę szerokości z 800 na 400). Jeśli chcemy zmieniać niezależnie szerokość i wysokość obrazu

należy rozłączyć współczynniki X oraz Y klikając w przycisk o wyglądzie spinacza.

Rysunek 3. Okno dialogowe "Skalowanie obrazu"

Ustalmy szerokość obrazu na 200, zaś jego wysokość na 150. Operację zakończmy naciskając przycisk OK.

Pozostało nam zapisanie obrazu. Próżno szukać opcji

Zapisz

lub

Zapisz jako...

w menu głównym GIMPa.

Podobnie jak i poprzednio wykonywane przez nas operacje opcje związane z zapisem obrazu są dostępne w menu

Strona 6

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

2008-02-27 19:46:06

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

kontekstowym danego obrazu. Należy zatem kliknąć prawym guzikiem w przeskalowany obraz, a następnie wybrać

Plik | Zapisz jako ...

.

W przypadku plików graficznych bardzo ważny jest format zapisywanego pliku. GIMP umożliwia dwa sposoby

wyboru formatu zapisu. Po pierwsze na podstawie rozszerzenia (takie są ustawienia domyślne programu). Zatem

wpisanie nazwy

kwiatek-400.jpg

spowoduje zapis pliku w formacie JPEG. Druga metoda polega na wybraniu z

menu domyślnego formatu. Dodajmy, że format plików programu GIMP ma rozszerzenie XCF. Będzie to ważne w

przypadku wykonywania skomplikowanych operacji graficznych. Zapis w formacie JPEG, GIF czy PNG (formaty

stosowane na stronach WWW) powoduje utratę informacji takich jak: umiejscowienie prowadnic, zaznaczone

obszary czy warstwy obrazu.

Rysunek 4. Menu kontekstowe wyświetlane prawym kliknięciem w obraz

Strona 7

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

2008-02-27 19:46:06

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

Rysunek 5. Okno dialogowe "Zapis obrazu"

Po podaniu nazwy

kwiatek-400.jpg

i naciśnięciu przycisku OK pojawi się okno dialogowe "Zapis jako JPEG".

Okno to umożliwia zmianę parametrów pliku JPEG. Zmieniając jakość obrazu suwakiem możemy zmniejszyć

rozmiar pliku kosztem jakości obrazu lub poprawić jakość obrazu powiększając rozmiar pliku. Przycisk "Podgląd"

umożliwia podejrzenie zmian, powodowanych suwakiem "Jakość". Oczywiście należy dążyć do jak najmniejszych

plików. Zazwyczaj ustawienie suwaka jakości około 50 - 70 procent daje optymalny efekt. Włączmy również opcję

"Przyrostowy" oraz "Optymalizacja". Dzięki przyrostowemu zapisowi nasz obraz będzie zajmował na stronie WWW

stały rozmiar nawet, jeśli nie został jeszcze wczytany do końca.

Strona 8

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

2008-02-27 19:46:06

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

Rysunek 6. Okno dialogowe "Zapis jako JPEG"

Drugą miniaturkę wykonujemy identycznie jak pierwszą, zmieniając jedynie nową szerokość obrazu na 200.

2.2 Ćwiczenie 2

W drugim zajmiemy się przygotowaniem piętnastu miniatur. Dane do ćwiczenia stanowi piętnaście plików o

nazwach

cw01.jpg

,

cw02.jpg

, ...,

cw15.jpg

o wymiarach 400x300. Ilustracje przedstawiają przykładowe

konfiguracje sieci ethernet. Przygotuj piętnaście miniatur o wymiarach 100x75 pikseli i zapisz je w folderze o nazwie

100x75.

Strona 9

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

2008-02-27 19:46:06

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

Rysunek 7. Ćwiczenie 2

Ć

wiczenie wykonujemy następująco. Rozpoczynamy od utworzenia folderu o nazwie 100x75. Następnie kolejno

otwieramy każdy z rysunków i skalujemy do rozmiaru 100x75, po czym przeskalowany obraz zapisujemy do pliku.

Ć

wiczenia pierwsze i drugie zapoznały nas z otwieraniem i zapisywaniem obrazów w formacie JPEG,

powiększaniem i pomniejszaniem obrazów, a także z operacją skalowania. Nauczyliśmy się także posługiwać menu

kontekstowym.

3. Kadrowanie oraz zmiana rozmiaru obrazów

Drugą dość podstawową umiejętnością związaną z obróbką plików graficznych jest przygotowywanie obrazów o

zadanych rozmiarach.

3.1 Ćwiczenie 3

Naszym zadaniem jest wycięcie fragmentów ilustracji. Dysponujemy plikiem o nazwie

zolty.jpg

(wymiary

200x267) przedstawiającym żółty kwiat. Należy utworzyć następujące pliki:

zolty-120-200.jpg

o wymiarach

120x200,

zolty-150-100.jpg

o wymiarach 150x100,

zolty-150-150.jpg

o wymiarach 150x150,

zolty-

Strona 10

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

2008-02-27 19:46:06

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

200-30.jpg

o wymiarach 200x30 oraz

zolty-20-267.jpg

o wymiarach 20x267. Każdy z nowych plików ma

przedstawiać fragment oryginalnego zdjęcia z pliku

zolty.jpg

.

Rysunek 8. Okno dialogowe "Informacje o kadrowaniu i zmianie rozmiaru"

Wykonanie ćwiczenia rozpoczynamy od odczytania pliku

zolty.jpg

(opcja

Plik | Otwórz

). Następnie z menu

kontekstowego obrazu wybieramy opcję

Narzędzia | Przekształcenie | Kadrowanie i zmiana

rozmiaru

. Po wybraniu opcji na ekranie powinno pojawić się okno dialogowe

Informacje o kadrowaniu i

zmianie rozmiaru

, zaś w oknie, w którym wyświetlany jest obraz

zolty.jpg

pojawią się cztery czarne

kwadraciki służące do wyboru obszaru obrazu. Kwadraciki lewy dolny i prawy górny umożliwiają przesuwanie

selekcji, zaś kwadraciki lewy górny i prawy dolny - zmianę jej rozmiarów. Rozmiar i umiejscowienie wybranego

fragmentu możemy również modyfikować wprowadzając wartości liczbowe w oknie dialogowym. Jeśli zależy nam

na konkretnym rozmiarze uzyskiwanego obrazu to należy w oknie dialogowym wpisać żądane wielkości szerokości i

wysokości, po czym korzystając z narożników do przesuwania odpowiednio umiejscowić selekcję.

Strona 11

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

2008-02-27 19:46:06

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

Rysunek 9. Obraz zolty.jpg podczas kadrowania

Gdy selekcja jest gotowa naciskamy przycisk

Zmień rozmiar

(okno

Informacje o kadrowaniu ...

). Po

naciśnięciu przycisku rozmiar i zawartość obrazu ulegną zmianie. Tak uzyskany obraz zapisujemy i zamykamy.

Opisaną procedurę powtarzamy dla każdych zadanych wymiarów.

Opisana metoda umożliwia nam uzyskanie obrazu o dowolnych wymiarach i proporcjach. Oczywiście, jeśli z obrazu

prostokątnego 800x600 pikseli utworzymy kwadrat o rozmiarach 100x100 to musi się to odbyć albo kosztem

fragmentu rysunku albo jego proporcji!

3.2 Ćwiczenie 4

Strona 12

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

2008-02-27 19:46:06

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

Dysponując czterema zdjęciami o wymiarach 320x240 przedstawiającymi kwiaty i owoce przygotuj kwadratowe

miniaturki (cztery sztuki) o rozmiarach 80x80. Miniaturki przygotuj w taki sposób, by zawierały najbardziej

atrakcyjny fragment dużej fotografii, na przykład kwiatek, porzeczkę. Nie zmieniaj proporcji obrazu.

Rysunek 10. Efekt wykonania ćwiczenia 4

Ć

wiczenie to, bazuje na ćwiczeniu pierwszym i trzecim. Należy najpierw z każdego zdjęcia wyciąć kwadrat

(wizualnie atrakcyjny o dowolnych wymiarach np. 149x149). Następnie wycięte kwadraty należy przeskalować do

rozmiaru 80x80. W ten sposób uzyskamy kwadratowe miniaturki.

3.3 Ćwiczenie 5

Dysponując czterema zdjęciami 300x400 przedstawiającymi drzewa, utwórz miniaturki o wymiarach 75x100.

Strona 13

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

2008-02-27 19:46:06

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

Rysunek 11. Efekt wykonania ćwiczenia 5

Wykonanie ćwiczenia przebiega niemal identycznie jak wykonanie ćwiczenia 4. Kolejno otwieramy każdą fotografię,

wycinamy ciekawy fragment o zadanych wymiarach i zapisujemy. Jeśli interesujący nas fragment obrazu jest zbyt

duży (większy niż 75x100) pikseli, to na początku skalujemy obraz do takich rozmiarów, by dany fragment mieścił

się w prostokącie o wymiarach 75x100. W przypadku, gdy przeskalujemy obraz i nie jesteśmy zadowoleni z wyniku

tej operacji, należy użyć opcji

Edycja | Cofnij

o skrócie klawiszowym Ctrl+Z.

4. Obrazy czarno-białe i jednobarwne

Ilustracje wykonywane programem GIMP mogą być kolorowe lub czarno białe. Ilustrację kolorową możemy

zamienić na czarno białą wykonując operację

Obraz | Tryb | Odcienie szarości

. Po wykonaniu operacji

obraz straci kolory. Jeśli teraz zapiszemy otrzymany obraz, wówczas będzie on czarno-biały.

Strona 14

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

2008-02-27 19:46:06

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

Obraz czarno-biały możemy przekształcić w obraz "jednobarwny". Należy w tym celu otworzyć uprzednio zapisany

obraz czarno-biały, zmienić jego tryb na RGB (opcja

Obraz | Tryb | RGB

), a następnie stosując okno dialogowe

"Balans kolorów" (opcja

Obraz

) ustawić odpowiednie barwy obrazu.

Rysunek 12. Okno dialogowe "Balans kolorów"

4.1 Ćwiczenie 6

Dany jest plik

zachod.jpg

o rozmiarach 150x200 przedstawiający kolorową fotografię zachodu słońca. Utwórz

plik

bw-zachod.jpg

przedstawiający tę samą fotografię w wersji czarno-białej. Następnie utwórz pliki

brazawy-zachod.jpg

,

zielony-zachod.jpg

,

czerwony-zachod.jpg

,

niebieski-zachod.jpg

przedstawiające tą samą fotografię w kolorystyce brązowej, zielonej, czerwonej oraz niebieskiej odpowiednio.

Strona 15

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

2008-02-27 19:46:06

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

Rysunek 13. Ćwiczenie 6

Ć

wiczenie rozpoczynamy od wykonania obrazu czarno-białego. Otwieramy plik

zachod.jpg

, zmieniamy tryb na

odcienie szarości i zapisujemy otrzymany obraz w pliku

bw-zachod.jpg

. Kolejne obrazy wykonujemy

następująco. Otwieramy obraz czarno-biały, zmieniamy tryb na RGB, w okienku dialogowym

Balans kolorów

ustawiamy odpowiedni odcień obrazu, po czym uzyskany obraz zapisujemy.

4.2 Ćwiczenie 7

Dysponując obrazem

zaglowki.jpg

o rozmiarach 80x533 przedstawiającym kilka żaglówek, przygotuj osiem

obrazów o nazwach

zaglowki-1.jpg

, ...,

zaglowki-8.jpg

przedstawiających wycinek obrazu

zaglowki.jpg

. Każdy wycinek ma prezentować ten sam fragment obrazu oryginalnego. Wszystkie wycinki mają

mieć rozmiar 150x150. Przygotowane obrazy mają się różnić odcieniem.

Strona 16

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

2008-02-27 19:46:06

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

Rysunek 14. Ćwiczenie 7

Ć

wiczenie siódme wykorzystuje umiejętność skalowania obrazu poznaną w ćwiczeniu 3 oraz przygotowywanie

ilustracji jednobarwnych z ćwiczenia 6. Wykonanie ćwiczenia rozpoczynamy od wycięcia fragmentu 150x150 z

ilustracji oryginalnej. Następnie obraz o rozmiarach 150x150 przekształcamy w tryb odcienie szarości i zapisujemy

do pliku. Kilkukrotnie otwieramy plik czarno-biały, zmieniamy tryb na RGB, zmieniamy odcień i zapisujemy.

5. Wygładzanie brzegu obrazu

Kolejnym efektem, jaki opanujemy będzie wygładzanie brzegu obrazu. Efekt ten przede wszystkim zapozna nas z

narzędziem selekcji. W programie GIMP aktywnym obszarem jest fragment wybrany przy pomocy narzędzi selekcji.

Narzędzi selekcji jest kilka (selekcja prostokątna, eliptyczna czy z wolnej ręki). Wszelkie operacje edytorskie, takie

jak rysowanie po obrazie czy wlewanie farby działają w stosunku do wybranego obszaru. Efekt jest taki, że farba

"wlewana" w obraz wypełnia jedynie obszary objęte selekcją. Najprostszym przykładem selekcji jest wybranie całego

Strona 17

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

2008-02-27 19:46:06

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

obrazu (opcja

Zaznaczenie | Wszystko

). Wówczas możemy rysować po dowolnym fragmencie obrazu.

Selekcję możemy zmniejszyć. Służy do tego opcja

Zaznaczenie | Zmniejsz

. Zmniejszając selekcję podajemy

liczbę pikseli, o jaką selekcja ma zostać pomniejszona. Opcja

Zaznaczenie | Odwróć

umożliwia zmianę

obszaru zaznaczonego tak, by to, co było zaznaczone stało się niezaznaczone, zaś obszar uprzednio niezaznaczony

stał się zaznaczony. Wreszcie operacja

Zaznaczenie | Wygładź zaznaczenie

wygładza zaznaczenie.

Wykorzystując powyższe operacje dotyczące zaznaczenia oraz operację wypełniania kolorem możemy brzeg rysunku

zalać farbą w taki sposób, by krawędź była płynnie wtopiona w tło.

5.1 Ćwiczenie 8

Przekształć ilustrację zapisaną w pliku

zachod-1.jpg

w taki sposób, by brzeg ilustracji płynnie przechodził w

biały kolor.

Rysunek 15. Ćwiczenie 8

Rozpoczynamy otwierając obraz

zachod-1.jpg

. Po otwarciu zaznaczamy cały obraz. Wykorzystujemy do tego

operację

Zaznaczenie | Wszystko

. Warto zapamiętać skrót klawiszowy Ctrl+A. Następnie zmniejszamy

zaznaczenie o 20 pikseli: opcja

Zaznaczenie | Zmniejsz

. Teraz odwracamy zaznaczenie:

Zaznaczenie |

Odwróć

(skrót klawiszowy Ctrl+I). Wreszcie wygładzamy zaznaczenie:

Zaznaczenie | Wygładź

. Podajmy

promień wygładzania 20. Teraz należy uzyskane zaznaczenie zalać białą farbą wykorzystując opcję

Wypełnianie

kubełkiem

dostępną w menu kontekstowym obrazu

Narzędzia | Rysowanie

. Kolor wypełnienia zmieniamy

Strona 18

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

2008-02-27 19:46:06

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

na biały stosując

Kolor narzędzia i tła

- przyciski dostępne w lewym dolnym rogu okna głównego GIMPa.

Uzyskany obraz zapisujemy do pliku.

5.2 Ćwiczenie 9

Dane są cztery zdjęcia zachodów słońca. Przygotuj kwadratowe (200x200) ilustracje zawierające fragmenty zdjęć

oryginalnych. Przygotowane ilustracje powinny mieć wygładzone krawędzie.

Rysunek 24. Zachody słońca

Ć

wiczenie to opiera się o poprzednio wykonane ćwiczenia związane ze skalowaniem i zmianą rozmiaru obrazu.

Prace rozpoczynamy przygotowując obrazy kwadratowe. Następnie, każdy obraz przekształcamy według metody

opisanej w ćwiczeniu 8.

5.3 Ćwiczenie 10

Dane jest zdjęcie o rozmiarach 600x400 przedstawiające kwiat. Przygotuj dwie kwadratowe miniaturki (100x100) o

wygładzonych krawędziach. Przygotowane ilustracje powinny być jednobarwne.

Strona 19

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

2008-02-27 19:46:06

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

Rysunek 16. Ćwiczenie 10 łączy wszystkie poznane do tej pory umiejętności

Ć

wiczenie to łączy wszystkie do tej pory poznane efekty. W celu wykonania ćwiczenia należy kolejno:

otworzyć obraz oryginalny,

wyciąć z obrazu oryginalnego interesujący nas kwadratowy fragment (dowolnych rozmiarów; np. 250x250),

przeskalować otrzymany obraz kwadratowy do rozmiaru 100x100,

wykonać płynny brzeg obrazu

zaznaczyć cały obraz,

zmniejszyć zaznaczenie,

odwrócić zaznaczenie,

wygładzić zaznaczenie,

wlać farbę koloru tła (np. białą) w zaznaczenie,

przekształcić obraz w czarno-biały i zapisać.

Dysponując czarno-białym kwadratem przygotowujemy dwa końcowe rysunki. Należy dwukrotnie wykonać poniższe

kroki:

Strona 20

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

2008-02-27 19:46:06

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

otworzyć obraz czarno-biały,

przekształcić obraz w kolorowy i odpowiednio ustawić odcień rysunku,

zapisać otrzymany obraz.

6. Obrazy rzucające cień

Kolejny etap naszej pracy w GIMPie wzbogaci nasze ilustracje o cień. Jest to bardzo często spotykany efekt.

Wykonanie tego efektu jest stosunkowo skompilowane, bo wymaga znajomości warstw. Każdy obraz otwarty w

programie GIMP składa się z warstw. Domyślnie, obraz po otwarciu posiada jedną warstwę (obraz w formacie

JPEG). Jeśli otworzony obraz poddamy efektowi rzucania cienia (z menu kontekstowego należy wybrać

Script-Fu

| Cień | Rzucany cień

) wówczas cień dodany do naszego rysunku zostanie umieszczony na osobnej warstwie.

Przed zapisaniem obrazu do pliku musimy dodać do obrazu warstwę białą (ewentualnie o innym kolorze - będzie to

kolor tła rysunku), przesunąć ją na spód i połączyć wszystkie warstwy. W ten sposób nasz obraz znowu stanie się

płaski, zaś jego fragmenty niewypełnione staną się białe. Warstwami obrazu zarządzamy poprzez okno dialogowe

Warstwy, kanały i ścieżki

dostępne w menu kontekstowym (

Warstwy | Warstwy, kanały i ścieżki

)

.

Strona 21

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

2008-02-27 19:46:06

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

Rysunek 17. Okno dialogowe "Script-FU: Cień/Rzucany cień"

Rysunek 18. Okno zarządzające warstwami

Nowe warstwy do obrazu dodajemy przyciskiem

Nowa warstwa

. Kolejność warstw natomiast zmieniamy

przyciskami

Obniża warstwę

lub

Podnosi warstwę

. Przyciski

Obniża warstwę

,

Podnosi warstwę

oraz

Nowa warstwa

są dostępne w oknie dialogowym

Warstwy, kanały i ścieżki

.

Strona 22

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

2008-02-27 19:46:06

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

Rysunek 19. Okno dialogowe "Opcje nowej warstwy"

W celu połączenia wszystkich warstw obrazu w jedną warstwę należy wybrać opcję

Warstwy | Spłaszcz obraz

z menu kontekstowego obrazu.

6.1 Ćwiczenie 11

Dane są dwa obrazy:

maszyny-1.jpg

,

pociag-1.jpg

. Dodaj do obrazów efekt rzucanego cienia.

Strona 23

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

2008-02-27 19:46:06

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

Rysunek 23. Ilustracja rzucająca cień

Bezpośrednio po otwarciu obrazu wykonaj operację

Script-Fu | Cień | Rzucany cień

. Wywołanie tej opcji

spowoduje wyświetlenie okna dialogowego

Script-Fu: Cień/Rzucany cień

. W oknie tym ustawiamy

parametry cienia, po czym naciskamy przycisk OK. Uzyskany obraz będzie się składał z dwóch warstw. By się o tym

przekonać należy wyświetlić okno dialogowe

Warstwy, kanały, ścieżki

(opcja

Warstwy | Warstwy,

kanały i ścieżki

menu kontekstowego obrazu). W oknie warstw dodajemy do obrazu nową warstwę. Służy do

tego przycisk:

Nowa warstwa

. Niech nowa warstwa będzie biała. Decyduje o tym przycisk

typ

wypełnienia warstwy

okna właściwości nowej warstwy. Może się okazać, że teraz nasz obraz jest cały biały.

Jeśli biała warstwa znajduje się na górze, to będzie ona przysłaniała wszystkie inne warstwy. Oczywiście warstwy

możemy dowolnie przesuwać do dołu i do góry. Służą do tego przyciski

Obniża warstwę

oraz

Podnosi

warstwę

dostępne w oknie

Warstwy, kanały i ścieżki

. Przesuńmy białą warstwę na spód, a następnie

scalmy wszystkie widoczne warstwy (opcja

Warstwy | Spłaszcz obraz

). Po połączeniu warstw zapisujemy

obraz do pliku. Wykonanie drugiej ilustracji przebiega identycznie.

6.2 Ćwiczenie 12

Znajdź w Internecie dwa zdjęcia samochodów i jedno zdjęcie samolotu. Przekształć tak każdy z danych obrazów, by

przedstawiał wyłącznie samolot lub samochód. Każdy z uzyskanych obrazów przyozdób cieniem.

Strona 24

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

2008-02-27 19:46:06

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

Rysunek 20. Ćwiczenie 12. Dodajemy cień do kilku wyciętych ilustracji

Ć

wiczenie to wymaga wycięcia fragmentu rysunku (to ćwiczyliśmy w ćwiczeniu trzecim). Następnie należy

otrzymany obraz przyozdobić cieniem sposobem opisanym w zadaniu 11.

7. Połączenie poznanych operacji

Dzisiejsze spotkanie z GIMPem zapoznało nas z podstawowymi operacjami, jakie grafik komputerowy musi umieć

wykonać na obrazie takie jak skalowanie, zmiana rozmiarów czy kolorów obrazu. Tabela 1 przedstawia listę

wszystkich operacji.

lp.

Funkcja

Opcja menu

Klawisz

skrótu

Strona 25

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

2008-02-27 19:46:06

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

1.

Otwieranie obrazu:

Plik | Otwórz

Ctrl-O

2.

Zapisywanie obrazu:

Plik | Zapisz

Ctrl-S

3.

Powiększanie obrazu:

Widok | Powiększ

=

4.

Pomniejszanie obrazu:

Widok | Pomniejsz

-

5.

Skalowanie obrazu:

Obraz | Przeskaluj obraz

6.

Kadrowanie, zmiana

rozmiaru:

Narzędzia | Przekształcenie | Kadrowanie lub zmiana rozmiaru

obrazu

Ctrl-C

7.

Zamiana obrazu w czarno-

biały:

Obraz | Tryb | Odcienie szarości

Alt-G

8.

Zamiana obrazu w kolorowy: Obraz | Tryb | RGB

Alt-R

9.

Balans kolorów:

Obraz | Kolory | Balans kolorów

10. Zaznaczenie całego obrazu:

Zaznaczenie | Wszystko

Ctrl-A

11. Zmniejszanie zaznaczenia:

Zaznaczenie | Zmniejsz

12. Odwrócenie zaznaczenia:

Zaznaczenie | Odwróć

Ctrl-I

13. Wygładzanie zaznaczenia:

Zaznaczenie | Wygładź zaznaczenie

14. Wypełnianie kubełkiem:

Narzędzia | Rysowanie | Wypełnianie kubełkiem

15. Rzucanie cienia:

Script-Fu | Cień | Rzucany cień

16.

Zarządzanie warstwami

obrazu:

Warstwy | Warstwy, kanały i ścieżki

17. Dodawanie nowej warstwy:

Nowa warstwa (okno "Warstwy, kanały i ścieżki")

18. Spłaszczenie obrazu:

Warstwy | Spłaszcz obraz

Tabela 1. Poznane funkcje programu GIMP

Warto również pamiętać, że uaktywnienie menu kontekstowego obrazu osiągniemy klikając prawym przyciskiem

myszy w rysunek.

Strona 26

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

2008-02-27 19:46:06

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

Na zakończenie wykonajmy samodzielnie dwa ćwiczenia wykorzystujące wszystkie poznane możliwości programu

GIMP.

7.1 Ćwiczenie 13

Znajdź w Internecie cztery dowolne fotografie zwierząt, a następnie wykonaj na nich efekty widoczne na rysunku 21.

Każda ilustracja ma posłużyć do przygotowania dwóch plików. Pierwszy z nich jest kwadratem o wymiarach

400x400 pikseli. Rysunek ma rzucać cień. Drugi z rysunków ma być jednobarwna miniaturką o wymiarach 100x100

o rozmytym brzegu.

Rysunek 21. Ćwiczenie 13 pt. "Zwierzęta" łączy wszystkie poznane efekty

Strona 27

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

2008-02-27 19:46:06

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

7.2 Ćwiczenie 14

Przygotuj siedem ilustracji dotyczących środków komunikacji. Wyszukaj w Internecie pliki przedstawiające okręt,

rakietę, itd. Każdy rysunek przekształć, by był kwadratową, jednobarwną miniaturką 150x150.

Rysunek 22. Ćwiczenie 14 pt. "Transport"