Graafika põhimõisted

1. Graafika põhimõisted Võrumaa Kutsehariduskeskus 2003

2. Graafika liigid • Vektorgraafika • Rastergraafika ehk bitmapgraafika ehk pikselgraafika

3. Vektorgraafika • Loodav pilt koosneb teatud hulgast algkujunditest, milleks on: • sirgjoon • kõverjoon • ristkülik • ellips jt. N • Pilt luuakse kujundite joonistamise käskudega (arvutatakse valemite järgi) • Kujundite sisemust on võimalik värvida • Fail – väike

4. Rastergraafika • Pilt koosneb väikestest ruudukestest (punktidest ehk pikselitest) • Igal pikselil on kindel positsioon • Iga piksel saab olla ainult ühte värvi • Pikselite arv horisontaal- ja vertikaalsuunas näitab pildi mõõtmeid • Fail – suur

5. Pildi faili suurus (näide) • Rastergraafikas foto 640 x 480 pikselit 16 milj. värviga • bmp > ~ 900 kB • jpg > ~50 kB • gif > ~15 kB • Vektorgraafikas A4 pilt ~10 kB

6. Rastergraafika pildi põhiparameetrid: • suurus pikselite arvuna • resolutsioon/tihedus • värvisügavus

7. Suurus pikselite arvuna • Pildi suurus ekraanipikselite arvuna. • Tavaliselt esitatakse see parameeter pildi küljepikkuste korrutisena, s.t kui pildi ühe külje pikkus on 800 pikselit ja teise külje pikkus 600 pikselit, siis suurus pikselite arvuna on 800x600.

8. Siin näete erinevate suurustega pilte: 100x100 150x50 200x150

9. Resolutsioon • Resolutsiooniks nimetatakse pikselite arvu tolli kohta • pildil: pixels per inch – ppi • monitoril ja printeril: dots per inch – dpi • Mida suurem on resolutsioon, seda kvaliteetsem pilt. Samas aga suureneb resolutsiooni tõustes pildifaili suurus. Resolutsiooni vaadeldakse tavaliselt skaneerimise ja printimise juures.

10. Siin näete sama pilti kolme erineva resolutsiooni korral.

11. Resolutsiooni suurendamine 2X

12. Mälu mõõtmine • Arvutimälu mõõtühik on bait (byte)1 bait = 8 bitti • bitt on seisund 0 või 1 • bait on niipalju mälu, et selles saab säilitada ühe sümboli 256 võimalikust • 1 kilobait (KB, K) = 1024 B1 megabait (MB) = 1024 KB = 1 048 576 B • 1 gigabait (GB) = 1024 MB

13. Värvide arv • Punkti sügavus – mitu bitti on vaja ühe punkti värvi näitamiseks • 1 bit – 21 = 2 värvi (valge, must) – 0 või 1 • 4 bitti – 24 = 16 värvi • 8 bitti – 28 = 256 värvi • 24 bitti – 224 = 16 777 216 värvi (tõeline värv - true color)

14. Pildi värvisügavus • Mida suurem on pildi värvisügavus, seda kvaliteetsem on pilt, kuid seda suuremad nõuded esitatakse graafikakaardile ning monitorile ja seda suurem on pildifail. Veebis on veel siiamaani laialt levinud 8-bitise värvisügavusega pildid, kuid on tuntav üleminek 16 ja 24 bitiste sügavustega piltidele.

15. Tegemist on sama pildiga erinevate värvisügavuste juures. 24-bit(16 milj) 4-bit(16)

16. Erinevad värvisügavused

17. Värvimudelitel põhinevad formaadid Värvid lahutatakse põhikomponentideks • RGB R- Red G-Green B- Blue • CMYK C-Cyan M-Magenta Y-Yellow K-BlacK • HSB H-Hue (toon) S-Saturation (küllastus e. valitud toon täistoonist 100- kuni valgeni 0) B-Bringless (säravus valitud täistoonist 100 kuni mustani 0)

