Primjena digitalne fotografije u reprodukcijskim medijima

Katedra za grafički dizajn i slikovne informacije

Grafički fakultet Sveučilišta u Zagrebu

RAZLIKE I SPECIFIČNOSTI U PROCESIRANJU

FOTOGRAFIJA ZA WEB I PROCESIRANJU ZA TISAK

SEMINARSKI RAD

Nositelji kolegija i voditelj rada: Dr. sc. Maja Strgar Kurečić, doc.

Ime i prezime studenata: Marin Sabol, Mirela Stern, Toni Vrkić

mjesec i godina: prosinac 2018.g

4

Sadržaj Uvod ........................................................................................................................................... 5

Digitalna slika ......................................................................................................................... 5

Uzorkovanje i kvantizacija .......................................................................................................... 6

Prostorna i tonska rezolucija ..................................................................................................... 7

RGB sustav boja ......................................................................................................................... 8

Vrste formata slika za web ......................................................................................................... 9

Programi za obradu fotografija za web ................................................................................... 10

Photoshop CC ....................................................................................................................... 10

Photoshop Elements ............................................................................................................ 11

GIMP..................................................................................................................................... 11

Phostoscape ......................................................................................................................... 12

PaintShop Pro ....................................................................................................................... 12

Optimizacija slika za web – progressive JPEG .......................................................................... 14

Razlika između baseline i progressive JPEG formata ........................................................... 14

Kako progressive JPEG pomaže u optimizaciji web stranice? ............................................. 15

Priprema slike za tisak .............................................................................................................. 16

Kolorni prostor ......................................................................................................................... 17

GAMUT ................................................................................................................................. 17

Raster ....................................................................................................................................... 17

Formati zapisa .......................................................................................................................... 18

Sličnosti procesiranja slika za tisak .......................................................................................... 18

Zaključak................................................................................................................................... 19

Popis slika ................................................................................................................................. 20

Literatura.................................................................................................................................. 21

5

Uvod

Da bi potpuno razumjeli način rada i optimizaciju slika za web, moramo krenuti od samih

osnova fotografije, sustava boja, načina obrade i spremanja podataka i kasnije prikazivanje

na nekom uređaju (monitor, tablet, mobilni uređaj itd.). Za bolje objašnjenje nastanka nove

fotografije, koristit ćemo se dijelom gradiva iz kolegija RSI, koji nam najbolje opisuje samo

pretvaranje vizualne informacije u digitalnu sliku i važnost odabira pravilne rezolucije za

njezino prikazivanje bez gubitka kvalitete.

Digitalna slika

Pravilo nam govori da je digitalna slika dvodimenzionalni skup diskretnih i kvanitificiranih

uzoraka "prikupljenih" nekim senzorom ili uređajem. Pritom najčešće mislimo na vizualne

informacije prikupljene (snimljene) nekim fotoaparatom, odnosno prikupljamo informaciju o

elekromagnetskom zračenju vidljivog dijela spektra (380 nm do 750 nm). Da bi nam uspjelo

snimiti neku informaciju, potreban nam je senzor koji te informacije pretvara u analogni

električni signal, koji se dalje obrađuje i pretvara u digitalni signal. Senzori sami po sebi ne

digitaliziraju sliku nego pretvaraju analognu svjetlosnu informaciju u analogni električni

signal. Konačna digitalizacija provodi se u A/D (Analogno Digitalnom) pretvorniku.

U ovom procesu pretvorbe iz analognog u digitalni signal odvijaju se dva vrlo važna

postupka: uzorkovanje i kvantizacija signala.

6

Uzorkovanje i kvantizacija

Uzorkovanje je proces kojim se kontinuirana prostorna informacija pretvara u niz zasebnih

prostornih informacija. Drugim riječima, prostorna informacija se odvaja u diskretne uzorke.

Slika 1. Primjer uzrokovanja

Kvantizacija je proces pretvaranja tih kontinuiranih vrijednosti intenziteta signala (npr.

tonova svjetline) u niz diskretnih, kvantificiranih vrijednosti kako bi ih računalo moglo

pohraniti. Što je broj vrijednosti veći kvantificirana informacija točnije aproksimira originalnu

sliku. Kvantizacija je proces koji se odvija u A/D pretvorniku u kojem se već uzorkovanom

