Rasterska grafika - Praktikum

Predgovor Adobe Photoshop jedan je od nezaobilaznih softverskih alata grafičkih i veb dizajnera, umetnika, fotografa, tehničara pripreme štampe i kreativnih profesio- nalaca. Najzastupljeniji je program za obradu digitalnih slika, retuširanje, kreira- nje kompozicija, foto-manipulacija, mokapa i tome sl. Iako se primarno koristi za obradu rasterskih slika, program pruža mogućnosti kreiranja i izmene i vektorskih elemenata. Ovaj praktikum pojašnjava osnove rada u programu Adobe Photoshop, kroz pri- mere koji su fokusirani na veb publikovanje (izrada banera, mokapa, GIF animacija, ikonica i tome sl.). Prevashodno je namenjen studentima druge godine Grafičkog inženjerstva i dizajna, kao prateći materijal vežbi iz predmeta Rasterska grafika, a sam materijal može biti veoma koristan i inženjerima i tehničarima pripreme štampe (budući da se sve alatke i opcije mogu iskoristiti i u pripremi slike za štam- pane medije), dizajnerima, kao i svima zainteresovanima za obradu digital­nih foto- grafija. Iako tekst odgovara programu verzije CC, većina tehnika može se uspešno pri- meniti kako u ranijim, tako i u novijim verzijama programa. Praktikum je pisan za početnike i korisnike sa srednjim nivoom znanja programa, pa razumevanje teksta ne zahteva prethodno iskustvo, niti poznavanje osnovnih alatki i opcija. Materijal je organizovan u dvanaest celina koje odgovaraju vežbama iz predmeta i koje obuhvataju: definisanje i promenu dimenzija rasterske slike, osobine slojeva i rad sa slojevima, kreiranje selekcija, geometrijske transformacije, rad sa vektor- skim oblicima, rad sa tekstom, animiranje sadržaja, zamućivanje slike, osnove rada sa bojama, rad sa četkicama, alatke i opcije za kreiranje 3D efekata. Na početku svake vežbe dat je cilj vežbe, kao i kratak osvrt na temu vežbe. Nakon toga sumirane su teorijske osnove bitne za razumevanje procesa obrade slike, detaljno su pojašnjene alatke i opcije neophodne za izradu primera, a zatim su opisane tehnike i konkretni koraci obrade slike. Primeri su navođeni po komple­ ksnosti, pri čemu se kreće od jednostavnijih ka složenijim. Na taj način omogu- ćeno je postepeno usvajanje praktičnih znanja. I

Da bi se vizuelno odvojili od ostatka teksta, određeni delovi bitni za lakše savlada- vanje, vežbanje i pamćenje materije dodatno su naglašavani. Ovi delovi su ozna- čeni sledećim simbolima: Dodatne informacije za određenu oblast, opciju, alatku ili tehniku. Proširuju znanje i omogućavaju napred­ niji rad. Primeri za samostalan rad. Izradom datih primera omogućava se provera usvojenog znanja. Taksativno nabrojani koraci izrade kompleksnih primera. Ovi koraci korisni su za brzo podsećanje u procesu vežbanja usvojenih metoda i operacija. Radi preglednosti, koraci kompleksnijih primera navedeni su u posebnim fajlo- vima, kojima se može pristupiti putem pripadajućih QR kodova. Fotografje koje su sadržane u ovom izdanju većinom su preuzete sa internet stra- nica www.pixabay.com i www.pxhere.com i pripadaju njihovim autorima. Nave- dene slike su iskorišćene isključivo u edukativne svrhe, u skladu sa pravilima i uslovima navedenih stranica. Slike koje nisu preuzete sa navedenih internet stra- nica isključivo su vlasništvo autora ovog izdanja, predstavljaju njihovo autorsko delo i kao takve, obuhvaćene su pravnom zaštitom u skladu sa Zakonom o autor- skom i srodnim pravima („Sl. glasnik RS“ br. 66/2019) i drugim propisima koji regulišu ovu materiju. Sve slike iz praktikuma, kako one korišćene za primere tako i slike za samostalni rad, dostupne su na stranici predmeta Rasterska grafika na internet adresi www. grid.uns.ac.rs. Na kraju, želele bismo da se zahvalimo svima onima koji su pomogli izradu ovog praktikuma i doprineli njegovoj konačnoj formi. Najveću zahvalnost dugujemo dr Ivani Jurič, koja je svojim idejama i predlozima u velikoj meri pomogla oblikovanje sadržaja samog izdanja i koja je “glavni krivac” za delove sadržaja radne verzije ove publikacije. Veliko hvala Ivana. Dr Ivanu Pinćjeru, hvala na strpljenju, zalaganju i na dizajnu naslovne stranice ovog praktikuma. Dr Irmi Puškarević dugujemo jedno veliko hvala za savete vezane za dizajn i oblikovanje praktikuma. Takođe, zahvaljujemo se studentima Grafičkog inženjerstva i dizajna na povratnim informacijama nakon odslušanih vežbi. Autorke II

Uvodne napomene Radno okruženje programa Photoshop identično je okruženjima svih Adobe pro- grama, kao i programa koji se koriste za obradu vekrorskih i rasterskih slika. U nastavku su navedeni nazivi delova radnog okruženja kako bi se omogućilo lakše praćenje daljeg teksta. Delovi radnog okruženja su: 1. Linija menija (meni linija) 2. Linija sa opcijama 3. Paleta sa alatkama 4. Radni prostor programa 5. Meni radnog okruženja 6. Palete sa opcijama u formi kartica (paneli) 7. Nivo zumiiranja slike 8. Statusna linija III

