Piksele, wektory i inne stwory. Grafika komputerowa dla dzieci - ebook

Piksel i wektor

Piksel i wektor (obiekt) to dwa małe stwory, które rządzą całą grafiką cyfrową. Bez przerwy się kłócą o to, który z nich jest ważniejszy. Piksel twierdzi, że jest fajny i wszyscy lubią się z nim bawić. Wektor natomiast sądzi, że jest lepszy, bo większy, i nie podlega to żadnej dyskusji. Czy dojdą do porozumienia? Na pewno. Mimo że są krzykaczami, w rzeczywistości bardzo się lubią i jeden bez drugiego chyba nie mógłby istnieć. Zanudziliby się na śmierć. Kiedy są razem, powstają naprawdę niezłe dzieła.

Przyjrzyjmy się naszym bohaterom z bliska. Piksel jest naprawdę malutki – na ekranie ma postać kwadracika (ale bywa także prostokątem lub trójkątem). Nawet jego imię wskazuje na to, że jest maleńki. Pochodzi ono od ang. picture element, czyli element obrazu. Gdyby tak przyłożyć do piksela lupę, okazałoby się, że jest złożony z trzech jeszcze mniejszych części, zwanych subpikselami. Subpiksele mają odpowiednio kolor czerwony, zielony i niebieski. Mogą świecić, być częściowo lub zupełnie wygaszone. Dzięki temu uzyskuje się jednolitą barwę, którą widzimy gołym okiem (rys. 1).

Rysunek 1. Działanie subpikseli

Składowe każdego piksela mogą przyjmować wartości od 0 do 255. Należy przez to rozumieć, że jeśli wartość wynosi 0, to subpiksel jest wygaszony. Im większa wartość, tym subpiksel świeci jaśniej. W przykładzie pokazanym na rysunku 1 składowe pierwszego piksela wynoszą: 255, 0, 0. Dzięki temu otrzymujemy jednolity, czerwony kolor. Składowe drugiego piksela to: 255, 127, 0, dzięki czemu piksel jest pomarańczowy. Składowe ostatniego piksela: 255, 255, 127 dają kolor cytrynowy.

Gdybyśmy wszystkie wartości ustawili na 0, wówczas piksel byłby wygaszony, a my widzielibyśmy kolor czarny. Odwrotna sytuacja będzie miała miejsce wtedy, gdy wszystkie składowe przyjmą wartość 255. Wtedy zobaczymy kolor biały (rys. 2).

Rysunek 2. W pełni świecące subpiksele

Sterując składowymi, czyli ustawiając poziom świecenia subpikseli, możemy otrzymać dosłownie każdą barwę.

Piksele układają się na ekranie w szeregi i kolumny (rys. 3).

Rysunek 3. Raster

Taka siatka nosi nazwę rastra.

Za pomocą pikseli określa się rozdzielczość ekranu – nie tylko monitora komputerowego, lecz także na przykład tabletu lub smartfonu. Rozdzielczość to liczba pikseli w linii poziomej (szeregu) × liczba pikseli w linii pionowej (kolumnie). Im większa liczba takich szeregów i kolumn, tym wyższa rozdzielczość, a co za tym idzie – lepsza jakość obrazu.

Grafika rastrowa, czyli taka, w której operujemy na pojedynczych pikselach, obejmuje na przykład zdjęcia wykonywane aparatem fotograficznym, tabletem, smartfonem, skanowane. Taki rodzaj grafiki daje duże możliwości retuszu, dobierania poziomów kontrastu, nasycenia barw, jasności, pozwala na wykonywanie ciekawych fotomontaży. Jeśli chcemy się zajmować grafiką rastrową, musimy pamiętać, że pliki rastrowe są bardzo duże. Przydadzą się zatem pojemny dysk, szybka karta graficzna i dobry procesor.

Należy również mieć na uwadze, że pliki rastrowe, które chcemy poddać obróbce, są skalowalne tylko w dół. Oznacza to, że z dużego rozmiaru pliku bez problemu zrobimy mniejszy plik. Jednak w drugą stronę to nie działa. Próba powiększenia obrazu zawsze zakończy się utratą jakości. Zamiast spójnego obrazu zobaczymy pojedyncze piksele, a taki obraz w kratkę na pewno nie będzie atrakcyjny (rys. 4).

Rysunek 4. Zmiana jakości obrazu spowodowana jego skalowaniem

Wektor (a właściwie obiekt) możemy zdefiniować nieco szybciej i krócej niż jego mniejszego kolegę piksela. Obiekt to ścieżka oparta na tzw. punktach kontrolnych. Obiektem mogą być zarówno odcinki, jak i krzywe, okręgi, elipsy, wielokąty i inne proste figury geometryczne (a w przypadku nieco bardziej zaawansowanej grafiki 3D – bryły).

