Dwa oblicza grafiki — wektor i raster

Ilustracja w postaci wektorowej (góra) i rastrowej (dół)

Ilustracja w postaci wektorowej (góra) i rastrowej (dół)

Znajomość grafiki komputerowej można podzielić na trzy stadia: nieznajomość istnienia rozgraniczenia na grafikę rastrową i wektorową, znajomość tego podziału, oraz znajomość podziału i zdolność do dopasowania techniki do konkretnego zadania graficznego. W tym artykule odpowiemy sobie na pytania czym różnią się oba typy, jakie mają wady i zalety, oraz do czego wykorzystywać grafikę rastrową, a do czego wektorową.

Raster, czyli armia pikseli

Nazwa „raster“ określa matrycę lub siatkę pojedynczych, kwadratowych elementów. Te elementy nazywamy pikselami (jest to zlepek od słów picture element), które są najmniejszymi, niepodzielnymi cegiełkami budującymi obraz na ekranie komputera. Dlatego, jeśli wasz klient poprosi o przesunięcie czegoś o pół piksela (lub piksla), odeślijcie go do definicji. Zatem grafika rastrowa to po prostu szeregi i kolumny pikseli o różnych jasnościach i kolorach, które z dużej odległości dają wrażenie obrazu (najczęściej fotografii lub złożonej ilustracji). Każdy piksel przenosi informację o swojej jasności (przy głębi ośmiobitowej będzie to 256 tonacji) oraz kolorze. W rzeczywistości obie te informacje zawarte są w kanałach barwnych RGB (czerwonym, zielonym i niebieskim), ponieważ RGB jest modelem kolorów, gdzie w każdym kanale mamy informację zarówno o jasności, jak i barwie piksela. Wyjątkiem jest tu np. model Lab, gdzie kanał L przenosi tylko informację o jasności, natomiast kanały a i b o kolorze.

Z grafiką rastrową wiąże się wiele ograniczeń i właściwości, o których grafik musi pamiętać. Wspomniałem już, że każdy piksel ma swoje właściwości: ton i kolor. W normalnej sytuacji, kiedy mamy 8 bitów informacji na kanał, otrzymujemy obraz 24 bitowy, tzw. truecolor. Dzięki takiej głębi możemy odwzorować nieco ponad 16 milionów barw (2 do potęgi 24), co odpowiada mniej więcej gamutowi (zakresowi barw możliwych do uzyskania) w przestrzeni sRGB, używanej w standardowych monitorach i wyświetlaczach (monitory graficzne mogą mieć większy gamut, stąd ich większa cena).

Kolejną cechą jest rozmiar obrazu. Grafika rastrowa nie jest skalowalna, czyli nie możemy jej powiększać lub pomniejszać bez straty informacji i jakości. Dlatego każdy obraz musi mieć określoną wielkość wyrażoną w ilości kolumn i szeregów pikseli (np 800 x 600 pikseli). W grafice wektorowej ten problem nie istnieje, bo jest to grafika skalowalna, dopiero przy końcowym eksporcie do PDF lub rasteryzacji podejmujemy decyzję o końcowym rozmiarze (zwykle rozmiarze wydruku).

Mówiąc o skalowalności, nie możemy pominąć rozdzielczości, czyli gęstości pikseli wyświetlanych na ekranie, lub nadrukowywanych na papierze. Być może kojarzycie z Photoshopa wartość 72 ppi dla ekranów, ale w dobie współczesnych wyświetlaczy ta wartość jest już tylko umowna. Wiele monitorów ma rozdzielczość 96 ppi, a ekrany smartfonów do 326 ppi w przypadku Retiny w iPhone’ach, czy nawet 440 ppi w najnowszych ekranach firmy LG. To znaczne wyzwanie dla grafików, ponieważ już nie można przygotowywać jednej wersji grafiki dla ekranów, jeśli ich rozdzielczości różnią się tak znacznie. W przypadku druku, rozdzielczość de facto określa rozmiar wydruku. Piksele muszą być zamienione na punkty z tuszu. Wiele drukarek biurowych i domowych drukuje jeden piksel z wielu punktów, dlatego nie można już przekładać np. 300 ppi na 300 dpi w drukarce, gdyż taka wartość dpi może być mocno zaniżona, a jakość druku maleje.