Linija menija (1) sadrži padajuće menije sa nizom opcija vezanih za dokument, alatke, opcije, filtere, podešavanje prikaza i radnog okruženja i tome sl. Paleta sa alatkama (3) sadrži alatke koje se u radu koriste. Alatke su grupisane u skladu sa svojom funkcijom, pri čemu je u paleti sa alatkama uvek prikazana samo jedna od alatki grupe. Klikom na ikonicu bira se navedena alatka, a ostalim alatkama iste grupe može se pristupiti klikom na datu ikonicu i dužim držanjem bilo kog tastera miša. Nakon što je alatka odabrana, njen rad može se dodatno podešavati opcijama koje se nalaze u liniji sa opcijama (2). Dodatne opcije prikazane su u formi paleta (6) koje sadrže informacije bitne za datu opciju. Palete su prikazane kao kartice koje se mogu međusobno grupisati i minimizirati. Dodatne palete mogu se učitavati aktiviranjem njihovog naziva u padajućem meniju Window (linija menija). Po predefinisanim podešavanjima po pokretanju programa prikazuje se osnovno radno okruženje gde je aktivno svega par paleta (one koje prikazuju slojeve i kanale slike, osobine elemenata i paleta koja čuva korake u obradi slike – History). Ukoliko se u radu stalno koriste određene palete korisno je to radno okruženje sni- miti. To se postiže opcijom Window/Workspace/New Workspace... U padajućem meniju Workspace nalaze se i okruženja podešena za konkretne zadatke obrade slike. U meniju radnog okruženja (5) prikazuje se izabrano podešavanje. U radu sa dokumentima zumiranje i odzumiranje vrši se korišćenjem tastera Ctrl i znakova + i -, respektivno. Zumiranje može biti izvršeno i putem palete Navigator. Stepen zumiranja prikazan je u donjem levom uglu dokumenta (7), dok su dodatne informacije o dokumentu poput veličine, profila boja, dimenzija i tome sl. prika- zane u statusnoj liniji (8). Kada je dokument zumiran po njemu se može kretati držanjem tastera Space i korišćenjem miša. Dokument učitan u program može biti prikazan u centru radnog prostora bez mogućnosti pomeranja po njemu, u centru radnog prostora sa mogućnošću pomeranja (pri čemu su i u jednom i u drugom slučaju aktivne alatke i palete) i na crnoj pozadini bez vidljivih alatki i paleta. Prelaz iz jednog u drugi način prikaza vrši se klikom na slovo F na tastaturi. Boja radne pozadine po predefinisanim podešavanjima je tamno siva, kako ne bi ometala percepciju boja slike koja se obrađuje. Boja se može promeniti u delu Edit/Preferences/Interface. Putem menija Preferences moguće je izvršiti i niz dru- gih podešavanja vezanih za rad u programu (opcije radnog okruženja podešavaju se u meniju Workspace, podešavanja vezana za alatke u delu Tools i tome sl.). IV

Sadržaj PREDGOVOR.................................................................................................... I UVODNE NAPOMENE................................................................................... III 1. DIMENZIJE RASTERSKE SLIKE .............................................................. 11 1.1. Rezolucija i veličina slike  ............................................................. 13 1.2. Određivanje i promena veličine slike............................................ 14 1.3. Određivanje dimenzije dela slike .................................................. 18 1.4. Rad sa pomoćnim linijama............................................................ 20 1.5. Povećanje van okvira i isecanje slike............................................ 22 1.5.1. Opcija Canvas Size............................................................... 22 1.5.2. Alatka Crop Tool................................................................... 23 1.5.3. Alatka Slice Tool................................................................... 26 2. SLOJEVI I RAD SA SLOJEVIMA ............................................................. 33 2.1. Slojevi i osnovne operacije nad slojevima.................................... 35 2.2. Načini mešanja slojeva.................................................................. 38 2.3. Maske slojeva................................................................................ 41 2.4. Stilovi slojeva................................................................................. 44 2.4.1. Maskiranje stila sloja........................................................... 47 2.5. Grupisanje slojeva i primena stila na grupu ................................ 48 2.6. Slojevi za podešavanje ................................................................. 49 2.7. Označavanje i pretraga slojeva..................................................... 51

3. KREIRANJE SELEKCIJA .......................................................................... 53 3.1. Selekcije.......................................................................................... 55 3.2. Osnovne opcije u radu sa selekcijama......................................... 56 3.3. Alatke za selekciju......................................................................... 58 3.3.1. Grupa alatki Marquee Tool.................................................. 58 3.3.2. Grupa alatki Lasso Tool....................................................... 61 3.3.3. Magic Wand Tool i Quick Selection Tool........................... 62 3.4. Pen Tool alatka za kreiranje selekcija........................................... 68 3.5. Selektovanje upotrebom Quick Mask režima............................... 72 3.6. Selektovanje ranga boja................................................................ 74 3.7. Modifikovanje selekcije................................................................. 75 3.7.1. Modify................................................................................... 75 3.7.2. Refine Edge........................................................................... 76 4. GEOMETRIJSKE TRANSFORMACIJE..................................................... 81 4.1. Geometrijske transformacije......................................................... 83 4.2. Transformisanje slojeva i objekata............................................... 84 4.2.1. Osnovne transformacije ..................................................... 86 4.2.2. Promena perspektive........................................................... 90 4.2.3. Nepravilna promena oblika objekta.................................... 94 4.3. Transformisanje selekcije............................................................. 96 4.4. Transformisanje vektorskih objekata i putanja............................ 97 4.5. Popunjavanje u skladu sa pozadinom ......................................... 97 4.6. Transformacija korišćenjem Puppet Warp opcije........................ 98 4.7. Filter Liquify..................................................................................101 5. RAD SA VEKTORSKIM OBLICIMA......................................................... 107 5.1. Interpretacija vektorskih oblika................................................... 109 5.2. Osnove rada sa vektorima........................................................... 110

