Grafika komputerowa na stronach internetowych

background image

Grafika komputerowa

I Grafika ogólnie

1. Podstawowe pojęcia

Grafika - obszar działań dotyczący wyświetlania i nadzorowania obszaru na ekranie komputera.

Grafika komputerowa - tworzenie i przetwarzanie obrazów z użyciem komputerowego interfejsu

graficznego

2. Zastosowania

Interfejsy komputerowe - interakcje czyli reagowanie człowieka na obraz i przez

powodowanie zdarzeń

Wykresy - w nauce, biznesie, technologii 2D i 3D, wykresy funkcji matematycznych,

fizycznych itp. - wizualizacja naukowa (np. Excel)

Kartografia
Medycyna - diagnostyka, planowanie operacji, projektowanie protez
Projektowanie CAO - mechanika, budownictwo, elektronika
Systemy multimedialne - grafika i animacje edukacyjne
Rozrywka - gry multimedialne


Grafika wektorowa sprawdza się najlepiej, gdy zachodzi potrzeba stworzenia grafiki, czyli
mającego stosunkowo małą ilość szczegółów, nie zaś zachowaniu fotorealizmu obecnego w
obrazach.

3. Obrazy w grafice

• ukierunkowane na rzeczywistość (zbliżenie do fotografii)
• abstrakcyjne (modele, rzuty, wykresy)
• zmieniające się dynamiczne, w czasie animacje, też rzeczywiste lub abstrakcyjne, ruchome

wykresy (np. trendy wzrostu)

4. Kilka ważnych pojęć

1. RASTER - zbiór poziomych linii składających się z pikseli
2. PIKSEL - pojedynczy kwadrat, ułożony z innymi pikselami w regularną siatkę, tworzy obraz

graficzny

3. MAPA BITOWA - sieć pikseli monochromatycznych
4. MAPA PIKSELOWA - barwna sieć pikseli
5. Jednostką głębi bitowej jest BPP Class per pixels
6. Kolor - liczba kwantowa wprowadzona, by rozróżnić kwarki znajdujące się w tym samym

stanie spinowym.

Damian Serwatka

1

1 grudnia 2014

background image

II Grafika wektorowa i rastrowa

1. Grafika wektorowa

Grafika wektorowa (obiektowa) - jeden z dwóch podstawowych rodzajów grafiki komputerowej, w
której obraz opisany jest za pomocą figur geometrycznych (w przypadku grafiki dwuwymiarowej) lub
brył geometrycznych (w przypadku grafiki trójwymiarowej), umiejscowionych w matematycznie
zdefiniowanym układzie współrzędnych, odpowiednio dwu- lub trójwymiarowym.

Zalety:

• skalowalność, prostota opisu, a przez

możliwość modyfikacji poprzez zmianę
parametrów obrazu

• mniejszy rozmiar w przypadku

zastosowań niefotorealistycznych
(schematy techniczne, loga, flagi i
herby, wykresy itp.)

• opis przestrzeni trójwymiarowych
• możliwość użycia ploterów zgodnie z

metodą ich pracy

• bardzo dobre możliwości konwersji do

grafiki rastrowej

Wady

• ogromna złożoność pamięciowa dla

obrazów fotorealistycznych

• przy skomplikowanych obrazach

rastrowych nieopłacalność
obliczeniowa konwersji (poprzez
wektoryzację) do formy wektorowej





Formaty zapisu:

Wiele programów ma wewnętrzne formaty zapisu grafiki wektorowej, brak jest jednak powszechnych
standardów wymiany między aplikacjami. Do niedawna najbardziej uniwersalnymi były takie formaty
jak EPS, czy PDF. Obecnie popularność zdobywa promowany przez W3C oparty na XML format SVG.
Sam format uważany jest za przyszłościowy, gdyż ma także umożliwiać zakodowanie animacji oraz
interakcji z użytkownikiem poprzez użycie języka skryptowego. Podobne właściwości ma dostępny już
od wielu lat format SWF (z językiem skryptowym ActionScript), jednak ze względu na to, że jest
formatem zamkniętym, w praktyce uważa się go za format wewnętrzny środowiska Adobe (dawniej
Macromedia). Formatami, które nie zdobyły szerszej popularności są: AI, CDR (pakiet CorelDRAW),
WMF.

