POWRÓT

SEMESTR I

Obraz cyfrowy w prezentacjach multimedialnych - teoria i zastosowania


Spis treści rozdziału - tutaj kliknij

Grafika rastrowa i wektorowa - różnice
Modele kolorów i ich zastosowania
Parametry jakości obrazów rastrowych
Formaty plików graficznych
Ćwiczenia
Literatura


 

Różnice pomiędzy grafiką rastrową a wektorową

   


    Grafikę komputerową dzielimy na dwa podstawowe rodzaje; grafikę rastrową i grafikę wektorową. Różnią się one modelem reprezentowania grafiki na komputerze, a co za tym idzie - procesem przetwarzania obrazu i konstrukcją programów służących do tworzenia, edycji i obróbki grafiki.
    W grafice rastrowej - obraz budowany jest z prostokątnej siatki punktów (pikseli) położonych blisko siebie o różnorodnym kolorze, które stwarzają w efekcie pozorny obraz ciagły. Piksel - jest najmniejszym elementem obrazu cyfrowego a jego charakterystyczną cechą jest jego monobarwoność. Oznacza to, że każdy piksel jest wypełniony jednolitym kolorem, stąd efekt schodkowania przy dużym powiększeniu obrazów. Kolor każdego piksela jest definiowany osobno. W zależności od użytej palety kolorów jeden piksel może przyjmować od 2 do 65 milionów kolorów. Piksele są ułożone równo w wierszach i kolumnach, tworząc siatkę zwaną rastrem lub mapą bitową (bitmapą). Wielkościami które charakteryzują mapę bitową charakteryzują są;

  • wysokość i szerokość bitmapy liczona jako piksel w pionie i w poziomie (rozdzieczość). Parametr zwany rozdzielczością obrazu określa, ile jest poziomych i pionowych linii tworzących obraz (im więcej linii i punktów, tym wyraźniejszy obraz). Rozdzielczość podaje się zwykle jako iloczyn liczby linii, np. 1024*768, co oznacza że mamy do czynienia z obrazem składającym się z 1024 pionowych linii i 768 poziomych. Często do opisania rozdzielczości stosowana jest wielkość PPI wyrażona w liczbie pikseli na cal (ppi). Im więcej pikseli na cal, tym większa rozdzielczość.
  • liczba bitów na piksel opisująca liczbę możliwych do uzyskania kolorów (głębia kolorów). Wielkość ta określa, ile różnych kolorów może mieć piksel. Dokładniej jest to liczba bitów jaka jest wykorzytana do zapamiętania koloru jednego piksela. W zależności od liczby kolorów jakie możemy wykorzystać w mapie bitowej, rozróżniamy mapy: 1-bitowe, 8-bitowe, 16-bitowe, 24-bitowe i 32-bitowe. Mapy 1-bitowe to mapy czarno-białe, natomiast w mapach 8-bitowych na jeden piksel przypada 256 kolorów, w 16-bitowych 65 526 kolorów, w 24-bitowych 16 777 216 kolorów itd.

Najważniejsze formaty plików rastrowych to: .bmp, .cdr, .ccx, .cdt, .cmx, .ico, .jpg, .jpeg, .gif, .pdf, .png, .tga, .tif, .tiff, a najważniejsze edytory graficzne to; Photoshop, MS Paint oraz GIMP. W praktycznym zastosowaniu doskonale nadaje się do fotografii, grafiki z/w sieci i grafiki ekranowa (TV, DVD).
Zalety grafiki rastrowej:

  • Niesamowity gradient i wyświetlanie cieni,
  • Popularne typy plików.

Wady grafiki rastrowej:

  • Duże rozmiary plików,
  • Strata jakości podczas powiększania,
  • Niektóre typy plików wymagają specjalnego oprogramowania do przeglądania/wyświetlania.

    W grafice wektorowej obraz opisywany jest za pomocą figur geometrycznych (dla grafiki dwuwymiarowej) lub brył geometrycznych (dla grafiki trójwymiarowej), których położenie opisują równania matematyczne. Każdy element obrazu jest opisany za pomocą pewnej liczby cech (położenie, barwa), których wartość można zmieniać podczas edycji. Obraz przedstawiony na urządzeniu (monitor, drukarka) jest kreślony element po elemencie.