5.3. Kreiranje osnovnih oblika............................................................ 111 5.4. Pen Tool alatka za crtanje oblika................................................ 115 5.5. Kombinovanje i poravnavanje oblika.......................................... 116 5.6. Prilagođavanje slike na određeni oblik....................................... 123 5.7. Upotreba oblika za vektorske maske sloja................................. 128 5.8. Transformisanje oblika i ponavljanje transformacija................ 129 6. RAD SA TEKSTOM................................................................................. 133 6.1. Pojam veb banera........................................................................ 135 6.2. Tehnički zahtevi u izradi veb banera........................................... 135 6.2.1. Dimenzije veb banera......................................................... 136 6.3. Rad sa tekstom............................................................................ 137 6.3.1. Grupa alatki Type Tool....................................................... 137 6.3.2. Konverzija teksta u oblik.................................................... 144 6.3.3. Postavljanje teksta na putanju.......................................... 144 6.4. Opcija Layer Comps .................................................................... 149 7. ANIMIRANJE SADRŽAJA...................................................................... 153 7.1. Kreiranje animacije u kojoj su kadrovi pojedinačni slojevi slike.................................................................................... 155 7.2. Kreiranje animacije promenom kadrova .................................... 159 7.3. Animiranje korišćenjem stilova slojeva i vremenske ose .............................................................. 166 7.3.1. Animiranje korišćenjem maske sloja ............................... 175 8. ZAMUĆIVANJE SLIKE............................................................................ 179 8.1. Princip zamućivanja slike  .......................................................... 181 8.2. Alatka Blur Tool ........................................................................... 183 8.3. Filteri za zamućivanje.................................................................. 183 8.3.1. Filteri grupe Blur................................................................. 183

8.4. Filteri grupe Blur Gallery.............................................................. 192 8.4.1. Spin i Path Blur................................................................... 192 8.4.2. Dodatne opcije za podešavanje Iris Blur i Tilt-Shift Blur filtera.......................................................... 197 8.5. Dodatne primene filtera za zamućivanje.................................... 199 9. RAD SA BOJAMA................................................................................... 203 9.1. Kanali slike i dubina bita.............................................................. 205 9.2. Indeksirane slike.......................................................................... 207 9.3. Osnovne alatke u radu sa bojama............................................... 211 9.4. Rad sa gradijentima .................................................................... 215 9.4.1. Gradijenti u formi slojeva za podešavanje....................... 216 9.5. Promena boje slike ..................................................................... 220 9.5.1. Osnovne alatke za promenu boje...................................... 220 9.5.2. Promena boje slojevima za podešavanje ........................ 222 10. RAD SA PAMETNIM OBJEKTIMA....................................................... 229 10.1. Pametni objekti.......................................................................... 231 10.2. Kreiranje pametnih objekata i pametni filteri........................... 232 10.3. Modifikovanje pametnih objekata............................................ 233 10.4. Mokapi i primena pametnih objekata pri kreiranju mokapa....................................................................... 235 10.4.1. Prilagođavanje oblika pametnog objekta..................... 236 10.4.2. Senčenje i prilagođavanje izgleda pametnih objekata......................................................... 243 11. KREIRANJE RASTERSKIH 2D IKONICA.............................................. 257 11.1. Rasterske ikonice....................................................................... 259 11.2. Rad sa četkicama...................................................................... 260 11.3. Izrada jednostavne 2D ikonice.................................................. 262

11.4. Upotreba Brush alatke za crtanje 2D ikonice........................... 268 11.5. Formiranje seta rasterskih ikonica........................................... 272 12. IKONICE SA 3D EFEKTOM................................................................... 279 12.1. Tehnike postizanja 3D efekta ................................................... 281 12.2. Jednostavne ikonice sa 3D efektom........................................ 286 12.3. Ikonice sa efektom sjaja............................................................ 289 12.4. Upotreba stila sloja Bevel & Emboss za izradu ikonica sa 3D efektom.............................................. 292 LITERATURA...............................................................................................301



Vežba 1 DIMENZIJE RASTERSKE SLIKE Cilj vežbe je upoznavanje sa strukturom rasterske slike, kroz pojašnjavanje pojmova rezolucije i broja piksela, te njihovog uticaja na kvalitet slike. U vežbi se obrađuje: određivanje i promena veličine slike sa akcentom na zadržavanju kvaliteta, proširenje i isecanje slike, kao i eksportovanje slike i delova slike za veb publikovanje



