Grafika

1. Vrste grafike

2. Izvori slika

3. Boje

4. Formati slika

5. Grafika za Web

1. Vrste grafike

• slike na računalu:
  • bitmape (paint ili rasterska grafika)
  • vektorske (drawn grafika)
    
    

1.1 Bitmape

• sastavljene od pojedinačnih točaka - pixela (picture element)
• svaki pixel iste veličine
• rezolucija (razlučivost) - broj piksela određuje kvalitetu slike
• matrica za pohranjivanje informacija o svakom pixelu koji čini sliku (lokacija, boja), dimenzija matrice ovisi broju boja:

Primjer matrice za crno-bijelu i RGB bitmapu ("CorelDRAW! za dizajnere")

Originalna slika i njezino uvećanje (dithering (zamućivanje), anti-aliasing, zupčasta izobličenje crta)

Crno-bijela slika (monochrome)

• svaki pixel je spremljen kao jedan bit (0 ili 1)
• 640 x 480 slika zahtjeva 37.5 KB (640 x 480 / 8 / 1024)

Crno-bijela slika bez ditheringa i sa ditheringom

Slika u tonovima sive boje (gray-scale)

• svaki pixel je spremljen kao byte (vrijednost između 0 to 255)

• 640 x 480 slika zahtjeva preko 300 KB

Slika u 8-bitnoj boji (indeksirana)

• svaki pixel je spremljen kao byte (vrijednost između 0 to 255) jer sadrži podatak o boji
• koristi se indeksirano opisivanje boja pomoću posebnih tablica (Color Look-Up Tables - LUTs)
• 640 x 480 slika zahtjeva preko 300 KB

Slika u 24-bitnoj boji

• svaki pixel je spremljen kao 3 byta (za svaku RGB boju po jedan)
• podržava 256 x 256 x 256 mogućih kombinacija boja (16,777,216)
• 640 x 480 slika zahtijeva 921.6 KB

• mnoge RGB slike se spremaju kao 32-bitne slike jer se dodatni byte podataka za svaki pixel koristi za spremanje alpha vrijednosti koja predstavlja informaciju o nekim posebnim efektima

1.2. Vektorska grafika

• vektor – opisuje se duljinom i smjerom u prostoru
• slikovne datoteke sadrže opise pomoću linija, oblika i boja

Na pr. RECT 0,0,200,200
RECT 0,0,200,200,RED,BLUE

Usporedba bitmape i vektorske grafike

• veličina datoteke - za gornji primjer oko 30 bytova alfanumerfičkih podataka nasuprot 5000 bytova (200x200/8) za crno-bijelu sliku ili 40 000 (200x200) za sliku s 256 boja
• kod vektorskih slika se ne mogu pojedine informacije pridruživati nekom dijelu objekta (npr. dijelovi crte u više boja)
• pri povećanju bitmap slike opada kvaliteta slike (zupčasta izobličenje crta - jaggies)
• dijelovi bitmap slike se ne mogu pomaknuti tako da se sačuvaju objekti koji su nacrtani ispod (kod pomicanja ostaje prazni prostor)
  
  

2. Izvori slika

2.1 Bitmape

• clip art – zbirke slika, na pr. http://www.freeimages.co.uk/ (fotografije), http://www.coolarchive.com/ (pozadine, strelice, ikone, gumbi, bullets,...)
  (1. zadatak)

• "hvatanje slike" s računalnog ekrana i paste u paint program (2. zadatak)

  • MWSnap - primjer programa za "hvatanje slike"  (screen capture utility)

• kreiranje vlastitih slika - programi za izradu bitmap slika ili paint programi (na pr. Adobe Photoshop) (3. zadatak)

• učitavanje u računalo već postojeće slike pomoću skenera, digitalnih kamera (4. zadatak)
   

2.2. Vektorska grafika

• CAD (Computer-Aided Design) programi
• programi za 3-D animaciju
• programi za crtanje (Corel Draw)
  
  

3. Boje

• RGB (Red, Green, Blue) model boja za monitore

- crvena, zelena i plava - aditivne primarne boje
- ekran monitora izvor svjetla; sa stražnje strane je fosforescentni sloj - točke promjera .30 mm ili manje u R, G i B boji, izložene su elektronima koji iscrtavaju sliku velikom brzinom
- kada se oduzme jedna od primarnih boja, doživljava se primarna subtraktivna boja (C, M ili Y)
- na pr. R+G+B = bijela, R+B=magenta, R+G=yellow, G+B = cyan
- crna - nema ni jedne boje

• CMY (Cyan, Magenta,Yellow) model boja za tiskanje

- primarne subtraktivne boje
- tiskana strana sastoji se od vrlo sitnih točkica primarnih boja i crne

