Tekstura to mały obraz rastrowy wykorzystywany do wypełnienia obszarów obrazu.

Transkrypt

1 DEFINICJA Tekstura to mały obraz rastrowy wykorzystywany do wypełnienia obszarów obrazu. Rysunek 8.5. Przybornik z zaznaczonym Narzędziem kształtów (po lewej) i Gradientem (po prawej) Aby wybrać kształt do narysowania, należy kliknąć prawym przyciskiem myszy obszar obrazu. Możemy wówczas zmienić rodzaj kształtu, na przykład na prostokąt lub elipsę. Wypełnienie gradientowe może zawierać proste przejście między wybranymi kolorami lub bardziej złożony wzór. Przykłady możliwych wypełnień gradientowych przedstawiono na rysunku 8.6. Rysunek 8.6. Wypełnienia gradientowe 8.3. Filtrowanie obrazów i tworzenie efektów Dotychczas tworzyliśmy obrazy od zera rysowaliśmy wybrane kształty, wypełnialiśmy obszary kolorem lub teksturą. Słowem, tworzyliśmy obraz taki, jaki chcieliśmy, żeby był. Często jednak w grafice komputerowej rozpoczynamy pracę od materiału już częściowo przygotowanego, który musimy nieco zmodyfikować, aby otrzymać ostateczną wersję. Dzieje się tak na przykład podczas obróbki zdjęć. Zapewne nie- 100

2 8.3. Filtrowanie obrazów i tworzenie efektów raz słyszeliśmy o tzw. nadużywaniu Photoshopa (od nazwy wspomnianego już wcześniej popularnego programu graficznego, choć oczywiście obróbkę zdjęć wykonuje się w różnych narzędziach). Mogło chodzić na przykład o usunięcie palca u ręki albo inną niepożądaną zmianę zdjęcia. Rzeczywiście, za pomocą programów graficznych można edytować zdjęcia w zdumiewający sposób rozjaśniać lub przyciemniać, zmieniać kolory, usuwać drobne niedoskonałości, przenosić fragmenty obrazu w inne miejsce, rozmywać, wyostrzać i wykonywać wiele innych operacji. Pora pokazać, jak to zrobić Filtry funkcyjne i otoczeniowe W programach graficznych wykorzystuje się dwa rodzaje filtrów. Pierwszy rodzaj to filtry, w których zmieniamy wartości każdego piksela. Przykładem takiego filtru jest choćby negatyw, nazywany też odwróceniem. Filtr ten zastępuje starą wartość koloru piksela, nazwijmy ją I, wartością 255 I. Inne przykłady filtrów funkcyjnych to modyfikacje krzywych tonalnych, które opisane są dalej w tym rozdziale. Mówiąc krótko, filtry funkcyjne do swego działania nie potrzebują wartości sąsiednich pikseli. Dla każdego piksela stosuje się po prostu pewną funkcję matematyczną, która definiuje nową wartość w odniesieniu do wartości pierwotnej. Drugi rodzaj filtrów to filtry otoczeniowe. Jak wskazuje nazwa, ich działanie opiera się nie tylko na wartości rozpatrywanego piksela, ale także na wartościach pikseli sąsiednich. Filtr otoczeniowy oblicza nową wartość piksela jako średnią tego piksela i pikseli wokół. Jak to działa w praktyce? W programie Artweaver trzeba wybrać polecenie Filtry/Inne/Własne. W okienku dialogowym, które się wyświetli, możemy zmieniać wartości w tablicy o rozmiarze 5 5 pól (rysunek 8.7). Rysunek 8.7. Edycja własnego filtru otoczeniowego Środkowe pole tej tablicy odpowiada pikselowi, którego wartość chcemy zmienić. Pola wokół niego odpowiadają sąsiednim pikselom. Wartości wpisane w pola oznaczają wagi, z jakimi obliczone będą wartości. Przykładowo filtr z rysunku 8.7 pobierze 101