Vežba 1 DIMENZIJE RASTERSKE SLIKE 1.1. Rezolucija i veličina slike  Osnovne osobine rasterskih slika su njihova veličina i broj boja koje se mogu reprodukovati po jednom pikselu slike. Veličina rasterske slike određuje se bro- jem piksela horizontalno i vertikalno, kao i rezolucijom koja se iskazuje kao broj piksela po jediničnoj meri. Rezolucija određuje veličinu piksela, pa su kod većih rezolucija pikseli manji što dovodi do toga da se može reprodukovati veći broj detalja na slici. Posledično, slika se opaža kao oštrija. Na slici 1.1. prikazano je kako povećanje rezolucije utiče na kvalitet slike. Što je rezolucija veća, pikseli su manji pa se na slici može prikazati više detalja. Slika 1.1. Uticaj rezolucije na kvalitet slike Broj piksela po dužini i širine slike i rezolucija određuju fizičku veličinu slike. Slika od 600 x 300 px, rezolucije od 300 ppi imaće dimenzije od 5.08 x 2.54 cm. Pove- ćanjem rezolucije dobija se više detalja na slici, ali dimenzije slike su tada manje. Kvalitet slike zavisi od veličine piksela u reprodukciji. Ako se fizičke dimenzije slike ne menjaju, mala rezolucija znači velike piksele i posledično loš kvalitet. Sa 13

povećanjem rezolucije pikseli se smanjuju, pa se na slici može reprodukovati više detalja (slika 1.2). Međutim, promena dimenzije slike bez promene rezolucije neće dovesti do gubitka na kvalitetu. Na slici 1.3. prikazana je slika u tri različite veli- čine, dok je rezolucija ostala nepromenjena. Slika 1.2. Uticaj broja piksela na reprodukciju detalja u slučaju kada fizička veličina slike ostaje nepromenjena Slika 1.3. Uticaj promene fizičke veličine slike, dok rezolucija ostaje ista 1.2. Određivanje i promena veličine slike U programu Photoshop informacija o veličini slike može se pronaći u meniju Image/Image Size (prečica: Alt + Ctrl + I). U prvom delu prozora Image Size (slika 1.4) definisana je veličina slike u smislu memorije koju zauzima i broja piksela horizontalno i vertikalno (deo Dimensions). Fizičke dimenzije očitavaju se kao širina i visina slike obično u cm (delovi Width i Height). Dimenzije, kao i širina i visina mogu se izraziti i u drugim jedinicama mere izborom jedinice iz pripadajućeg padajućeg menija. Rezolucija slike očitava se kao broj piksela po inču ili centimetru (deo Resolution). 14

Slika 1.4. Izgled menija Image Size Opcijom Image Size vrši se ne samo očitavanje, već i promena veličine slike uno- som novih vrednosti, kao i izborom načina interpolacije za željenu promenu (deo: Resample). Širinu i visinu slike trebalo bi ravnomerno skalirati, jer u suprotnom dolazi do iskrivljenja slike i gubitka odnosa elemenata koji su na slici prikazani. Ravnomerno skaliranje obezbeđuje se „zaključavanjem“ odnosa strana, odnosno aktiviranjem ikonice ključa koja se nalazi pored širine i visine slike kao što je prikazano na slici 1.5. Slika 1.5. Ravnomerno skaliranje slike prilikom promene dimenzija Pri promeni veličine slike (slika 1.3) ili njene rezolucije, kvalitet slike neće se pro- meniti ukoliko se ne menja broj piksela slike. Ovo se postiže isključivanjem opcije Resample (slika 1.6). Isključivanjem ove opcije deo Dimensions postaje neaktivan, a širina i visina slike ne mogu biti iskazane u pikselima. Ukoliko se vrši promena rezolucije, nužno se menja fizička veličina slike jer se isti broj piksela raspoređuje na manjoj ili većoj dužini. Ovo znači da se dimenzije piksela menjaju, ali ne i njihov broj. 15

Slika 1.6. Sprečavanje promene broja piksela slike prilikom promene veličine Na slici 1.7. prikazana je promena rezolucije sa 72 ppi na 300 ppi. U navedenom slučaju, da bi se zadržao inicijalni broj piksela dimenzije slike u cm su značajno smanjene (onoliko puta koliko je povećana rezolucija). Slika 1.7. Povećavanje rezolucije slike uz zadržavanje broja piksela dovodi do smanjivanja slike Ukoliko se pak menjaju fizičke dimenzije slike, rezolucija se mora promeniti. Na slici 1.8. prikazano je smanjivanje slike. Pri tom je nužno došlo do povećanja rezo- lucije, jer se isti broj piksela raspoređuje na manju dimenziju. Slika 1.8. Smanjivanje fizičke veličine slike uz zadržavanje broja piksela dovodi do povećanja rezolucije U svim navedenim operacijama memorija koju slika zauzima se ne menja (pogle- dati opciju Image Size na prethodnim slikama) budući da nije promenjen broj nje- 16

nih piksela. Veličina slike u memorijskom smislu zavisi isključivo od broja piksela i broja boja koji se po pikselu mogu reprodukovati. Ako se ništa od navedenog ne menja, veličina slike u smislu memorije koju zauzima se takođe neće promeniti. U praktičnoj primeni češće se susreće situacija da je neophodno promeniti i rezoluciju i fizičku veličinu slike (zbog prikaza slike na internetu, za potrebe štampe i sl.). U tom slučaju neophodno je promeniti broj piksela slike, što se postiže preuzorkovanjem tj. aktiviranjem opcije Resample. Ukoliko se slika smanjuje na ovaj način, određeni broj piksela mora biti odbačen (engl. downsampling), a ukoliko se slika povećava određeni broj piksela mora biti dodat (engl. upsampling). Oduzimanje i dodavanje piksela vrši se kontrolisano u skladu sa određenim algoritmima koji se uglavnom baziraju na interpolaciji – preračunavanju novih piksela na osnovu postojećih. U skladu sa ciljem koji se pri promeni veličine slike želi postići može se birati više opcija preuzorkovanja prikazanih na slici 1.9. Ukoliko se bira opcija Automatic program automatski bira jednu od preostalih opcija koja najviše odgovara datom zahtevu. Ako se slika povećava moguće je birati dve opcije: zadržavanje detalja, čime se dobija oštrija slika (opcija: Preserve Details) i blago zamućivanje, čime se dobija slika mekših ivica (opcija: Bicubic Smoother). Za smanjivanje slike preporučuje se korišćenje opcije Bicubic Sharper, dok preostala tri načina interpolacije mogu biti korišćena i za smanjivanje i za povećanje slike. Slika 1.9. Algoritmi interpolacije Na sledećem primeru prikazano je povećanje slike, pri čemu su korišćeni redom algoritmi: Nearest Neighbor, Preserve Details i Bicubic Smoother. Kao što se sa slike 1.10. može videti najveći broj detalja zadržava se primenom drugom algoritma, dok se korišćenjem trećeg postižu glatkiji tonski prelazi. 17