Z obiektami wiąże się drugi rodzaj grafiki, czyli grafika wektorowa, która jest nazywana także grafiką obiektową. Najczęściej używa się jej do tworzenia schematów, projektowania znaków graficznych, tworzenia map, planów czy komiksów. Pliki wektorowe mają mniejszą objętość niż rastrowe, a obiekty są skalowalne. Jakość obrazu się nie zmienia, niezależnie od tego, czy je powiększamy, czy zmniejszamy.

O ile w grafice rastrowej wszystkie barwy bardzo płynnie przechodzą jedna w drugą, w grafice wektorowej mamy do czynienia z obiektami, w których można co prawda zastosować wypełnienia gradientowe, lecz nie uzyskamy wrażenia rzeczywistości (rys. 5).

Rysunek 5. Różnica między plikiem rastrowym a wektorowymKolory

Jeżeli myślisz o trybach, co najpierw przychodzi ci do głowy? Pewnie tryb rozkazujący, kiedy rodzice każą ci posprzątać pokój. W grafice komputerowej tryb oznacza sposób prezentacji kolorów. Mamy cztery podstawowe tryby: czarno-biały, skalę szarości, RGB oraz CMYK.

Tryb czarno-biały wygląda dosyć ubogo. Wiąze się to z określeniem progu wyznaczającego, które elementy mają być czarne, a które pozostają białe. Oczywiście wszystkie białe i czarne fragmenty pozostają niezmienione, reszta – w zależności od koloru i stopnia jasności – jest przekształcana odpowiednio na czerń lub biel (rys. 6).

Rysunek 6. Zmiana trybu kolorów na czarno-biały

Skala szarości to kolejny tryb, w którym widać zdecydowanie więcej szczegółów obrazu. Bardzo często stosuje się go na przykład podczas skanowania dokumentów. Jeżeli ten sam obraz zamienimy na obraz w skali szarości, zauważymy, że każdej barwie odpowiada inny poziom szarości (rys. 7).

Rysunek 7. Obraz w skali szarości

W szkole na plastyce jesteśmy uczeni, że podstawowe barwy to żółty, niebieski i czerwony. W grafice komputerowej jest nieco inaczej. Podstawowe tryby, w których pojawiają się inne kolory niż biały, czarny oraz odcienie szarości, to RGB oraz CMYK. Jeżeli korzystamy z monitora, używamy RGB – skrót od Red, Green, Blue (czerwony, zielony, niebieski). I tu wkracza do akcji piksel, dzięki któremu te kolory są prawidłowo wyświetlane.

Sterując odpowiednio wartościami przypisanymi do poszczególnych składowych, możemy uzyskać pozostałe barwy. Jeżeli ustawimy maksymalne wartości (255) dla koloru czerwonego i zielonego, otrzymamy żółty, przy maksymalnej wartości koloru czerwonego i niebieskiego uzyskamy różowy, przy takich samych wartościach zielonego i niebieskiego pojawi się kolor jasnoniebieski (rys. 8).

Rysunek 8. Sposób mieszania kolorów w trybie RGB

Nieco inaczej sytuacja wygląda w trybie CMYK (Cyan, Magenta, Yellow, Black lub Key colour). Za pomocą składowych: cyjanu – jasnoniebieskiego, magenty – odcienia różu i żółtego tworzymy kolory pośrednie, a czarny (zwany też kolorem kluczowym) pozwala określić, czy barwa ma być jasna, czy ciemna (rys. 9).

Rysunek 9. Sposób mieszania kolorów w trybie CMYK

W tym modelu kolorystycznym składowe przyjmują wartości od 0 do 100. Tryb CMYK jest najczęściej używany podczas przygotowywania projektów do druku.

Na ekranie różnica między obrazem zapisany w trybie RGB a tym, który jest w trybie CMYK, jest niewielka. Przy słabszych monitorach lub dla osób, które na co dzień nie zajmują się grafiką, bywa wręcz niezauważalna (rys. 10).

Rysunek 10. Obraz zapisany w trybach RGB i CMYK

Jednak dla druku różnica jest kolosalna. Jeżeli drukujemy obraz na domowej drukarce, radzi sobie ona z trybem RGB. Jednak te projekty, które dajemy do drukarni, powinny być zapisane w trybie CMYK. Co się stanie, jeżeli oddamy w RGB? Drukarnia zapewne zwróci nam plik do poprawy, a jeżeli nie zwróci, to należy liczyć się z tym, że kolory się zmienią – najczęściej będą jaskrawe i w żaden sposób nie będą odzwierciedlały barw, które widzieliśmy na ekranie.