3 wartość aktualnego piksela, pomnoży ją przez 5, a następnie doda pomnożone przez 1 (czyli faktycznie odejmie) wartości pikseli znajdujących się po lewej, po prawej, powyżej i poniżej (pola puste oznaczają wagę zerową). Filtr taki wzmacnia różnice między sąsiednimi pikselami jest to filtr wyostrzający. Większość filtrów dostępnych w programach graficznych to właśnie filtry otoczeniowe, służące na przykład do wykrywania krawędzi, rozmywania czy wytłuszczania. Zacznijmy od przedstawienia funkcjonalności programu Artweaver w zakresie filtrowania obrazów. W programie tym filtry dostępne są bezpośrednio w menu Filtry. Są one zebrane w następujące grupy: Renderuj, Wyostrz, Stylizuj, Szum, Tekstura, Zakłócenia, Rozmycie, Inne. W grupie Renderuj mamy do dyspozycji filtry generujące (renderujące) efekty specjalne chmury, efekty świetlne, efekt soczewki. Wytworzony sztuczny efekt dodawany jest do oryginalnego obrazu. Na rysunku 8.8 przedstawiono zdjęcie z dodanym efektem soczewki. Rysunek 8.8. Zdjęcie z dodanym efektem soczewki rozbłysku widocznego w lewym górnym rogu obrazu nie było na oryginalnym zdjęciu W grupie Wyostrz znajdują się filtry umożliwiające usunięcie rozmycia lub szumu, czyli uwypuklenie granic między obszarami o różnych kolorach. Wyostrzanie poprawia zgodnie z nazwą ostrość obrazu, jednakże zbytnie wyostrzenie sprawia, że obraz wygląda sztucznie (rysunek 8.9). 102

4 8.3. Filtrowanie obrazów i tworzenie efektów Rysunek 8.9. Podczas wyostrzania obrazu uwypuklane są granice obszarów o różnych kolorach. Rozmycia zanikają, ale obraz staje się nieco sztuczny Grupa filtrów Stylizuj zawiera narzędzia do nadawania obrazowi specyficznego wyglądu. Znajdziemy tu filtry pozwalające uzyskać stylizację na obraz olejny lub obraz namalowany na starym płótnie, filtr zmieniający nasycenie składowych RGB, dodający efekt wypukłości (odcisku rysunek 8.10), a także filtr tworzący efekt solaryzacji. Rysunek Filtr tworzący efekt odcisku kolorowego 103 Multimedia_i_grafika_komputerowa.indb :10:44

5 Filtry z grupy Szum dodają efekty zakłóceń do obrazu, natomiast filtry z grupy Tekstura nakładają na obraz powtarzalne wzory. Przykład nałożenia prostego wzoru (zwanego też często teksturą) przedstawiono na rysunku Rysunek Obraz z nałożonym efektem tekstury Grupa filtrów Zakłócenia służy do deformacji obrazu. Zniekształceniem tym może być efekt rybiego oka, efekt soczewki czy efekt pofalowania (rysunek 8.12). Rysunek Obraz zdeformowany za pomocą efektu Pofalowanie 104

6 8.3. Filtrowanie obrazów i tworzenie efektów Filtry z grupy Rozmycie służą do wygładzania obrazu różnice między pikselami zacierają się, a granice obszarów o różnych kolorach stają się mniej ostre. Jest to działanie odwrotne do filtrów wyostrzających, a efekt jest podobny jak podczas patrzenia przez źle dobrane okulary. Ciekawym efektem jest rozmycie w ruchu pokazane na rysunku Rysunek Efekty rozmycia w ruchu Bogate możliwości ma także program GIMP, popularny przede wszystkim na platformie Linux. W menu Filtry (dostępnym także z menu kontekstowego) dostępnych jest kilkadziesiąt filtrów podzielonych na grupy: Rozmycie, Uwydatnienie, Zniekształcenia, Światło i cień, Szum, Wykrywanie krawędzi, Ogólne i Łączenie (rysunek 8.14). Rysunek Filtry dostępne w programie GIMP 105