(Multimedia Systems http://www.cs.sfu.ca/CourseCentral/365/li/material/syllabus.html )
 

Palete boja

• pixel je na monitoru obično izražen kao određena količina R, G i B boje
• palete su tablice koje definiraju boju pixela prikazanog na ekranu
• broj boja na ekranu ovisi o dubini boja:

• problem kod prebacivanja slika iz jedne 256 palete u drugu (palette flashing)
• dithering - kada se slika s 16 mil. boja prebacuje na 256 boja svaki se pixel prebacuje u boju koja najviše odgovara originalnoj uz pomoć posebnih algoritama
  • uzorak u kojem se boje kombiniraju tako da simuliraju one boje pixela kojih nema u paleti
• prikazivanje boje u HTML:
  • svaki od 3 kanala (RGB) koji zauzima 8 bita ili raspon od 0-255 predsavlja se heksadecimalnom vrijednošću (od 00 do FF)
  • na pr. čista crvena boja (nema G i B): #FF0000, magenta (oduzeta G od R+B): #FF00FF, bijela: #FFFFFF, crna: #000000
    

4. Formati slika

• za bitmape i vektorsku grafiku
• ovisni i neovisni o platformi
• sa kompresijom i bez kompresije
  

5. Grafika za Web

• komprimirani formati slika zbog bržeg prenošenja mrežom
• komprimiranje uz gubitak informacijskog sadržaja (lossy compression) i bez gubitaka (lossless compression)

• vektorska grafika za Web: Scalable Vector Graphics (SVG)
• bitmap grafika: GIF, JPEG, PNG

Scalable Vector Graphics (SVG)

• nije format, nego jezik za opisivanje 2-D grafike u XML-u
• linkovi:
  • Scalable Vector Graphics (SVG) 1.0 Specification http://www.w3.org/TR/SVG/ 
  • XML.com: An Introduction to Scalable Vector Graphics http://www.xml.com/pub/a/2001/03/21/svg.html 
  • Adobe SVG http://www.adobe.com/svg/  (download plug-ina za SVG)
  • Iva Kranjčić: SVG (seminarski rad)

PNG (Portable Network Graphics)

• noviji format, zamjena za GIF
• komprimiranje bez gubitaka
• prednosti u odnosu na GIF:
  • alfa kanali (promjenjiva prozirnost (transparency) po stupnjevima)
  • gama korekcija (mogućnost kontrole svjetline slike ovisno o platformi)
  • 2-dimenzionalno preplitanje (interlacing) kao način progresivnog prikaza
• linkovi:
  • Portable Network Graphics Home Page http://www.libpng.org/pub/png/  (Primjeri: http://www.libpng.org/pub/png/pngintro.html)

  
  

  

  Usporedba PNG 2D preplitanja (lijevo) i GIF 1D preplitanja (desno)
   

  Slike sa stranice http://www.libpng.org/pub/png/pngintro.html

Usporedba GIF i JPEG formata:

GIF (Graphics Interchange Format)

• 8-bitna boja (prikaz do 256 boja)
• prikladan za slike s većim područjima u istoj boji (ilustracije, ikone, logo, gumbi,...)
• komprimirani format bez gubitaka; komprimira se red po red tako što se skupina pixela iste boje zamjenjuje jedinstvenim opisom (na pr. manja slika s vodoravnim crtama, nego slika iste veličine s vertikalnim)
• mogućnosti: prozirnost (transparency) (6. zadatak), postepeno učitavanje (interlacing), animacija
• optimiziranje:
  • reduciranje broja boja
  • reduciranje simuliranja nepostojećih boja (dithering)
  • korištenje "lossy" GIF-a – izbacivanje nekih pixela prilikom komprimiranja
  • paziti pri dizajnu: koristiti veća područja u istoj boji, izbjegavati postepene ispune i okomite crte (7. zadatak)
• Web paleta
  • paleta ugrađena u preglednike, potrebna za 8-bitne monitore
  • 216 boja za koje nije potreban dithering na PC i Mac platformi
    

JPEG

• ime po Joint Photographic Experts Group organizaciji koja je kreirala standard
• 24-bitna boja (preko 16 milijuna boja)
• prikladan za fotografije
• komprimirani format s gubitkom – izbjegavati snimati već postojeću JPEG sliku ponovo u JPEG formatu
• kompromis između razine komprimiranja (veličine slike) i kvalitete slike
• bolji rezultati za "zamagljene" slike bez oštrih prijelaza i jednoličnih boja
• progresivni JPEG
• dekomprimiranje – vrši ga preglednik prije prikaza
• optimiziranje
  • koristiti veći stupanj komprimiranja
  • koristiti optimizirani JPEG
  • "zamagliti" sliku ili samo manje važne dijelove (na pr. Blur alatom Photoshopa)
    
    

Nekoliko preporuka

DA	NE
GIF, JPEG i PNG format za slike	BMP, TIF i ostali bitmap formati za slike
GIF za oštre rubove i jednolične boje	Slike koje izgledaju kao gumbi (a nisu)
JPEG za fotografije	Slike neujednačene sa tekstom
Datoteke sa slikama do 30K	Puno slika različitih dimenzija
Isključiti rub slika koje su hiperveze	Previše animacija, pogotovo uz tekst
Male slike na stranici kao veze na velike slike	Animacije koje su same sebi svrha
Alternativni tekst za slike

25.10.2006.