Pliki grafiki wektorowej są z reguły wielokrotnie mniejsze niż pliki pliki zawierające ten sam obraz zapisane rastrowo. Ponadto obrazy grafiki wektorowej można dowolnie powiększać. Popularne typy plików wektorowych: .ai, .cdr, .ccx, .cdt, .cmx, .eps, .pdf, .svg, .swf.
Grafika wektorowa doskonałe nadaje się do produkcji: logo, materiałów do druku, ilustracji, typografii, flasha oraz wszystkiego co będzie skalowane.

Do góry


 

Modele kolorów i ich zastosowania

   


    Spośród modeli barw dostępnych w grafice komputerowej można wymienić następujące grupy kolorów: skala szarości, RGB, CMY, CMYK, HSV, CIE.


Rys 1. Model RBG

Najpopularniejszym modelem kolorów stosowanym w grafice komputerowej jest model RGB. Model RGB bazuje na założeniu, że dostępne są trzy barwy podstawowe R, G i B. Wszystkie barwy, które można uzyskać za pomocą mieszania tych składowych są reprezentowane przez punkty należące do sześcianu jednostkowego zdefiniowanego w układzie współrzędnych R, G, B. Model jest pokazany na rysunku V.2. W wierzchołkach sześcianu są reprezentowane barwy R,G,B,C,M,Y oraz czarna K (blacK) i biała W (White). Na przekątnej łączącej wierzchołki K i W znajdują się odcienie szarości. Współrzędne R, G i B zmieniają sie w zakresie od 0 do 255, ponieważ na każdą składową przypada jeden bajt. Wartość 0 oznacza brak światła, a 255 to światło o maksymalnej jasności. Kolor odpowiadajacy wartościom RGB = (255, 0, 0) to czysta czerwień, RGB = (0, 255, 0) to czysty zielony, a RBG = (0, 0, 255) to czysty niebieski.


Rys. 2 Model CMY

Model CMY ma podobne cechy jak model RGB. Jest on również reprezentowany za pomocą jednostkowej kostki sześciennej, z tym, że w układzie współrzędnych C,M,Y. Model ten pokazano na rysunku. Model ten jest modelem subtraktywnym i wykorzystywany jest głównie w drukarstwie. W praktyce stosowany jest model CMYK, w którym ze względów praktycznych dodatkowo uwzględnia się barwę czarną - dzięki temu uzyskuje się lepszą czerń niż w przypadku uzyskiwania czerni ze składowych C, M i Y.
Modele RGB i CMY to modele dopełniające i można je zobrazować graficznie w ten sam sposób. Wszystkie kolory opisywane przez model CMY to te same kolory, co opisywane przez model RGB. Jest to zatem ten sam sześcian RGB, tylko widziany od przeciwległego wierzchołka - w modelu CMY współrzędne (0, 0, 0) to kolor biały, a (255, 255, 255) to kolor czarny, czyli odwrotnie niż w modelu RGB.


Rys. 3. Model CMY