(a) (b) (c) Slika 1.10. Povećanje slike gde je kao algoritam interpolacije korišćen (a) Nearest Neighbor (b) Preserve Details i (c) Bicubic Smoother Promena veličine slike unutar opcije Image Size može biti izvršena i potpuno auto- matski, izborom neke od predefinisanih opcija koje se nalaze u padajućem meniju Fit to (slika 1.11). Ova opcija može biti veoma korisna jer se slika automatski ska- lira na većinu dimenzija koje se koriste u štampi ili za on-line publikacije. Dime­ nzije slike se menjaju tako da se širina skalira na željenu dimenziju. Visina slike se ravnomerno skalira tako da ne dođe do promene odnosa strana. Slika 1.11. Automatsko skaliranje slike korišćenjem opcije Fit To 1.3. Određivanje dimenzije dela slike U programu Photoshop kao i u drugim grafičkim programima lenjiri (horizontalni i vertikalni) omogućavaju lakše pozicioniranje objekata na sliku, kao i određivanje dužine slike ili dela slike. Lenjiri postaju vidljivi aktiviranjem opcije View/Rulers (prečica: Ctrl + R). Tačka od koje se počinje sa merenjem može se precizirati postavljanjem koordinatnog početka lenjira (klikom i povlačenjem) u bilo koju 18

tačku slike (slika 1.12). Takođe, jedinice mere lenjira (mm, cm, px, inch...) mogu se menjati desnim klikom na lenjir i izborom željene jedinice. Slika 1.12. Podešavanje koordinatnog početka lenjira njegovim prevlačenjem na željeni deo slike Pored lenjira koji se postavljaju van okvira slike, za preciznije određivanje dela slike može se koristiti i alatka Ruler Tool. Nalazi se u grupi alatki prikazanim na slici 1.13 (prečica za grupu alatki: Shift + I). Da bi se izmerio deo slike dovoljno je postaviti lenjir na prvu i početnu tačku elementa koji se meri. Držanjem tastera Shift prilikom povlačenja linije osigurava se da linija bude prava, kao i da nagib u odnosu na x-osu bude uvek u koracima od po 45°. Slika 1.13. Alatka Ruler Tool Informacije koje se dobijaju su: pozicija prve tačke na X i Y osi, udaljenost druge tačke od prve (W, H), ugao pod kojim se druga tačka nalazi (A), kao i ukupna dužina među tačkama (L1) (slika 1.14). Sve vrednosti se iskazuju u jedinicama mere koje su definisane u podešavanju Units&Rulers (Edit/Preferences...). Ukoliko su u datom podešavanju kao jedinice mere definisani mm ili cm, dužina objekta u pikselima može se odrediti klikom na Use Measurement Scale. Skala se dodatno može podesiti biranjem opcije Image/Analysis/Set Measurement Scale. Alatka Ruler Tool može biti korišćena i kao uglomer. Prvi krak ugla definiše se povlačenjem alatke duž željene linije, dok se drugi krak unosi držanjem tastera Alt i povlačenjem u željenom pravcu. 19

Takođe, slika se može ispraviti povlačenjem lenjira preko linije kojom se određuje ugao iskrivljenja (slika 1.15a) i klikom na opciju Streighten Layer (slika 1.14). Nave- dena opcija zapravo rotira sliku za najmanji ugao koji će omogućiti da se data ivica (određena linijom) pozicionira bilo horizontalno ili vertikalno. Na slici 1.15a ugao koji linija gradi sa imaginarno povucenom horizontalom slike manji je od ugla koji gradi sa vertikalom, pa se slika rotira kao što je prikazano na slici 1.15b. U slučaju da je za referentnu liniju označena ona prikazana na slici 1.15c, ugao koji linija gradi sa vertikalom bi bio manji, pa bi se slika rotirala kao što je prikazano na slici 1.15d. Slika 1.14. Vrednosti koje se mogu očitati alatkom Ruler Tool (a) (b) (c) (d) Slika 1.15. (a) Definisanje referentne linije, (b) slika ispravljena u skladu sa referentnom linijom, (c) pozicija referentne linije bliža vertikali slike, (d) rotacija u skladu sa novom referentnom linijom 1.4. Rad sa pomoćnim linijama Za označavanje određenog položaja na slici, u cilju lakšeg pozicioniranja, vrlo često se koriste pomoćne linije (engl. Guides). Linije se mogu jednostavno povući sa lenjira, horizontalno ili vertikalno (držanje tastera Shift prilikom povlačenja osi- gurava da se linije pozicioniraju tačno na podeoke lenjira), ili se mogu ubaciti na sliku koristeći opciju View/New Guide. U drugom slučaju pozicija linije može se precizirati u jedinicama mere (px, cm...) ili se može uneti u formi procenta (slika 20

1.16), pri čemu se pozicija linije definiše u odnosu na ivice slike (nije vezano za položaj lenjira). Na slici 1.16. prikazan je unos pomoćne linije koja će biti pozicio- nirana vertikalno, deleći širinu slike na dva jednaka dela. Slika 1.16. Pozicioniranje pomoćnih linija po horizontali i vertikali slike Ukoliko je potrebno precizno definisati raspored pomoćnih linija na slici koristi se opcija View/New Guide Layout (slika 1.17) dostupna od Photoshop CC v.2015. Putem navedene opcije moguće je precizno podeliti dokument po redovima i kolo- nama, i definisati njegove margine. Slika 1.17. Definisanje rasporeda pomoćnih linija na slici Ako se određeni raspored pomoćnih linija ponavlja na više dokumenata, korisno ga je snimiti koristeći opciju Save Preset... (slika 1.18). Pri radu na sledećem doku- mentu, dovoljno je pokrenuti opciju New Guide Layout i iz menija Preset birati Load Preset... (slika 1.18) čime se prethodno definisani raspored linija učitava. Slika 1.18. Snimanje rasporeda pomoćnih linija 21