signalu dodjeljuje odreden broj bita . Takav signal s n bita može poprimiti 2 na "n" različitih

vrijednosti.

Na slici je prikazan primjer kvantizacije s 2 i 4 bita koji mogu postići 22 = 4 i 24 = 16 različitih

tonova. Broj bita pri kvantizaciji informacije ovisi o uredaju za digitalizaciju no najčešće se

koristi od 12 do 14 bita što iznosi od 4096 do 8192 kvantizacijska nivoa.

Slika 2. Primjer kvantizacije

7

Prostorna i tonska rezolucija

Slika 3. Prostorna I tonska rezolucija

Broj uzoraka po jedinici dužine predstavlja prostornu rezoluciju i u grafičkoj industriji se

označava s dpi (dots per inch). Na slici je prikazano kako prostorna rezolucija utječe na

percipiranu kvalitetu slike. Pri višim rezolucijama pojedini crni pikseli se ne vide i percipirana

kvaliteta je vrlo dobra, međutim za rezolucije manje od 72 dpi pojedini crni pikseli se

počinju primjećivati što narušava percipiranu kvalitetu.

Drugi glavni faktor koji utječe na percipiranu kvalitetu slike je tonska rezolucija. Tonska

rezolucija je u biti najmanja moguća razlika između dva tona. Što je taj razmak manji to je

8

tonska rezolucija veća. Kao što je već spomenuto, prosječna kamera za kvantizaciju koristi

od 12 do 14 bita, a skeneri do 16 bita. Međutim, ova tonska rezolucija je najčešće smanjena

na 8 bita uglavnom zbog ograničenja koja postoje dalje u reprodukcijskom procesu. Iznimka

su digitalne kamere koje zapisuju informaciju u RAW ili TIFF formatu slike.

RGB sustav boja

O tome smo dosta doga učili do sada, pa ćemo samo ukratko spomenuti najvažnije stvari i

kako se uklapaju u temu.

RGB (red, green, blue) ili aditivno miješanje boja se temelji na crvenoj, plavoj i zelenoj

svjetlosti koje svojim različitim preklapanjima stvaraju određeni raspon ili spektar boja. Ovaj

princip miješanja boja se koristi kod televizora, monitora, fotoaparata, skenera, odnosno

svugdje gdje se za bojenje koristi svjetlost. Svaka od triju boja u RGB sustavu se definira

vrijednostima od 0 do 255. Gdje brojka 255 predstavlja najveći intenzitet,a 0 najmanji. Kada

su vrijednosti za RGB 0/0/0, dobiva se crno, a vrijednosti 255/255/255 predstavljaju bijelo.

Slika 4. RGB sustav miješanja boja

9

Vrste formata slika za web

JPG/JPEG –je format koji je postao svojevrstan standard i sada većina digitalnih fotoaparata

slike sprema upravo u JPEG format. Pri tome se koristi Lossy kompresija što znači da se dio

slike gubi, točnije gubi se kvaliteta, no i dalje bi vam trebao biti prvi izbor za format slike.

Gubitak nije tako velik i golim okom ga je teško primijetiti.

PNG – ovaj format je nastao da bi zamijenio popularni GIF, te konkurirao JPEG formatu.

Razlika između JPEG i PNG formata je u kompresiji (JPEG lossy, PNG lossless), PNG ima puno

veću paletu boja, više mjesta uzima na računalu, te ga se preporuča koristiti kada slika ima

velike površine iste boje. Također se može dodati transparentnost pozadine.

RAW – Simbolizira nekoliko „sirovih“ formata koji su dostupni na digitalnim fotoaparatima

te se ne odnosi na konkretan format. Ti sirovi formati se razlikuju od proizvođača do

proizvođača, no sve te slike su ogromne (jedna i do 20-30 MB), iznimno visoke kvalitete i

moraju se uz pomoć dodatnog softvera konvertirati u jedan od standardnih formata za

obradu. Rijetko koja aplikacija može učitati takvu sliku i obrađivati je.

GIF – Stari format koji je prilično limitiran. Koristi svega 256 boja (za usporedbu, PNG koristi

16 milijuna boja) i preporuča ga se za korištenje samo ako slika ima malo boja ili je riječ o