Grafika rastrowa wymaga także kompresji. Związane jest to z tym, że dla dużych i skomplikowanych obrazów (np. fotografie cyfrowe ze współczesnych lustrzanek) musimy mieć dużo pamięci dyskowej. Dla obrazu o rozmiarach 3000 x 2000 pikseli daje nam to 3000 x 2000 x 24 = 144 miliony bitów, czyli ok. 17,5 megabajta. Z tego powodu formaty grafiki rastrowej zawierają w sobie algorytmy kompresji stratnej (np. bardzo wydajny JPEG), lub bezstratnej (np. LZW w TIFF’ie). Taka kompresja może spowodować stratę jakości obrazu na rzecz jego mniejszej wagi.

Na koniec — grafika rastrowa to tylko siatka pikseli, nie ma tutaj obiektów, osobnych warstw (poza tymi „sztucznie“ wytworzonymi w programach graficznych, choć należy pamiętać, że w większości formatów rastrowych nie zapiszemy takich warstw). Z tego powodu znaczny czas pracy grafika zajmuje wycinanie fragmentów obrazu rastrowego, np. zawierających twarz modelki. W grafice wektorowej nie ma tego problemu, bo wszystko jest osobnym obiektem, który można łatwo zaznaczyć i zmodyfikować.

Zaletą grafiki rastrowej jest to, że może przedstawiać bardzo złożone obrazy w prosty sposób, rozmiar pikseli determinuje tutaj szczegółowość przedstawianej sceny. Dlatego też raster zawsze wykorzystywany jest przy rejestracji obrazu, np. fotografii, wideo, czy skanowaniu. Jego powszechnie dostępne i zrozumiałe formaty zapisu sprawiają, że raster rządzi niepodzielnie w internecie. Niemal 100% grafiki widocznej na stronach www to rastry. Grafika rastrowa nie nadaje się natomiast wszędzie tam, gdzie nasze obrazy muszą być skalowalne, gdzie muszą mieć gładkie, ostre krawędzie. Oznacza to, że nie można projektować znaków graficznych, logo, ilustracji drukowanych w różnych rozmiarach, składu tekstu, typografii w grafice rastrowej. Powiedzmy sobie to raz na zawsze: raster NIE NADAJE SIĘ na projektowanie logo! Dlatego też zamiast Photoshopa czy Gimpa, trzeba robić to w Illustratorze, Corelu, Inkscape, lub jakimś innym programie wektorowym. Możesz się tego wszystkiego nauczyć z naszego kursu Illustratora CS5 — od zera do bohatera lub bardziej zaawansowanego kursu Illustratora CS5 — od bohatera do mistrza.

Wektor, czyli matematyka jest artystką

Ścieżki wektorowe tworzące szkielet ilustracji

Ścieżki wektorowe tworzące szkielet ilustracji

Matematyka to nudne równania które do niczego się nie przydają — takie jest powszechne myślenie w szkołach :) A jednak, bez matematyki, a w szczególności geometrii nie byłoby dzisiaj grafiki wektorowej. Podstawą są tutaj ścieżki wektorowe, czyli grupy krzywych posiadających punkty kontrolne z własnymi koordynatami. Obecnie w użyciu są tzw. krzywe Béziera, które charakteryzują się względnie prostym opisem matematycznym skomplikowanych kształtów. Pierre Bézier był inżynierem w Renault i w trakcie swojej pracy opracował różne metody komputerowego wspomagania projektowania nadwozi samochodów, m.in. system CAD/CAM i od lat sześćdziesiątych XX wieku popularyzował krzywe parametryczne, nazywane teraz jego nazwiskiem (choć pierwsze prace nad takimi krzywymi pochodzą z 1959 roku i były autorstwa Paula de Casteljau, nota bene z konkurencyjnego Citroena). W programach graficznych używa się zamiennie pojęć krzywa (curve) i ścieżka (path), lecz nie są one tym samym. Krzywa buduje jeden łuk, ma dwa krańcowe punkty zakotwiczenia (anchor point) i do czterech punktów kontrolnych (control point), które budują wygięcie łuku. Ścieżka natomiast to szereg krzywych połączonych ze sobą — często jest to szereg zamknięty, tworzący obiekt wektorowy. Na ilustracji powyżej widać szkielet ilustracji z początku tego artykułu, są to w większości wypadków proste obiekty jak okręgi i łamane. Na ten szkielet w programach graficznych nakładane są informacje o wyglądzie: obrysy ścieżek, ich wypełnienia, gradienty, przezroczystość, tryby mieszania, efekty rastrowe i wektorowe. Takie rozgraniczenie ma miejsce np. w programie Adobe Illustrator, gdzie mamy oddzielny panel Appearance (wygląd), w którym definiujemy obrysy i wypełnienia obiektów wektorowych.