Pomoćne linije mogu se zaključati kako se ne bi pomerale tokom rada na slici (View/Lock Guides), njihova vidljivost se može isključiti (opcija View/Show/Gui- des), mogu se jednostavno pomerati alatkom Move Tool, i obrisati (View/Clear Guides, ili ako je jedna linija u pitanju samo je povući van okvira slike). Takođe, moguće je podesiti da se elementi slike postavljaju u odnosu na pomoćne linije, odnosno da se „lepe“ za njih biranjem opcije View/Snap to/Guides. 1.5. Povećanje van okvira i isecanje slike Povećanje slike van njenih okvira podrazumeva dodavanje piksela određene boje sa strane koja se želi proširiti. Isecanje slike znaci odbacivanje određenog dela piksela. Obe operacije se u programu Photoshop mogu izvršiti na više načina. U nastavku su opisani neki od njih. 1.5.1. Opcija Canvas Size Prvi način povećanja slike van okvira je korišćenje opcije Canvas Size, koja se nalazi u meniju Image (prečica: Alt + Ctrl + C) (slika 1.19). Canvas Size opisuje veličinu radne površine dokumenta. Povećanjem radne površine ovom opcijom dodaju se pikseli željene boje oko slike, dok se smanjivanjem slika iseca. Pove- ćavanje može biti relativno u odnosu na krajeve slike (biranje opcije Relative), pri čemu je neophodno definisati za koliko cm, mm, px i sl. se slika širi (predznak +) ili smanjuje (predznak -). Ako se navedena opcija isključi promena dimenzija je apsolutna. To znači da se u delu Width i Height očitavaju trenutne dimenzije slike, koje se jednostavno mogu promeniti. Pozicija slike na novoj površini određuje se u delu Anchor, dok se boja piksela koji se dodaju oko slike određuje u delu Canvas extension color. Najčešće korišćene opcije su boja prednjeg i zadnjeg plana, crna, bela i siva, dok se opcijom Other može definisati bilo koja druga boja. Na primeru na slici 1.19 pokazano je proširenje slike u desno i na gore za 2 cm (izgled slike nakon promene pokazan je na slici 1.20), korišćenjem relativnog i apsolutnog načina definisanja dimenzija, pri čemu je boja dodatih piksela siva. Za operacije proširivanja/isecanja koje zahtevaju više koraka opcija Canvas Size može se pokrenuti više puta. Ako je pozadinski sloj slike otključan, opcija izbora boje nije aktivna već se površina popunjava transparentnim pikselima. 22