Damian Serwatka

2

1 grudnia 2014

background image

2. Grafika rastrowa

Grafika rastrowa – prezentacja obrazu za pomocą pionowo-poziomej siatki odpowiednio
kolorowanych pikseli na monitorze komputera, drukarce lub innym urządzeniu wyjściowym. Grafika
rastrowa została opatentowana pierwszy raz przez firmę Texas Instruments w latach 70. i jest teraz
wszechobecna. Zdjęcie z aparatu cyfrowego jest grafiką typu rastrowego.

Charakterystyka grafik rastrowych

Bez zastosowania kompresji kolor każdego piksela jest definiowany pojedynczo. Obrazki z głębią
kolorów RGB często składają się z kolorowych kwadratów zdefiniowanych przez trzy bajty – jeden
bajt (czyli 8 bitów) na kolor czerwony, jeden na zielony i jeden na kolor niebieski. Mniej kolorowe
obrazki potrzebują mniej informacji na piksel, np. obrazek w kolorach czarnym i białym wymaga tylko
jednego bitu na każdy piksel (bitmapa). Grafika rastrowa różni się od wektorowej tym, że grafika
wektorowa pokazuje obraz używając obiektów geometrycznych, takich jak krzywe czy wielokąty.

Jakość obrazu a wielkość pliku

Jakość obrazka rastrowego jest określana przez całkowitą liczbę pikseli oraz ilości informacji
przechowywanych w każdym pikselu. Na przykład obrazek zapisujący 24 bity informacji o kolorze
może pokazać łagodniejsze cieniowanie od obrazka zapisującego jedynie 16 bitów informacji na
jeden piksel, ale też nie pokaże łagodniejszego obrazka od zapisującego 48 bitów na piksel. Podobnie,
obrazek o wymiarach 640 × 480 pikseli (zawierający 307200 pikseli) będzie wyglądał nierówno i
chropowato w porównaniu do obrazka o wymiarach 1280 × 1024 (1310720 pikseli).

Ponieważ taka ilość danych zajmuje ogromną powierzchnię, często stosuje się technikę kompresji
danych celem zmniejszenia wielkości zajmowanego miejsca. Kompresję bezstratną umożliwiają np.
pliki PNG, TIFF, JPEG 2000. Niektóre techniki zamieniają (zmniejszają, usuwają) pewne informacje,
aby uzyskać mniejszy plik. Niestety nie są to bezstratne metody kompresji. Przykładami takich
kompresji jest kompresja JPEG, a także stratne tryby kompresji PNG czy JPEG 2000.

Damian Serwatka

3

1 grudnia 2014

background image

III Formaty grafiki komputerowej na stronach internetowych

Formaty plików graficznych można podzielić na formaty przechowujące grafikę rastrową oraz
formaty przechowujące grafikę wektorową. Z kolei formaty przechowujące grafikę rastrową można
podzielić na stosujące kompresję bezstratną, stosujące kompresję stratną oraz nie stosujące
kompresji. W chwili obecnej istnieje ponad 100 różnych metod zapisu grafiki komputerowej.

1. Format JPEG

JPEG - niewątpliwie najpopularniejszy format plików graficznych z kompresją stratną, umożliwiający
sterowanie stopniem kompresji kosztem jakości pliku wyjściowego; używany zarówno w sieci
Internet (obsługiwany przez prawie wszystkie przeglądarki), jak i w aparatach cyfrowych. Format
skierowany przede wszystkim do wszelkiego typu fotografii, ilustracji oraz grafiki o dużej palecie
kolorów.

Zalety:

• większy format kompresji niż GIF
• 24 bity
• kontrola stopnia kompresji
• mały rozmiar pliku
• najlepszy dla obrazów o ciągłych

przejściach tonalnych

• możliwość zapisu progresywnego

Wady:

• kompresja stratna - nieodwracalna
• nieodpowiedni do grafik, rysunków