kakvom dijagramu/skici koja je u pravilu crno-bijela. Tada je GIF odličan i zauzeti će

najmanje moguće mjesta na računalu.

TIFF – format koji se često koristi u novinama, časopisima i digitalnom izdavaštvu. U

vlasništvu je Adobea od 2009.-e godine. Riječ je o prilično fleksibilnom formatu koji

podržavaju gotovo sve aplikacije za obradu slika, web preglednici, OCR aplikacije… Kvaliteta

je odlična, te može koristiti obje kompresije – lossy i lossless.

Ostali rasterski formati vrijedni spomena: Exif, BMP, PPM, PGM, PBM, PAM, IMG, PCX, PSD,

PSP, PGF…

SVG – je možda najpoznatiji vektorski format. Za razliku od rasterskih formata, slike

spremljene u jednom od vektorskih formata se mogu povećavati i smanjivati koliko god

želimo, s time da će kvaliteta slike ostati ista. Svaka slika je opisana vektorima i određenim

odnosima pa se sve dobro skalira. Osim SVG-a, tu je još i CGM, CDR, GEM, HVIF, XPS, AI…

10

Programi za obradu fotografija za web

Photoshop CC

Photoshop CC definitivno slovi za najpopularniji program za uređivanje fotografija na tržištu.

S godinama je postao toliko popularan da danas kada netko spomene uređivanje fotografija

odmah svi pomisle na Photoshop. Možemo reći kako je Photoshop CC postao istoznačnica

programu za uređivanje fotografija. Ovaj popularni softverski komad dio je Adobeovog

Creative Suite paketa programa, koji je u prvom planu namijenjen grafičkim dizajnerima. U

prvi plan svakako iskače uređivanje i retuširanje fotografija (bilo jednostavno, bilo

naprednije), gdje je moguće koristiti layere, ali i mnogobrojne filtere i efekte.

Ako zavirimo detaljno u mogućnosti Photoshopa CC, onda pronalazimo sljedeće mogućnosti:

napredno podešavanje boja, kontrasta, zasićenosti, svjetline, moguće je izrezivati i mijenjati

dimenzije fotografije, izrezivati pozadinu, moguće je crtati i bojati, pa čak i raditi 3D

animacije.

Slika 5. Photoshop CC

11

Photoshop Elements

Mnogi ljubitelji Photoshopa ne znaju kako na tržištu postoji i laganija verzija ovog alata, koja

dolazi po znatno pristupačnijoj cijeni. S obzirom na to da je Photoshop Elements znatno

jeftiniji od Photoshopa CC, za očekivati je kako jeftinija verzija donosi i manje mogućnosti.

Da, tome i zbilja jest tako, no nije nešto što bi trebalo zabrinjavati prosječnog ljubitelja

fotografije. Photoshop Elements nudi također širok spektar mogućnosti i prosječan korisnik

moći će kvalitetno urediti svoje fotografije.

GIMP

GIMP je zapravo kratica od fraze GNU Image Manipulation Program, što zapravo asocira na

to kako je ovaj alat otvorenog koda, odnosno kako ga je moguće koristiti i na Linux

operativnim sustavima. Sama činjenica da se radi o open-source program jasno daje do

znanja da je on besplatan za korištenje, ali ga je također moguće nadograđivati prema

svojim željama (uz dovoljno vlastitog znanja). GIMP može bez problema obaviti: omogućuje

kreiranje i uređivanje slojeva, moguće je retuširati fotografije, mijenjati dimenzije i izrezivati

razne dijelove, omogućuje dodavanje teksta, ali i podržava 3D oblikovanje.

Slika 6. GIMP

12

Phostoscape

Među najpopularnije besplatne alate na tržištu programa za obradu fotografija smjestio se i

Phostoscape. Zanimljivo, iako se ne radi o nekom robusnom i sveobuhvatnom programu,

često ga znaju koristiti i neki ozbiljniji fotografi kada trebaju napraviti samo neku sitnu

promjenu na fotografiji. Phostoscape ulazi u sferu programa koji su pristupačni početnim

korisnicima i lako se u njemu snaći. Naime, program ima vrlo jednostavno sučelje u kojem je

u samo nekoliko klikova moguće srediti osnovne željene elemente na fotografijama.