(a) (b) Slika 1.19. Povećanje okvira slike definisano (a) relativno, (b) apsolutno (a) (b) Slika 1.20. Izgled slike (a) pre i (b) nakon povećavanja okvira 1.5.2. Alatka Crop Tool Pored opcije Canvas Size slika se može ne samo iseći, već i prošiti alatkom Crop Tool (prečica na tastaturi: C). Aktiviranjem ove opcije pojavljuje se ram oko slike čijim se proširivanjem slika širi, a sužavanjem skuplja. Ram se obično pojavljuje oko cele slike ili njegova veličina odgovara prethodnom podešavanju ako je ala­ tkom rađeno u prethodnim koracima obrade slike. U drugom slučaju, resetovanje prethodno definisanog rama vrši se biranjem opcije Clear u liniji alatke (slika 1.21). Kod proširivanja okvira slike dodaju se pikseli pozadinske boje (engl. Background color). Prilikom povlačenja okvira alatke dobijaju se informacije o tome za koliko mm, cm ili px je slika proširena/isečena. Umesto korišćenja rama oko cele slike moguće je jednostavno kliknuti na sliku i povlačenjem rama definisati deo slike koji će biti isečen. Kada se ram pozicionira na sliku pojavljuje se alatka Move Tool kojom je moguće pomerati deo slike unutar rama i tako definisati koji deo slike će nakon isecanja biti zadržan. Pri radu sa ovom alatkom može se podesiti da se isecanje/proširivanje vrši tako da se poštuje određeni odnos strana slike ili tako što se preciziraju dimenzije slike i rezolucija (slika 1.21). U oba slučaja moguće je definisati željene vrednosti (prve 23

dve opcije u padajućem meniju), zadržati odnos strana originalne slike (opcija: Original Ratio), kao i njenu veličinu (opcija: Front Image), ili izabrati neku od pre- definisanih vrednosti. Takođe, postoji mogućnost definisanja novih podešavanja (aktiviranjem opcije New Preset) i snimanja istih za kasnije korišćenje. Kada se isecanje vrši izborom odnosa strana rezolucija slike se ne menja, već se samo odsecaju ili dodaju pikseli tako da se zadrži dati odnos strana. Promena rezolucije slike, kao i njenih dimenzija u cm ili pikselima moguća je korišćenjem druge opcije kao što je prikazano na slici 1.21. Na ovaj način mogu se iseći delovi slike na tačnu dimenziju, a ukoliko je rezolucija slike manja ili veća od željene, nakon primene alatke automatski se vrši interpolacija kako bi se slika pripremila u skladu sa izlaznim uređajem. Slika 1.21. Predefinisane opcije alatke Crop Opcija Delete Cropped Pixels (slika 1.22) briše piksele slike nakon isecanja i oni se naknadno ne mogu rekonstruisati. Ako se ova opcija ne aktivira, slika će biti isečena ali će svi pikseli van okvira za isecanje biti sačuvani tokom rada sa slikom (za slučaj da se u kasnijim koracima slika želi proširiti). Nakon rada sa alatkom moguće je vratiti sliku na početno stanje, poništiti ili potvrditi promenu (poslednje tri opcije na slici 1.22, redom). Slika 1.22. Linija sa opcijama alatke Crop Dodatne opcije alatke nalaze se u delu prikazanom na slici 1.23. Može se pode- šavati prikaz isečenog dela slike, automatski centrirati prikaz u odnosu na radnu površinu, i birati boja kojom će se prekriti deo slike koja se iseca (Enable Crop Shield opcija). 24

Kada je u pitanju pozicioniranje elemenata slike nakon isecanja, korisno je koristiti Crop overlay opcije koje se aktiviraju izborom ikonice prikazane na slici 1.24. Slika 1.23. Prilagođavanje prikaza u radu sa Crop alatkom Naime, pri isecanju slike alatkom Crop preko rama isecanja primećuje se šema koja po predefinisanom podešavanju deli aktivni deo na 9 delova (3 x 3). Poenta šeme je da omogući pomoć pri kadriranju, postavljanjem dela slike od značaja blizu presecanja linija šeme kao što je prikazano na slici 1.25. Da bi se omogućila veća kreativnost, moguće je birati i drugačije načine podele prostora koji se iseca (dijagonalne pozicije linija, podela slike u trouglove, po principu zlatnog preseka i tome sl.), a ukoliko je to neophodno ova opcija se može i isključiti biranjem Never Show Overlay (slika 1.24). Slika 1.24. Crop overlay opcije Slika 1.25. Različito kadriranje slike promenom pozicije šeme alatke Crop Alatkom Crop Tool moguće je istovremeno ispraviti i iseći sliku. Nakon aktiviranja alatke dovoljno je izabrati opciju Straighten (slika 1.26) i povući liniju na slici koja 25

određuje ugao za koji sliku treba ispraviti. Na slici 1.27. pokazano je isecanje slike nakon što je ispravljena prateći liniju mora. Slika 1.26. Opcija za ispravljanje slike nakon isecanja (a) (b) Slika 1.27. (a) Ispravljanje slike i (b) njeno isecanje alatkom Crop Tool Veoma precizno isecanje slike može se postići i selektovanjem željenog dela alatkom Rectangular Marquee Tool i biranjem opcije Image/Crop. 1.5.3. Alatka Slice Tool Opcija Slice Tool nalazi se u istoj grupi alatki kao i Crop Tool i koristi se uglav- nom za podelu slike na delove. Ova opcija sliku deli na više segmenata od kojih svaki može biti sačuvan kao posebna slika, a posebnu primenu nalazi kod podele delova slika za veb sajtove. Osnovni segment definiše korisnik, dok se ostatak slike deli automatski. Segmenti koji su definisani od strane korisnika definišu se kao korisnički (engl. User Slices) i u potpunosti su promenljivi. Delovi koji su kreirani automatski uglavnom nisu promenljivi jer njihova pozicija i dimenzije zavise od ostalih isečaka. Da bi se nave- deni delovi mogli menjati potrebno je birati opciju Promote to User Slice koja se dobija desnim klikom na izabrani deo. Alatka ima tri režima rada (slika 1.28), odnosno tri načina definisanja dimenzije osnovnog dela slike. Normal (slobodoručno podešavanje dela koji se iseca), Fixed Aspect Ratio (definisanje odnosa strana) i Fixed Size (definisanje veličine željenog dela u cm ili pikselima). U svakom slučaju rezolucija slike ostaje nepromenjena. 26

Slika 1.28. Režimi rada alatke Slice Tool Takođe, slika može biti isečena korišćenjem pomoćnih linija. Da bi se ovo omogućilo dovoljno je postaviti linije na sliku i izabrati opciju Slices From Guides (slika 1.29). Slika 1.29. Isecanje slike koristeći pomoćne linije Na slici 1.30 pokazano je isecanje slike tako da osnovni deo ima dimenzije 500 x 300 px (nakon podešavanja dimenzija dovoljno je kliknuti u gornji levi ugao isečka da bi se isti definisao). Kao što se sa slike može videti pored osnovnog dela, slika je podeljena na još 4 dodatna dela. Slika 1.30. Podela slike na delove i opcije izmene delova 27