Przykład krzywej Beziera

Przykład krzywej Beziera

W grafice wektorowej nie ma zależności między wielkością obiektów a jakością ich renderowania (wyświetlania). Ponieważ grafika wektorowa jest zbiorem współrzędnych, które można dowolnie przeskalowywać, zawsze zachowamy 100% jakość obrazu. To predysponuje grafikę wektorową do tworzenia obrazów, które muszą być znacznie skalowane w zależności od miejsca wykorzystania. To oznacza, że wektory są idealne dla projektowania wszelkich znaków graficznych (logo, herby, fonty), średnio złożonych ilustracji, plakatów, oraz wszędzie tam, gdzie linie muszą być wyraźne i nie postrzępione (schematy techniczne, mapy). Należy tutaj uważać jednak na efekty rastrowe (np. rozmycia i wszystkie filtry Photoshopowe w Illustratorze) dodawane do obiektów, gdyż one potrzebują odpowiedniej rozdzielczości w zależności od jakości i wielkości druku. Kolejną zaletą wektorów jest kompaktowość zapisu, szczególnie w przypadku prostych grafik. W tym celu program musi zapisać jedynie koordynaty obiektów oraz ich kolory (w dużym uproszczeniu). Rastrowy odpowiednik musi zapisać wszystkie informacje o pikselach, nie ważne jak prosty lub skomplikowany byłby obiekt przedstawiony. Stąd pliki wektorowe ważą mniej niż rastry. Niestety wiąże się to z małą popularnością wektorowych formatów zapisu, odczytywalnych tylko przez specjalistyczne programy — zwykle końcową grafikę rasteryzuje się, eksportuje do PDF, lub wysyła bezpośrednio do drukarki.

Wektory nie nadają się do opisu fotorealistycznych scen, gdyż ilość obiektów wektorowych jakie trzeba w tym celu wygenerować, spowalnia i utrudnia dalsze modyfikacje, a przy tym nigdy te obiekty nie będą tak małe jak piksele — szczegółowość takiego obrazu wektorowego nie dorówna jego rastrowemu odpowiednikowi. Co więcej, taki obraz należy wtedy traktować całościowo, a nie modyfikować pojedyncze, mikroskopijne obiekty.

Należy tu na koniec dodać, że większość natywnych formatów programów graficznych (PSD w Photoshopie, AI w Illustratorze, CDR w Corelu) są tak naprawdę i rastrowe i wektorowe. W pliku PSD możemy zapisać ścieżki wektorowe i obiekty 3D, a w Illustratorze możemy dodać rastrowe cienie do obiektów wektorowych (dowiedz się więcej o tym wszystkim w naszym 13-godzinnym kursie Photoshopa CS5). PDF, często wykorzystywany do eksportu i druku, również jest takim formatem. Jednakże jeśli mówimy o formatach dostępnych końcowemu użytkownikowi, nie posiadającemu specjalistycznych aplikacji, zostajemy albo wyłącznie z rastrowymi (JPEG, GIF, PNG), lub wyłącznie wektorowymi (np. SVG w niektórych przeglądarkach internetowych).

5 myśli nt. „Dwa oblicza grafiki — wektor i raster

  1. Pingback: Ludzie w goglach szukają cz.1 | Blog Psboy.pl

  2. Pingback: Dwa oblicza grafiki – wektor i raster | Blog Psboy.pl | Narzędzia do grafiki rastrowej | Scoop.it

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>