Program donosi mnoštvo filtera i raznih efekata, koje je vrlo jednostavno dodati na

fotografije. Od ostalih mogućnosti tu su: alati za izrezivanje i mijenjanje veličine fotografije,

alati za podešavanje svjetline, kontrasta i oštrine, ali i opcija batch editor gdje je u samo

jednom potezu moguće promijeniti dimenziju na više fotografija (ili ih prebaciti u neki drugi

format). Od zanimljivih značajki koje bi se mogle svidjeti korisnicima početnicima vrijedi

istaknuti mogućnost dodavanja poruka s tekstom, spajanje više fotografija u jednu, ali i

mogućnost izrade kolaža iz fotografija. Program je besplatan i dostupan korisnicima i

svakako je kvalitetno rješenje ukoliko ste u potrazi za nečim jednostavnim, a opet

funkcionalnim.

PaintShop Pro

Mnogi ovaj program smatraju kvalitetnom konkurencijom Photoshopu, a jedna od njegovih

prednosti je što je cjenovno puno pristupačniji krajnjem korisniku. No, mala cijene ne znači

da ne obiluje mogućnostima, što će iskusiti svi koji će probati koristiti ovaj program.

PaintShop Pro je program poznatog proizvođača Corel koji se već godinama trudi zadovoljiti

potrebe korisnika koji žele stvarati predivne fotografije. Svaka nova verzija programa sa

sobom donosi mnoštvo mogućnosti i poboljšanja te je zbog toga sasvim razumljivo da mnogi

ovaj program guraju uz bok Photoshopu. Što se tiče korištenja programa radi se o vrlo

pristupačnom i kvalitetnom sučelju, gdje će se i početnici vrlo brzo snaći. Od standardnih

mogućnosti ovaj program sadrži uglavnom sve što i konkurenti pa je tako putem njega

moguće: izrezivati dijelove fotografija, retuširati i smanjivati šum na fotografijama, dodavati

tekst, bojati i uređivati zahvaljujući kistovima, itd. Za razliku od konkurenata, PaintShop Pro

je ponudio korisnicima i nekoliko naprednih mogućnosti. Primjerice, moguće je direktno

putem programa podijeliti neku fotografiju, ali i putem alata Map Tool dodati lokaciju

fotografije. Unutar programa nalazi se i opcija Find People koja omogućuje prepoznavanje

lica te na taj način omogućuje korisniku targetiranje osoba koje su na fotografijama.

13

Slika 7. PaintShop Pro

14

Optimizacija slika za web – progressive JPEG

JPEG je vrlo popularna i često korištena metoda za lossy kompresiju (sažimanje podataka s

gubicima) digitalnih slika. Prednost JPEG-a je mogućnost podešavanja razine kompresije

ovisno o tome želite li zadržati višu kvalitetu slike ili vam je ipak bitnija veličina datoteke te

prostor koji će zauzeti na disku.

Upravo zbog mogućnosti podešavanja kompresije prema potrebama korisnika, JPEG je

najčešće korišten format za spremanje slika na webu – više od 70% svih web stranica na

Internetu koristi JPEG. Kvaliteta i veličina slika koje koristite na vašoj web stranici znatno

utječu na dojam koji će vaša stranica ostaviti posjetitelju. Loše komprimirane, velike slika

mogu jako usporiti rad web stranice, te samim time posjetiteljima ostaviti loš dojam.

Razlika između baseline i progressive JPEG formata

JPEG slike se učitavaju od gore prema dolje, format koji je poznat pod nazivom baseline

JPEG. Progressive JPEG, za razliku od baseline varijante, omogućuje prikaz slike u cijelosti,

tako da učitava podatke postepeno. To u praksi znači da će se slika korisniku prikazati

odmah, ali će biti mutna i pikselizirana u početku, pa se onda postepeno učitati u

potpunosti.

Prvi primjer je prikaz učitavanja baseline JPEG-a – učitava se dio po dio, dok se cijela slika na

kraju ne prikaže.

Slika 8. Baseline JPEG

Drugi primjer je progressive JPEG – slika je odmah vidljiva, iako mutno, te se izoštrava

učitavanjem ostatka podataka sve dok se slika ne prikaže u cijelosti.

15

Slika 9. Progressive JPEG

