Grafika komputerowa: Podstawy – formaty plików graficznych, modele barw RGB i CMYK

Często pewnie widziałeś w nazwach plików różne rozszerzenia .jpg .png czy .gif. Jednak co właściwie oznaczają? Czym się między sobą różnią? Tutaj znajdziesz odpowiedź na wszystkie te pytania. Zanim w ogóle przejdziemy do omawiania typów grafiki, musimy zacząć od tego jak w komputerze zapisywany jest kolor. Wydaje się to czymś bardzo podstawowym, a jednak okazuje się to dość skomplikowany temat, który ma wpływ na przeznaczenie poszczególnych grafik.

Modele barw w grafice komputerowej

Przestrzeń barw to matematyczny model, który opisuje reprezentację kolorów w grafice cyfrowej. Czyli w skrócie, pozwala stwierdzić jak urządzenie (monitor, drukarka, komórka itp) ma odczytywać poszczególne kolory.

Najpopularniejsze przestrzenie barw to:

• RGB (Red, Green, Blue) – najczęściej używana przestrzeń barw w grafice cyfrowej, bazująca na trzech podstawowych kolorach światła, czyli czerwonym, zielonym oraz niebieskim. Jest szeroko stosowana w monitorach, aparatach cyfrowych oraz telewizorach. Każdy kolor w tej przestrzeni jest określany przez trzy wartości, reprezentujące natężenie światła czerwonego, zielonego i niebieskiego. Czyli połączenie tych trzech kolorów w odpowiednim stopniu pozwala uzyskać poszczególne barwy. Przykładowo R: 255, G: 255, B: 255 pozwala uzyskać kolor biały. Natomiast czarny występuje w przypadku R: 0, G: 0, B: 0, a różowy to: R: 255, G: 192, B: 203.
  Każdy kolor podstawowy jest przechowywany w 8 bitach, czyli razem 24 bity na dany kolor. Można również dodać kanał Alpha (przezroczystość) wtedy powstaje ARGB i na konkretny kolor poświęcamy 32 bity.
  sRGB i Adobe RGB – to specyficzne warianty przestrzeni RGB. sRGB jest standardem internetowym o węższym zakresie kolorów, natomiast Adobe RGB posiada szerszy gamut, dzięki czemu lepiej nadaje się do pracy z profesjonalnymi obrazami przeznaczonymi do druku.
• CMYK (Cyan, Magenta, Yellow, Key/Black) – przestrzeń barw stosowana głównie w drukarstwie, oparta na modelu subtraktywnym. Kolory są tworzone poprzez nakładanie kolejnych warstw tuszu w odcieniach cyjan, magenta, żółtym i czarnym, co pozwala na uzyskanie szerokiej gamy kolorów na papierze. Tutaj również każdy z kolorów jest przechowywany w 8 bitach, co w sumie daje 32 bity (bo są 4 kolory).
• Lab (Luminance, a, b) – model przestrzeni barw, który lepiej odzwierciedla sposób, w jaki ludzkie oko postrzega kolory. Składa się z komponentu luminancji (jasności) oraz dwóch kanałów chromatyczności (a i b), które określają położenie koloru w zakresie od zielonego do czerwonego oraz od niebieskiego do żółtego. Czyli przechowywany jest w trzech zmiennych gdzie jasność może wynosić od 0 (czarny) do 100 (biały). Z kolei a, czyli oś od zielonego (-) do czerwonego (+) ma zakres od -128 do 127. Natomiast b, oś od niebieskiego (-) do żółtego (+) również ma zakres od -128 do 127.

Grafika rastrowa i wektorowa

Grafika wektorowa i rastrowa to podstawowe typy grafik, których znajomość okazuje się naprawdę przydatna. Za trzeci rodzaj grafiki bywa wymieniana grafika 3D, o której także wspomniano w dalszej części tekstu.

Grafika wektorowa – to obraz utworzony za pomocą różnych figur geometrycznych, w tym punktów, linii, krzywych i wielokątów, opartych na matematycznych równaniach. Wśród cech charakterystycznych znajdują się:

• Nie traci jakości przy skalowaniu (np. powiększaniu),
• Jest idealna do logotypów, ikon, ilustracji technicznych i projektów graficznych,
• Ma mały rozmiar pliku przy prostych kształtach.

Popularne programy do grafiki wektorowej: CorelDraw, Inkscape, LibreOffice Draw, AutoCad, Adobe Illustrator.