7 Warto wspomnieć o kilku filtrach dostępnych w programie GIMP, których nie ma w programie Artweaver lub których wachlarz możliwości nie jest tak obszerny. Jednym z nich jest wykrywanie krawędzi (rysunek 8.15). GIMP oferuje kilka algorytmów wykrywania krawędzi, a ich działanie jest bardzo skuteczne. Zasada działania tego filtru opiera się na odejmowaniu od siebie dwóch obrazów oryginalnego oraz przesuniętego minimalnie w wybranym kierunku. W rezultacie takiej operacji zaznaczane są miejsca, w których następuje skokowa zmiana wartości pikseli. A miejsca te to nic innego jak właśnie krawędzie. Do czego służy ten filtr? Można zastosować go na przykład do utworzenia szkicu ze zdjęcia. Poważniejsze zastosowania obejmują też tworzenie programów komputerowych do rozpoznawania napisów, numerów itp. Rysunek Działanie filtru wykrywającego krawędzie Oprócz bogatej palety predefiniowanych filtrów GIMP, podobnie jak Artweaver, oferuje też możliwość tworzenia filtrów użytkownika. Służy do tego m.in. edytor filtrów funkcyjnych, zwanych też krzywymi tonalnymi (rysunek 8.16). Nazwa pochodzi od działania filtrów, które zmieniają relacje między kolorami, czyli zmieniają tonację obrazu. Użytkownik może, przeciągając i klikając myszą, modyfikować wykres, który definiuje filtr. Modyfikacje te mogą być wykonywane dla każdego kanału RGB osobno. 106

8 8.3. Filtrowanie obrazów i tworzenie efektów Rysunek Edytor krzywych tonalnych w programie GIMP. Po prawej stronie widać wynik działania filtru Niezwykle przydatne są też narzędzia do wykonywania retuszu obrazów. Retuszowanie polega na usuwaniu niedoskonałości obrazu. Program GIMP zawiera narzędzie o nazwie Łatka, które pozwala pokryć usterkę obrazu pikselami z miejsca wzorcowego. Posłużmy się tu przykładem zdjęcia z rysunków od 8.14 do Przedstawia ono górski krajobraz zimowy. Na pierwszym planie widać czarne kamienie i inne obiekty na białym śniegu. Chcielibyśmy, aby cały teren pokryty był ładnym, gładkim, białym śniegiem. Wybieramy narzędzie Łatka, klikamy punkt wzorcowy (rysunek 8.17), a potem malujemy obszary zawierające uszkodzenia (pędzle narzędzia łatka są stosunkowo małe). Rysunek Narzędzie Łatka do usuwania niedoskonałości obrazu. Kolorem czerwonym zaznaczone zostały miejsca, w których usunięto czarne plamy na białym śniegu. Wzorzec śniegu pobrano z lewego dolnego rogu obrazu 107

9 8.4. Przygotowanie obrazów na potrzeby stron internetowych Narzędzia grafiki komputerowej pozwalają przygotować zdjęcia do gazet, magazynów i czasopism, elementy graficzne do gier komputerowych i filmów rozrywkowych, są też wykorzystywane w reklamie i w projektowaniu inżynierskim. Niemniej jedno z zastosowań jest szczególne i dlatego zasługuje na chwilę uwagi. Chodzi mianowicie o przygotowanie obrazów na potrzeby stron internetowych. Dlaczego mówimy, że są to zastosowania szczególne? Po pierwsze dlatego, że strony internetowe tworzone są w masowych ilościach. Szacuje się, że obecnie (rok 2010) istnieje około 110 milionów stron internetowych. Większość z nich zawiera mniej lub bardziej wyszukaną grafikę. Z dużym prawdopodobieństwem można założyć, że każdy grafik komputerowy w swojej karierze zawodowej stworzy obrazy na potrzeby stron internetowych. Po drugie, strony internetowe rządzą się swoimi prawami. Przygotowując obraz z myślą o wykorzystaniu w internecie, należy uwzględnić kilka szczegółów. Przyjrzymy się teraz temu zagadnieniu nieco bliżej Rozmiar obrazów i plików Strony internetowe często przygotowuje się w kilku wersjach zależnie od urządzenia i systemu, na jakim będą oglądane. Inna wersja strony może zostać przygotowana do oglądania na ekranie komputera o wysokiej rozdzielczości, inna będzie dedykowana dla telefonów komórkowych. Inne muszą więc być rozmiary obrazów (w pikselach). Do zmiany rozmiaru, czyli mówiąc fachowo, do przeskalowania obrazu, można użyć programu Artweaver. Aby wykonać tę operację, najpierw za pomocą polecenia Plik/ Otwórz wczytujemy do programu plik graficzny, który chcemy przeskalować. Następnie wybieramy z menu polecenie Obraz/Rozmiar obrazu. W oknie dialogowym (rysunek 8.18) wpisujemy nowy rozmiar w pikselach. Rysunek Zmiana rozmiaru w programie Artweaver 108