Kako progressive JPEG pomaže u optimizaciji web stranice?

Kod sporijeg učitavanja baseline slika, prostor gdje se slika nalazi je do završetka učitavanja

prazan, što korisniku automatski daje dojam da je stranica spora. Progressive JPEG pruža

bolje vizualno iskustvo za korisnike, točnije, iako brzina učitavanja možda i je ista, korisnik

ima dojam da se stranica prije učitala.

Progressive JPEG slike su također nešto manje, što znači da će se koristiti manje bandwidtha

i manje prostora na serveru, što je u konačnici vrlo korisno za shared hosting korisnike.

Iako velika većina modernih preglednika podržava progressive JPEG, treba imati na umu

da neki preglednici ne podržavaju progressive JPEG (primjerice IE8). Ukoliko ga preglednik

ne podržava, slike će se prikazati korisnicima, no tek kada se cijela datoteka učita.

Idealno bi bilo da sve veće slike na stranici zamijenite njihovom progressive varijantom.

Većina alata za obradu slika, poput Photoshopa ili Gimpa, omogućuje lako prebacivanje

slike u progressive model. Photoshop je nedavno zakomplicirao stvari tako što je od 2015 na

dalje uklonio opciju spremanja slika kao progressive JPEG, no to je i dalje moguće pomoću

“Save for web” opcije. Za spremiti sliku u novijim verzijama Photoshopa potrebno je kliknuti

na File -> Export -> Save for Web (legacy), te odabrati “Progressive” opciju.

16

Priprema slike za tisak

U današnje doba svi imamo nekakav uređaj uz sebe koji može „okinuti“ fotografiju,

ali kada dođe do otisaka tih fotografija, često se susrećemo s problemima.

Jedan od tih problema, rekli bi i najveći, je razlučivost fotografije. Razlučivost je

važna za veličinu ispisa. Broj piksela određuje kvalitetu i veličinu ispisa. Ako je razlučivost

viša možemo izraditi fotografije većeg formata bez da kvadratni oblik piksela postane

zamjetljiv. Fotoaparat koji snima fotografije razlučivosti 3,2 MP kreira digitalnu fotografiju

koja je dovoljne kvalitete za ispis veličine 13 x 18 cm pri razlučivosti od 300PPI. Za ispis/tisak

odlične kvalitete fotografija u tiskovinama A4 formata (210 x 298 mm) dovoljna

je 6MP razlučivost senzora, a za fotografije formata A3 (298 x 420 mm) iste kvalitete, biti će

potrebno 12MP.

Slika 10. Primjer različitih razlučivosti

17

Fotografija je bitmapa. To znači da je svaki najsitniji element slike – piksel strogo definirani

kvadratić. Povećavanjem bitmape povećavaju se i pikseli i postaju više nego primjetni. Takve

manipulacije dopuštene su samo u dizajnerskim zahvatima. Kod fotografije se teži da pikseli

nisu zamijetni.