Grafika rastrowa – (bitmapowa) to obraz zbudowany z siatki pikseli, gdzie każdy piksel ma określony kolor. Charakteryzuje się:

• Traci jakość przy powiększaniu (może się rozmywać lub być “pikselowy”),
• Sprawdza się dobrze w fotografiach i obrazach z dużą ilością detali,
• Może mieć duży rozmiar pliku, zwłaszcza przy wysokiej rozdzielczości.

Popularne programy do grafiki rastrowej: Gimp, Paint, Adobe Photoshop, Corel Painter, Pixel.

Grafika 3D – składa się z modeli (siatek zbudowanych z wierzchołków i wielokątów), które tworzą kształt obiektu. Na modele nakłada się materiały i tekstury, a scenę uzupełniają światła i kamera, które definiują wygląd oraz perspektywę. Całość jest przetwarzana w procesie renderingu, który tworzy końcowy obraz lub animację. Jest uznawana za trzeci rodzaj grafiki. Jej cechy charakterystyczne to:

• Obiekty mają wysokość, szerokość i głębokość.
• Możliwość uzyskania fotorealistycznych efektów (np. w architekturze, filmie).
• Wymaga sporej mocy obliczeniowej i zaawansowanego oprogramowania.

Popularne programy do grafiki 3d: Blender, Autodesk 3ds Max, Autodesk Maya, Cinema 4D, ZBrush, SketchUp.

Formaty plików graficznych

Rozszerzenia plików graficznych oznaczają rozmaite formaty grafiki, czyli różne sposoby przechowywania informacji o obrazie w pliku. Każdy format charakteryzuje się specyficznym sposobem kodowania danych oraz obsługą różnych przestrzeni barw. Najprostszym formatem grafiki jest mapa bitowa, czyli tablica dwuwymiarowa, gdzie każde pole zawiera określony kolor.

Formaty grafiki wektorowej

• SVG (Scalable Vector Graphics) – Otwarty format grafiki wektorowej oparty na XML. Obsługiwany jest przez przeglądarki oraz wiele edytorów, szczególnie często używa się go przy stronach WWW, ikonach czy infografikach..
• EPS (Encapsulated PostScript) – To klasyczny format Adobe dla grafiki wektorowej, wykorzystuje się go najczęściej w poligrafii oraz DTP. Składa się ze ścieżek oraz krzywych Béziera.
• AI (Adobe Illustrator) – To standardowy format stosowany w popularnym programie Adobe Illustrator. Często korzystają z niego profesjonaliści w ramach projektowania grafik.
• CDR (CorelDRAW) – Jest to format stosowany przez darmowy program CorelDRAW. Popularny w poligrafii, reklamie i projektowaniu logotypów.

Formaty grafiki rastrowej

• JPEG (Joint Photographic Experts Group) – powszechnie używany format do przechowywania zdjęć i grafiki rastrowej. JPEG korzysta z kompresji stratnej, co oznacza, że część informacji o obrazie jest tracona podczas zapisu. Jest to jednak kompromis pomiędzy jakością, a rozmiarem pliku, co czyni ten format bardzo popularnym w internecie ze względu na jego niewielką wagę, która umożliwia szybkie ładowanie się stron WWW.
• PNG (Portable Network Graphics) – format obsługujący kompresję bezstratną, co oznacza, że żadne dane obrazu nie są tracone podczas kompresji. PNG obsługuje również przezroczystość (kanał alfa), co czyni go idealnym do grafiki na stronach internetowych oraz ikon i logo.
• GIF (Graphics Interchange Format) – stosowany głównie do animowanych obrazów oraz prostych grafik z ograniczoną paletą kolorów (do 256 kolorów). GIF również obsługuje przezroczystość, ale ze względu na ograniczoną paletę kolorów, nie nadaje się do skomplikowanych zdjęć.
• TIFF (Tagged Image File Format) – format używany w profesjonalnej fotografii i druku. TIFF obsługuje kompresję bezstratną oraz przechowywanie dużej ilości metadanych. Jest to format o wysokiej jakości, ale również dużym rozmiarze pliku.
• BMP (Bitmap) – mapa bitowa po prostu zapisuje w prostokątnej siatce kolor każdego piksela. Jej rozmiar jest dlatego bardzo duży, zobaczmy przykład. Standardowy monitor ma 1080×1920 pikseli, gdybyśmy stworzyli mapę bitową w tym rozmiarze w przestrzeni barw sRGB zajęłaby rozmiar: 24*1080*1920=49766400 bitów = 6220800 bajtów = 6075 kilobajtów! Jeśli wszystkie obrazy były zapisywane w ten sposób strony internetowe wczytywałyby się wieczność. Na szczęście możliwe jest stosowanie formatów graficznych korzystających z kompresji, dzięki czemu rozmiar plików jest znacznie mniejszy.