Model HSV w odróżnieniu od opisywanych wyżej modeli barw, do opisu kolorów używa się takich określeń jak; odcień barwy (barwa), nasycenie i jasność. W modelu tym parametr H (od. ang. Hue) określa odcień barwy wyrażany w stopniach od 0o do 360o, parametr S (od ang. Saturation) określa nasycenie wyrażane w skali od 0 do 1 albo w procentach od 0% do 100%. Parametr V (od ang. Value) określa jasność (wartość) w skali od 0 (dla czerni) do 1 (dla bieli). Model kolorów HSV jest dość intuicyjny, reprezentowany jest przez stożek (rys. 3) a wybór odpowiedniego koloru przebiega łatwo i prosto.
W praktyce można spotkać się jeszcze z innymi modelami kolorów. Jednym z nich jest model CIE XYZ (XYZ to nazwy współrzędnych, z kolei CIE pochodzi od francuskiego Commission Internationale de l'Eclairage - Międzynarodowa Komisja Oświetleniowa). Model ten ma na celu bardziej ogólne opisanie kolorów.

Do góry


 

Parametry jakości obrazów rastrowych

   


     Na jakość obrazów cyfrowych mają wpływ następujące parametry;

  • głębia koloru,
  • rozmiar obrazu - określa fizyczny rozmiar obrazu (szerokość i wyskość),
  • rozdzielczość obrazu - określa całkowitą liczbę pikseli opisujących obraz.

Rozmiar obrazu (image size) - określa fizyczny rozmiar obrazu wyrażony za pomocą szerokości (width) i wysokości (height). Rozmiar można podawać w różnych jednostkach; centymetrach, calach, pikselach, gdyż programy graficzne mają funkcje szybkiej zamiany i przeliczania jednostek. Przykłady podaje rys. 4.


Rys 4. Rozmiar obrazu (IrfanView)

Rozdzielczość obrazu (resolution) - określa gęstość obrazu, czyli liczbę pikseli przypadających na jednostkę długości obrazu. Standardową jednostki długości stosowaną w programach graficznych jest cal, stąd powszechnie stosowaną miarą rozdzielczości jest liczba pikseli na cal - ppi (pixels per inch). Ogólnie, im większa rozdzielczość, tym lepsza jakość obrazu. Obraz o wysokiej rozdzielczości zawiera więcej mniejszych pikseli w porównaniu z obrazem tych samych rozmiarów o niskiej rozdzielczości.
Wybór rozdzielczości powinien zależeć od przeznaczenia, tj. obraz może być wykorzystany jako obraz monitora komputera, druk, czy też publikacja w internecie. Rozdzielczość obrazu wpływa na jego wielkość po wydruku. Im większa liczba pikseli, tym większa rozdzielczość obrazu i możliwość wydrukowania go w większym rozmiarze bez obniżenia jakości.
Jakość obrazów drukowanych mierzy się jednak inaczej. Wydrukowany obraz nie ma już pikseli jako takich. Rozdzielczość mierzy się liczbą punktów na cal, a miarę tę oznacza się jako dpi (dots per inch). Przed przystąpieniem do drukowania obrazu dobrze jest poznać rozmiar jaki osiągnie po wydruku. Rozmiar wydruku można łatwo obliczyć, dzieląc szerokość i wysokość obrazu podaną w pikselach przez rozdzielczość drukowania, a iloraz mnożąc przez jednostkę długości obrazu, czyli cal ("), przy czym 1" zamieniamy na milimetry (25,4) lub centymetry (2,54), w zależności od tego, w jakich jednostkach chcemy uzyskać wynik. Przykład;

Dane; obraz cyfrowy o wymiarach 3072x2304, rozdzielczość drukowania 180 dpi, standardowa jednostka długości 1". Niewiadomą są wymiary obrazu po wydrukowaniu w centymetrach ???
Rozwiązanie
(3072:180)*2,54 = 43,33 cm (szerokość wydruku)
(2304:180)*2,54 = 32,51 cm (wysokość).
Wynik obliczeń jest zgodny z tym co możemy odczytać z okna dialogowego programu IrfanView (rys.5).


Rys 5. Wymiary obrazu po wydrukowaniu (IrfanView)

Skoro zatem dpi odnosi się do druku, to dlaczego często można znaleźć informacje o wartości dpi dla plików graficznych (np we właściwościach map bitowych)?? Jest to informacja, która stanowi wskazówkę dla systemu operacyjnego, w jakim rozmiarze wydrukować dany obraz (rys. 6).


Rys 6. Informacja zapisana we właściwościach o wartości dpi (przykład).

Do góry


 

Formaty plików graficznych

   


     Z poprzednich części dowidzieliśmy się, że pliki graficzne mogą być zapisywane pod postacią różnych formatów. Dla grafiki rastrowej były nimi: .bmp, .cdr, .ccx, .cdt, .cmx, .ico, .jpg, .jpeg, .gif, .pdf, .png, .tga, .tif, .tiff, a dla grafiki wektorowej .ai, .cdr, .ccx, .cdt, .cmx, .eps, .pdf, .svg, .swf. Podstawowymi cechami wszystkich formatów są; rozmiar pliku - powinien być jak najmniejszy oraz jakość obrazu, która powinna byc jak najwyższa. Cechy te wzajemnie wykluczają się, dlatego wybór odpowiedniego formatu powinien zależeć od przeznaczenia pliku.
Format GIF
Jest formatem, który ma zastosowanie do zapisu niewielkich grafik z niewielką liczbą kolorów (maksymalnie 256) i wyraźnymi krawędziami. Przykładem są logotypy i ozdobne proste rysunki. Z założenia format GIF wykorzystuje kompresję bezstratną, gdyż nie następuje utrata pikseli. Nie mniej na zapisanych w tym formacie plikach daje się zauważyć utratę jakości obrazu, ponieważ format wykorzystuje tylko 256 kolorów. Formatu GIF nie należy stosować do zapisu fotografii i obrazów wysokiej jakości. Zaletą jest dodatkowa opcja, która pozwala nam na tworzenie animacji.
Format JPG, JPEG
Jest to najbardziej popularny format plików graficznych z kompresją stratną, powszechnie stosowany na stronach WWW, w aparatach cyfrowych, skanerach. Jest to standard kompresji statycznych obrazów rastrowych, przeznaczony głównie do przetwarzania obrazów naturalnych (zdjęć satelitarnych, pejzaży, portretów itp.), charakteryzujących się płynnymi przejściami barw oraz brakiem lub małą ilością ostrych krawędzi i drobnych detali. W wyniku kompresji stratnej, część szczegółów obrazu bezpowrotnie jest tracona a kosztem tego otrzymane pliki są mniejsze. Poziom kompresji, a tym samym stopień jakości obrazu, może być regulowany (rys. 7). Zastosowanie tej metody jest możliwe, dzięki odrzuceniu przez zmysły najmniej istostnych danych o obrazie, pozostawiając dane o wyższej wartości, potrzebne do rozpoznania informacji.


Rys 7. Różny stopień jakości obrazu jpg.

Format PNG
Jest alternatywą dla formatu GIF. Format ten ma zastosowanie do zapisu pojedyńczych plików graficznych, w tym zdjęć. Zaletą jest wysoki poziom kompresji bezstratnej i tworzenie plików niewielkich rozmiarów. Format PNG znajduje różne zastosowania. Przewiduje tryby o niskiej ilości kolorów (paletowe od 2 do 256 oraz tryb skali szarości), przydatne w sytuacjach, gdy nadmiarowa informacja jest niewskazana (tj. gdy ważniejsza od subiektywnej wierności oryginałowi jest treść obrazu).
Format TIFF
Format pliku TIF został ooracowany z myślą o aplikacjach służących do składu publikacji i obsługiwany jest przez wszystkie programy do edycji grafiki. Pliki zapisane w tym formacie mają rozszerzenie ".tif" lub ".tiff". Format pozwala na zapisywanie obrazów stworzonych w trybie kreskowym, skali szarości oraz w wielu trybach koloru i wielu głębiach bitowych koloru. Może zawierać prewkę (podgląd w niskiej rozdzielczości), ścieżki i kanały alfa, profile koloru, komentarze tekstowe. TIFF umożliwia stosowanie kompresji bezstratnej typu LZW oraz CCITT Group 4. Używany jest obecnie w DTP, grafice trójwymiarowej czy w obrazowaniu medycznym.

Do góry


 

Ćwiczenia

   

Uwaga - przed rozpoczęciem ćwiczeń praktycznych, każdy ćwiczący na pulpicie zakłada swój katalog podpisany imieniem i nazwiskiem


     Najpopularniejszym i najbardziej zaawansowanym programem do edycji i obróbki grafiki rastrowej jest program Photoshop. Wśród jego głównych zastosowań wymienić należy edycję i obróbkę fotografii cyfrowej, tworzenie grafiki na potrzeby Internetu, poligrafii oraz wiele więcej. Photoshop daje użytkownikowi możliwość tworzenia profesjonalnych i niezwykle efektownych projektów, składających się z niemalże nieograniczonej ilości warstw, masek, grafik w wysokiej rozdzielczości, zgrabnie łączonych ze sobą za pośrednictwem szerokiej gamy filtrów i efektów.

Ćwiczenia

Ćw. 1 - Uruchamianie programu
Aby uruchomić program należy wybrać menu Start > Programy > Adobe Pgotoshop.... Aby otworzyć okno w programie, wystarczy wybrać polecenie File (Plik) > Open (Otwórz) i wskazać lokalizację oraz wybraną grafikę (obraz).


Ćw. 2 - Zmiana rozmiaru obrazu

Tutaj do pobrania plik do ćwiczenia 2 - plik »»» 

Jest to najczęściej wykonywana czynność. W celu zmiany rozmiaru obrazu grafiki należy wybrać z menu Image (obrazek) > ImageSize ....(Wielkość obrazka). W otwartym oknie dialogowym (ImageSize) znajdujemy informacje o rozmiaru obrazu w pikselach oraz fizyczne wymiary obrazu w jednostakach (np. w cm) (rys. 8).


Rys 8. Sprawdzanie i zmiana rozmiaru obrazu

Jeżeli nowy rozmiar ma być dopasowany dla potrzeb wydruku, należy odznaczyć opcję Resample Image (Metoda ponownego próbkowania) - pozwoli to uniknąć pogorszenia jakości obrazu - zmiany Width i Height oraz Resolution (Rozdzielczość) nie wpłyną na liczbę pikseli obrazu. Pamiętamy, że optymalna rozdzielczość dla wydruku wynosi 150 - 300 pikseli/cal.

W ćwiczeniu należy wykonać;

  • etap 1 - na otwartym pliku, korzystając z okna dialogowego (ImageSize), dokonać zmiany rozmiaru obrazu, dla nowych wartości Width = 800, 600 i 1400, Resolution (Rozdzielczość) = 72. Za każdym razem, po zmianie rozmiaru zapisz plik jako jpg w założonym katalogu,
  • etap 2 - na otwartym pliku, korzystając z okna dialogowego (ImageSize), dokonać zmiany rozmiaru obrazu, dla wartości Width = 800, 600 i 1400, Resolution (Rozdzielczość) = 300. Za każdym razem, po zmianie rozmiaru zapisz plik jako jpg w założonym katalogu,
  • etap 3 - dokonaj oceny wielkości (Mb), jakości otrzymanych obrazów oraz rozmiar wydruku.

    Ćw. 3 - Zapisywanie pliku
    Aby zapisać edytowaną grafikę, należy wybrać polecenie File > Save As ....W oknie dialogowym Save As należy wskazać miejsce zapisania pliku, podać nazwę i wybrać format zapisu pliku.


    Rys 9. Zapisywanie edytowanej grafiki.

    W ćwiczeniu należy wykonać - plik z ćwiczenia 2 zapisać w formacie jpg, png, tif i psd. Dokonaj oceny jakości i wielkości zapisanych plików.

    Ćw. 4 - Zapisywanie pliku na potrzeby Internetu.
    Jeżeli po zakończeniu pracy, wykonanany projekt ma być wykorzystany na stronie WWW, należy skorzystać z innej formy zapisu i innego formatu pliku. Kolejność czynności jest następująca; File > Save for Web (Zapisz do Weba). Dzięki takiemu zapisowi użytkownik ma wiekszą kontrolę nad wielkością pliku i jakością grafiki. W tym celu w oknie dialogowym (Save for Web) należy wybrać jeden z trybów podglądu zdjęcia przed zapisem, tj. Originał, Optimized (podgląd zdjęcia po zapisie), 2-Up lub 4-Up (rozbudowana forma podglądu dla różnych ustawień formatu i jakości grafiki). Odczytując inforamcje o formacie obrazu, rozmiarze pliku po zapisaniu, możemy poprzez ich konfigurację uzyskiwać jak najlepszą jakość grafiki przy możliwie najmniejszym rozmiarze pliku.


    Rys 10. Okno ustawień na potrzeby Internetu.

    Ćw. 5 - Zadania do samodzielnego wykonania

    • Zadanie 1. Zaprojektuj okładkę na płytę CD-R (13,7 x 11,6 cm), na wybrany temat muzyczny. Okładka powinna zawierajać elementy graficzne i tekstowe. Kolorystyka dowolna, jednakże w kolorach nie rażących. Jakość wydruku 300 dpi,
    • Zadanie 2. Zaprojektuj i wykonaj logo strony internetowej (nagłówek) z nazwą kierunku o wymiarach 900 x 200 px. Nagłówek powinien zawierać w swojej treści logo uczelni i nazwę wydziału.
    • Do pobrania - logo uczelni »»» 
    • Do pobrania kod strony - kod stronki »»» 

      Do góry


  •  

    Literatura

       
    • R. Jaworski - Multimedia i grafika komputerowa (2009),
    • T. Rudny - Multimedia i grafika komputerowa (2011)

    Do góry


       

     

     (C) 2011 - 2017 Wydział Przyrodniczo - Techniczny KPSW. All Rights Reserved