itp.

• brak przeźroczystości
• brak możliwości animacji

poklatkowanej

• brak przeplotu

Tryb progresywny kompresji, przewidziany do wyświetlania obrazów w trakcie przesyłania

danych. Efekt płynnie wyostrzającego się obrazu jest szczególnie dobrze widoczny przy użyciu
szybkiego dekompresora i wolnej transmisji danych. Tryb ten zyskał rozpowszechnienie wraz
z rozwojem Internetu.

Tryb hierarchiczny, pozwalający na zapis w jednym pliku tego samego obrazu jako sekwencji

kadrów o różnych rozdzielczościach. Kolejne kadry są kodowane jako różnice względem
kadrów poprzednich, o niższej rozdzielczości, a nie jako oddzielne obrazy, co zmniejsza
rozmiar pliku. Tryb ten nie definiuje, która z metod kompresji ma zostać użyta. Tryb
hierarchiczny umożliwia szybki podgląd obrazów bez czasochłonnej dekompresji obrazów o
wysokiej rozdzielczości, co ma zastosowanie np. w fotografii cyfrowej.

Damian Serwatka

4

1 grudnia 2014

background image

2. Format GIF

GIF - popularny format pliku graficznego z kompresją bezstratną stworzony przez firmę CompuServe.
Pliki tego typu są powszechnie używane na stronach WWW, gdyż pozwalają na tworzenie animacji
dwustanową przezroczystością. Obsługiwany przez prawie wszystkie przeglądarki WWW; może
przechowywać wiele obrazków w jednym pliku tworząc z nich animację; obsługuje przeźroczystość
monochromatyczną (pełna przeźroczystość lub wcale).

Zalety:

• kompresja bezstratna
• możliwość zdefiniowania,

przeglądania tła

• możliwość animacji poklatkowej
• idealny w przypadku dużych

powierzchni

Wady:

• 256 kolorów
• więcej kolorów => większy rozmiar
• na fotografiach występuje efekt

pasowania

3. Format PNG

PNG - rastrowy format plików graficznych oraz system bezstratnej kompresji danych graficznych.

format PNG-8 - przypomina GIF, zapewnia lepszą obsługę kolorów, zachowuję wyrazistość

szczegółów takich jak np. ilustrację.

format PNG-24 - obsługuję kolory 24 bitowe, zachowuję wyrazistość, szczegółowość

zwłaszcza w grafice liniowej, obsługuję przezroczystość, występuje lepszy algorytm
kompresji, jest stosunkowo mało popularna.

IV Modele barw

1. Co to jest barwa?

Barwa - wrażenie zmysłowe, reakcja zmysłu wzroku na padającą na receptory siatkówki falę
elektromagnetyczną o długości z zakresu 400-700 nm (światło widzialne).

Rozróżnia się barwy kolorowe i niekolorowe (tj. szarości – od bieli do czerni). Szarości postrzegane są
zawsze względnie (przykładowo: pewna część danej powierzchni, widziana pierwotnie jako biała,
staje się szara przy oświetleniu sąsiadującej z nią części powierzchni silniejszym źródłem światła
białego).

Damian Serwatka

5

1 grudnia 2014

background image

2. Model RGB

RGB – jeden z modeli przestrzeni barw, opisywanej współrzędnymi RGB. Jego nazwa powstała ze
złożenia pierwszych liter angielskich nazw barw:

R

– red

G

– green i

B

– blue, z których model ten się

składa. Jest to model wynikający z właściwości odbiorczych ludzkiego oka, w którym wrażenie
widzenia dowolnej barwy można wywołać przez zmieszanie w ustalonych proporcjach trzech wiązek
światła o barwie czerwonej, zielonej i niebieskiej.

Z połączenia barw RGB w dowolnych kombinacjach ilościowych można otrzymać szeroki zakres barw
pochodnych, np. z połączenia barwy zielonej i czerwonej powstaje barwa żółta. Model RGB miał
pierwotnie zastosowanie do techniki analogowej, obecnie ma również do cyfrowej. Jest szeroko
wykorzystywany w urządzeniach analizujących obraz (np. aparaty cyfrowe, skanery) oraz w
urządzeniach wyświetlających obraz (np. telewizory, monitory komputerowe).