Kompresja grafiki i inne ważne pojęcia

Kompresja to proces zmniejszania rozmiaru pliku graficznego bez znaczącego pogorszenia jego jakości (w przypadku kompresji bezstratnej) lub z utratą części danych (w przypadku kompresji stratnej). Rodzaj zastosowanej kompresji ma kluczowy wpływ na jakość obrazu oraz jego rozmiar.

• Kompresja stratna – W ramach tego procesu usuwa się część danych z obrazu, dzięki czemu mozna zmniejszyć wielkość pliku, niestety kosztem jego jakości.Najbardziej znanym przykładem tego typu kompresji jest format JPEG. Korzysta się z niego szczególnie często na stronach WWW w celu przyśpieszenia działania strony, a takżę wtedy, kiedy drobne straty jakości nie są zauważalne, np na zdjęciach. Prostym przykładem takiej kompresji jest następujący wpis: AAAAA → A. Nie można go w pełni odwrócić, nie wiadomo czy liter A jest 5, czy może 6 (lub inna liczba).
• Kompresja bezstratna – W kompresji bezstratnej wszystkie dane są zachowywane, co oznacza, że obraz po kompresji jest identyczny z oryginałem. Format PNG i TIFF często wykorzystują ten typ kompresji. Choć pliki te są większe niż w przypadku kompresji stratnej, zachowują pełną jakość obrazu, co może być istotne w ramach określonych zastosowań. Prostym przykładem takiej kompresji jest następujący wpis: AAAAA → 5A. Można go odwrócić i odzyskać AAAAA.
• DPI (dots per inch) – to słowo dotyczy rozdzielczości wydruku, konkretnie chodzi o ilość punktów na każdy cal, czyli ilość plamek, które są nadrukowywane w ramach pojedynczego cala. Dzięki temu można stosunkowo łatwo określić ostateczną rozdzielczość wydruku czy też jakość skanowanego dokumentu. Przeciętna rozdzielczość wynosi zazwyczaj 300 DPI.
• PPI (pixels per inch) – tutaj również chodzi o określenie rozdzielczości, jednak w przypadku ekranów. Chodzi konkretnie o ilość pikseli na każdy cal, dzięki czemu można łatwo określić jakość obrazów wyświetlanych na ekranie. Przeciętna jakość w tym przypadku wynosi około 72-100 PPI.
• CAD (computer aided design) – słowo to oznacza projektowanie wspomagane komputerowo. To właśnie przy pomocy programów CAD projektuje się rozmaite schematy, plany, mapy, a także wiele innych projektów.

Najczęściej zadawane pytania o grafikę komputerową

Co trzeba umieć na grafika komputerowego?

Kluczowe są umiejętności artystyczne oraz techniczne, wśród nich można wyróżnić:

• Obsługę programów graficznych:
  • do grafiki rastrowej (np. Photoshop, GIMP),
  • do grafiki wektorowej (np. Illustrator, CorelDRAW, Inkscape),
  • do DTP (np. InDesign).
• Zasady projektowania: kolorystyka, typografia, kompozycja, proporcje.
• Formaty plików: różnice między rastrowymi a wektorowymi, kompresja, przeznaczenie.
• Podstawy druku i przygotowania plików: CMYK, spady, rozdzielczość, profile kolorów.

Jakie jest 7 podstawowych elementów grafiki komputerowej?

• Linia – podstawowy budulec kształtów.
• Kształt – figury geometryczne i nieregularne.
• Kolor – barwy, ich kontrast i harmonia.
• Tekstura – wrażenie powierzchni (np. gładka, chropowata).
• Ton/Wartość – jasność i ciemność elementów.
• Przestrzeń – perspektywa, głębia, rozmieszczenie.
• Forma – obiekt trójwymiarowy (bryła).

Jakie są 3 rodzaje grafiki komputerowej?

• Grafika rastrowa (bitmapowa) – zbudowana z pikseli (np. zdjęcia JPG, PNG).
• Grafika wektorowa – zbudowana z linii i krzywych matematycznych (np. SVG, AI, CDR).
• Grafika 3D – modele przestrzenne, tekstury, renderingi (np. w Blenderze, 3ds Max).