GIMP: tworzenie grafiki na potrzeby WWW (cz 3) Włodzimierz Gajda W kolejnym spotkaniu z programem GIMP przyjrzymy si ciekom. Wykorzystanie cieek daje autorowi moliwo wygodnego modyfikowania kształtu rysowanych elementów. cieki cieki umoliwiaj dołczenie do obrazów elementów wektorowych. Kada cieka zdefiniowana w GIMPie jest osobnym obiektem, przy czym rysunek moe zawiera dowoln liczb cieek. Modyfikacja obrazu (np. rysowanie pdzlem) nie wpływa w aden sposób na cieki. Podobnie, modyfikacja cieek (np. dodawanie wzłów) nie wpływa na zawarto rysunku. Cech, która wyrónia cieki jest to, e w łatwy sposób moemy modyfikowa ich kształt. Składaj si one z połczonych wzłów, które moemy dowolnie dodawa, usuwa oraz przesuwa. W kadym wle przechowywane s informacje o kształcie krzywej. Przesuwajc wskaniki kształtu wyginamy fragmenty cieki nadajc jej dany wygld. Operacje wykonywane na ciekach Dodawanie/usuwanie cieek Operacje wykonywane na całych ciekach to dodanie cieki do obrazu, zduplikowanie istniejcej cieki oraz usunicie cieki. Istnieje take operacja przekształcajca biec selekcj w ciek. Zatem nowo utworzona cieka moe by ciek pust (tj. nie posiadajc wzłów), kopi istniejcej cieki albo przybra kształt zaznaczenia. Zmiana kształtu cieki Po dodaniu nowej lub wybraniu istniejcej cieki moemy przystpi do jej edycji. Edytujc ciek mamy moliwo dodawania, usuwania oraz przesuwania wzłów. Moemy równie zmienia kształt krzywych łczcych kolejne wzły oraz przesuwa cał ciek. Modyfikowanie rysunku Gdy ustalimy kształt cieki moemy przystpi do edycji samego obrazu. Operacja Rysuje ciek powoduje narysowanie na rysunku kształtu biecej cieki aktualnym pdzlem. Przycisk Tworzy zaznaczenie ze cieki wykonuje zaznaczenie fragmentu rysunku o kształcie biecej cieki. Oczywicie na zaznaczonym obszarze moemy wykonywa wszystkie operacje dostpne dla selekcji (malowanie, wypełnianie, przekształcenia itd.).
Zastosowania cieek Jakie s zalety stosowania cieek? Wykorzystujc cieki moemy dodawa do rysunku elementy, które łatwo wielokrotnie narysowa lub pokolorowa zmieniajc im ewentualnie kształt. W ten sposób rysunek staje si bardziej elastyczny i modyfikowalny. Druga wana zaleta polega na tym, e cieki s oddzielnymi obiektami wektorowymi. Modyfikowanie cieki nie powoduje adnych zmian w rysunku (dokładniej: nie zmienia kolorów poszczególnych pikseli). Edycja kształtu nie niesie za sob ryzyka "zniszczenia" rysunku lub jego fragmentu. Dopiero, gdy uznamy, e kształt cieki jest zadowalajcy przystpujemy do rysowania pdzlem, wypełniania kolorem czy jakiejkolwiek innej operacji edytorskiej. Wreszcie nie mniej wany jest fakt, e cieki umoliwiaj operowanie krzywymi Beziera. wiczenia wiczenie 1 Przygotuj rysunek przedstawiajcy kształt młotka. Rys. 1. Okno dialogowe cieki. Po utworzeniu nowego rysunku przechodzimy do okna dialogowego zarzdzajcego ciekami. W tym celu wybieramy z menu kontekstowego opcj Warstwy Warstwy, kanały i cieki. W oknie dialogowym wybieramy zakładk cieki. Nastpnie naciskajc przycisk
Tworzy now ciek dodajemy do rysunku now ciek. W górnej czci okna dialogowego cieki dostpne s cztery przyciski: Nowy punkt, Dodaje punkt, Usuwa punkt oraz Modyfikuje punkt. Po wybraniu pierwszego z nich (Nowy punkt) klikamy kolejno w wybrane miejsca rysunku. Kade kliknicie spowoduje dodanie do cieki kolejnego punktu. Dodawanie punktów koczymy klikajc w pierwszy punkt. Kolejne punkty cieki stawiajmy w takich miejscach, by otrzymana cieka przypominała swym kształtem rysunek 2. Jeli który z punktów cieki ley w złym miejscu to moemy go przesun przytrzymujc klawisz Ctrl. Cał ciek przesuniemy przytrzymujc klawisz Alt. Oczywicie moemy sobie prac znacznie ułatwi posługujc si prowadnicami oraz odpowiednio zwikszajc podgld rysunku. Rys. 2. cieka o kształcie młotka. Po ustaleniu kształtu naciskamy przycisk Tworzy zaznaczenie ze cieki, który przekształci ciek w zaznaczenie. W ten sposób otrzymalimy zaznaczenie o kształcie młotka. Teraz wykorzystujc narzdzie Wypełnianie kolorem lub deseniem wypełniamy zaznaczenie kolorem czarnym. Efekt naszej pracy został przedstawiony na rysunku 3.
Rys. 3. Młotek po przekształceniu w zaznaczenie i wypełnieniu farb. wiczenie 2 Przygotuj rysunek przedstawiajcy przecinek widoczny na rysunkach 5 oraz 6. Po utworzeniu nowego rysunku przechodzimy do okna dialogowego cieek. Tworzymy now ciek i przystpujemy do jej edycji. Po dodaniu piciu wzłów zmieniamy kształt krzywych łczcych wzły. Wykonanie operacji cignij-upu na wle powoduje zmian połoenia punktów sterujcych kształtem krzywych. Odcinki łczce wzły przybieraj kształt krzywych Beziera. Kilkukrotnie powtarzamy t operacje w kolejnych wzłach a do uzyskania cieki przypominajcej przecinek widoczny na rysunku 4. Pamitajmy, e kady wzeł moemy przesun wykonujc operacje cignij-upu z jednoczesnym przytrzymaniem klawisza Ctrl, natomiast nacinicie klawisza Shift przed operacj przecigania wzła spowoduje zmian kształtu tylko jednego z ramion krzywej przechodzcej przez dany wzeł.
Rys. 4. Przecinek: cieka wykorzystujca krzywe Beziera. Gdy cieka jest gotowa przekształcamy j w zaznaczenie. Zaznaczony obszar wypełniamy kolorem niebieskim. Nastpnie ustalamy kolor pióra na granatowy. Po ponownym przejciu do okna dialogowego cieek wykonujemy operacj Rysuje ciek. Przecinek zostanie obrysowany kolorem granatowym tak jak to zostało przedstawione na rysunku 5. Rys. 5. Przecinek po wypełnieniu kolorem i obrysowaniu cieki.
Jeli teraz uznamy, e potrzebny nam jest przecinek o identycznym kształcie a innych kolorach wówczas wystarczy ponownie otworzy plik i wykona operacje wypełniania kolorem i obrysowywania cieki. Oczywicie w celu zapisania w pliku informacji o ciekach musimy stosowa format XCF. Zapisanie pliku w formacie JPEG, PNG czy BMP powoduje utracenie informacji o ciekach! Rys. 6. Przecinek po zmianie kolorów. wiczenie 3 Przygotuj rysunek przedstawiajcy młotek pokolorowany na dwa kolory tak jak to przedstawiono na rysunku 7.
Rys. 7. Młotek pokolorowany na dwa kolory. Prac rozpoczynamy ustalajc prowadnice tak, by przebiegały niemal po kadej prostej rysunku. Nastpnie tworzymy ciek bdc obrysem młotka. Kwadrat otaczajcy młotek otrzymamy w dwóch krokach. Najpierw zaznaczamy kwadrat otaczajcy młot. Kwadrat ten wypełniamy czarn farb. Nastpnie zaznaczony kwadrat pomniejszamy (operacja pomniejszania zaznaczenia) i wypełniamy biał farb. Po dodaniu ramki rysujemy czarny młotek (zaznaczenie przekształcamy w selekcj; selekcj wypełniamy kolorem). Rysunek 8 przedstawia biecy stan rysunku: młotek otoczony czarn obwódk.
Rys. 8. Młotek z obwódk. Korzystajc z narzdzia Zaznaczanie ssiadujcych obszarów zaznaczamy biały obszar wewntrz czarnej obwódki. Po aktywacji narzdzia Zaznaczanie ssiadujcych obszarów naley klikn w dowolny biały piksel wewntrz czarnej ramki. Nastpnie usuwamy lew stron zaznaczenia. Wybieramy narzdzie do selekcji prostoktnej i przytrzymujc klawisz Ctrl odcinamy lew połow zaznaczenia. Otrzymany obszar wypełniamy kolorem czarnym. Rysunek 9 przedstawia uzyskane zaznaczenie po wypełnieniu kolorem.
Rys. 9. Kolejny etap pracy nad dwukolorowym młotkiem. Nastpnie usuwamy wszelkie zaznaczenia i uzyskujemy ze cieki zaznaczenie w kształcie młotka. Ponownie wykorzystujc narzdzie zaznaczenia prostoktnego oraz klawisz Ctrl usuwamy lew cz zaznaczenia. Pozostałe zaznaczenie wypełniamy kolorem białym. Otrzymany obraz został przedstawiony na rysunku 7. wiczenie 4 Narysuj ramk przedstawion na rysunku 10.
Rys. 10. Obramowanie. wiczenie rozpoczynamy od wypełnienia całego rysunku kolorem czarnym. Nastpnie dodajemy do rysunku now ciek, po czym wykorzystujc prowadnice ustalamy jej kształt. W celu narysowania winietki zmieniamy kolor pióra na biały, po czym naciskamy przycisk Rysuje ciek. wiczenia 1, 2, 3 oraz 4 wykorzystywały jedn ciek. Kady rysunek wykonany GIMPem moe zawiera dowoln liczb cieek, o czym przekona nas kolejne wiczenie. wiczenie 5 Wykorzystujc cieki narysuj odcinki przedstawione na rysunku 11 w taki sposób, by mona było w łatwy sposób zmieni ich kolor.
Rys. 11. Odcinki narysowane przy uyciu czterech cieek. Utwórzmy nowy obraz zawierajcy prowadnice w podobnych miejscach jak na rysunku 11. Korzystajc z prowadnic dodajemy do rysunku cztery cieki. Kada cieka odpowiada jednemu brzowemu odcinkowi z rysunku 11 (jeden odcinek pionowy i trzy poziome). Okno dialogowe z rysunku 12 pokazuje list zdefiniowanych cieek. Rys. 12. Cztery cieki uyte w wiczeniu 5. Jeli teraz chcemy zmieni kolor odcinków z brzowego na niebieski oraz nieco zwikszy grubo naley kolejno:
wyczyci rysunek ustali kolor i grubo pióra wykona operacje Maluje ciek czterokrotnie (dla kadej cieki osobno) Zmieniony rysunek jest widoczny na ilustracji 13. Z racji na to, e cieek nie moemy łczy ani grupowa, operowanie zbyt du ich liczb jest wygodne. wiczenie szóste wyjania, w jaki sposób tworzy cieki składajce si z kilku rozłcznych odcinków. Rys. 13. cieki z wiczenia 5 po pomalowaniu innym pdzlem. wiczenie 6 Przygotuj rysunek, który zawiera ciek składajc si z rozłcznych odcinków, tak by pomalowanie wszystkich odcinków mona było wykona pojedynczym naciniciem przycisku Maluje ciek. Wykonaj ilustracj podobn do rysunku 14.
Rys. 14. cieka zawierajca kilka rozłcznych fragmentów. Po utworzeniu nowego rysunku i ustawieniu prowadnic tworzymy now ciek. Jeli chcemy by cieka zawierała odcinek naley klikn w punkt startowy odcinka, nastpnie klikn w punkt kocowy, po czym ponownie klikn punkt startowy. Jeli teraz kilkajc utworzymy nowy wzeł, wówczas bdzie on rozpoczynał drugi (rozłczny) fragment cieki. Postpujc według opisanej metody dodajemy do cieki kolejne odcinki. Podobnie jak w poprzednim zadaniu dodajemy trzy odcinki poziome i jeden pionowy. Rónica polega na tym, e w poprzednim zadaniu kady odcinek stanowił odrbn ciek, podczas gdy teraz mamy do czynienia z jedn ciek zawierajc cztery rozłczne odcinki. Pojedyncze nacinicie przycisku Maluje ciek spowoduje pomalowanie wszystkich czterech odcinków. W wiczeniu 7 wykorzystamy operacj tworzenia cieki na podstawie zaznaczenia. Poznane w zeszłym odcinku operacje na zaznaczeniach ułatwiaj definiowanie cieek składajcych si z kół, elips, kwadratów oraz prostoktów. wiczenie 7 Narysuj obramowanie przedstawione na rysunku 15.
Rys. 15. cieka uzyskana z zaznaczenia. Zauwamy, e obramowanie to jest kwadratem z obcitymi naronikami. Zaznaczenie o takim kształcie uzyskamy stosujc operacj rónicy zaznacze. Utwórzmy nowy rysunek i dodajmy do niego prowadnice. Nastpnie tworzymy selekcje kwadratow. Po utworzeniu selekcji kwadratowej wybieramy narzdzie do eliptycznego zaznaczania obszarów. Naciskamy klawisz Ctrl, po czym z jednego z naroników kwadratu rozpoczynamy selekcj eliptyczn. Po rozpoczciu zaznaczania selekcji eliptycznej zwalniamy klawisz Ctrl, a nastpnie naciskamy klawisze Ctrl oraz Shift. Rozcigamy koło do zadanych rozmiarów i zwalniamy przycisk myszki. Powysza procedura powinna spowodowa obcicie jednego z naroników kwadratu. Naley j powtórzy czterokrotnie (dla kadego naronika z osobna). W momencie, gdy zaznaczenie jest ju gotowe przechodzimy do okna cieki. Operacja Tworzy ciek z zaznaczenia spowoduje konwersje biecego zaznaczenia na ciek. Jeli operacja ta jest nieczynna, wówczas naley do rysunku doda jakkolwiek ciek. Gdy cieka jest gotowa rysujemy j niebieskim piórem. Metody opisane w wiczeniach od pierwszego do siódmego znajduj zastosowanie przy dołczaniu do tworzonych obrazów odcinków, krzywych oraz łamanych. Ramki, gwiazdki, strzałki czy przyciski to przykłady tylko niektórych elementów graficznych pojawiajcych si w serwisach WWW, które moemy w wygodny sposób tworzy za pomoc cieek. Poniewa jednak cieki moemy konwertowa na zaznaczenia, zatem rysowane elementy nie musz stanowi jednobarwnych linii. Ostatnie dwa wiczenia pokazuj, w jaki sposób wykorzysta cieki do wycinania fragmentów zdj.
wiczenie 8 Dysponujc zdjciem przedstawionym na rysunku 16 przygotuj ilustracj prezentujc jedynie dło widoczn na rysunku. Rys. 16. Zdjcie przedstawiajce ab na dłoni. Celem wiczenia jest uzyskanie obrazu przedstawionego na rysunku 17. W jaki sposób osign zamierzony cel? Naley wykorzystujc cieki uzyska zaznaczenie zawierajce jedynie dło. Otwórzmy rysunek ródłowy, a nastpnie dodajmy do niego now ciek. Klikajc w obraz dodajmy do cieki wzły tak, by otrzymany obszar mniej wicej zawierał dło. Nastpnie przesuwajc wzły oraz zmieniajc kształt cieki (operacja zwikszania podgldu moe bardzo ułatwi zadanie) dymy do tego, by uzyskany obszar moliwie dokładnie przylegał do dłoni. Oczywicie w razie potrzeby naley doda lub usun ze cieki dodatkowe wzły. Uzyskana cieka powinna przypomina ciek widoczn na rysunku 18.
Rys. 17. Dło po wyciciu. Rys. 18. cieka słuca do wycicia dłoni z rysunku. Gdy cieka jest gotowa naley j zamieni w zaznaczenie. Jeli chcemy uzyska gładki brzeg wycitego elementu to moemy zmikczy zaznaczenie wykonujc operacj
Zaznaczenie Wygład. Teraz odwracamy zaznaczenie i wypełniamy je kolorem białym. Powinnimy otrzyma obraz widoczny na rysunku 17. Na zakoczenie proponuj samodzielne wykonanie czterech wycitych dłoni trzymajcych aby przedstawionych na rysunku 20. Zdjcia, którymi naley si posłuy przedstawiaj dzieci łapice aby. Naszym zadaniem jest uzyskanie obrazów przedstawiajcych wyłcznie dłonie. ródłowe pliki nazywaj si zaba1.jpg, zaba2.jpg, zaba3.jpg oraz zaba4.jpg i s umieszczone w folderze cw-9. Dodawanie do rysunku ozdobnych napisów wykorzystanych na stronie "Pierwszy Internetowy Podrcznik Łapania ab" przedstawionej na rysunku 19 bdzie stanowiło temat kolejnego odcinka powiconego warstwom. Rys. 19. Strona tytułowa podrcznika łapania ab.
Rys. 20. Internetowy podrcznik łapania ab. Podsumowanie W trzecim odcinku spotka z GIMPem nauczylimy si korzysta ze cieek. Wszystkie poznane operacje przedstawia Tabela 1. Operacje te nie s dostpne za porednictwem skrótów klawiszowych, wykonujemy je korzystajc z okna cieki i dostpnych w nim przycisków. Poniewa okno dialogowe Warstwy, kanały i cieki jest wywietlane dosy czsto warto zdefiniowa własny skrót klawiszowy. Co ciekawe, w GIMPie skróty klawiszowe definiujemy naciskajc dan sekwencj klawiszy (np. Ctrl+L) w momencie, gdy menu kontekstowe jest rozwinite i wybrana opcja jest podwietlona na niebiesko. Warto zapamita opisane wczeniej działanie klawiszy Shift, Ctrl oraz Alt podczas przesuwania wzłów. Klawisz Ctrl słuy do przesuwania wzła, Alt powoduje przesunicie całej cieki, za Shift umoliwia niesymetryczna zmian kształtu cieki przy przejciu przez dany wzeł. Operacje na ciekach moemy rozpocz równie za porednictwem okna głównego GIMPa. Opcja Krzywe Beziera dodaje now ciek i przechodzi do trybu edycji cieki. Pamitajmy równie, e operacje dostpne dla cieek wymagaj, by obraz zawierał przynajmniej jedn ciek. Jeli chodzi o wady GIMPa w odniesieniu do cieek to przede wszystkim naley zwróci uwag na luk w dokumentacji. Opis programu nie zawiera wyczerpujcych informacji dotyczcych cieek. Ponadto w programie brakuje operacji łczenia oraz grupowania cieek jak równie moliwoci zaznaczenia kilku cieek w celu ich pomalowania. Nie mona równie wykonywa operacji cofnij w stosunku do cieek ani wzłów.
Funkcja Opcja menu Klawisz skrótu Okno cieek Warstwy, kanały cieki Ctrl+L Tworzenie nowej cieki Okno "cieki" - Kopiowanie istniejcej cieki Okno "cieki" - Usuwanie cieki Okno "cieki" - Tworzenie zaznaczenia ze cieki Okno "cieki" - Tworzenie cieki z zaznaczenia Okno "cieki" - Rysowanie cieki Okno "cieki" - Nowy wzeł Okno "cieki" - Dodawanie wzłów Okno "cieki" - Usuwanie wzłów Okno "cieki" - Zmiana właciwoci wzłów Okno "cieki" - Definiowanie i edycja nowej cieki Narzdzia->Zaznaczenie->Zaznaczenie Beziera Tabela 1. Poznane funkcje programu GIMP. wiczenia przedstawione w artykule s dostpne na stronie domowej autora pod adresem http://www.gajdaw.pl/ B