Grafika komputerowa na stronach internetowych


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
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: Wady
" skalowalność, prostota opisu, a przez " ogromna złożoność pamięciowa dla
możliwość modyfikacji poprzez zmianę obrazów fotorealistycznych
parametrów obrazu
" przy skomplikowanych obrazach
" mniejszy rozmiar w przypadku rastrowych nieopłacalność
zastosowań niefotorealistycznych obliczeniowa konwersji (poprzez
(schematy techniczne, loga, flagi i wektoryzacjÄ™) do formy wektorowej
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
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
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
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: Wady:
" większy format kompresji niż GIF " kompresja stratna - nieodwracalna
" 24 bity " nieodpowiedni do grafik, rysunków
itp.
" kontrola stopnia kompresji
" brak przezroczystości
" mały rozmiar pliku
" brak możliwości animacji
" najlepszy dla obrazów o ciągłych
poklatkowanej
przejściach tonalnych
" brak przeplotu
" możliwość zapisu progresywnego
" 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
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 przezroczystość
monochromatyczną (pełna przezroczystość lub wcale).
Zalety: Wady:
" kompresja bezstratna " 256 kolorów
" możliwość zdefiniowania, " więcej kolorów => większy rozmiar
przeglądania tła
" na fotografiach występuje efekt
" możliwość animacji poklatkowej pasowania
" idealny w przypadku dużych
powierzchni
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 zródłem światła
białego).
Damian Serwatka 5 1 grudnia 2014
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
Damian Serwatka 7 1 grudnia 2014


Wyszukiwarka

Podobne podstrony:
76&2202 analityk ruchu na stronach internetowych
informacja na stronkÄ™ internetowÄ…
Grafika komputerowa 2
Polska Grafika Komputerowa
Prosta strona internetowa html STRONKA suzukigsxr
Budowa sieci komputerowych na przelacznikach i routerach Cisco busiko
Czyżewski, Michał Przyjazna prywatności obserwacja ruchu na stronach WWW
Prosta strona internetowa html STRONKA suzukigsxr
darmowa reklama zrobiona z grafiki dostepnej na moim chomiku W PROGRAMIE PHOTOSCAPE(1)

więcej podobnych podstron