GRAFIKA
LASTNOSTI FORMATA
GIF format, oziroma Graphics Interchange format je pretočen, zaradi česar je drugačen od večine drugih formatov. Sestavljen je iz zaporedja podatkovnih paketov, ki jim rečemo bloki ter opremljen z dodatnimi protokolarnimi informacijami. Zaradi tega moramo GIF datoteke brati sekvenčno, kot da bi brali neprekinjen tok informacij. Zaradi svoje sestave (bloke in podbloke je mogoče najti skoraj kjerkoli v datoteki) je ta format težko enkapsulirati oziroma opisati s strukturami iz jezika C.
Gif format je tipa ‘bitmap’, kar pomeni, da slika iz neke domene (recimo iz intervala celih števil) v bite. Rečemo tudi, da je to bitna tabela. Format omogoča od 1 do 8 bitne barve, za shranejvanje pa se uporablja RGB model. Največja dovoljena velikosti slike je 64 K x 64 K pikslov, hkrati pa dovoljuje več slik na eno datoteko (tako lahko v formatu gif predstavimo tudi animacijo). Sam format je stisnjen (kompresiran) s pomočjo metode LZW.
Notranja struktura formata gif
To delo je objavljeno pod licenco Creative Commons Priznanje avtorstva 4.0 Mednarodna.
Vir: http://www.fileformat.info/format/gif/egff.htm
Na zgornji sliki je mogoče videti notranjo strukturo formata gif, kjer lahko tudi lepo vidimo, kako ta format dovoljuje uporabo večih slik znotraj enega dokumenta.
Takoj na začetku imamo header, kjer so zapisane osnovne informacije o formatu, oziroma o datoteki, kot so:
- podpis formata (gif)
- verzija formata (obstajata 87a in 89a)
- širina in višina prikaza (v pikslih)
- inforamacije o zaslonu in barvni mapi
- indeks barve ozadja
- razmerje pikslov
Zatem vidimo, da ima fomat še nekaj deskriptorjev, in globalnih podatkov, zatem pa se po vrsti zvrstijo slike, oziroma natančneje podatki o slikah, kot so (lokalni) deskriptor slike, (lokalna) barvna tabela ter na koncu še podatki o sliki. Vstavljenih slik je tako lahko poljubno mnogo (oziroma, dokler ne presežemo smiselne velikosti formata). [8]
Več o formatu gif
PRIMERNOST UPORABE
Gif format je zaradi svoje barvne omejitve, v določenih situacijah primeren, v drugih pa popolnoma neprimeren. Dovoljuje do 256 barv iz 24-bitnega RGB modela. Kot tak format je najbolj primeren za slike, kjer imamo enotne barve, tekst in preproste oblike. Primeri takih uporab bi bili gumbi, ikone in transparente, ker imajo ostre robove in preproste barve. Če v sliki prihaja do gradienta (prehod iz ene barve v drugo) gif format ni primeren.
Vendar pa za razliko od nekaterih drugih formatov gif dovoljuje prosojno ozadje, kar je lahko velik plus, kadar slike v tem formatu uporabljamo na spletni strani, saj se lepo zlijejo z ozadjem. Vendar pa so lahko piksli v tem primeru bodisi celotno prosojni ali pa sploh ne, format torej ne dovoljuje delne prosojnosti (za ta namen se uporablja format png). Ker pa je v zadnjem času png format skoraj prevzel vlogo internetnega formata, se gif velikokrat uporablja prav za animacije. Dandanes je sicer ta uporaba manj pogosta, vendar se še vedno pojavlja. Kadarkoli potrebujemo animacijo ali predstavitev nečesa, česar ni mogoče predstaviti s statično sliko, se poslužimo tega formata.
Gif format torej uporabljamo:
- za logote (ostri robovi) z omejenim naborom barv. Ta uporaba izkoristi lastnost brezizgubne kompresije, ki jo uporablja ta format, kjer imajo prednost ravna območja z enotno barvo
- za shranjevanje podatkov o ‘spritih’ za video igre
- za manjše animacije ali nizko resolucijske videe.
NAČIN KODIRANJA OZIROMA KOMPRESIJE
Format gif za kompresijo uporablja brezizguben Lempel-Ziv-Welch (LZW) algoritem. Namen uporabe kompresijskega algoritma je iskanje ponavljajočih se segmentov znotraj datoteke (grafike), ki so potem bolj efektivno stisnjeni oziroma predstavljeni. Pri algoritmu LZW je predvsem pomembno to, da je brezizguben, kar pomeni da s kompresijo ne izgubimo informacij. [9]
Algoritem LZW je pogosto uporabljen, največkrat prav pri formatu gif in občasno pri formatih pdf in tiff. Tudi Unixov ukaz za kompresijo (compress) uporablja prav ta algoritem. Glavna ideja za stiskanje je iskanje ponavljajočih vzorcev v podatkih z namenom zmanjševanja zasedenega prostora.
LZW deluje tako, da prebere zaporedje simbolov, jih pretvori v niz, ki so potem pretvorjeni v kode. Ker same kode zavzamejo manj prostora kot prej omenjeni nizi, pride do kompresije.
Opisan postopek algoritma je tak: ko se vhodne informacije procesirajo imamo implementiran slovar, ki hrani povezave med najdaljšimi besedami (do sedaj) ter seznamom vrednosti kod. Same besede so nato nadomeščene s pripadajočimi kodami, s čimer dosežemo kompresijo. Pomembno je, da se efektivnost algoritma veča več kot imamo v datoteki dolgih, ponavljajočih se podatkov.
Sama koda algoritma je sorazmerno preprosta, za predstavo je spodaj tudi napisana psevdokoda.[10]
Inicializacija tabele z enotskimi nizi
P = prvi vnešen znak
WHILE ni konec vnosa
C = naslednji znak
IF P+C v tabeli
P = P+C
ELSE
izpiši kodo za P
dodaj P+C v tabelo
P = C
END WHILE
izpiši kodo za P
LASTNOSTI FORMATA
Format SVG služi kot format vektorskih slik (za razliko od formata GIF, ki je namenjen rastrski grafiki), pomeni pa Scalable Vector Graphic. Ustvarili so ga na W3C (World Wide Web consortium), z namenom, da bi se grafiko opisovalo z matematičnimi enačbami.
Celoten format je osnovan na XML označevalnem jeziku. Posledično je zaradi tekstovnega opisa slike mogoče sliko povečati ali zmanjšati, oziroma skalirati, brez da bi izgubili na kvaliteti slike. Z drugimi besedami je SVG format invarianten za resolucijo.
Ker SVG format uporablja za opis XML označevalni jezik, je izjemno primeren za brezizgubno kompresijo (lossless compression). Kadar je vektorska slika v SVG formatu stisnjena s standardno gzip kompresijo, rečemo, da je slika v obliki SVGZ, pripadajoči format pa se prav tako spremeni v SVGZ.
SVG specifikacije definirajo 14 osnovnih orodij, ki jih lahko uporabljamo v vektorski grafiki:
- poti
- osnovni liki
- tekst
- slikanje
- barve
- gradienti(prehodi) in vzorci
- izrezovanje, maskiranje in sestavljanje
- uporaba filterjev
- interaktivnost
- povezovanje
- skriptiranje (SVG datoteke lahko na podoben način manipuliramo s skriptami kot HTML)
- animacije
- oblika besedila
- metadata
PRIMERNOST UPORABE
Ker je format SVG neodvisen od resolucije (lahko ga skaliramo, pa ne bomo izgubili na kvaliteti slike) so slike v tem formatu še posebej primerne za spletne strani, kjer se uporabljajo za logote in favicone, ter za večje printe. Take slike so uporabne, saj nam njihov format omogoča prosto skaliranje brez izgub na kvaliteti na željeno velikost. [11]
Še največ problemov se je z vektorsko grafiko pojavilo pri brskalniku IE, ki ni podpiral tega formata. Hkrati pa veliko strani, ki podpira ta format, hkrati priloži zraven še rastrsko verzijo te iste slike.
Nekateri znani brskalniki, ki podpirajo SVG format[12]:
- Opera (verzija 8) podpira SVG 1.1 Tiny, medtem ko Opera (verzija 9) podpira tudi SVG 1.1. Basic in nekatere funkcionalnosti SVG 1.1. Full.
- Mozzila Firefox (Gecko layout engine brskalniki) ima nepopolno podporo za SVG 1.1 Full že od 2005
- Google Chrome, Safari (WebKit brskalniki) imata nepopolno podporo za SVG 1.1 Full od leta 2006
- IE8 in vsi starejši ne podpirajo SVG formata. IE9 podpira osnovne funkcionalnosti SVG formata, IE10 pa je povečal podporo z dodatkom SVG filtrov
Več o SVG
NAČIN KODIRANJA OZIROMA KOMPRESIJE
Ker so slike v SVG formatu osnovane na označevalnem jeziku XML so le-te tudi izjemno primerne za kompresijo. Prav zaradi te lastnosti (XML) imajo te slike veliko ponavljajočih se blokov, kar jih naredi primerne specifično za breizgubno kompresijo. Ko se nad SVG datoteko izvede kompresijski algoritem, se končnica spremeni na SVGZ, velikost dokumenta pa je med 20-50% originalne velikosti. [14]
Zaradi tega je celo smiselno dokumente (grafiko), ki jih trenutno ne urejamo sproti shranjevati v formatu SVGZ (torej stisnjene), zaradi večih razlogov:
- prihranimo na prostoru na disku
- brezizgubna kompresija
- ko dokument pošiljamo preko interneta ni potrebna ponovna kompresija
Spodaj imamo tudi primer XML kode, ki nam poda spodnjo sliko:
(Opomba: zaradi varnostnih zaščit WordPress so bili oklepaji pri značkah XML zamenjani z [] )
[?xml version="1.0" encoding="UTF-8" ?]
[svg xmlns="http://www.w3.org/2000/svg" version="1.1"]
[rect x="25" y="25" width="200" height="200" fill="lime"stroke-width="4"stroke="pink"/]
[circle cx="125" cy="125" r="75" fill="orange" /]
[polyline points="50,150 50,200 200,200 200,100" stroke="red"stroke-width="4"fill="none"/]
[line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" /]
[/svg]
Primer vektorske slike iz zgornje XML kode.
To delo ni objavljeno pod nobeno avtorsko licenco.
Več o kompresiji
Minimizacija SVG datotek[13]: https://www.w3.org/TR/SVG11/minimize.html
Kompresija [14]: https://www.moxio.com/blog/6/serving-compressed-svg-files
ORODJE RASTRSKE GRAFIKE
Za orodje s katerim bom izdelal primer grafike v formatu GIF sem si izbral Krito.
Krita je zastonji program za izdelavo rastrskih slik, ki deluje na skoraj vsakem sistemu. Na voljo sta verziji za 64 in 32 bitno arhitekturo, vendar pa je omejitev ta, da če uporabljamo Windows, mora biti najmanj Vista.
Za pohitritev delovanja Krita uporablja OpenGL pospešeno platno (OpenGL accelerated canvas). Posledično ima Krita potem boljšo odzivnost in boljše osveževanje okvirjev (framerate), slike imajo višjo kvaliteto, omogočeno je zvezno približevanje (torej brez vmesnih pavz med posameznim približkom), zrcaljenje in še več.
Vendar pa ima zaradi tega Krita dodatno zahtevo, da mora GPE (grafična procesna enota) podpirati OpenGL 3.0 za optimalno delovanje. V primeru najbolj razširjene Intelove HD grafike so to GPE Ivy Bridge in naprej.
Krita podpira naslednje formate: PSD image, PGM, PNG, GIF, JPEG, BMP, TIFF, PDF, Gimp image, in druge.
PRIMER
V Kriti sem izdelal sledečo sliko. Spodaj so opisani posamezni koraki za izdelavo le-te.
1. Ustvaril sem nov dokument formata A6 z razmerjem 600×400 ter ločljivostjo 300 ppi (pixels per inch). Dokument ima že privzeto prisotna dva nivoja.
2. Na desni strani, kjer so predloge čopičev ustvarim novo oznako ‘Projekt’ kamor shranim čopiče, ki jih bom uporabljal za izdelavo svoje grafike
- Wet_bristles_rough
- Shapes_fill
- Eraser_circle
- Ink-Pen4_Rough
- Ink-8_sumi-e
- Texture_pointillism
3. Dodam še 3 novi plasti, ki jih bom uporabljal kasneje.
4. Z orodjem texture_pointillism na Plasti 4 ustvarim reko (modra barva)
5. Z orodjem wet_bristles_rough ustvarim z belo in sivo barvo na reki brzice
6. Premaknem se na plast 5 ter z orodjem wet_bristles_rough ter ink-8_sumi-e ter zelenimi barvami ustvarim travo okoli reke.
7. Na plasti 1 z orodjem shapes_fill ter nežno zeleno barvo pobarvam vso ozadje, da zapolnem pomankljivosti
8. Na plasti 2 z orodjem Ink_4pen Rough ustvarim ob reki še leseno(rjavo) klopico. Z orodjem Ink-8_sumi-e dodam s črno barvo ojačam robove klopice, da je lepša.
9. Na plasti 6 z orodjem texture_pointillism ustvarim obrečno kamenje z različnimi sivinami
10. Na plasti 5 z orodjem texture_pointillism in roza barvo dodam nekaj ‘pack’ s katerimi nakažem rože (glej sliko v koraku 7)
11. Dodam plast 7, ter v Tag ‘Projekt’ dodam še orodje Texture_impressionism, ter pod klopico dodam suho rjavo listje
12. Na plasti 6 na klopici z orodjem texture_pointillism izpolnem še naslonjalo klopice
(Zaporedje plasti: 4 2 7 6 5 1)
Navodila so na voljo tudi v pdf obliki, dostopna na spodnji povezavi.
ORODJE VEKTORSKE GRAFIKE
Za izdelavo vektorske grafike sem si izbral prostodostopen program, ki je dobra alternativa Adobe Illustratorju, namreč Inkscape.
Inkscape deluje na vseh operacijskih sistemih od Windowsa, do Ubuntu in MacOS. Kljub temu pa uporabniki pogosto priporočajo, da se za poganjanje uporablja GNU/Linux okolje, ker je tudi sam program Inkscape razvit v tem okolju, zaradi česar se lahko pri uporabi na Windowsu pojavijo hrošči. Še vedno pa sta za Windows na voljo tako 32 kot tudi 64 bitna verzija programa.
Sama orignalna stran programa Inkscape nima objavljenih potrebnih strojnih oziroma sistemskih specifikacij za Inkscape, vendar pa so uporabniki potrdili, da so starejše verzije delovale na računalnikih z 1 GHz procesorji in 256 MB pomnilnika. Seveda pa, tako kot vsak drug, deluje boljše na močenejšem računalniku.
Inkscape se uporablja za vektorsko grafiko in delo z dokumenti v formatu SVG (scalable vector graphic). Kljub temu pa program podpira tudi dokumente v formatu EPS, PDF in PostScript. Pomembno pa je omeniti, da Inkscape ni mogoče uporabljati za oblikovanje slik (kot na primer Gimp ali Krito). Kljub temu pa ima kar nekaj dobrih lastnosti in sicer:
- prijazen uporabniški vmesnik
- prilagodljiva krivulja učenja (glede na zahteve uporabnika)
- enostavno risanje v perspektivi (s pomočjo 3D kock)
- risanje kompleksnih oblik z Bezierjevimi krivuljami
- kombiniranje poti in kombiniranje oblik preko poti
PRIMER
V Inkscape sem izdelal razmeroma preprosto vektorsko grafiko, postopek izdelave pa je opisan spodaj.
- V Inkscape ustvarim nov dokument iz predloge
- Izberem orodje za izris krogov, ter narišem krog, ter manjšega na njem.
- Oba kroga skupaj izberem, ter v meniju ‘Pot’ izberem ‘Razlika’. Rezultat je kolobar.
- Kolobar kopiram, ter mu spremenim barvo. Nov kolobar prenesem na prejšnjega, ter vključim možnost za oblikovanje poti.
- Drugi kolobar na tej točki stisnem približno do sredine prvega, ter mu dodam še nova vozlišča za urejanje poti.
- Z oblikovanjem poti na spodnji strani drugega kolobarja ustvarim efekt glazure na krofu.
- S orodji za kroge narišem še en kolobar (na isti način kot prej), svetlejše barve, ki bo služil kot dodaten efekt na krofu
- Novi kolobar prenesem na krof, ter glazuro (rdečo) divgnem za eno plast.
- Z orodjem za elipse narišem tri elipse, ki se med seboj prekrivajo, ter nato naredim unijo vseh treh objektov
- Ustvarjen objekt premaknem nad prej izdelan krof, oba pretvorim v pot (Predmet v pot), ter naredim razliko med objektoma (rdeč del in elipse)
- Objekt iz elips kopiram in ga malce zamaknem na osnovnem krofu. Nato prav tako kot prej naredim razliko med tem objektom in (rjavim) delom krofa
- Zgornjemu delu (rdeč) z opcijo ‘Polnilo in poteza’ dodam še svetlejši obrobo za olepšanje.
- Zatem z orodjem za izdelavo pravokotnikov, narišem pravokotnik ter ga priredim, da je bolj ovalen.
- Dan ovalni objekt premikam po rdeči plasti krofa, ter pristikam preslednico, da puščam za seboj sled. Poleg tega vsake toliko objekt malce rotiram in spremenim barvo.
Na voljo je tudi PDF oblika navodil. Pridobite jo na spodnji povezavi.