Istotnym elementem jest głębia koloru (colour depth). Określa ona liczbę bitów użytych dla każdego koloru pojedynczego piksela, a jej jednostką jest bpp (bits per pixel). Im większa jest głębia koloru, tym większy jest zakres kolorystyczny obrazu, a sam obraz jest bardziej realistyczny. Brzmi zawile? Trochę. Ale jeśli pomyślisz, że chodzi o wybór podczas zapisywania: 1, 8, 16, 24 lub 32 bitów, od razu zaczyna coś świtać. Wartości te odpowiadają odpowiednio obrazowi: czarno-białemu, 256 kolorom, 32 tysiącom kolorów (high color) oraz 16 milionom kolorów (true color). Głębia koloru jest wprost proporcjonalna do parametrów karty graficznej oraz monitora, czyli im wyższa jakość sprzętu, tym ładniejszy obraz (rys. 11).

Rysunek 11. Obraz, w którym zostały użyte głębie koloru: 1-bitowa oraz 32-bitowa

W przypadku grafiki rastrowej każdy program przeznaczony do jej obróbki pozwala na określenie odcienia koloru (hue), nazywanego też po prostu kolorem lub barwą. To jedna z podstawowych cech, która w istocie stanowi nazwę czystego koloru, przy czym bierze się pod uwagę sześć kolorów: czerwony, pomarańczowy, żółty, zielony, niebieski oraz fioletowy.

Ważna jest również umiejętność ustawienia nasycenia (saturation). Dzięki temu parametrowi uzyskujemy odpowiednią intensywność koloru. Jeżeli kolor jest słabo nasycony, wówczas wygląda na przytłumiony, a nawet zbliżony do szarości. Kolor mocno nasycony wydaje się bardziej żywy, czasami wręcz jaskrawy (rys. 12).

Rysunek 12. Przykład słabo oraz mocno nasyconych barw

Balans kolorów (colour balance), nazywany też balansem szarości (grey balance), balansem neutralnym (neutral balance) oraz najczęściej balansem bieli (white balance), jest znany głównie osobom zajmującym się fotografią. Balans kolorów to ogólne ustawienie kolorów w taki sposób, aby poszczególne barwy (w szczególności neutralne) wyglądały jak najbardziej naturalnie (rys. 13).

Rysunek 13. Zdjęcie, w którym użyto trzech różnych balansów koloru

Następny ważny element to kontrast (contrast). Stanowi on różnicę koloru oraz jasności, dzięki której elementy obrazu są wyodrębnione spośród innych. Ustawienie kontrastu jest optymalne, jeżeli w obrazie znajdują się elementy zarówno czysto białe, jak całkiem czarne.

Jasność (brightness) jest cechą określającą stopień światła w kolorze. Mówiąc nieco prościej, wyraża ogólne wrażenie jasności obrazu. Technicznie jasność odpowiada za ilość bieli oraz czerni w określonej barwie; ustala się ją procentowo (rys. 14).

Rysunek 14. Obraz, w którym zastosowano odpowiednio: niski, średni i wysoki poziom kontrastu oraz analogicznie zmieniono jasność

Przezroczystość (transparency) jest dostępna tylko w niektórych formatach graficznych (GIF, PNG, BMP oraz TIFF). Jej zastosowanie sprawia, że wybrane fragmenty obrazu są całkowicie niewidoczne, a w ich miejsce można podłożyć na przykład tło. Jednym z typowych przykładów jest zapisywanie znaków graficznych, takich jak logo, z przezroczystym tłem. Wybierając kolor, który ma być przezroczysty, warto zadbać o to, aby nie był to żaden z kolorów użytych w obrazie, ponieważ wówczas elementy o tej barwie znikną z obrazu (rys. 15 i 16).

Rysunek 15. Przykład obrazu, w którym kolor, dla którego wybrano przezroczystość, występuje w istotnych elementach

Rysunek 16. Przykład obrazu, w którym kolor, dla którego wybrano przezroczystość, nie występuje w istotnych elementach

Szachownica jest powszechnie stosowanym oznaczeniem przezroczystości i widzimy ją tylko podczas edycji pliku.Formaty plików graficznych

W grafice komputerowej zazwyczaj używamy kilku podstawowych formatów plików, które pozwalają na umieszczenie grafik w internecie. Jednym z najstarszych formatów plików rastrowych jest GIF (Graphics Interchange Format). Obrazy są zapisywane jako mapy bitowe, a format jest bardzo często stosowany na stronach internetowych ze względu na małe rozmiary plików. Dawniej był to podstawowy format bitmapowy, a jego jakość była bardzo słaba. Często obrazy w formacie GIF wyglądały, jakby były w kratkę. Obecnie można już uzyskać plik GIF dobrej jakości. Jeżeli nie chcemy retuszować obrazu, lecz tylko publikujemy go w internecie, taki format wystarczy. W żadnym razie jednak nie korzystamy z tego formatu, jeżeli plik ma być drukowany. Na rysunku 17 zostały przedstawione cztery obrazy zapisane w formacie GIF – za każdym razem wybraliśmy inną jakość pliku. Jeżeli przyjrzymy się im, dostrzeżemy wyraźną różnicę – w trzech z nich nie tylko widać pojedyncze piksele, lecz także zostały zmienione oryginalne kolory. Dlatego podczas zapisywania pliku warto sprawdzić dostępne opcje, aby wybrać jak najwyższą jakość.