(Slika preuzeta sa https://fotografija.hr/)

Kada je rezolucija slike dobra onda dolazi do drugih problema:

Kolorni prostor

Definiran je ICC profilom unutar kojeg se radi obrada i manipulacija fotografija. U praksi se

koriste dva kolorna prostora – sRGB ili Adobe RGB.

GAMUT

Gamut ili raspon boja koje možete smjestiti unutar kolornog profila je jedan od parametara

koji je ključan za odabir kolornog profila. Klasični tisak baziran na euroskali nije u mogućnosti

otisnuti puni sRGB prostor, odnosno ima manji gamut. Veći gamut profila znači i veći raspon

boja koje možemo spremiti unutar datoteke.

Raster

Tiskarski postupak ne omogućava miješanje boja na podlozi zbog toga rasterskom „varkom“

proizvodimo iluziju mnoštva boja i tonova. Kada bi u višebojnim reprodukcijama sve

rasterske slike imale jednake linijature i kut zakretanja, došlo bi do masovnog preklapanja

rasterskih elemenata (Moire).

Postoje dvije vrste rastera: Frekventno modulirani raster i Amplitudno modulirani raster

Amplitudno modulirani raster (AM) je raster pomoću kojeg se različiti tonovi u tisku

reproduciraju različitom veličinom rasterskih elemenata. Što su veći rasterski elementi to su

tamniji ton, a manji rasterski elementi znače svjetliji ton.

18

Frekventno modulirani raster (FM) se razvio zbog nedostatka amplitudno moduliranog

rastera. Nedostatak AM rastera je nepravilno reproduciranje izuzetno svijetlih i tamnih

tonova. Područja na slici koja moraju biti tamna su gusto ispunjena rasterskim elementima,

a ona koja moraju biti svijetla su rijetko ispunjena rasterskim elementima. Mijenja se samo

gustoća odnosno frekvencija rasterskih elemenata (zbog toga se i naziva frekventno

modulirani raste), dok im je veličina ista.

Formati zapisa

Neki od bitnijih formata zapisa u Photoshopu su:

EPS (Eucapsulated PostScript) - koristi se u vektorskoj grafici

TIFF (Tagged Image File Forrmat) - jedan od najkvalitetnijih i najrasprostranjenijih formata

zapisa za spremanje slika procesiranih u Photoshopu. Taj format nudi i kompresiju.

JPG (Joint Photographic Experts Group) - slika spremljena u ovom formatu zauzima vrlo

malo prostora na disku. Taj format može vrlo bitno utjecati na kvalitetu spremljene slike.

BMP - ovo je malo zastario format, ali gotovo i nema programa koji ne podržava taj format.

PSD ili PDF - ovaj nam format omogućava spremanje slike u slojevima i s njihovim maskama

ako postoje. To je vrlo velika prednost pred formatom .eps. i najčešće se koristi kod tiska.

Sličnosti procesiranja slika za tisak

Slike najčešće obrađujemo u programu Adobe Photoshop. Prilikom procesiranja slika za tisak

trebamo paziti na nanos boje. Ako taj nanos prelazi određeni postotak, iako se na ekranu

vide obrisi u tamnim dijelovima slike, u tiskanom izdanju se ti isti obrisi neće vidjeti.

Najčešće do toga problema dolazi kod upojnih papira. Kod procesiranja slike za tisak je bitno

koristiti poseban profil koji je prethodno dogovoren s tiskarom.

19

Zaključak

Obradu digitalne fotografije možete se raditi na više načina, a svi se oni razlikuju prema

kvaliteti koja se želi postići. Programi za obradu dostupni su u raznim inačicama (besplatni,

amaterski, profesionalni…), i svi za neke jednostavne promjene na fotografiji ili za osnovno

pripremu slike za web koriste manje-više slične alate. Slike koje se pripremaju za web

moraju biti u RGB sustavu, te se za web spremaju najčešće u JPG/JPEG formatu koji koristi

lossy komprsiju. Spremaju se u rezoluciji 72 dpi kako bi što lakše i bez poteškoća učitavali

web stranice. Prostorna i tonska rezolucija dva su glavna faktora kod obrade digitalne slike,

te oni u največem dijelu odlučuju o samoj kvaliteti slike.

20

Popis slika

Slika 1. Primjer uzrokovanja

Slika 2. Primjer kvantizacije

Slika 3. Prostorna i tonska rezolucija

Slika 4. RGB sustav miješanja boje

Slika 5. Photoshop CC

Slika 6. GIMP

Slika 7. PaintShop Pro

Slika 8. Baseline JPEG

Slika 9. Progressive JPEG

Slika 10. Primjer različitih razlučivosti

21

Literatura

1. Ante Poljičak,Reprodukcija slikovnih elemenata,2018

2. ***www.supertisak.hr/boje/cmyk-rgb-spot-boje-o-cemu-se-tu-

radi,9.12.2018.;https://pcchip.hr/softvet/obrada-fotografija-za-

pocetnike/,9.12.2018.;

3. ***;www.supertisak.hr/boje/cmyk-rgb-spot-boje-o-cemu-se-tu-

radi,9.12.2018.;https://pcchip.hr/softvet/obrada-fotografija-za-

pocetnike/,9.12.2018.;

4. ***https://fotografija.hr/razlucivost-fotografija-dpi-i-ppi/

5. ***http://www.kerschoffset.hr/images/download/Kerschoffset_upute_za_izradu_P

DF-a.pdf

6. ***https://www.bug.hr/forum/topic/obrada-fotografija/popravljanje-fotografija--

priprema-tisak/63787.aspx