Svaki od delova može biti modifikovan (pomeranjem njegovih ivica), izbrisan (desni klik na deo, opcija: Delete Slice) ili podeljen na nove delove (desni klik na deo, opcija: Divide Slice...). Kod podele segmenta slike na delove moguće je birati da se deo podeli ravno- merno na određeni broj segmenata horizontalno i vertikalno, kao i da se podeli na određeni broj piksela (slika 1.31a). Svaki od pojedinačnih isečaka na veb stranici može biti interpretiran kao statična slika, ali i kao link. Da bi se to omogućilo isečak je najpre neophodno selektovati opcijom Slice Select Tool (nalazi se u istoj grupi alatki kao Slice Tool; slika 1.31b), i desnim tasterom miša pristupiti opciji Edit Slice Options... (a) (b) Slika 1.31. (a) Opcije podele segmenata slike, (b) Alatka za selektovanje isečaka U ovom delu moguće je promeniti naziv i dimenzije isečka koji je selektovan (deo: Dimensions; slika 1.32). Da bi se deo slike interpretirao kao link potrebno je uneti željenu adresu u deo URL (slika 1.32). Nakon eksportovanja sličica se na veb sajtu ponaša kao link koji vodi na zadatu adresu. Dodatne opcije koje se mogu podesiti su: • Target - određuje na koji način će se nova stranica otvarati. Ukoliko je cilj da se stranica otvara u istom prozoru potrebno je upisati self, dok je za otvaranje u novom prozoru neophodno ukucati reč blank. • Message Text – informacije koje će se ispisivati kada korisnik prevlači kursor miša preko slike. • Alt Tag – informacija koja se ispisuje ako slika nije do kraja učitana i kao dodatna informacija kada korisnik pređe kursorom miša preko linka (ovaj segment može i ne mora biti definisan). Pored spomenutih opcija Slice Background Type definiše pozadinsku boju dela slike. Ukoliko je slika transparentna pozadinska boja će biti vidljiva do izvesne mere. Ako je cilj da pozadina sajta bude vidljiva potrebno je birati opciju None. 28

Slika 1.32. Definisanje tipa isečka i njegove funkcije na veb sajtu Delovi slike snimaju se korišćenjem opcije Save for web (slika 1.33) koja se nalazi u meniju File (prečica: Alt + Shift + Ctrl + S) tj. od verzije CC 2015, File/Export. Slika 1.33. Prozor opcije Save for web Ova opcija omogućava da se optimizuje prikaz slike za njeno korišćenje na inter- net stranicama. To podrazumeva definisanje veličine slike (uz izbor algoritama interpolacije ukoliko se menja broj piksela slike; deo: Image Size), izbor odgovara- jućeg formata fajla i stepena kompresije (deo: Preset), kao i definisanje prostora boja u kom će slika biti prikazana (po predefinisanom podešavanju sve slike se konvertuju u sRGB prostor boja koji predstavlja standard za prikaz na internet stra- nicama). Kad su formati fajlova u pitanju moguće je birati GIF, JPEG, PNG-8, PNG- 29

24 i WBMP formate sa odgovarajućim stepenom kompresije ili brojem boja koje se mogu reprodukovati (slika 1.33). U pojedinim slučajevima bitno je proceniti koliko se slika menja nakon kompresije, kako bi se izabrala odgovarajuća podešavanja. Takođe, kod PNG formata fajla korisno je definisati prikaz slike pre i nakon izbora broja boja da bi se vizuelno pro- cenile degradacije. Ovakav prikaz omogućava se izborom opcije 2-Up (slika 1.34). Originalna slika prikazuje se u gornjem prozoru, dok se slika pripremljena za veb prikazuje u donjem (slika 1.34). Zbog lakše procene korisnik može pomerati sliku i uveličati prikaz regija od interesa. Opcija 4-Up omogućava prikaz 4 slike, pa se na taj način može proceniti više različitih prikaza. Slika 1.34. Uporedni prikaz dve slike sa različitim podešavanjima pri snimanju Ukoliko je sliku neophodno snimiti tako da zauzima tačno određenu veličinu u smislu memorije moguće je izabrati opciju Optimize to File Size... koja se nalazi u gornjem desnom uglu prozora Save for Web, kao što je prikazano na slici 1.35a. Moguće je podesiti veličinu isečka koji je selektovan, dok se ostali delovi slike podešavaju u skladu sa njim (koristi se isti način kompresije). U ovom delu može se izabrati i da li da se snimanje izvrši na isti način kao što je korisnik definisao pre pokretanja opcije, ili automatskim izborom optimalne opcije (slika 1.35b). 30

(a) (b) Slika 1.35. (a) Snimanje slike tako da odgovara određenoj veličini fajla, (b) izbor veličine fajla i tipa kompresije Nakon izbora željenog formata fajla i stepena kompresije, slika se snima klikom na dugme Save. Kod snimanja slika izdeljenih alatkom Slice pri snimanju se otvara dodatni prozor kojim se definiše da li će se snimati samo slike i/li i odgovarajući HTML fajl (opcija: Format) (slika 1.36a), kao i da li će se snimati samo selektovani isečak ili svi delovi slike (opcija: Slices) (slika 1.36b). (a) (b) Slika 1.36. (a) Definisanje opcija snimanja i (b) izbor isečaka koji će biti snimljeni Primeri za samostalan rad nalaze se uz ostale fotografije praktikuma u folderu Vežba 1/Primeri za vežbu. 31