Rysunek 17. Możliwość zapisania plików GIF w wybranej jakości w zależności od przeznaczenia pliku

JPEG to obecnie najpopularniejszy format używany głównie w fotografii cyfrowej. Cechuje go to, że przejścia między poszczególnymi kolorami są płynne. Podczas zapisywania pliku w tym formacie możemy także określić jego jakość – najczęściej pliki zapisujemy w wysokiej lub bardzo wysokiej jakości (rys. 18). Jeżeli pliki mają być umieszczone w internecie, wysoka jakość może jednak okazać się zgubna, a wygenerowany plik będzie miał zbyt dużą objętość. W takiej sytuacji o wiele lepiej skorzystać z opcji zapisywania pliku dla internetu, gdzie parametry są nieco inne, a pliki, jakie otrzymujemy, są lżejsze.

Rysunek 18. Przykład pliku JPEG zapisanego w niskiej i wysokiej jakości

PNG (Portable Network Graphics) jest następcą formatu GIF. Pliki w nim zapisane wyróżnia lepsza jakość. Dodatkowo format ten umożliwia użycie przezroczystości, co jest istotne na przykład przy umieszczaniu nieregularnych obiektów graficznych, takich jak logo, na niejednolitym tle (rys. 19).

Rysunek 19. Przykład obrazu w formacie PNG użytego na niejednolitym tle

TIFF (Tagged Image File Format) to format przeznaczony głównie do drukowania postscriptowego, zachowuje o wiele więcej szczegółów obrazu niż pliki JPEG. Jeżeli więc mamy zdjęcia, które przed drukiem chcemy wyretuszować, dopasować kolory, jasność, kontrast i dysponujemy formatem TIFF, to go nie zmieniamy. Najpierw wprowadzamy stosowne zmiany i dopiero później, jeśli jest to potrzebne, zapisujemy plik w innym formacie.

O ile na pierwszy rzut oka wydaje się, że między plikiem TIFF a JPEG nie ma różnicy, o tyle przy bliższym przyjrzeniu się łatwo zauważyć, że w formacie TIFF kolory zmieniają się bardziej płynnie niż w formacie JPEG. Ten sam obraz w pierwszym formacie wygląda bardziej naturalnie, w drugim pojawiają się odrobinę większe kontrasty, a jasne kolory wydają się nieco jaskrawe (rys. 20).

Rysunek 20. Ten sam obraz zapisany w formatach TIFF (z lewej) i JPEG (z prawej)

Oprócz uniwersalnych formatów plików, które można edytować w programach przeznaczonych do obróbki grafiki rastrowej, aplikacje mają swoje własne, domyślne formaty plików. Do najpopularniejszych należą:

● PSD – format wykorzystywany w programie Adobe Photoshop,

● PSP – format używany w programie Corel Paint Shop Pro,

● XCF – format stosowany w programie GIMP,

● CPT – format programu Corel PhotoPaint.

Do najbardziej znanych formatów wektorowych zaliczamy SVG (Scalable Vector Graphics). To format oparty na XML-u (Extensible Markup Language), przeznaczony dla grafiki dwuwymiarowej i stworzony głównie na potrzeby stron internetowych. Bardzo często w tym formacie są zapisywane takie obrazy, jak herby, godła czy flagi (rys. 21).

Rysunek 21. Skalowanie obrazu zapisanego w formacie SVG

EPS (Encapsulated PostScript) jest formatem przeznaczonym do przechowywania pojedycznych stron grafiki wektorowej, bardzo często stosowanym do zapisywania obrazów, które mają być otwierane w takich aplikacjach, jak CorelDRAW oraz Adobe Illustrator. Jeżeli plik zapisalibyśmy w formacie własnym programu CorelDRAW (CDR), jego otwarcie w Adobe Illustratorze nie byłoby możliwe. Plików zapisanych w Adobe Illustratorze (AI) również nie dalibyśmy rady otworzyć za pomocą Corela. Natomiast format EPS jest rozpoznawany przez obie aplikacje. Ten format umożliwia również skalowanie bez utraty jakości (rys. 22).

Rysunek 22. Przykład grafiki zapisanej w formacie EPS