18. Pakkimata failiformaadid • *.bmp – Bitmap Picture pakkimata => suur fail; redigeerimine – Paint’iga • *.wmf – Windows Meta File Võib sisaldada nii vektor- kui rastergraafikat • ClipArt’i pildid

19. Pakitud failiformaadid • *.gif – Graphic Interchange Format pakitud kadudeta n256 värvi (Windows’i süsteemivärvid) logod, taustad jt. väheste värvidega pildid • *.png – Portable Network Graphic gif-formaadi edasiarendus (rohkem kui 256 värvi) • *.jpg (*.jpeg) – Joint Photographic Experts Group pakitud kadudega 16 milj. värvi, näiteks fotod

20. Failiformaat JFIF (JPG) • JFIF pildid kasutavad JPEG (Joint Photographic Experts Group) pakkimismeetodit, mis on kadudega meetod, s.t kui pakkida pilt JPEG'iga, siis ei ole tulemus identne algse sisendiga. • JPEG pakkimisalgoritm on väga efektiivne, kuid mõned JPEG pildid võivad just selle kadudega pakkimise tõttu muutuda üsna tundlikuks suurendamise suhtes.

21. Parempoolne pilt on väiksema pildi brauseri abil suurendatud koopia. Paneme tähele, et järskudevärviüleminekute juures on näha mõningat "müra”

22. Failiformaat GIF • (Graphics Interchange Format) CompuServe's kasutamiseks loodud formaat, kasutab LZW nimelist pakkimismeetodit. Levinud on kaks GIF versiooni: • GIF 87a • GIF 89a, mis pakub animatsiooni ja läbipaistvuse võimalusi.

23. Animeeritud GIF Animeeritud GIF on kokku pandud mitmest kihist 1 2 3 jne Animeeritud GIFis on salvestatud mitu järjestikust layerit ehk kihti, mida siis samuti GIF pilti salvestatud ajavahemiku tagant vahetatakse, nii on võimalik tekitada lihtsamat liikuvat pilti.

24. Läbipaistvus • Läbipaistvus tähendab GIF'i juures seda, et pildi üks värvidest on defineeritud läbipaistvana. • Läbipaistva värvi kohtadelt paistab läbi see, mis on pildi "taga", veebilehel on selleks taustavärv või taustapilt.

25. Siin on pildi taustavärv valge. Läbipaistva GIF-i korral on võimalik, et läbipaistvatest kohtadest paistab läbi sinine taust.

26. Failiformaat PNG • PNG (Portable Network Graphics), loodud selleks, et graafikat võrgus liigutada • Värvikaart/värvisügavus • Indexed – kuni 256 värvi • RGB – kuni 16 milj. värvi • RGB-Alpha – kuni 16 milj. värvi + läbipaistvus • Läbipaistvus – läbipaistvuse aste 0-255

27. Pildi suuruse muutmine • Kui on vaja veebis esitatavat pilti väiksemaks/suuremaks teha, siis kindlasti mõne graafikapaketiga skaleerides, mitte mingil juhul näidata suurt pilti HTML-märgendi atribuutide abil väiksemaks/suuremaks defineerituna. • Muidugi, isegi heade graafikaredaktoritega skaleerides võib pildi kvaliteet halveneda, seepärast on kõige parem lahendus teha pildid täpselt sellise suurusega, nagu neid veebis esitada kavatsetakse.

28. Paremal on pilt skaleeritud graafikatöötlusvahendiga (GIMP), all on skaleerimiseks kasutatud brauseri enda võimalusi

29. Taustapilt • Taustavärvi sobitamine muu lehega on mõnikord juba paras hulk tööd, taustapildiga aga on lood hullemad. • Kui taustapilt on vähegi värvikirevam või kontrastsem, on sellele taustale kirjutatud teksti lugemine mõnikord päris raske, silmi tuleb pingutada. • Seepärast tuleb taustapildil eelistada neutraalseid värve ning hoiduda tuleb silmatorkavatest kujunditest.

30. Antud näites toodud taustapilt võib küll olla kena ja värvikirev, kuid selle pealt midagi lugeda on ebameeldiv või koguni võimatu... Eriti tülikas oleks selliselt taustalt lugeda pikka teksti.