10 8.4. Przygotowanie obrazów na potrzeby stron internetowych Dokonując zmian, możemy zachować lub nie proporcje obrazu, jednak nieraz potrzebujemy obrazu o ściśle określonym rozmiarze, którego proporcje są nieco inne niż proporcje obrazu oryginalnego. Możemy wówczas usunąć zaznaczenie pola Proporcje więzów i dowolnie zmienić oba wymiary, czyli szerokość i wysokość. Trzeba jednak pamiętać, że w przypadku zmiany proporcji obrazu, która będzie większa niż kilka procent, powstaną bardzo widoczne zniekształcenia obrazu (rysunek 8.19). Rysunek Obraz oryginalny (po lewej) i przeskalowany bez zachowania proporcji (po prawej). Zniekształcenia obrazu nieco przeszkadzają Podobnie wykonuje się zmianę rozmiaru obrazu w innych programach. Sposób zmiany rozmiaru obrazu za pomocą narzędzia konsolowego convert systemu Linux został wspomniany w rozdziale 7. Oprócz rozmiaru obrazu (mierzonego w pikselach) możemy także zmienić rozmiar pliku (mierzony w kb). Ten cel osiągamy, zmieniając kompresję i jakość obrazu. Metody te omówiono w rozdziale 7. podręcznika. Oczywiście zmniejszenie lub zwiększenie rozdzielczości obrazu, przy zachowaniu tej samej jakości, również pociągnie za sobą zmianę rozmiaru pliku. Często przygotowując obrazy na potrzeby stron internetowych, wykorzystujemy tę właściwość. Po co? Wyobraźmy sobie elementy graficzne tworzące ramki, tło lub inne ozdobniki strony internetowej. O ile nie są to nieregularne, skomplikowane obrazy i o ile nie musimy zbytnio obawiać się o utratę jakości, lepiej jest przygotować je jako małe obrazy, a następnie powiększyć, stosując odpowiednie instrukcje języka HTML. Innymi słowy, chcemy przygotować mały obrazek, a następnie nakazać przeglądarce internetowej jego rozciągnięcie, tak aby pokrył cały zamierzony obszar na stronie internetowej. Bardzo często stosuje się tę metodę w przypadku pozycji menu. Na rysunku 8.20 przedstawiono rzeczywisty obraz w skali 1:1, a na rysunku 8.21 jego wygląd po umieszczeniu na stronie internetowej. Obraz ten pełni funkcję tła prawie całej strony. Ponieważ jednak w pionie nie zmienia się wraz z wysokością, można go rozciągnąć lub skopiować. W poziomie niestety trzeba już przygotować obraz w pełnym rozmiarze z uwagi na dużą zmienność obrazu w tym kierunku. Rysunek Obraz w skali 1:1 109

11 Rysunek Wygląd obrazu z rysunku 8.20 po umieszczeniu na stronie internetowej. Kod HTML rozciąga go w pionie Strony internetowe często wykorzystują nieregularne kształty obramowań, menu i innych obiektów (rysunek 8.22). Jak uzyskać taki efekt, skoro wszystkie obrazy grafiki komputerowej są prostokątne? Otóż należy przygotować obraz (a najczęściej kilka obrazów) w taki sposób, aby graniczne obszary tworzyły jedną całość z tłem lub sąsiednimi obrazami. Wówczas efekt wizualny będzie taki, jak gdyby ramka była nieregularna i krzywa. Mówiąc prościej narysowana ramka nie musi się pokrywać z granicą obrazu. Rysunek Fragment zaokrąglonej ramki typowej dla obramowań stron internetowych ĆWICZENIA Na wybranym obrazie zastosuj wszystkie filtry dostępne w programie Artweaver. Skomentuj wyniki. Za pomocą programu GIMP usuń niedoskonałości wybranego zdjęcia. Utwórz obraz złożony z różnych wypełnień gradientowych (co najmniej 5). Pytania i polecenia kontrolne Co to jest filtr dla obrazu rastrowego? Czym różnią się filtry funkcyjne od otoczeniowych? Czy wykrywanie krawędzi to filtr funkcyjny? Uzasadnij odpowiedź. Na czym polega efekt uwypuklenia? Do czego służy rozmycie? Co to jest tekstura? Na czym polega wypełnienie teksturą? Na czym polega wypełnienie gradientowe? 8. Jak działa narzędzie Łatka? 9. Jakie zasady należy stosować podczas przygotowywania obrazu na potrzeby stron internetowych? 110