3. Model HSV

HSV (Hue Saturation Value) – model opisu przestrzeni barw. Model ten nawiązuje do sposobu, w
jakim widzi ludzki narząd wzroku, gdzie wszystkie barwy postrzegane są jako światło pochodzące z
oświetlenia. Według tego modelu wszelkie barwy wywodzą się ze światła białego, gdzie część widma
zostaje wchłonięta, a część odbita od oświetlanych przedmiotów.

Model ten jest bardzo przydatny przy wizualizacji prawdopodobieństwa na wykresach, gdzie
zwyczajowo barwa czerwona odpowiada największemu prawdopodobieństwu, natomiast niebieska
najmniejszemu. Można, zatem w prosty sposób manipulując tylko jednym parametrem H,
odwzorować przy pomocy kolorów prawdopodobieństwo w kolejnych punktach tworzących
powierzchnie.

4. Model CMYK

CMYK – zestaw czterech podstawowych kolorów farb drukarskich stosowanych powszechnie w druku
wielobarwnym w poligrafii i metodach pokrewnych (atramenty, tonery i inne materiały barwiące w
drukarkach komputerowych, kserokopiarkach itp.). Na zestaw tych kolorów mówi się również barwy
procesowe lub kolory triadowe (kolor i barwa w jęz. polskim to synonimy). CMYK to jednocześnie
jedna z przestrzeni barw w pracy z grafiką komputerową. Skrót CMYK powstał jako złożenie
pierwszych liter angielskich nazw kolorów:

Cyjan

– odcień niebieskiego, ale trochę bledszy i bardziej spłowiały, można go określić jako

szarobłękitny lub sinoniebieski. Najbardziej podobne kolory to błękit, szafir i turkus.

Magenta

– w syntezie addytywnej kolor uzyskany w wyniku połączenia czerwieni i

niebieskiego. Najbardziej podobne kolory to fuksja, karmazyn i amarant.

Yellow

– kolor żółty.

Black - kolor czarny.

Barwy wynikowe w metodzie CMYK otrzymuje się poprzez łączenie barw podstawowych w
proporcjach (dla każdej z nich) od 0% do 100%. Farby CMYK to substancje barwiące przepuszczające
(lub rozpraszające) światło, czyli barwniki, tak więc łączy się je nie metodą mieszania tylko nakładania
warstwami i dlatego barwa wynikowa może mieć od 0% do 400% koloru (czyli kolorów składowych).

Damian Serwatka

6

1 grudnia 2014

background image

Damian Serwatka

7

1 grudnia 2014


Document Outline


Wyszukiwarka

Podobne podstrony:
76 262202 analityk ruchu na stronach internetowych
Zagadnienia do egzaminu z przedmiotu grafika komputerowa na semestr I, technik informatyk, soisk utk
ISE powtorka z chemii, ISE analiza chem i rozpuszczalnosc, Propozycje na stroną Internetową CEŚ
76 262202 analityk ruchu na stronach internetowych
76 262202 analityk ruchu na stronach internetowych
Czechy na polskich stronach internetowych, Język czeski
GRAFIKA NA STRONIE INTERNETOWEJ cw1 3, II gimnazjum
GRAFIKA NA STRONIE INTERNETOWEJ cw4 6, II gimnazjum
Przedsięwzięcie edukacyjne-Szkolna strona internetowa, wrzut na chomika listopad, Informatyka -all,
I Ćwiczenia 4 zadania(na czysto), WAT, semestr III, Grafika komputerowa
SPRAOZDANIE STRONA TYTUŁOWA, PWR, Semestr 5, Grafika komputerowa, Grafika komputerowa, SPRAWOZDANIE
spis wiedza na egzamin, s3 - GK - grafika komputerowa
Czechy na polskich stronach internetowych, Język czeski
Kopsztajn () Wpływ internetu i geir komputerowych na występowanie zachowań patologicznych

więcej podobnych podstron