POSLOVNE, GRAFI ČKE I MULTIMEDIJALNE APLIKACIJE SA VEB …v2.link-onlineservice.com/media/files/PAWD.pdf · 2019. 7. 12. · Računarska grafika ... • Turbo • Vector • Ubuntu

VISOKA ŠKOLA STRUKOVNIH STUDIJA ZA INFORMACIONE TEHNOLOGIJE

Suzana Marković

POSLOVNE, GRAFIČKE I MULTIMEDIJALNE APLIKACIJE SA

VEB DIZAJNOM

Beograd, 2011.

2

Sadržaj

Osnove softvera .................................................................................................. 4

Sistemski softver. Operativni sistem ................................................................... 4

Sistemski softver: Korisnički programi ................................................................ 5

Razvojni sistem ................................................................................................ 7

Aplikativni softver ............................................................................................ 8

Nabavka softvera ............................................................................................. 9

Multimedija ................................................................................................... 11

Poslovne komunikacije ....................................................................................... 13

Pisanje e-mail-ova. Poslovno pismo .................................................................. 13

Pismo i tipografija .............................................................................................. 16

Pismo ........................................................................................................... 16

Od kaligrafije do komjuterske tehnike ............................................................... 17

Zapis karaktera u računaru. Šta je to tekst? ...................................................... 18

Zvuk ................................................................................................................ 22

Zvučni signali................................................................................................. 22

Računarska grafika ............................................................................................ 24

Uvod ............................................................................................................. 24

Vektorska grafika ........................................................................................... 24

Rasterska ili bitmapirana grafika ...................................................................... 26

Boje ................................................................................................................. 30

Talasne dužine i vidljivi spektar ........................................................................ 30

Boje u dizajnu ................................................................................................ 34

Adobe PhotoShop CS5 ........................................................................................ 35

Upoznavanje sa prostorom za rad .................................................................... 35

Podešavanje radnog prostora ........................................................................... 37

Tastaturne prečice .......................................................................................... 40

Navigacija ..................................................................................................... 42

Upravljanje dokumentima ............................................................................... 47

Alati panela Toolbox ....................................................................................... 49

Transformisanje ............................................................................................. 52

History & Undo ............................................................................................... 57

Selekcija & Alpha kanal ................................................................................... 60

Bojenje i gradient ........................................................................................... 65

3

Korekcija tonaliteta i boja ................................................................................ 71

Layers (slojevi) .............................................................................................. 76

Layer Styles .................................................................................................. 80

Retuširanje .................................................................................................... 85

Tekst ............................................................................................................ 89

Filteri ............................................................................................................ 92

World wide Web i Internet .................................................................................. 95

Domeni ......................................................................................................... 95

WWW - World Wide Web ................................................................................. 97

Principi veb dizajna ......................................................................................... 99

HTTP i HTML ................................................................................................. 100

Šta je CSS? .................................................................................................. 105

Dreamweaver ................................................................................................... 110

Dreamweaver – osnovni prozor i meni ............................................................. 110

Kreiranje sajta .............................................................................................. 111

Kreiranje nove veb strane .............................................................................. 112

Navigation Bar – traka za navigaciju ................................................................ 116

Tabele ......................................................................................................... 118

CSS styles panel ........................................................................................... 118

Kreiranje layout-a strane ................................................................................ 120

Skript jezici - JavaScript .................................................................................... 122

Kompajlerski i interpretatorski jezici ................................................................ 122

Korišćenje JavaScript-a .................................................................................. 123

Skript tagovi ................................................................................................. 127

korišćenje JavaScripta ................................................................................... 127

Interakcija sa korisnikom ............................................................................... 127

Event & Action (dogañaj i akcija) ..................................................................... 128

4

OSNOVE SOFTVERA

SISTEMSKI SOFTVER. OPERATIVNI SISTEM

Računarski softver se može podeliti na:

• sistemski • razvojni i • aplikativni.

Sistemski softver je softver postavljen u ROM čipovima i služi za inicijalizaciju računara. Operativni sistem je skup programa koji upravljaju radom računarskog sistema (resursa računara). Njegovi zadaci su sledeći:

• posredovanje (interfejs) izmeñu čoveka i računara; • komunikaciju sa periferijama; • koordinira konkurentsko procesiranje poslova - multitasking; • pravilnu raspodelu resursa računarskog sistema meñu korisnicima; • koordinira mrežnu komunikaciju • obezbeñuje i izvršava servise za aplikativni softver

Operativni sistem upravlja:

• procesorom i memorijom, • ulazom-izlazom, • programima i podacima.

Do sad je razvijeno nekoliko generacija operativnih sistema:

• DOS • Windows • Unix • Linux • MacOS (Mac – Macintosh) • PalmOS • Solaris (na bazi Unix-a) • Vax/Vms (VMS – Virtual Memory System)

Podela operativnih sistema Operativni sistemi se dele i na: udobne za rad (prijateljski orijentisane – user friendly) i manje udobne. Sa stanovišta korisničkog interfejsa postoji sledeća podela:

• Sa komandne linije, čije su karakteristike: tekstualni oblik a komanda se unosi sa tastature. Primeri: MS-DOS, Unix.

• Grafički korisnički interfejs (GUI), čije su karakteristike: vizuelni, grafički, postoji sistem menija. Primeri: Windows, Mac OS, Linux.

Operativni sistemi mogu biti jednokorisnički i višekorisnički, zatim desktop OS i mrežni OS, za džepne kompjutere itd. Windows operativni system. Verzije Windows operativni sistem obuhvata sledeće verzije: Za radne stanice: Windows 1.0, Windows 3.11, Windows 95, Windows 98, Windows 98 SE, Windows ME, Windows 2000 Professional, Windows XP, Windows Vista, Windows 7. Za servere: Windows NT, Windows 2000, Windows 2003, Windows 2008, Windows 2008 R2 - dostupan samo u 64-bitnoj verziji! Na palm računarima - Windows CE. Karakteristike ovog operativnog sistema su sledeće:

• obuhvata podskup funkcija Windows OS, • manje memorije,

5

• manji ekrani, • manja spoljna memorija,

Njihovo korišćenje bazirano je na principu vidim, čujem, dodirujem. Mac OS Ovaj operativni sistem je prvi sistem sa komercijalno uspešnim grafičkim korisničkim interfejsom (1984). Predstavljao je model grafike za sve ostale OS. UNIX Ovaj operativni system podržava: više korisnika i deljenje vremena. Njegove karakteristike su sledeće:

• Karakter-baziran sistem • Interfejs kroz komandnu liniju • Radi na raznim procesorima i vrstama kompjutera • Primarni OS za Internet servere

LINUX Spada u grupu „open-source“ softvera koji se bazira na principu:

• Preuzimi slobodno • Napravi promene • Podeli verzije

Svaka promena mora biti bez ograničenja dostupna javnosti. Varijante Linux-a su:

• Caldera • Corel Linux • Debian • Kondara • Red Hat • Mandrake • SuSE • Turbo • Vector • Ubuntu • Gentoo • Slackware

Funkcije mrežnog OS Kod mrežni operativnih sistema vrši se podela zadataka izmeñu klijenta i server. Zadaci servera su sledeći:

• upravljanje sistemom datoteka (fajlova) • upravljanje zajedničkim (deljenim) resursima (štampač, faks) • zaštita i prava pristupa.

Sa druge strane klijenti:

• zahteve u obliku upita šalju prema serveru • imaju sopstvenu - lokalnu obradu podataka • poseduju sopstveni lokalni OS, koji omogućava da se deljeni resursi vide i

koriste kao da su lokalni za svakog klijenta.

SISTEMSKI SOFTVER: KORISNIČKI PROGRAMI

Korisnički programi sistemskog softvera služe kao alati za održavanje sistema i ispravljanje svega onoga šta operativni sistem nije automatski uradio. Oni olakšavaju rad korisnicima jer omogućavaju:

6

• kopiranje fajlova izmeñu memorijskih jedinica, • popravljanje oštećenih fajlova podataka, • prevode fajlove u formu pogodnu za čitanje pomoću nekih drugih programa • štite od virusa i drugih potencijalno opasnih programa.

Funkcije pomoćnih sistemskih programa su sledeće:

• pravljenje rezervne kopije i vraćanje podataka (Backup and Restore), • pravljenje duplikata najvažnijih fajlova i njihovo vraćanje u sistem kada je

to potrebno, • kompresija fajlova, • smanjuje potrebne količine prostora za čuvanje datoteke, • defragmentacija diska (Disc Defragmenter), • reorganizacija datoteka na disku tako da su podaci smešteni sekvencijalno

(uzastopno), čime je pristup do podataka brži,

Programi za arhiviranje Osnovna namena programa za komprimovanje, zapakivanje, zipovanje, sabijanje, arhiviranje, ...jeste smanjenje veličine fajla u cilju lakšeg prenosa ili boljeg skladištenja. Za ponovno korišćenje fajlova potrebno je uraditi dearhiviranje, raspakivanje, ekstrakciju…Ovi programi imaju meñusobnu kompatibilnost. Predstavnici su sledeći:

• WinZip • WinRar • PKZIP • ARJ • Windows Commander (ima mogućnost arhiviranja).

Programi za upravljanje fajlovima Ovi programi služe za pristup i manipulaciju fajlovima, Njihova osnovna namena je sledeća:

• kopiranje i premeštanje fajlova, promena imena fajlova, kreiranje foldera, brisanje fajlova i foldera

• mogućnost deljenja resursa, dodele privilegija pristupa odreñenim resursima (ovo je bitno za rad u mreži, gde je neophodno definisati prava pristupa i kontrolu mrežnih resursa, direktorijuma i ureñaja)

Predstavnici ovih programa su Windows Commander i Windows Explorer. Antivirusni softver Antivirusni softver je softver koji otkriva i uklanja viruse sa računara. On deluje preventivno. Svaki antivirusni softver poseduje antivirusnu bazu, koja mora biti redovno ažurirana. Ažuriranje (update) antivirusne baze može se raditi na mesečnom, nedeljnom ili što je najbolje, na dnevnom nivou. Redovan update je od suštinske važnosti za funkcionalan rad antivirusnog softvera. Dobar antivirus softver poseduje mogućnost monitoringa sistema, što može dovesti do usporenja rada računara. Monitoring (kontrola, nadgledanje) je posebno važno prilikom pretraživanja Internet-a, slanja i primanja e-mail pošte i ostalim aktivnostima na mreži. Kod umreženih računara je teško ukloniti jednom dobijene viruse zbog njihovog lakog širenja u mrežnom okruženju. Kod kućnih računara važna je provera e-mail poruka, jer su sredstvo za prenos virusa. Predstavnici antivirusni softvera su:

• AntiViral Toolkit Pro http://www.avp.ch • Norton AntiVirus 2000 http://www.symantec.com • Command AntiVirus 4.57 http://www.commandcom.com - besplatan • Panda Antivirus http://www.pandasoftware.com • PC-cillin http://www.antivirus.com

7

• Sophos Antivirus http://www.sophos.com • InoculateIT Personal Edition http://www.cai.com - besplatan

Firewall programi Da bi haker mogao pristupiti odreñenom računaru, mora znati njegovu IP adresu, a taj računar mora imati "otvoren" neki port. Hakeri najčešće napadaju preko programa koji se zovu skeneri (skeniraju računar žrtve, tragajući za otvorenim portom). Trojanci drže odreñene portove otvorenim i čekaju zahtev za konektovanjem od strane klijent aplikacije sa računara hakera. Firewall je sistem dizajniran da kontroliše protok informacija izmeñu lokalnog hosta i bilo kog udaljenog hosta na mreži. Koristi se kao sredstvo za smanjenje rizika od neželjenog pristupa sistemu ili lokalnom računaru. Firewall program instaliran na Vašem računaru prijaviće svaki pokušaj konekcije sa udaljenim računarom, dajući mogućnost da se ona odobri ili blokira. Predstavnici firewall programa su sledeći:

• AtGuard - program koji pored firewalla poseduje i opcije veb filtera i blokiranja opakih ActiveX i Java Script-ova.

• BlackICE Defender - program firme NetworkICE www.networkice.com sastoji se iz dva dela: korisničkog interfejsa i firewall aplikacije. Ukoliko doñe do napada, BlackICE aktivira "backtracking trace", koji podatke o napadaču (IP adresu , DNS...) smešta u log fajl.

• ConSeal Private Desktop - Program firme Signal 9 Solutions www.signal9.com ima mogućnost podešavanja Blocked i Trusted aplikacija i filtriranja mrežnog saobraćaja za sve IP servise (na primer: ARP, ICMP, DHCP, DNS, TCP, File Sharing, UDP i ostale protokole).

• Zone Alarm - Proizvod firme ZoneLabs www.zonelabs.com je besplatan program, namenjen manje iskusnim korisnicima. Mana mu je što nema log fajl u kome se beleži sumljivi mrežni saobraćaj.

Sistemski softver: Drajveri ureñaja Drajveri su mali programi koji omogućavaju ulazno-izlaznim jedinicama, kao što su tastatura, miš, štampač itd, da komuniciraju sa računarom. Uključeni su ili u operativni sistem ili su pridodati uz periferijske jedinice.

RAZVOJNI SISTEM

Razvojni system je softver koji se koristi za pravljenje (razvijanje) drugog softvera. Tu spadaju:

• asembleri - prevode program u asemblerskom jeziku u mašinski jezik. • prevodioci - kompajler dekodira instrukcije napisane u jeziku višeg nivoa i

proizvodi program u asemblerskom ili mašinskom jeziku. • interpretatori - programi koji prevoñenje izvornog jezika i izvršavanje

prevedenog koda obavljaju u istom ciklusu obično obrañujući po jednu liniju u vremenu.

• Editori • povezivači - Linkeri kombinuju jednu ili više datoteka koje sadrže objektni

kod iz separatno prevedenih modula u jedinstvenu datoteku koja sadrži učitljiv ili izvršni kod.

• debageri - programi za otklanjanje grešaka • parseri - programi koji dele kod u funkcionalne komponente. Obično su

sastavni deo kompajlera…

Programski jezici Programski jezik je skup pravila kojim se računaru opisuju podaci i predstavljaju instrukcije. Programske jezike možemo podeliti po stepenu zavisnosti programskog jezika

8

i računara na mašinski zavisne jezike i programske jezike višeg nivoa, odnosno mašinski nezavisne programske jezike. Mašinski zavisni jezici su mašinski jezik i simbolički jezik. Mašinski jezik obuhvata numeričke kodove koji reprezentuju instrukcije. Asembler ima istu strukturu i skup instrukcija ali on dopušta programeru da koristi nazive instrukcija umesto njihovih brojčanih specifikacija, npr. ADD, SUB, INC, MOV, AND, XOR, ... Programski jezici visokog nivoa nalaze se izmeñu mašinskog jezika i prirodnog ljudskog jezika i dele se na proceduralne, deklarativne i objektno orijentisane Program u proceduralnom jeziku je niz naredbi koji odreñuje KAKO se odreñena akcija obavlja: Fortran, Cobol, Basic, Pascal, C,... Program u deklarativnom jeziku je niz naredbi koji odreñuje ŠTA treba učiniti: Prolog i SQL. Program u objektno orijentisanom jeziku možemo shvatiti kao skup objekata koji izmeñu sebe i sa spoljnim svetom komuniciraju putem „poruka“: C#, Java, C++, Visual Basic, ... Programski jezici se mogu podeliti i na:

• kompajlerske jezike - programski kôd konvertuje se u mašinski pre nego što se i pokrene, što znači da će se ta konverzija izvršiti samo jednom (Java);

• interpretatorske jezike – konverzija kôda dešava se u momentu njegovog pokretanja i izvršava se svaki put kada se kôd pokrene (JavaScript);

APLIKATIVNI SOFTVER

Aplikativni softver se još naziva i korisnički softver ili uslužni program. To su programi sa kojima radi i upravlja korisnik. Ovi programi koriste servise operativnog sistema. Koji dodeljuje hardverske resurse korisničkim programima. Korisnik može direktno koordinirati rad aplikativnog softvera i operativnog sistema (retko). Aplikativni prozor je pravougaono područje na ekranu u kome se prikazuje sam aplikativni program. On sadrži obrañivane podatke, toolbar-ove, menije, pomoćne prozore, panele i sl. Aplikativni programi se mogu podeliti na razne načine. Najčešća podela je prema oblasti primene. Možemo razlikovati:

• Tekst-procesore • Radne tabele • Sisteme za upravljanje bazama podataka • Grafičke programe • Igre i slično.

Pokretanje programa Korisnik pokreće program nekom akcijom (klikom na ikonu, komandom sa komandne linije, …). Svaka akcija korisnika je komanda operativnom sistemu i on pokušava da je izvrši. Ako je komanda uspešno izvršena, pokreće se odreñeni program i njemu se stavljaju potrebni resursi računara na raspolaganje (memorija, procesorsko vreme,…). U suprotnom, pojavljuje se upozorenje o nastalom problemu. U pozadini je uvek prisutan operativni sistem jer je najvišeg prioriteta. Izvršavanje programa može se prekinuti iz operativnog sistema. Nakon uspešnog okončanja programa, operativni sistem preuzima komandu nad svim resursima računara. Ono što karakteriše softverske proizvode, za razliku od drugih proizvoda, je sledeće:

• Dokumentacija, • Upgrading (nadogradnja) • Kompatibilnost • Odricanje • Licenciranje • Distribucija

9

Aplikativni softver. Dokumentacija Dokumentaciju čine štampana dokumenta (instalaciju, uputstva itd.). Meñutim mnoge softverske kompanije su zamenile štampana dokumenta drugim uputstvima kao što su:

• Tutorial manual - specifična uputstava ili program koji pomažu u korišćenju proizvoda, voñenjem korisnika kroz odreñen broj koraka

• Reference manual • Help fajlovi • On-line helpovi.

Većina programa se lako koristi (unapred utvrñeni standardi). Postoje i naprednije karakteristike - advanced features koje zahtevaju dodatna uputstva. Aplikativni softver. Upgrading (poboljšanje) Proizvoñači popravljaju svoje proizvode, uklanjaju bagove i dodaju nove mogućnosti (features). Korisnici mogu transformisati dati program u novu verziju (upgrade) plaćanjem odgovarajuće takse proizvoñaču datog softvera. Manje izmene se označavaju decimalnom tačkom, dok se veće izmene označavaju sledećim brojem. Meñutim postoje i nestandardne oznake npr. kod Windows verzija OS (npr. Windows XP). Aplikativni softver. Kompatibilnost Obezbeñuje da softver korektno radi na datom hardveru, operativnom sistemu i periferijama. Programi napisani za jednu vrstu računara mogu da ne rade na drugom tipu računara. Aplikativni softver. Odricanje Proizvoñači softvera ne preuzimaju odgovornost za moguće probleme u funkcionisanju softvera, prodajući ga “kao što jeste”. Aplikativni softver. Licenciranje Komercijalni softver je po pravilu zaštićen autorskim pravima, usled čega se zabranjuje nelegalno kopiranje u cilju dalje distribucije. Ne kupuje se program već softverska licenca! Copyright – © zaštićen softver koji se ne sme nelegalno kopirati. Postoji i fizička zaštita (Physically copy protection) – zaštita diskova i ureñaja od korišćenja nelegalnog softvera. Aplikativni softver: Distribucija Softver se distribuira preko putem direktne prodaje, maloprodajnih prodavnica, putem kataloških porudžbina poštom, demo verzija, veb sajtova itd.

NABAVKA SOFTVERA

U zavisnosti od toga da li se prilikom preuzimanja softvera isti plaća ili ne, softver se kao proizvod može podeliti na:

• Freeware • Shareware • Public domain • Free software • Open source • Komercijalni softver

„Freeware“ softver „Freeware“ softver je besplatan za sve, ali ima zaštićena autorska prava (copyright). Naime, autor obično zabranjuje umnožavanje i prodaju. Distribuira se u izvršnom format. Iako besplatan ne znači da je izvorni kod ovih programa otvoren (Opera pretraživač jeste freeware, ali je zatvorenog koda) Neki autori „freeware“ aplikacija ne skrivaju izvorni kod svog softvera („open source“). Zarada: preko donacija, preko tehničke podrške, preko implementiranja „third party“ softvera/reklama u sam program (adware/spyware), preko prodaje „source-a“ i prava

10

trećim licima da modifikuju dotičnu aplikaciju i preko “free for non-commercial use” licence. Shareware – “try before buy” Izraz „shareware” može se protumačiti kao dozvola za slobodnu distribuciju probnih (trial) verzija programa, bez obaveze za njihovim plaćanjem, što je uobičajeno kod klasične prodaje softvera. Korišćenje softvera je vremenski ograničeno. Probni period najčešće traje 30 dana. Kod ove vrste dozvoljeni je testiranje, ali sa ograničenim mogućnostima (demo verzije). Shareware softver nije besplatan, ali spada u jeftine proizvode (retko prelazi 50$). Plaća se dogovorena cena za registraciju kod autora softvera. „Public-domain“ softver „Public-domain“ softver uglavnom je besplatan (nikom nije u interesu da sprečava njegovo širenje meñu krajnjim korisnicima). Softver koji nije „copyrighted“ (softver koji nije besplatan može biti „public-domain“ jer je njegovo kopiranje dozvoljeno). Postoje dve vrste licenciranog „public-domain“ softvera:

• onaj kod koga je „source code“ besplatan (možete kreirati aplikaciju na osnovu nečijeg „source code“-a i u potpunosti imate pravo da naplaćujete vaš softverski proizvod) i

• onaj kod koga je sama aplikacija besplatna.

„Free“ softver „Free“ softvter je u osnovi softver koji je u potpunosti besplatan. Tu se ubraja „Open source“ kod koga je izvorni (programski) kod besplatan i dostupan. Može se neograničeno koristiti. Sama aplikacija zasnovana na tom kodu može biti proizvod koji se naplaćuje, delimično ili u potpunosti. Može se koristiti i menjati. Zarada se ostvaruje preko donacija, preko tehničke podrške i “free for non-commercial use” licence Komercijalni softver Komercijalni softver je softver čija je osnovna namena finansijska dobit (ima svoju cenu). Postoji komercijalni softver koji je besplatan (naplaćuje se tehnička podrška). Ovaj softver štiti autorska prava, što znači da se ne sme se kopirati bez dozvole proizvoñača. Kupovina komercijalnog softvera za pojedince omogućena je preko softverskih radnji, narudžbine preko Interneta, elektronska softverske distribucije. Kupovina komercijalnog softvera za poslovne svrhe karakteriše se popustom na količinu, kupovinom licence za celu kompaniju, postojanjem mrežnih verzija, uslugom aplikativnog okruženja (Application Service Provide - ASP) - softver instalira i održava ASP, pristupom preko Interneta, plaćanjem prema vremenu korišćenja i uštedom na nabavci i održavanju softvera. Software Suites - Integrisani softverski paketi Integrisani softverski paketi predstavljaju grupu programa kreiranih i dizajniranih da rade zajedno radi zadovoljavanja potreba odreñene grupe korisnika. Popularni integrisani paketi, kao što su AppleWorks i Microsoft Works, po pravilu uključuju: procesiranje teksta, baze podataka, tabelarnu obradu, grafiku, telekomunikacije, modul za upravljanje personalnim informacijama (Personal information management- PIM). U tu grupu programa spade Microsoft Office. Njihove karakteristike su sledeće:

• podaci su portabilni (prenosni) izmeñu osnovnih aplikacija paketa - na primer, u Office-u se koristi tzv. OLE (Object Linking and Embedding) princip, koji omogućuje povezivanje i uključivanje podataka iz drugih aplikacija,

• sve aplikacije unutar paketa imaju sličan izgled, tzv. Look&Feel, • cena kompletnog paketa je manja nego cena pojedinih aplikacija,

11

• koristi se isti tip komandi u svakom od modula.

Standardna grupa programa koja je integrisana u MS Office je:

• Word (program za obradu teksta) • Excel (tabelarni program) • PowerPoint (program za grafičke prezentacije) • Access (baze podataka). • Outlook (program za upravljanje personalnim informacijama i e-mailom).

MS Word „Word processing“ softver je program koji omogućava korisniku da kreira i obrañuje tekst dokumente. Rad sa tekstom podrazumeva: unos teksta, sreñivanje, brisanje reči, rečenica i kompletnih sekcija, … Osnovne faze razvoja dokumenta su: kreiranje, formatiranje, editovanje, snimanje i štampanje. Dodatne funkcionalnosti obuhvataju: ubacivanje slika, grafičkih elemenata, tabela, matematičkih formula i dr. Spreadsheet softver. MS Excel „Worksheet“ ili „spreadsheet“ softver je softver za organizaciju i manipulaciju podataka posredstvom tabela i tabelarnog proračuna. Organizacija „spreadsheet“ programa podrazumeva skup ćelija u preseku kolona i redova, mogućnost rekalkulacije na „worksheet“-u promenom podataka u drugom delu „worksheet“-a, koncept „chart“-a predstavlja prikaz podataka sa „worksheet“-a u grafičkoj formi. Tipičan predstavnik „spreadsheet“ programa – Microsoft Excel. Microsoft Excel se koristi za evidencije, rasporede, ulaze/izlaze, plate, proračune zaposlenih, klijenata i dobavljača, uplata,... Koriste se i za kreiranje izveštaja (pivot tabele), analize i predviñanja („what if“ analiza po jednom ili dva parametra i dr.). Sadrže elemente programiranja i mogućnost izrade manjih aplikacija unutar samog Excel-a. „Spreadsheet“ softver dijagrami omogućavaju transformaciju podataka u vizuelnu predstavu:

• Kolač-dijagrami (Pie charts) pokazuju relativne proporcije u odnosu na celinu,

• Linijski dijagrami (Line charts) prikazuju trendove i relacije u vremenskoj dimenziji,

• Bar dijagrami (Bar charts) koriste se ukoliko podaci pripadaju različitim kategorijama,

• Dijagram rasutosti (Scatter charts) koriste se za otkrivanje (pre nego za prikazivanje), odnosa izmedju dve promenljive.

Gore nabrojani dijagrami nisu meñusobno zamenljivi. Dijagrami treba da budu jednostavni, pristupačni i razumljivi.

MULTIMEDIJA

Multimedijalni elemenata obuhvataju: • Tekst • Zvuk • Grafika • Video • Animacija

Tekst. Računarski podržani hipermedijalni dokumenti sadrže primarno tekstualnu poruku, opis, tekst koji se elektronski predstavlja na ekranu računara. Elektronski tekst se razlikuje od klasičnog, pisanog teksta na papiru. Pre svega, te razlike su vezane za opseg ili količinu teksta ispisanog na ekranu ili na papiru, na čitljivost, tj. vizualnu predstavu iskazanog teksta. (izgled, pismo, veličina, boja,...), zatim mogućnosti povezivanja raznih delova teksta što je karakteristično samo za elektronski tekst.

12

Multimedijalni programi su programi koji obavljaju višestruke funkcije:

• pregled i organizaciju digitalnih medijskih fajlova na računaru, • „radioplayer“, „video player“, CD „player“, DVD „player“, sve u jednom

softveru • podešavanje (customisation) „player“-a, promena izgleda, veličine prikaza,

izbor informacija i sl. • organizaciju medjia fajlova, kreiranje biblioteke fajlova

Predstavnici su Windows Media Player, WinAmp, Real Player, VLC, i još mnogo drugih... Microsoft PowerPoint „Graphics presentation“ softver - programi za pripremu mutimedijalnih prezentacija. Grafička predstava koncepata i principa obrañivanih tema u vidu teza i ideja. Najčešće se primenjuje u demonstriranju i reklamiranju odreñenih proizvoda, u edukaciji, itd. U cilju što kvalitetnijeg prikaza, današnja rešenja sadrže niz dodatnih mogućnosti kao što su: ubacivanje audio i video fajlova, animacionih i tranzicionih efekata, grafikona, tabela i sl. Tipičan predstavnik - Microsoft PowerPoint. Microsoft Producer for Power Point MS Producer je proizvod Microsoft kompanije koji pomaže pri medijskoj i vizuelnoj komunikaciji. Koristi se za kreiranje i poboljšanje medijskih prezentacija kombinovanjem Power Point slajdova, slika, videa i audio zapisa i/ili HTML fajlova. Uz pomoć ovog alata kreiraju se online nastavne prezentacije, kursevi i druga slična rešenja koja se koriste u online nastavi i obuci, tutorijalima, komunikaciji itd. Pravljenje veb prezentacije obuhvata sledeće korake: kreiranje Power Point prezentacije i video snimka, sinhronizacija slajdšou (ppt fajl) sa audio/video fajlom, kreiranje veb strane sa prezentacijom. Database softver To je softver koji služi za rad sa bazama podataka. Baza podataka (database) je kolekcija podataka organizovanih na način koji omogućava lak pristup, dohvatanje i obradu tih podataka. Database softver je softver koji omogućava kreiranje, pristup i upravljanje bazom podataka. Rad sa bazom obuhvata kreiranje tabela, ubacivanje, ažuriranje i brisanje zapisa, kreiranje formi, kreiranje upita, generisanje izveštaja i dr. DBMS - Database Management System – softver koji služi za upravljanje bazom podataka. Predstavnik database softvera - Microsoft Access. Microsoft Visio Microsoft Visio je program iz kategorije blok dijagram (flowchart) aplikacija, koji služe za crtanje raznih dijagrama, šema i vizuelnih modela raznih vrsta i namena. Sadrži alatke koji omogućavaju jasnu vizuelnu predstavu svih važnih informacija o odreñenom poslu, bez obzira na nivo stručnosti autora. Omogućava korisniku razvoj sopstvenih vizuelnih rešenja. Project Management Project management softver je softver koji se koristi za koordinaciju i upravljanje projektom na kome radi više ljudi, sa ciljem kontrole i završetka poslova na vreme. Ima mogućnost planiranja, kreiranja rasporeda, praćenja procesa, analize dogañaja, praćenje troškova projekta, ... Obzirom da gotovo svi današnji projekti zahtevaju timski rad a time i sposobnost pojedinca za učešće na timskom projektu njegova upotreba u tom kontekstu je značajna. Kancelarijski paketi programa su programi namenjeni kancelarijskom radu. Pored, već pomenutog MS Office-a tu spadaju i programi za slanje i primanje faksova (WinFax, Bitware), Adobe Acrobat za pregled i rad sa dokumentima u pdf format, knjigovodstveni paketi programa itd. Adobe Acrobat je softverski paket kompanije Adobe za rad i manipulaciju dokumentima. Najveća prednost ogleda se u portabilnosti i nezavisnosti od hardvera i operativnog

13

sistema. Pored toga i skrolovanje dokumenta, umanjen (thumbnails) prikaz, pretraživanje reči, selekcija teksta, zaštita (od neovlašćenog otvaranja i editovanja) i elektronski potpis. Desktop publishing softver Desktop publishing softver je softver za dizajn i kreiranje sofisticiranih dokumenata koji sadrže tekst i grafiku. Obuhvata kreiranje visoko kvalitetnih rešenja za komercijalnu štampu kombinacijom tekstualnih i grafičkih elemenata. Predstavnici su: QuarkXPress, Adobe InDesign, Adobe PageMaker, Corel Ventura, Macromedia FreeHand, Adobe Illustrator. Proces proizvodnje knjiga, časopisa i drugih publikacija koji ne uključuje samo pisanje teksta i editovanje teksta već i softver za editovanje slika, slaganje stranica koje kombinuju dokumenta iz različitih izvora dajući koherentnu vizuelno osmišljenu publikaciju.

POSLOVNE KOMUNIKACIJE

PISANJE E-MAIL-OVA. POSLOVNO PISMO

To je osnovni vid komunikacije u savremenom poslovanju, čija je svrha da čitaocu pruži odreñenu informaciju. Po pravilu služi za komunikaciju izmeñu dve različite kompanije. Pisana komunikacija obuhvata poslovno pismo i e-mail. 21. vek predstavlja doba elektronske komunikacije što ne znači da je klasično poslovno pismo izgubilo na svom značaju. Poslovno pismo i e-mail treba meñusobno da se dopunjuju jer su slabosti jednog najčešće prednosti onog drugog. Prednosti klasičnog poslovnog pisma

• lakše se čita, pokazuje bliskim saradnicima i nosi sa sobom (kući, na sastanak, čita usput...)

• lakše se dodaju beleške, podvlače detalji • lakše se stavlja u klasičnu preglednu formu sa zaglavljem i ostalim

tekstualnim formatiranjem (u slučaju slanja poslovnog pisma preko e-mail-a, koristite "hibridnu" formu - pravilno formatirano pismo stavite u „attachment“ - tako će ga primalac lakše štampati i čuvati!

• lakše se čuva i kod pošiljaoca i kod primaoca: sva poslovna korespondencija, izlazna i ulazna, se arhivira u okviru preduzeća. Glavni problem pri arhiviranju mejlova je to što su dostupni samo vlasniku

• zvanično je i formalno, izgleda ozbiljnije i odaje utisak profesionalnosti - ozbiljne firme uvek preferiraju klasična pisma u prvim koracima komuniciranja

• može poslužiti kao materijalni dokaz ako je valjano overeno.

Prednosti elektronske pošte

• efikasnija je - neuporedivo brže stiže i teže se gubi (poslovna pisma se najčešće ne gube u pošti, već kad stignu u firmu primaoca - sekretarice, kuriri, puno papira na stolu...)

• neposrednija je i lakše se uspostavljaju lični odnosi meñu korespodentima • mnogostruko su ažurnija - brže se odgovara • mogućnost slanja manjih multimedijalnih sadržaja i linkova ka raznim

internet stranicama (za veće sadržaje bolje pošaljite CD) • lakše se distribuira meñu prostorno udaljenim saradnicima, naročito ako ih

je više (forward) • e-pošta je mnogo pogodnija za kratke poruke i konsultacije

14

Pisanje e-mail-a Vreme dopisivanja i očekivanja pisama je zadobilo potpuno drugi kontekst osavremenjavanjem tehnologije. Umesto poštara danas očekujemo kovertu na dnu monitora. Iako je u velikoj meri komunikacija olakšana, moramo biti svesni da i elektronska pošta zahteva odreñena pravila ponašanja i pisanja. Pravila pisanja e-mail-a:

• Jasno formulišite adresu i „subject“ • Naslov mejla treba da bude dobar i primamljiv jer će, na taj način, odmah

privući ljude da pročitaju mejl i dati im jasnu sliku o čemu se u mejlu govori.

• bitan mejl - naslov mejla na to treba da ukaže. • mejl sa nekom šalom, naslov je taj koji ukazuje da je to nešto što možete

pročitati i u pauzi. • Naslov mora da bude jasan da bi ljudi kasnije u sandučetu sa primljenom

poštom (inbox-u) ili sandučetom za poslatu poštu (outbox-u) lakše našli odreñeni mejl.

• E-mail se kao i sva pisma započinje ljubaznim pozdravom (Poštovani…, Cenjeni…).

• Ispod pozdrava bi trebalo da stoji uvod kojim biste svog "sagovornika" uveli u osnovni sadržaj i cilj pisma tj. poruku.

• Zaključak kojim završavate pismo služi da jasno naglasite šta želite da postignete.

• Na samom dnu završenog pisma bi trebalo da stoji vaš potpis koji uključuje i vašu poziciju u kompaniji za koju radite i vaš službeni kontakt.

Poštujte privatnost tuñih mejlova. Kad ste u prilici da mejl šaljete na veliki broj adresa (ovo je čest slučaj kad se šalju šaljivi mejlovi prijateljima), koristite polje “TO" (pre nego da formirate grupu prijatelja u okviru svog mejl naloga). Druga opcija je da stavite adrese u “BCC“ . Ista pravila važe i kad prosleñujete (forward) nečiji mejl na veći broj adresa. U tom slučaju možete da izbrišete iz prosleñenog teksta spisak mejlova ljudi koji su taj mejl prvobitno dobili. Ovo je i jedan od načina da se zaštitite od neželjene pošte tj. „spam"-a. Pravilno napisano poslovno pismo bi trebalo da bude kratko, jasno i ljubazno. E-mail nije forma komunikacije prilikom koje treba da budete detaljni i opširni. Ukoliko je nešto veoma važno, duži opis možete da dodate u "attachment". Takoñe je važno da pismo koje ste napisali bude pre svega pravilno (gramatički i stilski) ureñeno. Radi preglednosti tekst možete da podelite u manje celine, koristeći blok forme. U samom sadržaju bi trebalo da izbegavate važne podatke i informacije za koje smatrate da ne bi trebalo puno ljudi da zna, ukoliko to ne možete da izbegnete naznačite to jasno tako da primalac ima u vidu da je ono što je napisano u pismu namenjeno isključivo njemu. Informacije koje su veoma važne tj. koje bi što pre trebalo da stignu do svog odredišta možete naglasiti i tako što ćete ga označiti crvenim uzvičnikom ili zastavicom. Potvrda prijema mejla nije uvek neophodna jer to može biti zamorno pogotovu ako u toku dana primate puno mejlova. Potvrda se šalje kada i ukoliko za to ima smisla. Ukoliko ste vi primili e-mail, važno je da na njega odgovorite na vreme, optimum je oko 24 časa. Naravno, ukoliko niste u mogućnosti, učinite to što je pre moguće uz dodatno obrazloženje zbog čega kasnite sa odgovorom, koje takoñe, treba da bude u kratkim crtama. Pisanje pisama Osnovni elementi poslovnog pisma su:

• Zaglavlje/adresant (pošiljaoc) • Datum • Adresat • Predmet • Uvodni pozdrav

15

• Tekst • Završni pozdrav • Ime i prezime i potpis • Prilozi

Tekst pisma - uvod Ukoliko je nepoznato ime i prezime adresanta, pismo se počinje frazom „Poštovani”. Ukoliko je primaoc pisma poznat, oslovljava se sa „Poštovani gospodine/gospoño Petrović”. Ukoliko je primaoc pisma poznat i odnos sa njim je prisniji pismo može početi i neformalno sa “Draga...” Prvi pasus poslovnog pisma treba da sadrži jasnu i preciznu informaciju o razlozima obraćanja adresatu (npr. „Potvrñujući prijem Vašeg pisma u kojem“ ili „Dosada nismo bili u kontaktu, ali Vam se javljam zbog...“ ). Ukoliko odgovarate na neko pitanje ili predlog, obavezno u uvodu spomenite taj povod za pisanje. Tekst pisma - jezgro Jezgro je najvažniji deo i mora biti potpuno jasan i precizan, jer se u njemu izlažu potrebe i zahtevi poslovnog partnera. U zavisnosti od broja tema, deli se na jasno odvojene stavove. Naročito važan detalj se izvlači u poseban red i podvlači da bi bio uočljiviji Tekst pisma - zaključak Zaključak je deo pisma kojim se završava tema, sumiraju informacije i iznosi nada da će posao biti završen na obostrano zadovoljstvo, uz izražavanje zahvalnosti na odvojenom vremenu i ljubazan pozdrav na kraju. Najvažnije karakteristike poslovnog pisma su njegova sadržina i estetski izgled! Na kraju... Na kraju formalan pozdrav – „S poštovanjem” , „Srdačan pozdrav”, "Očekujući Vašu porudžbinu, mi Vas sa poštovanjem pozdravljamo", "Pozdravljam Vas u nadi da ćemo sarañivati na obostrano zadovoljstvo", "Očekujući Vaš odgovor, srdačno Vas pozdravljam" i slično ... i potpis, ali i ime i prezime pošiljaoca. Prilozi Ukoliko se uz poslovno pismo šalje i bilo kakva prateća dokumentacija, to se obavezno navodi na kraju pisma u donjem levom uglu strane pod stavkom „Prilozi”, ispod kojeg se taksativno nabrajaju. Forme pisanja poslovnih pisama mogu biti sledeće: blok, zupčasta, kombinovana i slobodna. Propratno (motivaciono) pismo To je dokument koji prati biografiju tj. CV, kada se kandidat prijavljuje za posao. Pismo daje individualni pečat biografiji. Veoma je kratko (200-250 reči). Ima za cilj da uvede poslodavca u CV kandidata kao i da poslodavcu prenesu prvu i najvažniju informaciju – da ste vi prava osoba za oglašeno mesto! Propratno pismo sadrži četiri pasusa. Cilj prvog je da naglasi za šta se kandidat prijavljuje i gde je dobio informaciju o konkursu. U drugom pasusu navode se kvalifikacije i veštine koje kandidat poseduje (veštine prezentacije, komunikacije, pregovaranja ili druge kvalifikacije relevantne za konkretno radno mesto). Treći pasus pokazuje zašto kandidat želi taj posao. Poželjno je da novac nije jedina satisfakcija i motivacija kandidata, već i da su mu bitne mogućnosti usavršavanja, napredovanja i sl. U poslednjem pasusu kandidat naglašava da će poslodavcu detaljnije objasniti i pokazati svoje kvalitete prilikom intervjua i mora precizno napisati kada i kako može biti kontaktiran. Biografija (CV ili Resume) Profesionalni oblik komunikacije koji mora, kao takav, biti sistematičan, koncizan, precizan, dovoljno ali ne previše detaljan, informativan i jasan. Ima za cilj da predstavi kandidata i njegovo obrazovanje u najboljem svetlu, na koncizan i lepo struktuiran način. CV za konkurisanje za posao ne bi trebalo da bude duži od dve A4 strane, osim ako kandidat ima bogato radno iskustvo i konkuriše za mesto u top menadžmentu. Ako se

16

šalje poštom, štampa se na belom A4 papiru i piše se slovima Arial ili Times New Roman, a veličina slova bi trebalo da bude izmeñu 10 i 12. CV se nikako ne šalje bez propratnog pisma. Po nekim idealnim standardima trebalo da sadrži sledeće: lične podatke, obrazovanje, radno iskustvo, nagrade koje kandidat poseduje, relevantne kurseve i seminare, znanje stranih jezika i rada na računaru, lične osobine, hobije, preporuke i ostale napomene, ukoliko ih ima. Pravila pisanja CV-a

• Mora biti pregledan i struktuiran • Piše se u trećem licu ili pasivu čime se daje utisak objektivnosti. • Ukoliko se piše u trećem licu, ne koriste se lične zamenice (ispravno je npr:

„završio srednju školu" ili „završena srednja škola", a ne "on je završio srednju školu")

• Budite što konkretniji • Možete stavi fotografiju ukoliko ste sigurni da na njoj delujete kao

poslovna, pouzdana i prijatna osoba. • Voditi računa o gramatičkim greškama • Navode se samo one veštine koje kandidat stvarno može dokazati i pri tom

ne treba ići u detalje. • Odaberite stil pisanja

o Hronološki - u prvi plan stavlja naglasak na profesionalni razvoj o Funkcionalni - bazira se više na isticanju veština o Kombinovani - najbolji izbor pri traženju prvog zaposlenja.

Poslodavci često čitanju motivacionog pisma i biografije posvete manje od jednog minuta. Pri prvom „skeniranju“ priložene dokumentacije traže samo bitne informacije koje ih interesuju o vama, a koje upravo iz tog razloga moraju biti jasne i uočljive, a ne „ukomponovane“ u dugačke rečenice. Ne pišite „svoju životnu priču“ u formi proznog teksta ili sastava, nego napravite tabelarni pregled svih važnih informacija o vama.

PISMO I TIPOGRAFIJA

PISMO

Pismo je sredstvo prostorne i vremenske komunikacije. U širem smislu to je svaki sistem vidljivih oblika (slika, simbola, znakova i njihovih kombinacija) namerno proizvedenih u cilju njihovog memorisanja i obaveštavanja. U užem smislu, sistem znakova koji predstavljaju odreñene elemente govornog jezika: pojedine reči, slogove ili glasove. Istorijski razvoj pisama obuhvata:

• Slikovna pisma, • pojmovna i slogovna pisma • fonetska pisma.

Slikovna pisma datiraju još iz perioda Neolit 8000-3000 p.n.e. Tipičan predstavnik čine piktogrami (pretpismo) – crteži raspoloženja. To su zapisi ili saopštenja načinjeni nizanjem šematskih sličica ljudi, životinja, predmeta i sl. Kasnije crteži postaju pismovni oblici gde svaki izražava neku ideju ili pojam. Usavršavanjem ovog sistema došlo je do razvoja slikovnog pisma. Čovek današnjice u svakodnevnoj komunikaciji koristi crtež kao vid piktogramskog sporazumevanja: saobraćajni znaci, na aerodromima, sportskim objektima, hotelima (razna obaveštenja i oznake) i sl. Ideogrami – oblici pismenog izražavanja u starom veku. To su stilizovani crteži kojima se mogla pratiti čovekova misao. Tipičan predstavnik kinesko pismo. U savremenom životu to su: arapski i rimski brojevi, matematički znaci, znaci interpunkcije itd. Pojmovna i slogovna pisma Pojmovna pisma – svaka reč ili njen deo obeležava se posebnim slikovnim znakom ili simbolom. Slogovna pisma predstavljaju deo ideogramskih pisama.

17

Primeri pojmovnog pisma su:

• Klinasto pismo - najstariji oblik – sumersko klinasto pismo koje je nastalo oko 3500 godine p.n.e. i brojalo oko 2000 znakova

• Egipatski hijeroglifi - “sveti znaci” • Kinesko pismo

Fonetsko pismo Fonetsko pismo vodi poreklo iz feničkog alfabeta. Preuzimaju ga Grci i prave osnovu za razvoj današnje latinice i ćirilice. Uticao je na razvoj arapskog pisma. Grci uvode sistem pisanja s leva na desno u VII i VI veku p.n.e. Rimljani prilagoñavaju slovne oblike u latinsku abecedu.

OD KALIGRAFIJE DO KOMJUTERSKE TEHNIKE

Kaligrafija ili lepo pisanje podrazumeva sva pisma rukom pisana od najstarijih vremena pa do danas. Vreme kaligrafije teče od prvih ispisivanja znakova na voštanim i glinenim tablicama, papirusu, pergamentu i hartiji. Ksilografija je otiskivanje cele stranice rezane na drvenoj ploči. Tipografija je štampa koja koristi pomična metalna slova složena u redove i cele stranice. Meñutim, tipografija se bavi se izborom i organizacijom oblika slova i drugih grafičkih karakteristika štampane strane. To je vizuelni sistem stvoren kroz meñusobni odnos elemenata pisma i pozadine. Umetnost tipografije je dinamički sistem kontrasta – kontrast izmeñu fonta i pozadine čini formu slova vidljivom ljudskom oku. Da bi jedna knjiga bila potpuna, potrebno je da postoji jedinstvo teksta i vizuelnog identiteta knjige. Dinamika slovnog niza. Dinamički sistem koji grade slova započinje formom slova i nastavlja se kroz reñanje slova u slovni niz: reči→rečenice →blokovi →strana. Kontrasni elementi strane: razmak izmeñu slova, razmak izmeñu reči, razmak izmeñu linija i margina. Kerning odreñuje rastojanje izmeñu susednih slova, a mera je izražena preko “em”- ova.

Slika 1. Prikaz “kerninga”

Slika 2. Prikaz “leadinga”

Tekst Leading odreñuje veličinu vertikalnog prostora izmeñu linija teksta. Vizuelna hijerarhija Koncept vizualne hijerarhije igra važnu ulogu u svim oblicima grafičkog dizajna. Najvažniji tekst trebalo bi istaći i obratno. Korisnik bi trebalo da može da zaključi o informacionoj strukturi stranice na osnovu izgleda. Prema pravilima vizuelne hijerarhije prioriteti idu u gornji levi ugao, treba postići što veći kontrast teksta i pozadine i kontrasni fontovi: veća i deblja slova za važnije informacije. Vizuelni tok odnosi se na putanje kojima se oči čitaoca kreću kako pretražuju stranicu. Dobro dizajnirana vizuelna hijerarhija stavlja akcenat gledanja na najvažnije stvari na

Greatness is not found in possession,

power, position or prestige. It is

discovered in goodness, humility,

18

stranici - na najvažnije elemente. Vizuelni tok vodi oči od ovih mesta ka manje važnim informacijama. Prirodan tok čitanja je odozgo na dole i s leva u desno. Ako je stranica monotona korisnik će to po navici da radi. Svaka vizuelno - fokusna tačka na interfejsu će odvući pažnju čitaoca od uobičajenog napretka čitanja i gledanja stranice. Fokusne tačke su mesta koja u prvi mah privlače korisnika. Grupisanjem stvari postaju povezane. Kao i vizuelni tok i fokusne tačke, potrebno je i grupisanje i ravnanje kako bi se kreirala jasna vizuelna hijerarhija. Teorija grupisanja i ravnanja nastala je početkom dvadesetog veka, a njeni tvorci su Geštalt grupa psihologa. Oni su opisali nekoliko svojstava rasporeda koji su duboko usañeni u naš vizuelni system:

• Blizina – stavite stvari jednu blizu druge i gledaoci će ih povezati. Ovo je osnova za snažno grupisanje sadržaja i kontrola kod korisničkog interfejsa.

• Sličnost – ako su dve stvari istog oblika, veličine, boje ili orijentacije, gledaoci će ih takoñe povezati.

• Kontinuitet – naše oči nastoje da gledaju neprekidne linije i krive uobličene poravnatim manjim elementima.

• Zatvorenost – Grupe stvari često čine zatvorene oblike (pravougaonici i bela polja).

ZAPIS KARAKTERA U RAČUNARU. ŠTA JE TO TEKST?

Tekst ili dokument je "informacija namenjena ljudskom sporazumevanju koja može biti prikazana u dvodimenzionalnom obliku. Tekst se sastoji od grafičkih elemenata kao što su karakteri, geometrijski ili fotografski elementi ili njihove kombinacije, koji čine sadržaj dokumenta." (ISO-definicija). Iako obično tekst zamišljamo kao dvodimenzionalni objekat, u računarima se tekst predstavlja kao jednodimenzionalni (linearni) niz karaktera. Potrebno je, dakle, uvesti specijalne karaktere koji označavaju prelazak u novi red, tabulator, kraj teksta i sl. Računari su zasnovani na binarnoj aritmetici. Cele brojeve je moguće predstaviti u binarnom sistemu. Osnovna ideja je svakom karakteru pridružiti odreñeni ceo broj na unapred dogovoreni način. Ove brojeve zovemo kodovima karaktera (character codes). Pod kodnom stranom (Code page) tj. skupom karaktera (Character set, charset) podrazumevamo ureñenu listu karaktera predstavljenih svojim karakterskim kodovima. Koliko karaktera želimo da predstavimo u računarima? Tokom razvoja računarstva broj karaktera je postajao sve veći. Pošto je u početku razvoja englesko govorno područje bilo dominantno osnovno je bilo predstaviti sledeće karaktere:

• Velika slova engleskog alfabeta: A, B, ..., Z • Mala slova engleskog alfabeta: a, b, ..., z • Cifre: 0, 1, ..., 9 • Interpunkcijske znake: .,:;’+*-_ i slično • Specijalne znake: kraj reda, tabulator i slično.

Kako se podaci u računarima obično zapisuju bajt po bajt to se jedno slovo predstavlja jednim bajtom (8 bitova), tj. binarnim brojem sa 8 cifara. Na taj način, moguće je napraviti 28 = 256 kombinacija odnosno moguće je istovremeno predstaviti 256 različitih karaktera. Da bi tekst predstavljen u jednom računarskom sistemu bio pravilno interpretiran i u drugim sistemima, neophodno je da se svi sistemi pridržavaju istog pravila za mapiranje slova u brojeve. Reprezentacija teksta u memoriji računara obavlja se na sledeći način: Svako slovo abecede predstavlja se jedinstvenim brojem, npr: a = 97, b = 98, c = 99, d = 100, ... Tekst zauzima susedne memorijske lokacije; u njih se smeštaju brojevi koji odgovaraju nizu slova u tekstu.

19

Sedamdesetih godina su se pojavile tabele standardnih karakterskih kodova dovoljne za zapis pomenutih karaktera. Najpoznatiji su EBCDIC – IBM-ov standard, korišćen uglavnom na „mainframe“ računarima, pogodan za bušene kartice i ASCII – standard iz koga se razvila većina današnjih standard. ASCII - American Standard Code for Information Interchange je najpoznatiji standard za kodiranje znakova. ASCII u svojoj mapi od 256 karatera obuhvata : slova engleske abecede, slova specifična za zapadnoevropske jezike (ö, å, ...), specijalne znake, znake interpunkcije, oznake valuta ($, £, ...). ASCII omogućava reprezentaciju samo tekstova pisanih zapadnoevropskim jezicima Latinična slova specifična za istočnoevropske jezike (š, č, ř) nisu se mogla predstaviti u tekstu Karakteristike ASCII standarda ASCII je u osnovi sedmobitan (broj karaktera je 128). Karakteri se zapisuju tako što se u svakom bajtu bit najveće težine postavi na 0. To ostavlja prostor za novih 128 karaktera čiji binarni zapis počinje sa 1. Ovaj prostor se može popuniti na razne načine. Rešenje nije univerzalno, jer svakako na svetu postoji više od 256 različitih karaktera. Postavljeni su razni standardi dopunjavanja ovih 128 karaktera. Svim ovim kodnim stranama je zajedničko prvih 128 karaktera i oni se poklapaju sa ASCII. Ovako napravljene kodne strane obično omogućuju kodiranje tekstova na više srodnih jezika (obično i geografski bliskih). Nama su uglavnom važne kodne strane napravljene za centralno-evropske (Central European) latinice, kao i ćirilične kodne strane YUSCII raspored YUSCII je raspored koji je nastao na osnovu ASCII-ja. Odreñeni znaci u ASCII tabeli zamenjeni su specifičnim slovima srpske latinice. YUSCII nije ni meñunarodni ni domaći standard. Razmena YUSCII-kodiranog teksta je moguća. Prikaz YUSCII-kodiranog teksta nije moguć, jer proizvoñači fontova ne poznaju ovaj standard. Delimično rešenje je prepravka postojećih ASCII-kodiranih fontova, tako da se na mestima znakova [,],{,},@ nalaze Š,Ć,š,ć,ž. Kvalitet ovakvih fontova je često nezadovoljavajući. Izbacivanje zagrada i drugih interpunkcijskih znakova nije dobro rešenje. Predstavljanje ćiriličnog teksta nije predviñeno ni ASCII, ni YUSCII rasporedom. Promena pisma u srpskom tekstu (latinica → ćirilica) pomoću promene fonta (YUSCII latinični → YUSCII ćirilični) obezbeñuje “human-readable” tekst ali ne obezbeñuje “machine-readable” tekst. Standardni 8-bitni rasporedi: ISO (Linux): ISO 8859-1 (Western European) - (Latin1), ISO 8859-2 (Central European) - (Latin2), ISO 8859-5 (Cyrillic).

Slika 3. ISO 8859-1 (Latin1)

20

Microsoft (Windows): Code Page 1250 (Central European), Code Page 1251 (Cyrillic), Code Page 1252 (Western). Osnovna slova naše ćirilice podržana su u većini kodnih rasporeda. Sedmobitni kodni raspored koji podržava našu ćirilicu jeste JUS I.B1.003–S, koji se kao internacionalni standard zove i ISO IR–146. Osobenost osmobitnih kodnih standarda jeste stvaranje većeg broja različitih rasporeda. Postoji veći broj osmobitnih kodnih rasporeda koji podržavaju našu ćirilicu: ISO 8859–5, CP 855, CP 870, CP 1251, KOI 8 European, KOI 8 Unified i Mac Cyrillic. R Sa latinicom stvari stoje malo složenije. Problem nastaje kod upotrebe dvokarakternih slova „lj“, „nj“ i „dž“. U tom smislu jedino unikod podržava našu latinicu. Ostali, sedmobitni i osmobitni kodni rasporedi je ne podržavaju u potpunosti. Sedmobitni kodni raspored koji delimično pokriva naše latinične potrebe jeste JUS I.B1.002, odnosno ISO IR–141. Osmobitni kodni rasporedi koji delimično pokrivaju naše latinične potrebe jesu: ISO 8859–2, CP 852, CP 880, CP 1250 itd.

Slika 4. Windows 1250

Slika 5. Windows 1251

21

Unicode 8-bitni raspored može da obuhvati 256 različitih znakova, a promena fonta radi promene pisma nije dovoljno dobro rešenje. Upotreba novog rasporeda donosi mogućnost reprezentacije teksta koji se sastoji iz više pisama i udvostručene memorijske zahteve u odnosu na 8-bitne rasporede. Osnovna ideja Unicode rasporeda jeste da je on zamišljen kao 4-bajtni standard. Pri tom se koristi prvih 16 bitova (2 bajta) za reprezentaciju slova što znači da je moguće istovremeno predstaviti 216= 65536 slova a to je dovoljno za najveći broj postojećih jezika. Ostali prostor ostavljen kao proširenje za drevne jezike, celokupnu naučnu notaciju i slično. Kodiranje ideograma dalekoistočnih jezika je pretrpelo kompromise zbog ograničenog mesta. Unicode meñunarodni standard: ISO 10646 karaketriše se sledećim:

• Tekst koji koristi više pisama ima konzistentan izgled, • Ima podršku u savremenim operativnim sistemima: Windows NT, 2000,

XP,… 7, Linux, MacOS, • Ima podršku u savremenim grafičkim programima: Microsoft Office, Adobe

InDesign, Adobe Photoshop.

Kod nas se prvih 128 karaktera poklapa sa ASCII standardom, dok su sledećih 128 napravljeni tako da se poklapaju sa Latin1 standardom. Karakteri, glifovi, fontovi Grafička reprezentacija karaktera naziva se glif (glyph). Skup glifova nazivamo font (font ). Pismo (typeface) – porodica grafičkih znakova različitih tipova, stilova i veličina (npr. Helvetica, Times, Courier). Font je zbirka znakova iz neke porodice grafičkih oblika odreñenog stila i veličine (npr. Times Italic 12pt). Stil fonta može biti bold, italik,...a veličina (size) je štamparska jedinica mere veličine slova i meri se jedinicom point (1/72 deo inča, približno 0,35mm). Formati fontova koji koriste Unicode su TrueType i OpenType. Formati fontova koji ne koriste Unicode su Type 1 (PostScript). PostScript. Kreirala ga je kompanija Adobe 1982. Počinje da se koristi u grafičkim programima. Prvi format koji koristi geometrijski crtež koji može da se uvećava i smanjuje po potrebi. Ovi oblici su se rasterizacijom pretvarali u sliku željene rezolucije na štampaču. Nedostatak - fontovi ne mogu da se razmenjuju izmeñu Mac i Windows sistema. TrueType. Stvorila ga je firma Apple 1991. Sa TrueType fontovima je uveden unikod. To je standardni format koji ima za osnovu geometrijske crteže. Uključen u Mac OS 7, zajedno sa nekoliko osnovnih fontova (Times Roman, Helvetica, Courier). Microsoft ga je uvrstio u Windows 3.1, a u Windowsu 95 podržane sve kodne strane koje se koriste u Evropi. Open Type. Zajednički poduhvat dva giganta: Microsoft i Adobe. Nastao 1996. godine. Smeštanje TrueType i PostScript fontova u zajednički omotač koji se u operativnom sistemu i aplikacijama ponaša kao TrueType, dok je unutrašnja struktura fonta po želji PostScript ili TrueType. Karakteriše se kompatibilnošću izmeñu Mac i PC sistema. Mehanizam kodiranja slobodno dostupan, što je otvorilo mogućnost raznim proizvoñačima da izdaju fontove u OpenType formatu. Rasterizacija. Prvobitni fontovi definisani su pomoću piksela. U digitalnim fontovima slova su definisana vektorski, kao skup zatvorenih krivih linija koje oivičavaju površinu slova. Te linije su zapisane pomoću koordinata tačaka i krajeva njihovih tangenti. Vektorski zapis omogućava da se različite veličine slova dobijaju geometrijskim povećavanjem ili smanjivanjem postojećeg crteža.

22

Iako su slovni oblici vektorske krive, prilikom pojavljivanja slova na ekranu ili štampanja vektorski crtež mora da se pretvori u bitmapu, odnosno skup tačaka (piksela) na mreži čija je gustina odreñena rezolucijom izlaznog ureñaja – ekrana ili štampača. Proces u kome se geometrijski crtež pretvara u skup piksela naziva se rasterizacija. Utisak i lepota prikaza zavise od rasterizacije – dobija se čitljiviji i lepši rezultat za male rezolucije.

ZVUK

ZVUČNI SIGNALI

Zvučni signal predstavlja promenu pritiska vazduha kroz vreme. To su mehanički talasi koji se prostiru u vazduhu brzinom 340 m/s. Opseg frekvencija koju čovek čuje: 20 Hz -20 kHz (audio), glas je približno od 500 Hz do 2 kHz.

Amplituda zvuka je razlika izmeñu maksimalne i minimalne vrednosti signala. Što je amplituda signala veća, signal je jači. Govor je sposobnost čoveka da oblikuje glasove i da razlikuje i prepoznaje izgovoreno. RIFF formati RIFF je grupa formata za zapis mnogih tipova podataka, pre svega multimedijalnih (zvuka i videa). Najpoznatiji RIFF formati su WAVE, AVI, DIVX... Svi RIFF formati se sastoje od parčića (chunks). Svako parče ima svoj tip, koji se zapisuje pomoću 4 karaktera, za čim slede 4 bajta koji označavaju veličinu parčeta i zatim sam sadržaj. RIFF datoteka je sama za sebe jedno parče čiji sadržaj počinje oznakom tipa RIFF datoteka, a zatim nizom drugih parčića. WAVE format WAV spada u grupu RIFF formata i namenjen je isključivo za zapis zvuka. Zapis u WAV formatu se sastoji od parčeta (chunk) sa oznakom “fmt” i parčeta sa oznakom “data”. WAV format omogućava i nekoliko tipova kompresije, mada se najčešće koristi za zapis nekomprimovanog zvuka, tj. parče “data” sadrži PCM zapis.

23

Slika 6. WAV fajl format

Kompresija Problem sa WAV zapisom je, naravno, to što zauzima previše memorijskog prostora. Pošto je zvuk objekat koji se veoma nepredvidivo menja, većina algoritama kompresije koji se zasnivaju na ponavljanjima podataka (kao npr. algoritmi korišćeni u ARJ, ZIP) pokazuju loše rezultate. Zbog toga se pristupa primeni tzv. psihoakustičkih algoritama koji uglavnom spadaju u grupu „Lossy“ algoritama. Maskiranje U toku dana ne vidimo zvezde. Razlog je što je svetlost zvezda maskirana jakom svetlošću sunca. Većina algoritama za kompresiju zvuka se zasniva na sličnoj činjenici da će tihi zvuk u blizini mnogo glasnijeg biti skoro nečujan i da se na njegovo kodiranje ne isplati trošiti dragocene bajtove. Koji su zvuci dovoljno tihi? Ovaj podatak se najčešće dobija eksperimentima i to sa ljudima koji slušaju zvuke i daju svoj sud. Maskiranje se oslikava na frekvencijski bliskim zvukovima, odnosno vremenski bliski zvukovi se maskiraju. Premaskiranje kaže da se tihi ton koji se javi do 5 milisekundi pre glasnog neće čuti. Postmaskiranje ima još mnogo duži efekat i traje do 100 milisekundi posle završetka jakog zvuka. MPEG formati MPEG – Moving pictures experts group – Ekspertska organizacija koja je pod pokroviteljstvom ISO napravila nekoliko standardnih formata za zapis zvukova, filma i ostalih multimedijalnih sadržaja. To su sledeći formati:

• MPEG 1 – standard na kome su zasnovani formati kakvi su video CD i MP3 • MPEG 2 – standard na kome se zasniva digitalna televizija i DVD format • MPEG 4 – standard multimedije za fiksni i mobilni veb • MPEG 7 – standard za opisivanje i pretragu audio i vizuelnog sadržaja

Audio Layer-i Layer-i unutar MPEG čine oznake podstandarda koji se odnosi samo na zapis audio signala. Jedan od najpoznatijih MPEG-ovih audio layera je audio MPEG layer 3, ili pod drugim, čuvenijim imenom MP3. MP1 je skoro zaboravljen, dok je MP2 ostvario svojevremeno i neki uticaj dok nije potisnut layerom MP3. Audio layeri su meñusobno kompatibilni prema niže što znači da programi koji mogu da tumače MP3 mogu da tumače i ostale layer-e.

24

Neki od najpoznatijih audio formata koji se koriste na kompjuterima i na vebu su: Wav, AU, Real audio (RA), MP3 (MPEG audio), Quick time, liquid audio (tabela). MIDI .MID MIDI

format Wave .WAV Microsoft format za digital

audio Audio Interchange File Format .AIF Mac format za digital audio

(AIFF) audio CD .CDA Format zvuka na audio

CD Sun Audio .AU Sunov komprimovani digital

audio Windows Media audio codec .WMA Microsoft komprimovani

format MPEG Audio Layer 3 .MP3 Komprimovani format sve više u

upotrebi

Tabela 1. Audio formati

Za kompresovanje audio fajlova potrebna je specijalna kompresijska šema zvana kodek. Najpoznatiji audio kodeci su: Lame MP3 audio codec&exe, AC3Filter&Codec, Radium MP3 Codec itd. Postoji mnogo kodeka, ali su verzije MPEG-a posebno popularne za audio zapise. Alati za obradu zvuka Poznati programi za reprodukciju zvuka su Windows Media Player, RealPlayer, VLC media player. Poznati programi za obradu zvuka su SoundForge, WaveLab, Audacity, a kodeci PCM, GSM, Lame MP3 audio kodek.

RAČUNARSKA GRAFIKA

UVOD

Računarska grafika (engl. Computer graphics) obuhvata stvaranje, čuvanje i upotrebu modela i slika objekata. Modeli i objekti računarske grafike potiču iz različitih područja: prirode, nauke, inženjerstva, apstraktnih koncepata... Grafička umetnost počinje i završava se sa korisnikom ili kupcem. Izazov da se korisniku prikažu rezultati se prezentuje kroz boje pri svakom koraku. Računarska grafika predstavlja sintezu slika na osnovu računarskih modela stvarnih ili imaginarnih objekata. Obrada slike predstavlja analizu scene i rekonstrukciju modela objekata (engl. image processing). Obrada slike čini se zbog poboljšanja slike (engl. image enhancement) što podrazumeva razvoj i primenu tehnika poboljšanja kvaliteta slike i povećanja kontrasta kao i detekciju i prepoznavanje uzoraka (engl. pattern detection and recognition)

• otkrivanje standardnih uzoraka na slici (optičko prepoznavanje alfanumeričkih znakova) i

• analiza scene i računarski vid (engl. scene analysis and computer vision) - prepoznavanje i rekonstrukcija 3D modela scene na osnovu više 2D slika itd.

VEKTORSKA GRAFIKA

Vektor kao pojam u grafici označava liniju koja ima svoju dužinu i smer. Prema toj zakonitosti, linije vektora je moguće prikazati u koordinatnom sistemu zato što u osnovi imaju samo te dve važne vrednosti. Te vrednosti nisu fiksne. Vektorska grafika označava način "crtanja" pomoću tih vektorskih linija koje pak mogu kreirati vektorske objekte.

25

Svaka linija sadrži tri podatka: spomenute –dužinu i smer, kao i podatak o boji linije. U slučaju da te linije kreiraju neki zatvoreni objekat (početna tačka linije ujedno je i završna tačka), onda je četvrti podatak boja ispune. Sve se unutar vektorske grafike svodi na više jednostavnih matematičkih formula pri čemu računar "pamti" najmanje dva, a najviše četiri podatka, pa takve slike i crteži zauzimaju malo fizičkog prostora na medijumima za smeštaj podataka. Vektorski oblici se mnogo lakše pamte nego zahtevne rasterske (bitmapirane) slike. Definisanje 2D objekta Linije se iscrtavaju izmeñu tačaka kako bi kreirale kompleksnije forme koje se nazivaju polilinije. Ako se prva i poslednja tačka poklapaju onda se kreira zatvorena polilinija ili poligon. Ako se linije, koje formiraju poligon, ne seku meñusobno, onda one kreiraju jednostavni poligon. Konveksni poligon je poligon kod koga se linija koja spaja dve tačke unutar tog poligona nalazi u potpunosti unutar istog poligona. Konkavni poligon je polygon kod koga postoji mogućnost da se linija, koja spaja dve tačke unutar tog poligona, ne nalazi u potpunosti unutar istog poligona, nego jedan njen deo “izlazi” van. Kod kružnice se sve tačke nalaze na istom rastojanju od specifične tačke, tj. od centra. To je poluprečnik kružnice r (r=const). U Dekartovom koordinatnom sistemu jednačina kružnice sa centrom u koordinatnom početku ima oblik: Ako je broj stranica pravog pravilnog mnogougla a>15, onda je izgled takvog poligona “blizak” kružnici. Prednosti vektorske grafike

• Prednosti ovakvog načina crtanja nad rasterskom grafikom: • Ovako mala količina informacija omogućava mnogo manju veličinu

datoteke • Mogućnost približavanja (zoom) bez gubitka na kvalitetu • Sve informacije su zapamćene i mogu se kasnije menjati, to znači da

pomeranje, skaliranje, rotiranje, popunjavanje, itd., ne smanjuju kvalitet crteža kao kod rasterske slike.

• Idealna za logotipe preduzeća, geografske karte, i druge objekte, kojima je često potrebno menjati veličinu.

Veličina vektora menja se matematički promenom vrednosti dužine i smera. Kvalitet prikaza grafike se ne menja jer se automatski promenom veličine u računaru odvijaju matematičke kalkulacije kojima se zadržava isti kvalitet prikaza vektorskog crteža. Najbolji primer je tekst. Ograničenja vektorske grafike

• Kod prevelikog smanjivanja mogu nestati tanke linije. Tačnije, one će i dalje postojati ali se ne mogu odšampati ili prikazati na ekranu.

• Male greške mogu postati primetne kad se slika puno uveliča. • Mnogi programi omogućavaju da se u vektorskoj grafici koriste i rasterski

podaci (važe ista pravila kao i za sve ostale rasterske slike).

Formati za smeštaj vektorske grafike Vektorskim formatima mogu se smatrati svi oni namenjeni za smeštaj 3D grafike, različitih nacrta, šema, itd. To ih čini veoma kompatibilnim i lako razmenljivim meñu različitim programima, ali samo ako se odnose na jednostavne linije i ispune. Složene efekte, prelaze boja i sl. podržavaju samo matični formati programa u kojima radimo.

• .TTF. (true type font) najčešći format koji nosi podatke o fontu namenjenom pisanju tekstova na računaru.

2 2 2r x y= +

26

• .AI, .CDR, .FH, .XAR su matični formati programa za izradu i obradu vektorskih crteža i slika. To su redom: Adobe Illustrator, CorelDRAW, Macromedia Freehand i Xara-X.

Odlikuju ih relativno velike mogućnosti i velika svestranost jer je uz pomoć njih moguće napraviti gotovo sve što ulazi u područje rada sa vektorskom grafikom (izuzev 3D projektovanja). Veliki je problem jedino meñusobna komunikacija jer je gotovo nemoguće raditi na istoj datoteci u više njih odjednom. Formati za svestraniju primenu: .WMF- vektorski format datoteke pogodan za prenos vektorske grafike jer je veoma kompatibilan sa većinom programa koji imaju mogućnost izrade ili obrade računarske grafike, a nisu nužno primarno namenjeni za crtanje vektorima (npr.Word, Excel, PowerPoint itd.). Velika mana tog formata je što podržava samo najosnovnije boje bez prelaza. Novijim verzijama gore navedenih programa pojavio se poboljšani .WMF format pod nazivom .EMF. Dopušta primenu nekih jednostavnijih prelaza boja, ali još uvek nema većih prednosti nad .WMF formatom. .EPS i .PDF su veoma snažni vektorski formati koji podržavaju i smeštaj rasterskih slika. Veoma su pogodni za ispis i pripremu za procese štampanja jer podržavaju PostScript programski jezik koji je zaslužan za ubrzavanje i lakši rad pri prenošenju grafike sa ekrana računara na željeni medijum nekom od metoda reprodukcije grafike.

RASTERSKA ILI BITMAPIRANA GRAFIKA

Slike u računaru predstavljaju se matricom (mrežom) kvadratića zvanih pikseli. Svaki piksel ima svoju boju. Boja piksela je predstavljena u računaru odreñenim brojem bitova, a broj bitova za opis boje jednak je za sve piksele na slici. Za ovakav prikaz slika koriste se termini rasterska ili bitmapirana grafika. Rasterska grafika ili bitmapa je podatak koji predstavlja pravougaonu mrežu piksela ili obojenih tačaka, na nekom grafičkom izlaznom ureñaju kao što je monitor ili papir. Svaka boja pojedinog piksela je posebno definisana tako da npr. RGB slike sadrže tri bajta po svakom pikselu - svaki bajt sadrži jednu posebno definisanu boju. Rasterska grafika je "crtanje“ pomoću mozaika piksela pri čemu svaki piksel posebno nosi informaciju o boji koju reprodukuje. Ta informacija nije fiksna, dakle moguće ju je menjati. Veličina crteža ili slike dobijene na ovaj način najviše zavisi od broja piksela koji je čine. Kao veoma bitan pojam unutar grafičke industrije javlja se rezolucija, a označava broj piksela na nekoj odreñenoj veličini. Kvalitet jedne rasterske slike odreñuje ukupan broj piksela (rezolucija) kao i broj vrednosti za svaki pojedinačni piksel (dubina boje). Ako je dubina boje veća, više se nijansi može prikazati, to znači da je slika bolja a prikaz je verodostojniji. Slike zahtevaju mnogo memorije, zbog toga se koriste razne vrste sažimanja (kompresije). Bitmapa (bmp) je nesažeta datoteka koja ne koristi nijednu vrstu kompresije. Slike u tom formatu su veoma velike. Za razliku od BMP formata mnogo popularniji i češće korišćeniji je Jpeg (jpg) format koji sažima sliku a pri tom se ne primećuje gubitak u kvalitetu. Rasterska slika se ne može povećati na veću rezoluciju bez gubitka kvaliteta, što nije slučaj sa vektorskom grafikom. Rasterska grafika je praktičnija od vektorske grafike za fotografe i obične korisnike. Vektorsku grafiku koriste grafički dizajneri i DTP ureñivači (prelamači). Raster rezolucija se meri DPI jedinicama i govori nam koliki je kvalitet grafike. Nedostaci rasterske grafike

• Računska složenost (zbog diskretizacije slikovnih prikaza objekata) • Diskretna narav slike (zbog zrnaste strukture slike, kose i zakrivljene crte

su nazubljene ili stepeničaste)

27

Od rastera do vektora i nazad Skenirani logotip nekog preduzeća, praktičniji bi bio kao vektor, kako bi mogla da mu se menja veličina bez gubitka kvaliteta. Postupak pretvaranja nije nimalo jednostavan. Programi tipa Corel i Adobe Illustrator imaju ugrañene alate za vektorizaciju. Vektorska grafika mora se konvertovati u rastersku kako bi bila postavljena na Veb sajt. Svi programi za vektorsko crtanje imaju ovu mogućnost i za razliku od prethodnog slučaja ovde ne postoje nikakvi problemi. Tipovi rasterskih slika Tipovi rasterskih slika su sledeći:

• 1 bitne bitmape (jednobojne, monohromatske). Jednotonski crtež ili tekst gde postoje samo dve moguće vrednosti - crna i bela (princip rada digitalnog ureñaja; 1 - bela, 0 - crna)

• 8 bitne bitmape (u sivoj skali ili u paleti (256 boja). Višetonska, crno - bela slika, ili jednostavna koloristična slika odrañena sa najviše 256 boja.

• 16 bitne bitmape (65 536 mogu mogućih boja). Rasterske slike koje se danas sve reñe susreću (korišćene pre desetak godina – nemogućnost tadašnjih grafičkih kartica instaliranih na računarima da prikažu veći broj boja).

• 24 bitne bitmape (True color ili 16 777 216 boja). Obuhvataju sav potreban broj boja za prikaz fotorealističnih slika na računaru u RGB modu. Danas se najčešće koristi za prikaz slika na ekranu.

• 32 bitne bitmape (slike u punoj CMYK boji, pri čemu se svakoj od CMYK boja dodaje po 8 bita 8x4=32). Obuhvataju višebojne slike namenjene štampi, ili bilo kakvoj reprodukciji pri kojoj se koriste četiri osnovne komponente za dobijanje slike (cyan, magenta, yellow i crna komponenta). Izgledom se na ekranu ne razlikuju mnogo od 24-bitnih bitmapa.

Formati za smeštaj rasterske grafike .CPT- CorelPHOTO-PAINTdatoteke podržavaju sve dubine boja, sve vrste slika, negubljivo sažimanje veličine datoteke, čuvanje slika u slojevima, ali zauzimaju mnogo mesta na medijima za smeštaj podataka. .PSD - Adobe Photoshop datoteke podržavaju sve dubine boja, čuvaju slike svih drugih datoteka, takoñe imaju negubljivo sažimanje, do 100 slojeva slika u jednoj datoteci. Formati za smeštaj rasterske grafike. BMP Ekstenzija: BMP; Kompresija: RLE ; Održava ga: Microsoft Corporation. BMP je standardni format za bitmapiranu grafiku korišćen u Windowsu bez mogućnosti su rada u slojevima. Ne ističe se posebnim kvalitetima. Podržava dubine piksela 1, 4, 8, 24 i 32 bita. Podržava RLE algoritam kompresije podataka za slike sa 4 ili 8 bita po pikselu. BMP fajlovi čuvaju grafiku u formatu poznatom kao „device-independent bitmap“ (DIB) - u njemu su boje piksela specificirane u formi nezavisnoj od metoda koje krajnji izlazni ureñaj (monitor ili štampač) koristi za predstavljanje boje. Formati za smeštaj rasterske grafike. TIFF Ekstenzija: tif, TIFF; Kompresija: bez kompresije, PackBits RLE, LZW, JPEG, ZIP; Održava ga: Adobe Systems. TIFF (Tagged Image File Format) je format koji koristi lossless kompresiju podataka ali istovremeno uspeva da sačuva kvalitet slike. TIF daje prilično male datoteke sa obzirom na kvalitet koji pruža. Podržava sve dubine boja i čuvanje u slojevima. Optimizovan za procese štampe, od pripreme za štampu do ispisa na različitim pisačima (podržava prikaz slike u punom CMYK modelu boja). Praktično svi desktop skeneri mogu da proizvedu TIFF slike. Formati za smeštaj rasterske grafike. PCX Ekstenzija: PCX, PCC; Kompresija: RLE (Run Length Encoding) – metod kompresije bez gubitka. PCX je originalno razvijen u ZSoftu, za njegov program PC Paintbrush. Jedan od

28

najstarijih bitmap formata – pojavio se ranih osamdesetih godina. Prepoznaju ga praktično svi ikada napisani grafički programi. PCX fajlovi mogu čuvati podatke o slikama sa dubinom piksela 1, 4, 8 i 24 bita. Podaci su uvek komprimovani. Algoritam najbolje rezultate daje u kompresiji crno-bele grafike i jednostavnih crteža. Podržava ga većina optičkih skenera, fax programa i sistema stonog izdavaštva. Formati koji se koriste za štampu su: TIF, BMP, EPS, PICT, WFM EPS (engl. Encapsulated Postscript) koristi postskript jezik štampača koji je razvila firma Adobe. Ograničenje je da štampač mora podržavati postskript jezik. U ovom formatu se ne koristi kompresija tako da su datoteke prilično velike. PICT (Macintosh Picture File) je standardni format za Macintosh platforme. Za njega je zanimljivo da može biti vektorski ili rasterski format. Ne preporučuje se za korišćenje, osim na Mac platformama. WFM (Windows Meta File) je ekvivalent PICT formatu, samo za Windows platforme. Takoñe podržava i vektorski i rasterski oblik grafike. Formati PCX, TIFF i BMP su široko zastupljeni u obradi slika, uključujući skeniranje, prenos meñu platformama i njihovo korišćenje u stonom izdavaštvu. Sva ova tri formata sadrže podatke koji su ili nekomprimovani, ili se komprimuju bez gubitaka, što ih čini dobrim pri editovanju ali ih diskvalifikuje za korišćenje na Vebu. Dakle, zajednička osobina gore navedenih formata je negubljivost kvaliteta pri smeštaju grafike, pa zbog toga veoma velik prostor zauzimaju na medijima za smeštaj podataka. Postoje slučajevi kada je nemoguće raditi sa tako velikim datotekama. Iz tog razloga postoje formati čiji je zadatak smanjiti veličinu datoteke, ali se to u većini slučajeva odražava na kvalitet slike. Neki od takvih tzv. "destruktivnih" formata za prikaz rasterske grafike su: JPEG ili JPG i GIF. Danas postoji vrlo veliki broj različitih grafičkih formata. Za koji ćemo se format opredeliti zavisi od namene i sadržaja fajla, operativnog sistema, softvera sa kojim raspolažemo,... Prostor potreban za zapis podataka o slici, bez obzira koji format koristimo, može se približno izračunati po formuli:

potreban prostor = broj piksela x dubina piksela Kompresija podataka predstavlja način da se ista informacija zapiše sa manje zauzetog prostora na disku. Postoji veliki broj algoritama kompresije u zavisnosti od sadržaja podataka i namene fajla. Kod kompresije bez gubitaka dobija se fajl koji će posle dekompresije biti identičan originalu. Kompresija sa gubicima žrtvuje neke podatke u fajlu, tako da se po dekompresiji dobija fajl koji nije jednak originalu (što obično nije vidljivo za oko). Najpoznatija tehnika kompresije sa gubicima - JPEG Formati GIF, JPEG i PNG su pre svega namenjeni korišćenju na Vebu, jer zahvaljujući moćnim tehnikama kompresije koji se u njima koriste, troše manje prostora za podatke o slikama, pa se lakše šalju preko mreže. Ova tri formata imaju još jednu važnu osobinu koja ih dodatno kvalifikuje za Veb, a to je mogućnost progresivnog prikaza. Format GIF Ekstenzija: GIF; Verzije: 87a, 89a; Kompresija: LZW (engl. Lempel-ZivWelch); Održava ga: Compuserve; Koristi algoritam za kompresiju podataka, bez gubljenja na kvalitetu. Ovaj algoritam omogućava istovremeno dekompresovanje i učitavanje datoteke. GIF-ovi su odlični za tehničke crteže, crno-bele slike, dugmad, grafiku zasnovanu na tekstu ili bilo koja grafika koja ne zahteva 24-bitnu paletu boja. GIF (engl. Graphics Interchange format) je stari format, koji je i danas popularan za prikaz jednostavnih slika na Vebu - sa njim se ne gube detalji ali je ograničen na 256 boja (dubina piksela 8 bita) Format GIF koristi indeksnu boju, što ga znatno razlikuje od formata RGB slika. Sve boje koje na slici postoje zadaju se u posebnoj tabeli boja - paleta ili CLUT (engl. Color Lookup Table, tabela pretraživanja boja). Ova tabela sadrži do 256 ulaza, što ograničava broj

29

boja koje na slici mogu postojati na 256. Za svaki piksel slike se dalje ne definiše boja, nego se zadaje ulaz (broj od 0 do 255) u tabelu. Jednostavne slike se u formatu GIF odlično komprimuju, tako da se dobijaju mali fajlovi. GIF fajlovi se kompresuju horizontalno. GIF podržava mnoge veoma korisne osobine:

• „Interlace mod“ • Transparentnost • GIF Animacije

GIF slike mogu se snimiti u „interlaced“ formatu, koji proizvodi iluziju bržeg učitavanja tako što se prvo prikazuje slika manjeg kvaliteta a potom se postepeno unapreñuje dok se konačno ne učita kompletna slika u punoj rezoluciji GIF fajlovi podržavaju transparentnu pozadinu. Animirani GIF-ovi u sebi sadrže više slika pa se naizmeničnim ponavljanjem tih slika dobija mala animacija. Jedna dobra animacija je efikasnija od deset prilično dobrih slika. Svojstvo preplitanja stvara iluziju bržeg prikazivanja grafike. Posebno je korisno na Vebu. Podaci u formatu GIF su organizovani red po red piksela, od vrha ka dnu slike. Slika se prikazuje tempom koji je diktiran brzinom prenosa slike kroz mrežu, tako što se redovi prikazuju sekvencijalno, od vrha ka dnu. U trenutku kada je pristiglo 50% podataka, na ekranu će se videti samo gornja polovina slike. Tek kada stignu svi podaci, vidi se i dno. Prepleteni GIF slika brzo preko celog ekrana. U prvom prolasku prikazuje se samo oko 12.5% slike (svaki osmi red); u drugom prolasku još 12.5% podataka (svaki četvrti red); u trećem prolasku svaki drugi red. U četvrtom, poslednjem koraku, prikazaće se i ostalih 50% podataka slike. Korisnik može steći dosta dobru predstavu o celoj slici već kada je 30-50% informacija primljeno. Sve bitmapirane slike u računaru predstavljene su matricom piksela, koja je uvek pravougaonog oblika. Osobina transparentnosti omogućava da slika ne mora da ima pravougaonu konturu. Ako neki piksel slike proglasimo pozadinskim (providnim, transparentnim), on se neće na ekranu videti, nego će se kroz njega "provideti", tako da će se umesto slike videti odgovarajući deo pozadine na kojoj slika leži. Transparentni GIF je jednostavno realizovati. Za transparentne piksele u CLUT-u se rezerviše jedan ulaz, koji predstavlja "providnu boju". Animacije se prave kao serija GIF slika, koje se prikazuju jedna za drugom i na taj način stvaraju efekat pokreta. Kreiranje ovakvih datoteka je prilično jednostavno tako da su one široko zastupljene na Veb-u kao baneri (služe u reklamne svrhe) ili drugi grafički elementi kojima je svrha da privuku pažnju. Format JPEG JPEG (engl. Joint Photographic Experts Group - ekstenzija .JPG). JPEG nije format, nego jedna vrlo moćna tehnika kompresije grafičkih podataka. Slike JPG formata pamte 16 miliona boja, uz delimičan gubitak informacija. JPEG koristi osobinu ljudskog oka da slabije uočava razlike u nijansama boje nego u intenzitetu svetlosti. Zato najbolje komprimuje fotografije u punoj boji. Pravi je izbor za veće slike sa puno boja. JPEG dobro pakuje skenirane slike uz minimalni gubitak kvaliteta. Kompresija .JPG slika je tzv. "gubeća" tj. što je kompresija veća kvalitet slike je lošiji. Bez (za ljudsko oko) vidljivih gubitaka u kvalitetu slike, kompresijom se drastično smanjuje veličina fajla JPEG slike se koriste kod velikih arhiva slika (u punoj boji ili u nijansama sive) i za prikaz na Veb stranama. Kod štampanja grafike koristiti formate koji upotrebljavaju „lossless“ tehniku kompresije, koja čuva kvalitet slike npr.TIF. JPEG fajlovi ne podržavaju transparentnu pozadinu. Najslabiji je kod jednostavnih crteža sa oštrim ivicama i kod teksta, gde se i pri manjem intenzitetu kompresije pojavljuju vidljivi defekti – artefakti. Ponovna obrada JPEG slika povećava gubitke zbog kompresije/dekompresije pa konačna slika može biti izuzetno lošeg nivoa kvaliteta. Uvek raditi na originalu! Pri snimanju grafike može se odreñivati nivo kompresije koji želimo. Obično je to dato u skali 1 - 10 ili procentualno 1% - 100 %.

30

Progresivni JPEG se koristi da bi se stvorio utisak bržeg prikazivanja slike. Pomoću progresivnog JPEG-a, prvo će se prikazati slika niskog kvaliteta. U toku nekoliko koraka, ta slika postaje sve jasnija. Za razliku od GIF- ovog preplitanja, koje se realizuje red po red, progresivni prikaz JPEG je dvodimenzionalan. GIF i JPEG Najbolje rešenje za dobijanje kvalitetne slike za prikaz na Vebu koja u sebi sadrži tekst, slike i animacije, postiže se podelom slike na više delova (deo sa fotografijama u JPEG formatu a sa tekstom ili animacijom u GIF formatu) i njihovim kasnije slaganjem pomoću odgovarajućih HTML tagova. Ovako se dobija maksimalno dobar kvalitet slika minimalne veličine PNG format Ekstenzija: PNG; Održava ga: Tom Boutell. PNG (engl. Portable Network Graphics, prenosiva mrežna grafika), je noviji format za bitmapiranu grafiku, nastao u pokušaju da se prevaziñu zakonski problemi vezani za korišćenje GIF-a (odnosno, LZW algoritma). Osim za prikaz slika na Vebu, dobar je i za editovanje slika, jer se njegovi podaci komprimuju bez gubitaka. PNG format podržan je od strane novijih Veb čitača koji kombinuje funkcionalnosti gif-a i jpeg-a. Podržava „grayscale“, 8-bitne, 24-bitne i 48-bitne vrste slika. Korišćen je napredan „losseless“ algoritam kompresije, koji daje odlične rezultate. Nivo kompresije se može menjati, a korišćenjem dodatnih filtera za kompresiju (može ih biti pet) postižu se odlični rezultati u smanjivanju veličine komprimovane datoteke Postoje dva tipa PNG formata: PNG - 8, sadrži 8 bitnu informaciju o bojama (slično GIF-u) - ne podržava animaciju ali podržava transparentnost i to mnogo bolje nego GIF. Varijabilna transparentnost: za razliku od GIF formata, gde piksel može biti transparentan ili ne, PNG uvodi 254 nivoa transparentnosti PNG - 24, sadrži 24 bitnu informaciju o bojama (slično JPEG-u) - ekvivalentan JPEG-u i poseduje sličnu kompresiju. Metod preplitanja kod PNG-a je konceptualno sličan GIF-ovom preplitanju, a vizuelno podseća na progresivni JPEG prikaz (dvodimenzionalan je).

BOJE

TALASNE DUŽINE I VIDLJIVI SPEKTAR

Svetlost je vidljivi deo elektromagnetnog spektra i “obično” se sastoji od “talasa”. Svaki talas je definisan svojom talasnom dužinom – to je rastojanje od jednog do drugog maksimuma. Ljudsko oko registruje boje u regionu od oko 400nm do 700nm. Vidljiva svetlost je svetlost koju ljudsko oko može da uoči.

Slika 7. Spektar vidljive svetlosti

31

Bela svetlost nije svetlost jedne boje ili frekvencije, već je sastavljena od mnogih frekvencija boja. Kombinacijom bilo kojih boja u vidljivom spektru proizvodi se svetlost koja je obojena ili bela. Da bi se videla crvena boja objekta, mora postojati izvor svetlosti npr. sunce. Objekat prima svetlosni talas, emituje svetlosni talas crvene boje, ili upija spektar plave i zelene boje a reflektuje spektar crvene boje gde je u našim očima prepoznajemo. Svetlost se, u zavisnosti od uticaja na objekte na koje pada, može podeliti na:

• Reflektovanu svetlost • “Propuštenu” svetlost • Emisionu svetlost

Slika 8. Vrste svetlosti: a) Reflektovana b) “Propuštena” c) Emisiona

Reflektovano svetlo, propušteno svetlo ili emitovano svetlo se sreću u literaturi i u svakodnevnom životu kao boja objekta. Postoji onoliko različitih boja koliko ima različitih površina na objektu, jer svaki objekat utiče na svetlost na poseban (jedinstven) način. Šabloni talasnih dužina koji se vide na objektu se nazivaju spektralni podaci objekta. Spektralni podaci su posledica ispitivanja ili merenja svake talasne dužine. Kako vidimo boje? Objekat koji reflektuje sve boje spektra je bele boje, a objekat koji ne reflektuje ni jednu boju, tj. upija sve boje spektra, crne je boje. Kada bela svetlost padne na leña papagaja na slici, njegovo perje reflektuje plavu boju upijajući sve ostale (vidimo da papagaj ima plavo perje). Crvena, plava i zelena se nazivaju osnovnim bojama zato što zajedno proizvode belu svetlost. Ovaj model formiranja boja u fizici je aditivni model. Bela i crna nisu boje, jer u odsustvu bilo kakve svetlosti bela postaje crna (zato u mraku ne vidimo ništa). Naše oko registruje svetlost i maksimalni osvetljaj jednakim intenzitetom sve tri komponente (crvena, zelena i plava) kao belo. Odsustvo bilo kakve svetlosti oko registruje kao crno, a sve meñuvrednosti svetla, jednakog intenziteta osnovnih komponenti registruje kao sivo. RGB model RGB (Red, Green, Blue) - predstavlja aditivni kolorni model koji se koristi u prikazu slika na ekranu. U ovom modelu se sa po 8 bita predstavljaju komponente crvene, zelene i plave boje, koje se kombinuju da bi se prikazala boja piksela. Na ovaj način, na ekranu se može predstaviti 224, ili približno 16,7 miliona različitih boja. Model koristi boje svetlosti - što se više boje dodaje, to je ukupna boja svetlija. Kako rade ureñaji? Monitori i skeneri koriste osnovne boje za dodavanje zbog toga što su emisioni ureñaji oni direktno dodaju crvenu, zelenu i plavu komponentu svetla tamnoj pozadini.

32

Štampači moraju i da prikažu boje na papiru, tako da oni rade sa reflektovanim svetlom. Da bi ovo uopšte moglo da se odradi štampač mora da radi sa osnovnim bojama za oduzimanje – Cyan, Magenta, Yellow. Mešanje pigmenata u bojama Tri osnovne boje koje se koriste kao pigmenti za spravljanje boja, lakova i premaza su žuta, cijan i magenta (izvedene boje svetlosti). Mešanje pigmenata se razlikuje od mešanja osnovnih boja svetlosti, tako što jednako pomešane sve tri osnovne boje svetlosti daju belu boju, dok jednako pomešana sva 3 osnovna pigmenta daju smeñe pigmente: smeñe-crnu boju, što znači da pigmenti oduzimaju boje od bele svetlosti. Ovo mešanje pigmenata naziva se subtraktivnim procesima. CMYK model CMYK model koristi se kod štampanja. Mešanjem tri primarne boje cijan, magenta i žuta kojima je pridodata i crna kao četvrta boja. Slike koje su pripremljene za štampu u punoj boji mogu se predstaviti u CMYK modelu boja, gde se za svaku od četiri komponente odvaja po 8 bita informacije po pikselu. Dubina piksela u ovom slučaju je 32, što bi trebalo da omogući čak 232 različitih boja. Tehnika štampe se zasniva na CMYK modelu, gde se boje koriste kao pigmenti - što se više boje stavi, dobija se tamnija boja. Tehnika štampe je “prljava” tehnika, pa je broj boja koje se mogu odštampati manji i od broja boja koje se RGB modelom mogu prikazati na ekranu. HSV model HSV (engl. Hue, Saturation, Value), a koriste se za opisivanje boja. Ovaj sistem je poznat kao Munsell Color System, (nazvan po američkom slikaru Albert H. Munsell) koji je radio u timu od pet umetnika na organizovanju sistema boja za njihovo bolje razumevanje. Munsell Color System usvojen je od strane američkog odseka za standarde i poznat je kao Inter-Society Color Council - National Bureau of standards (ISCC NBS) system. Ovaj model se koristi kod većine grafičkih programa. H(Hue)SV - nijansa se može opisati kao predstavljanje pozicije boje u točku boja, u kome su osnovne i sekundarne boje i njihove kombinacije. To su boje iz spektra boja kao što su crvena, plava, zelena, žuta itd. - čista dugina boja sa točka boja. Heksadecimalna vrednost boje na HSV točku boja predstavlja istu boju u heksadecimalnom formatu za RGB sistem boja. HS(Saturation)V - predstavlja intenzitet boje, tj. odnosi se na dominaciju nijanse u boji. HSV(Value) - ukupna svetloća boje (intenzitet osvetljenja) - govori koliko će boja biti tamna ili svetla. Svetla boja dobija se mešanjem boje sa belom (TINT) a tamne boje dobijaju se mešanjem boje sa crnom (SHADE). Boja pomešana i sa crnom i sa belom prepoznaje se kao ton. Optimalni zapis “Što vernija slika, sa što manje zauzetog prostora na disku”. Dva osnovna elementa koja utiču na sadržaj i veličinu grafičkog fajla su broj piksela slike i dubina piksela. Odluku o broju piksela slike donosimo u zavisnosti od namene slike – od ureñaja na kome će se prikazivati. Rezolucija monitora

33

Rezolucija ili rezolucija slike je gustina piksela na ekranu. Ona može varirati od 50 piksela/inču do 85 piksela/inču mada je opšte prihvaćeni standard 72 piksela/inču. Raster dimenzija ili rezolucija ekrana predstavlja veličinu slike koju monitor može da prikaže. Ona se izražava u broju piksela po širini i dužini koji mogu da stanu na ekran i zavisi od monitora. Najčešća rezolucija koju standardni 14" (četrnaest inčni) monitori podržavaju su od 640x480 do 1024x768. Veći monitori 17 " i 21" podržavaju i veće rezolucije (npr.1600x1200). Rezolucija štampača Rezolucija štampača se definiše brojem tačaka štampe (dots) po dužnom inču. Tačka štampe je ekvivalent ekranskog piksela. Današnji štampači imaju svoje standardne mere maksimalnog kvaliteta slike, koje su najčešće 300 ili 600 tačaka po inču. Slika se na ekranu (štampaču) prikazuje u svojoj normalnoj veličini tako što se piksel slike predstavlja pikselom ekrana (odnosno tačkom štampe). Rezolucija štampača je nekoliko puta veća od rezolucije ekrana. Menjanje veličine slike. Grafički softver može menjati veličinu ili rezoluciju neke slike. Većinom se to koristi kod smanjivanja slika koje su velike rezolucije (npr. zbog Interneta). U ureñivanju grafike nekih novina ili časopisa zahteva se uvećavanje slike: Za obični A4 papir koji se koristi u časopisima potrebna je računarska rezolucija od 2480x3508 (veličina takvih dokumenata (jedne stranice) iznosi skoro 50 Megabajta u svom originalnom formatu). Pomoću grafičkih programa moguće je odseći deo jedne slike koji će kasnije i sam postati nezavisna slika. To se koristi i kod odsecanja neželjenog dela slike. Pomoću ove tehnike se poboljšava kompozicija slike. Grafički programi mogu promeniti odreñenu boju nekog predmeta na slici, podešavati položaj slika i spajati više nezavisnih slika ili delova slika u jednu celinu. Adobe Illustrator - Program za crtanje zasnovan na vektorskoj grafici. Razvijen je za Apple Macintosh sisteme još 1986. kao prvi komercijalni Adobe softver za kućnu upotrebu sa PostScript fajl formatom. Adobe Illustrator je proizvod kompanije Adobe PhotoShop. Primarna funkcija PhotoShop-a je editovanje fotografija i slika, dok je primarna funkcija Illustratora crtanje. Adobe Photoshop - Adobe Photoshop (Adobe Systems) je softver namenjen za rastersko obrañivanje digitalnih fotografija. Koristi se na Microsoft Windows i Apple operativnim sistemima. Prva verzija ovog profesionalnog alata je izašla u februaru 1990. godine i to samo na Mac OS platformi. Korisnici Windowsa su tek s verzijom Photoshop 2.5, koja je izašla u novembru 1992. godine, dobili pristup ovom programu. Popularnost Photoshopa je dovela do stvaranja nove Internet skraćenice - fotošopovati (engl. to photoshop something). Reč se koristi u smislu izmene fotografije za pogodne svrhe (Internet, e-mail, reklama). Sistemski zahtevi za Windows platformu

• Intel® Pentium® 4 or AMD Athlon® 64 procesor od 1,8 GHz ili brži • 1 GB RAM-a • 1 GB dostupnog prostora na čvrstom disku za instalaciju. Tokom instalacije

potreban je dodatni slobodni prostor (instalacija na fleš ureñajima za skladištenje nije moguća)

• DVD-ROM jedinica • 1024x768 display (1280x800 preporučeno) sa grafičkom karticom koja

podržava 16-bitne boje i 256MB VRAM-a. • Neke procesorski ubrzane funkcije zahtevaju grafičku podršku za Shader

Model 3.0 i OpenGL 2.0 • DVD-ROM jedinica • QuickTime 7.6.2 softver za multimedijalne karakteristike

34

BOJE U DIZAJNU

Preko 80 % vizuelnih informacija je povezano sa bojom. Previše boja može da razdraži, premalo boja da izazove dosadu. Modna kompanija „Benetton“ je poznata po upotrebi spektra jakih boja u svojim marketinškim kampanjama. Poruka „United Colors of Benetton“ govori kupcima da u Benetonovom asortimanu bogatom bojama, svako može pronaći nešto za sebe.

• Bela boja - u primenjenoj simbolici, povezana je sa profesionalizmom i poslovnošću. U dizajnu bela naglašava druge boje. Koristi se na veb sajtovima da sugeriše jednostavnost kod visoko tehnoloških proizvoda. Većina najposećenijih sajtova ima belu pozadinu

• Crna je boja autoriteta i moći. U grafičkom dizajnu, crna ostavlja utisak prefinjenosti, misterioznosti i elegancije. U veb dizajnu, crna boja pruža osećaj perspektive i dubine. Ipak, crna pozadina umanjuje čitljivost na veb sajtovima. Korisna je za veb sajtove umetničkog i fotografskog sadržaja gde ističe druge boje.

• Plava boja - najčešće je korišćena boja u poslovnom dizajnu. Korporativnu plavu boju koriste velike kompanije, kao na primer Microsoft. Odlično leži veb sajtovima firmi koji reklamiraju poslovne proizvode, tehnologiju, medicinske proizvode, čistoću, vazduh, vodu, more i motorna vozila. Preteranom upotrebom plave boje u dizajnu može stvoriti utisak hladnoće.

• Braon boja - suviše je niskog intenziteta da bi se široko koristila u veb dizajnu bez teksture ili druge boje koja bi je istakla. Koristi se u restoranima ili pri reklamiranju hrane, kao na primer kafe ili kolača. Proizvodi koji se prave od drveta, kao što je nameštaj, se prirodno predstavljaju braon bojama. Braon obeležava sigurnost i pouzdanost.

• Zelena je najpopularnija boja za dekoraciju jer ostavlja snažan utisak. U umetnosti i dizajnu je veoma zahvalna, ali ne treba preterivati sa velikim obojenim površinama. Slike postavljene na zelenoj pozadini veb sajta izgledaju udaljene. Zelena se upotrebljava u dizajnu da ukaže na sigurnost kada se reklamiraju npr. lekovi.

• Siva boja u dizajnu, predstavlja ekskluzivnost. Vezuje se za kreativnost i inspiraciju. Tehnički, može da se koristi kao podloga za elemente koje želimo istaći. Može da se pomeša sa drugim bojama i da dobije toplu, odnosno hladnu nijansu. To je zato što ljudsko oko detektuje i najmanji stepen mešanja boja.

• Srebrna boja često označava visoku tehnologiju. Značenja srebrne boje su glamuroznost, izuzetnost, industrija, intuicija, komunikacija, savremenost... Da bi se stvorio visoki tehnološki izgled na veb sajtovima firmi, srebrnu treba koristiti sa drugim bojama. Srebrna boja (192, 192, 192) dobro izgleda na vebu kada je kombinovana sa zlatnom i belom.

• Zlatna boja - Upotrebom zlatne u dizajnu komuniciramo prosvetljenost, mudrost, bogatstvo, pobedu, novac, moć, sreću, smisao, nauku, ispunjenje, koncentraciju i visoki kvalitet. Isto kao i srebrna, ni zlatna boja (255, 215, 0 ) ne može da se dobije direktno iz palete boja, zato što sadrži odsjaj. U poslovnom dizajnu se koristi da prikaže novac i moć, odličnu investiciju.

• Crvena je najtemperamentnija boja. Ima veoma visoku vidljivost i zbog toga se saobraćajni znakovi opasnosti, štop svetla i vatrogasna oprema farbaju u crveno. U dizajnu i umetnosti koristi se kao akcentna boja, da bi se na nešto stavio fokus i ostavio poseban utisak. Ova boja "iznosi" tekst i slike u prvi plan i teži da ih pomeri, čineći objekte da izgledaju veći i bliži.

• Žuta je veoma efektivna kod privlačenja pažnje, tako da se upotrebljava da istakne najvažnije elemente veb dizajna na sajtu. Ako upotrebljavate svetlo žutu u dizajnu, vodite računa da može nestati u beloj. Obično joj je potrebna tamna boja da je istakne. Često se bira da reklamira dečije proizvode.

• Ljubičasta boja podrazumeva luksuz i imućnost. Simboliše uzvišenost, dostojanstvo, visok položaj, poštovanje, otmenost, prefinjenost, kraljevstvo, moć, elegantnost, uticaj, skriveno znanje, ponos, visoke ambicije, plemenitost... Može biti veoma efektivna za reklamiranje dečijih proizvoda.

35

• Narandžasta je topla boja koja proizvodi entuzijazam i vibracije. Održava budnost i koncentraciju. Narandžasta pozadina na veb sajtovima pomaže slikama da izgledaju bliže i veće. U dizajnu, narandžasta je pruža osećaj toplote. U restoranima narandžasta boja stimuliše apetit, a narandžasti dekor ohrabruje i pospešuje prodaju.

ADOBE PHOTOSHOP CS5

UPOZNAVANJE SA PROSTOROM ZA RAD

Prvi put kada pokrenete Adobe Photoshop CS5, pod uslovom da niste menjali predefinisana podešavanja (default settings), trebalo bi da na vašem ekranu vidite raspored panela i menija isti kao i na slici ispod. U slučaju da je vaš radni prostor izmenjen, a da želite da on izgleda isto kao na slici, preduzmite sledeće korake: Window>Workspace>Default Workspace.

Slika 9. Predefinisani (default) izgled Adobe Photoshop-a CS5 Extended

Radni prostor se može podeliti na nekoliko celina: Pri vrhu prozora se nalazi komandna linija (menu bar), meni koji je veoma sličan menijima drugih programa. On se sastoji od menija: File, Edit, Image, Layer, Select, Filter, Analysis, View, Window, Help. Klik na bilo koje ime menija, otvara njegov podmeni, sa mnoštvom opcija. Iako se svaki od menija razlikuje, možemo uočiti i neke sličnosti koje će nam olakšati dalji rad, pogledajmo to pobliže:

Slika 10. Menu bar

• kliknite na naziv bilo kog od gornjih menija, trebalo bi da se otvori padajući prozor

tog menija. • ako kliknite levim klikom miša na neku komandu, rezultat će varirati u zavisnosti

od komande koju ste izabrali. • ukoliko komanda koju ste izabrali iza svog imena nema prateće simbole,

Photoshop će je momentalno izvršiti.

36

• ukoliko komanda iza svoga naziva ima tri tačke (...) otvoriće se okvir za dijalog. • ukoliko komanda ima trougao pored imena, koji pokazuje na desno, pojaviće se

podmeni, posle toga možete odabrati neku od ponuñenih komandi iz podmenija.

3. U okviru za dijalog možete da vršite različite izbore. Mogućnosti koje se najčešće nude su sledeće:

• okvir sa padajućim menijem. Kliknite levim klikom na strelicu koja pokazuje na dole (nalazi se sa desne strane okvira), otvoriće se padajući meni, uz pomoć klizača (scroll), doñite do željene opcije i izaberite je levim klikom.

Slika 11. Primer prozora za okvir sa padajućim menijem i okvir sa tekstom.

• okvir sa tekstom. Kliknite unutar okvira, ili prevucite vrednost koja se nalazi unutar njega kursorom miša, zatim upišite novu vrednost.

• opciono dugme (radio button), kliknite unutar opcionog polja da biste ga izabrali ili poništili njegov izbor, veoma je moguće da ćete u slučaju da vam se nudi izbor izmeñu više opcionih dugmadi u grupi, klikom na jedno automatski deaktivirati ostala.

Slika 12. Primer prozora sa poljima za potvrdu: opciono dugme i kvadratić za potvrdu

• kvadratić za potvrdu (check box), kliknite unutar polja kvadratića, da biste čekirali, odnostno poništili željenu opciju.

• klizač, polvlačenjem klizača birate različita podešavanja. • komandno dugme, kao što je već rečeno, klikom na dugme iza koga slede tri

tačke (...) otvorićete novi prozor (dialog box). Klikom na dugme OK, ili na dugme Done, zatvorićete novi prozor i primeniti izmene prema zadatim podešavanjima. Klikom na dugme Cancel, zatvorićete prozor, ne primenjujuće izmene; isto postižete i pritiskom tastaturne precice Esc (Escape).

Odmah ispod komandne linije nalazi se opciona traka (options bar), to je kontekstualni meni, što znači da se u zavisnosti od trenutno aktivnog alata u panelu sa alatima (toolbox) na options bar-u prikazuju opcije za taj alat.

Slika 13. Options bar i opcije koje su ponuñene prilikom aktivnog alata crop tool.

37

Slika 14. Options bar i opcije koje su ponuñene prilikom aktivnog alata move tool.

U desnom uglu Options bara, nalazi se ikonica posebne aplikacije, Adobe Bridge-a, ova aplikacija služi za lakše organizovanje i prebacivanje fajlova meñu raznim Adobe programima, poput Illistrator-a, Flash-a, Photoshop-a, Premier-a... Desno od dugmeta za Adobe Bridge se nalazi dugme Workspace, ispod njega se nalaze grupe paleta (Tools palette). Po predefinisanom radnom prostoru one izgledaju kao na slici ispod. Više o paletama i njihovom ureñivanju u poglavlju o ureñivanju prostora za rad.

Slika 15. Grupe paleta

Centralni deo ekrana zauzima radna površina, tj. Prozor dokumenta (Document window), o njemu, o različitim načinima prikazivanja dokumenata, takoñe više u poglavlju o ureñivanju prostora za rad. Levu stranu ekrana zauzima redizajnirana paleta alata (Toolbox), koja će detaljno biti objašnjena u poglavlju Toolbox.

PODEŠAVANJE RADNOG PROSTORA

Jedan od glavnih odlika radnog prostora u Adobe Photoshop CS5, kao i njegovim prethodnicima, jeste njegova prilagodljivost potrebama korisnika. Kako sve više i više budete ulazili u svet Photoshopa, shvatićete da vam prostora za rad uvek nedostaje, jednostavno to je činjenica. Uskoro ćete početi da tražite načine da što više iskoristite radni prostor koji vam je na raspolaganju, a tu su vam dizajneri novog Photoshopa izašli u susret. Predefinisani raspored paleta je napravljen tako da odgovara najvećem broju korisnika, to sa druge strane uopšte ne mora da znači da će zadovoljiti vaše potrebe. U ovoj lekciji ćemo se pozabaviti radom sa paletema, njihovim skrivanjem, otvaranjem novih paleta, njihovim grupisanjem, pamćenjem njihovog rasporeda... Dakle svim onim pojedinostima koje će vam pomoći da što optimalnije iskoristite vaš radni prostor.

38

Slika 16. Prikaz predefinisanih paleta sa nazivima njihovog interfejsa

Sve komande koje su u vezi sa skrivanjem i prikazivanjem elemenata interfejsa, ili njegovim organizovanjem se nalaze u meniju Window. Možemo mu pristupiti i preko tastaturne prečice Alt + W Kada otvorimo ovaj meni, primetićemo da su komande u njemu grupisane u 3 grupe, podeljene meñusobno horizontalnim linijama. Prvu grupu ćemo za sada preskočiti, da bismo joj se vratili na kraju ove lekcije. Ako pogledamo drugu grupu, koja zauzima najveći deo prostora, primetićemo da su neke komande čekirane, ova grupa predstavlja komande za pozivanje, tj. Skrivanje i pokazivanje panela. Čekirani paneli, su u stvari paneli koji su trenutno aktivni, još tačnije, to su trenutno aktivni paneli u grupama panela. Ako želite da dodate neki panel samo kliknite na njegovo ime iz menija Window. Malopre smo upotrebili izraz grupe panela, u Photoshopu CS5, kao i u nekim ranijim, paneli sa sličnim namenama grupisani su u grupe radi lakšeg snalaženja samog korisnika. Ako vam se učini da bi bilo bolje grupisati panele u nove grupe, to možete učiniti na sledeći način: Uhvatite željeni panel za deo gde mu je ispisano ime (tzv. jezičak panela) i prevucite ga u sledeću grupu; nešto slično možete da uradite i sa celom grupom panela, uhvatite kursorom za title bar željene grupe, i prevucite je na novo mesto, ono može biti skoto bilo gde unutar radnog prostora Photoshopa. Neke grupe panela je moguće povećati kada stoje zasebno, druge ne, grupe kod kojih je to moguće imaju u desnom donjem uglu mali trougao od tačkica, kao na slici ispod:

39

Slika 17. Grupa panela Layers, sa trenutno aktivnim panelom Channels

Ako mislite da nekom panelu nije mesto u grupi, možete ga ugasiti klikom na krstić koji se nalazi desno od imena tog panela; ako želite da isključite celu grupu panela kliknite na krstić koji se nalazi u title baru te grupe panela. Takoñe, u slučaju da želite da dobijete više prostora za panel u kome trenutno radite, možete smanjiti grupu panela koja se nalazi iznad ili ispod njega. To ćete postići tako što ćete kliknuti na znak minus, koji se nalazi u title baru grupe panela. Ako preñete kursorom preko gornje ivice title bara grupe panela, primetićete kako se kursor promenio iz uobičajene strelice u dve strelice koje pokazuju gore i dole, to znači da grupe panela možete i da skalirate, pružajući sebi veći prostor za rad u pojedinim grupama. Ako želite da smanjite sve grupe paleta sa desne strane, kliknite na dve bele strelice koje pokazuju desno, a nalaze se na sivoj podlozi iznad svih grupa paleta, u takozvanom prostoru za njihovo usidravanje. Primetićete da su se palete pretvorile u ikonice, ponovan klik na strelice koje sada pokazuju u levo će vratiti palete na prvobitan položaj. Isti princip se može primeniti i na drugu grupu paleta, koja se po predefinisanim podešavanjima prvi put pojavljuje u obliku ikonica, a čine je: History, Actions, Tool Presets, Brushes...

Slika 18. Ikonice koje predstavljaju smanjene grupe paleta

40

Pošto izvršite željena podešavanja unutar radnog prostora: dodate nove palete, sortirate ih u nove grupe, promenite veličinu pojedinih... Verovatno ćete želeti da novi radni prostor i sačuvate. Idite u meni Window>Workspace>Save workspace

Slika 19. Snimanje radnog prostora

Kliknite na poslednju komandu, pre vama će da se otvori novi prozor, u kome možete dati ime vašem novom radnom prostoru, sačuvati i lokacije paleta, tastaturne skraćenice (ako ste ih menjali), kao i menije. Pošto sve ovo obavite , moći ćete pristupiti novokreiranom radnom prostoru iz menija: Window>Workspace>ime koje ste dali

Slika 20. Prozor Save Workspace

Ispod komande Save Workspace, nalazi se komanda Default Workspace, koja vas vraća na predefinisani radni prostor, drugim rečima možete da eksperimentišete do mile volje, jer ćete uvek moći da se vratite na početak bez bojazni da ćete nešto zabrljati.

TASTATURNE PREČICE

Poznavanje tastaturnih prečica u Adobe Photohop CS5 omogućava produktivniji rad. Ovom skriptom, zbog obimnosti materije, neće biti pokrivene sve. U Adobe

41

Photoshopu CS5 postoji veliki broj predefinisanih tastaturnih prečica, kojima se pristupa iz menija: Edit>Keybord Shortcut… (da se podsetimo, tri tačke znače da će se klikom na ovu komandu otvoriti novi prozor sa opcijama) Takoñe ovom meniju možete pristupiti i preko prečice Alt+Shift+Ctrl+K.

Slika 21. Prozor menija za tastaturne prečice

Pri vrhu prozora ćete primetiti padajući meni set, u njemu se nalaze trenutno zapamćeni setovi. Desno od njega se nalaze tri ikonice:

• ikonica za snimanje izmena u trenutno aktivnom setu (flopi disketa) • ikonica za pamćenje izmena u novom setu, na osnovu trenutno aktivnog seta

(manja flopi disketa sa strelicom) • brisanje trenutno aktivnog seta (kanta za otpatke)

Slika 22. Ikonice za upravljanje seta tastaturnih skraćenica

Ispod njega se nalazi padajući meni skraćenica za: komande iz menija, palete i alate. Centralni deo zauzimaju skraćenice, koje su radi lakšeg pronalaženja svrstane u odreñene grupe, npr. Za skraćenice iz padajućeg menija Apliccations Menus (aplikacije iz komandnog menija), one su: Filter, Edit, Image... Pojedinim skraćenicama pristupate tako što dvaput kliknete na grupu, a zatim na željenu skraćenicu iz te grupe. Pošto vidite koja je skraćenica za datu komandu, možete kliknuti na nju da biste upisali novu.

42

Slika 23. Tastaturne skraćenice i njihova izmena

Pošto završite sa upisivanjem nove skraćenice, Photoshop će vas obavestiti u slučaju da je ta skraćenica već zauzeta, ako je to slučaj sada će vam postati aktivne komande iz desnog dela prozora:

• Accept, klikom na ovu komandu prihvatate novu skraćenicu • Undo/Redo, poništavate sve što ste uradili u prethodnom koraku i obrnuto • Use Default, u slučaju neke izmene na skraćenici za selektovanu komandu, vraća

predefinisanu skraćenicu za tu komandu • Add shortcut, dodaje novu skraćenicu na komandu koja već ima jednu skraćenicu • Delete Shortcut, briše skraćenicu koja je izabrana

Slika 24. Grupa komandi nakon promene sktaćenica

Pošto izvršite izmene u meniju tastaturnih skraćenica, možete sačuvati izmene:

• u trenutnom setu (ukoliko nije predefinisani set proizvoñača, Photoshop Defaults) • novom setu kome ćete dati ime, a koji će biti zasnovan na izmenama koje ste

izvršili u trenutno aktivnom setu Tom novokreiranom setu možete pristupiti iz padajućeg menija set. Da biste izbrisali set, otvorite ga, a zatim kliknite na ikonicu kante za otpatke.

NAVIGACIJA

Jedan od glavnih preduslova za kasniji uspešan rad u Photoshopu je dobro poznavanje osnovnih tehnika, a navigacija svakako spada u jednu od njih. Tokom rada, ovu tehniku ćete najviše koristiti. Tajna u njenom uspešnom korišćenju leži, pored dobrog poznavanja alata za navigaciju i u poznavanju tastaturnih skraćenica, budite uporni i nekoliko dana ih vežbajte, kasnije će vam novostečeno znanje veoma olakšati rad, i omogućiti uštedu vremena. Najlakši način za navigaciju kroz vaš dokument jeste korišćenje palete navigator. Po predefinisanim podešavanjima, ona se nalazi u gornjem desnom uglu radnog prostora, ukoliko ste isključili paletu navigator, možete je ponovo uključiti iz menija: Window>Navigator Sadržaj same palete je veoma jednostavan:

43

Slika 25. Paleta “Navigator”

Najveći deo mesta u paleti predstavlja ekran, koji prikazuje umanjenu verziju trenutno aktivnog dokumenta. Rezolucija ovog Photohsopovog dokumenta je 1024 x 768px, ako ga zumiramo na 100% njegove veličine, nećemo ga moći celog prikazati na ekranu. Veličina 100% je actual size nekog dokumenta, u Photoshopu se dokumenti mogu zumirati i na veće veličine, radi lakšeg vršenja izmena na njima... Crveni kvadrat (View Box) koji se nalazi na ekranu palete navigator pokazuje koji deo dokumenta je trenutno vidljiv na ekranu. Ako želite da prikažete neki drugi deo dokumenta:

• pozicionirajte kursor unutar palete navigator • kursor će se pretvoriti iz strelice u ručicu • pomerite crveni kvadrat (View Box), vidljivi deo oblasti dokumenta, na deo slike

koji želite da prikažete U donjem delu palete nalazi se tekstualno polje, koje služi za prikazivanje procenta uvećanja ili smanjenja prikaza trenutno aktivnog dokumenta u odnosu na njegovu stvarnu veličinu. U njega možete uneti željnu numeričku vrednost. Pored njega nalazi se klizač, prevlačenje klizača na levu stranu rezultiraće komandom zoom out, tj. imaćete utisak kao da se dokument udaljava, dok će prevlačenje klizača na desnu stranu rezultirati komandom zoom in, tj. kao da se dokument približava. Ako želite da promenite boju View Box-a iz crvene, uradite sledeće korake:

• kliknite kursorom na dugme za opcije palete (Palette Options...) pred vama će se prikazati sledeći prozor:

Slika 26. Paleta opcija

Boja velikog kvadrata vam prikazuje trenutnu boju. Iz padajućeg menija „Color“ izaberite boju koju želite, zatim kliknite na OK. Prednost palete navigator je što novim korisnicima dopušta da i bez poznavanja alata i tastaturnih prečica za navigaciju obavlja njene osnovne funkcije. Ipak napredniji rad u Photoshopu zahteva poznavanje i drugih tehnika i alata.

44

Hand Tool

Alat koji se najčešće koristi je alatka Hand Tool (SPACE) . On se nalazi pri dnu Toolbox-a. Držeći SPACE kliknite kursorom bilo gde unutar dokumenta, ne puštajući taster SPACE, pomerajte kursor u željenom pravcu, u slučaju da ne vidite neke delove dokumenta, možete ih povući na ovaj način, ako već vidite ceo dokument, morate preći u drugi screen mod (pogledajte u nastavku lekcije) Zoom Tool

Ispod altke Hand Tool nalazi se altka Zoom Tool (Z) , ko ja je prikazana kao lupa. Klikom na alatku Zoom Tool, u options bar-u će se pojaviti ocije za ovu alatku:

Slika 27. Zoom tool

Da biste izvršili komandu Zoom In, kliknite kursorom na lupu sa znakom plus u sebi, a zatim kliknite unutar dokumenta, ova komanda će rezultirati povećanjem dokumenta na

vašem monitoru, bez vršenja ikakvih izmena na samom dokumentu . Da biste izvršili komandu Zoom Out, kliknite kursorom na lupu sa znakom minus u sebi, a zatim kliknite unutar dokumenta, ova komanda će rezultirati smanjivanjem dokumenta

na vašem monitoru, bez vršenja ikakvih izmena na samom dokumentu . Ovom alatkom se možete služiti i na sledeći način:

• Kliknite na tastaturnu prečicu Z (aktiviraće se alatka Zoom In ili Zoom Out, u zavisnosti koja je poslenja izabrane u Options Bar-u)

• Klikom na taster Alt menjate trenutni mode alata, iz In u Out i obrnuto. Ako čekirate opciju Resize Window To Fit, prilikom zumiranja dokumenta, povećavaće se i smanjivati i njegov prozor, tj. Document Window. Ova opcija je po predefinisanim podešavanjima isključena. Čekiranje opcije Zoom All Windows, izvršava komandu u svim dokumentima, u slučaju da radite sa više njih. Sledeća tri dugmeta iz Options Bar-a su:

• Actual Pixels (Ctrl+Alt+0) - zumira trenutni dokument na razmeru 1:1 • Fit Screen (Ctrl+0) – zumira trenutni dokument na veličinu ekrana, tako da je ceo

dokument vidljiv • Print Size – Zumira dokument na veličinu za štampanje (ova opcija veoma često

ima izvesna odstupanja od stvarne) Različiti načini prikazivanja dokumenta: Kada otvorite novi dokument u Photoshop-u CS5, on će se po predefinisanim podešavanjima otvoriti u Standard Screen Mode-u, to je mod u kome je prikazan Document Window trenutnog dokumenta, sa podatcima poput naziva dokumenta koji se nalazi u njegovom Title Bar-u, tenutnim procentom prikazivanja dokumenta na ekranu... Photoshop, takoñe pruža i različite načine prikazivanja dokumenta:

Slika 28. Različiti načini prikazivanja dokumenta

Komandi se pristupa tako što se ili klikne njena ikonica na dnu palete alata Change Screen Mode (F), ili preko tastaturne prečice F.

45

• Standard Screen Mode – prikazuje dokument tako da mu je vidljiv njegov Title Bar, tj. dokument se prikazuje u prozoru.

• Maximized Screen Mode- prikazuje dokument tako da mu Title Bar više nije vidljiv, prozor dokumenta sada zauzima celu slobodnu radnu površinu.

• Full Screen Mode With Menu Bar- mode veoma sličan prethodnom, s’ tim što ćete sada držeći taster SPACE moći da pomerate dokument po radnoj površini

• Full Screen Mode – ovaj mode je namenjen naprednim korisnicima, prilikom njegove upotrebe se Menu Bar skriva, tako da je neophodno poznavanje tastaturnih prečica.

Pritiskom na taster TAB u bilo kom modu, možete privremeno sakriti palete sa ekrana i time sebi omogućiti više prostora za rad, ponovni pritisak na taster TAB ih vraća. Ako želite da promenite boju radne površine unutar ekrana, pratite sledeće korake:

• Kliknite kursorom na Paint Bucket Tool u paleti sa alatima

Slika 29. Paint Bucket Tool

• izaberite boju koju hoćete u Foreground color

• pritisnite taster SHIFT • kliknite unutar prozora dokumenta na sivu površinu

Rad sa više dokumenta: Kada u Photoshopu istovremeno otvorite više dokumenata, program će ih automatski poreñati u prikaz Cascade.

Slika 30. Rad sa više dokumenta - Cascade

Ako želite da promenite trenutno aktivni dokument, samo kliknite na Title Bar drugog dokumenta, on će momentalno postati novi aktivni dokument. Ipak najlakši način za menjanje trenutno aktivnog dokumenta je tastaturna prečica Ctrl+TAB. Ako želite da možete da vidite sve dokumente na svom monitoru istovremeno (pod uslovom da imate manji broj dokumenata), idite na : Window>Arrange>Tile Horizontally/Vertically

46

Slika 31. Rad sa više dokumenta - Tile Horizontally/Vertically

U aktivnom prozoru pomoću alatke Zoom povećajte procenat prikaza slike, takoñe, koristeći alatku Hand, prikažite neki drugi deo slike. Sada idite u: Window>Arrange>Match Zoom/Location/Zoom And Location Promene u načinu prikazivanja koje ste izvršili na aktivnom dokumentu prenose se i sinhronizuju na sve dokumente, u zavisnosti od komande koju ste izabrali:

• Match Zoom – sinhronizuje Zoom ostalih dokumenata sa aktivnim dokumentom • Match Location - sinhronizuje Viev Box ostalih dokumenata sa View Box-om

aktivnog dokumenta • Match Zoom And Location – sinhronizuje i Zoom i Lokaciju ostalih dokumenata sa

aktivnim dokumentom

Slika 32. Zoom je smanjen, tako da ceo dokument moze da se prikaže u Prozoru Dokumenta, zatim je primenjena komanda Match Zoom

47

UPRAVLJANJE DOKUMENTIMA

Kreiranje novog dokumenta Proces kreiranja novog dokumenta u Photoshop-u CS5 malo se razlikuje od uobičajenog načina kreiranja u drugim programima. Da biste kreirali novi Photoshop fajl idite na: File>New… ili pritisnite tastaturnu prečicu (Ctrl+N) Otvoriće se meni prozra New, prikazan na slici ispod:

Slika 33. Kreiranje novog dokumenta

Prozor sadrži sledeća polja, gledana odozgo nadole: Name: polje za upis imena novog dokumenta. Preset: klikom na ovo polje otvara se padajući meni u kome možete izabrati neko od predefinisanh podešavanja za novi dokument u zavisnosti od toga za šta će biti korišćen. Width: numeričko polje za upis željene širine novog dokumenta i može biti označena u: pixel-ima, inch-ima, cm, mm, point... Height: numeričko polje za upis željene visine novog dokumenta i može biti označena u: pixel-ima, inch-ima, cm, mm, point... Resolution: polje za upis željene rezolucije novog dokumenta. Predefinaisana vrednost je pixels/inch. Color Mode: Polje za izbor color mod-a novog dokumenta. Predefinisani RGB mode, koristi 3 kanala (Red, Green, Blue), da bi definisao i reprodukovao boje na ekranu, tj. sve boje koje se nalaze u njegovom spektru, prikazuju se kombinacijom različitih odnosa ove tri boje: bit depth, po predefinisanoj vrednosti 8, predstavlja “dubinu” u bitovima, koja odreñuje maksimalni broj boja koje mogu da se koriste. Background Contents: odreñuje sadržaj pozadine za novi dokument:

• White – kreira novi dokument sa belom pozadinom • Bakgroun Color – pozadina novog dokumenta će biti ista kao i trenutno izabrana

background color • transparant – pozadina će biti prozirna

Klik na opciju Advance, otkriva meni za naprednija podešavanja. Ako želite da zapamtite nova podešavanja, kliknite na opciju Save Preset, otvoriće se prozor kao na slici ispod:

48

Slika 34. Pamćenje novih podešavanja

Čekirajte polja čija podešavanja želite da budu sačuvana u novom preset-u, zatim upišite ime novog preseta u polje Preset Name, kliknite OK da biste sačuvali, ili, pak Cancel, da biste poništili izmene. Dugme Device Central, kreira novi Photoshop CS5 dokument, koristeći Device Central Aplikaciju za njegovo stvaranje. U donjem desnom uglu, nalazi se težina novog dokumenta. Kada ste izvršili sva potrebna podešavanja, kliknite na opciju OK, da biste kreirali novi dokument. Komande Save, Save As Da biste sačuvali izmene izvršene u dokumentu, idite na: File>Save ili (Ctrl+S) Izmene će biti sačuvane u istom fajlu, pod imenom koje ste upisali na početku, u slučaju da niste upisali ime dokumenta na početku, Photoshop će zatražiti od vas da to učinite sada, otvarajući prozor Save As. Na vrhu se nalazi padajući meni Save in, u kome definišete lokaciju na kojoj želite da sačuvate vaš dokument. Pošto ste se pozicionirali na toj lokaciji, u padajući meni File name upišite ime dokumenta u kome želite da sačuvate izmene. Kliknite na Save da biste sačuvali izmene. Ako želite da izmene načinjene u aktivnom dokumentu sačuvate pod nekim drugim imenom, ili u drugom dokumentu, idite na: File>Save As… Otvoriće se malopre objašnjen prozor. File Info Pošto se budete izveštili u Photoshopu, verovatno ćete poželeti da postavite nekoliko radova na Internet. Osnovni problem koji se tada nameće jeste, kako da drugi ljudi znaju da ste baš vi napravili iste. Photoshop vam nudi rešenje i za to, u formi prozora File Info. Da biste ga pokrenuli, idite na: File>File Info… ili (Alt+Shift+Ctrl+I) Sve izmene, tj. Svi podaci koje budete upisali u File Info, biće utisnuti u vaš dokument (bilo da je u pitanju fotografija, grafika…) u vidu metadata zapisa, tako da će svako ko poželi moći da sazna ko je tvorac slike, vlasnik copyright prava, ko je bio fotograf, gde je fotografija snimljena, njen kraći opis… Na slici ispod predstavljen je prikaz prozora File info za kategoriju Description (opis):

49

Slika 35. Prozor File Info za dokument pod nazivom devojka.jpg

Važnija polja su: • Document Title: u ovo tekstualno polje možete upisati naslov vašeg dokumenta,

ovo polje ne utiče na samo ime dokumenta, tj. Document Name, koje se nalazi u Title bar-u File Info prozora.

• Author: polje za upis imena autora • Description: Polje za kraći opis dokumenta • Keywords: polje za upis ključnih reči (keywords), reči se odvajaju zarezom • Copyright Status: padajući meni, koji dozvoljava izbor izmeñu tri stanja:

Unknown, Copyrighted, Publick Domain • Copyright notice: polje za upis dodatnih informacija u vezi copzright-a • Copyright Info URL (unified resource locator): polje za upis veb adrese na kojoj

se može saznati više o pravima na vaše radove... Pri samom dnu prozora nalaze se podatci o samom fajlu, kao što su: kada je nastao, kada je poslednji put menjan i u kojoj apliakciji kao i podatak o njegovom formatu. Pored sekcije Description, File info, sadrži još desetak drugih kategorija, ali zbog predviñenog prostora, neće biti obrañen. Pošto izvršite izmene u prozoru File Info, sačuvajte dokument i zatvorite ga, pošto ga ponovo otvorite, idite na File Info, primetićete da su sve izmene koje ste izvršili tu, tj da su one sada utisnute (embeded) u sliku.

ALATI PANELA TOOLBOX

Kada pokrenete Photoshop, paleta sa alatima (Toolbox) se po predefinisanim podešavanjima nalazi sa leve strane. Neki od alata iz Toolboxa imaju svoje opcije koje se ispisuju u Options Bar-u kada je alat aktivan. To su alati pomoću kojih možete da kucate, selektujete, bojite, crtate, semplirate, editujete, pomerate, pravite beleške i pregledate slike. Druge alatke vam omogućavaju da menjate boje (foreground/backgrund color), idete na Adobe Online i menjate način prikazivanja. U paleti sa alatkama postoje alati koje u sebi sadrže nekoliko podataka ili alata slične namene. Mali trougao koji se nalazi desno od alatke pokazuje da ona sadrži još jedan ili više skrivenih alata. Ako neko vreme zadržite kursor iznad alata, pojaviće se mali „pop-up window“ koji će saržati naziv alata i njegove tastaturne prečice.

50

Ispod se nalazi spisak svih alata koje sadrži Toolbox, zajedno sa njihovim nazivima i tastaturnim skraćenicama:

Slika 36. Alati palate Toolbox

Alati za selektovanje

• Move tool: alat koji služi za pomeranje selekcije, layer-a, linija za navoñenje (guidelines)... Kliknite na sloj čiji sadržaj želite da pomerite, zatim povucite sadržaj na novo mesto. Ovim alatom možete da učinite aktivnim sloj na kome se nalazi sadržaj, tako što ćete držati taster Ctrl, a zatim kliknuti na sadržaj.

• Rectangular Marquee - selektuje oblast u obliku pravougaonika • Elliptical Marquee - selektuje oblast u obliku elipse • Single Column Marquee - selektuje jednu kolonu • Single Row Marquee - selektuje jedan red • Lasso - služi za iscrtavanje selekcije slobodnom rukom, da bi se selekcija zatvorila

lasoom se mora obuhvatiti neka oblast, otuda naziv ove alatke. • Polygonal Lasso- prvim klikom se započinje iscrtavanje pravih linija koje

označavaju ivice selekcije, selekcija se zatvara kada se njen početak i kraj spoje. • Magnetic Lasso- alatka koja pomaže selektovanje, tako što prianja za jednobojne

ivice. • Quick Selection- alatka koja omogućava korisniku da njom “oboji” oblasti slike

koje želi da selektuje • Magic Wand- jednim klikom selektuje oblasti slične boje

51

Alati za cropovanje slike i pravljenje slice-ova • Crop tool- trimuje sliku, odsecajući neželjeni deo. • Slice tool- služi za iscrtavanje slice-ova • Slice Select tool: služi za selektovanje slice-ova

Alati za retuširanje

• Spot Healing Brush: uklanja neželjene objekte sa slike • Healing Brush tool: preslikava sempliranu oblast na željenu lokaciju slike,

najčešće se koristi za uklanjanje nepravilnosti… • Patch tool: ispravlja nepravilnosti unutar selektovane oblasti slike, koristeći

sample ili šablon • Red Eye tool: uklanj crveni odraz sa očiju na slici, izazvan blicem • Clone Stamp tool: preslikava uzorak uzet sa jednog dela slike, na željenu lokaciju • Pattern Stamp: služi za preslikavanje dela slike, koji se koristi poput šablona

(pattern) • Eraser tool: služi za brisanje piksela • Background Eraser: briše deo slike do transparencije • Magic Eraser: briše do providnosti delove isto obojene delove slike • Blur tool: zamagljuje deo slike na koji se klikne • Sharpen tool: izoštrava deo slike na koji se klikne • Smudge tool: ovom alatkom se postiže efekat zamuljanosti • Dodge tool: delovi slike koji se tretiraju ovom alatkom postaju svetliji • Burn tool: zatamnjuje delove slike koji se tretiraaju ovom alatkom • Sponge tool: menja saturaciju (zasićenost boja) slike

Alati za bojenje

• Brush tool: služi za simuliranje poteza četkicom • Pencil tool: služi za simulaciju poteza olovkom • Color Replacement- zamenjuje selektovanu boju novom bojom • History Brush- služi za slikanje kopije selektovanog snapshota ili state-a (stanja)

u trenutnom prozoru slike. • Art History- služi za bojenje stilizovanim potezima, koji simuliraju izgled akvarela,

pastela…, korišćenjem izabranog stanja ili snapshot-a • Gradient tools- simulira pravoliijski, radial, angle, reflection ili diamond gradient

(preliv) izmeñu 2 ili više boja. • Paint Bucket- ispunjava slično obojene oblasti, ili selekciju sa bojom prednjeg

plana (foreground colour). Alati za crtanje i kucanje

• Path selection tools- služi za selektovanje oblika (shape) ili njihovih delova: anchor points, direction lines, and direction points…

• Type tool- služi za ispisivanje teksta • Type mask- stvara selekciju u obliku teksta • Pen tools- omogućava iscrtavanje path-a (putanje), pomoću kojeg se definiše

oblik (shape) • Shape tools- služi za iscrtavanje oblika na normalnom ili shape layer-u • Line tool- služi za iscrtavanje linija na normalnom ili shape layeru-u • Custom Shape tool- omogućava izbor posebnih oblika iz Custome Shape liste.

Alati za beleške, merenje i navigaciju:

• Annotation tools- služi za pravljenje beležaka, tekstualnih i audio, koje se mogu pridodati slici

• Eyedropper tool- semplira boju na slici sa mesta na kome se njome klikne • Ruler tool- meri razdaljinu, lokaciju i uglove • Hand tool- pomera sliku unutar prozora dokumenta • Zoom tool- ovećava i smanjuje pogled na sliku

52

Kako se koristi alat Kliknite na alata koji želite da koristite, ako se u njegovom donjem desnom uglu nalazi mali trougao, pozicionirajte kursor iznad alata, stisnite i držite levi taster miša neko vreme, da biste videli skrivene alate. Isto ovo se postiže upotrebom tastaturne prečice alata, koja je zapisana pored svakog alata u zagradi; za prelazak na skrivene alate koristi se Shift+tastaturna prečica za odreñeni alat (u slučaju da je ova opcija isključena, idite na Edit > Preferences > General, zatim izaberite Use Shift Key For Tool Switch Menjanje kursora alata: Svaki alat ima dugačiji kursor, tj. ikonicu za njega, u većini slučajeva on je isti kao i ikonica za taj alat. Ako želite, možete da taj kursor privremeno promenite u precizniji, radi lakšeg rada. Idite na: Edit > Preferences > Cursors…

Slika 37. Prozor Preferences za podmeni Cursors

• Painting Cursors o Standard: kursor će biti prikazan isot kao ikonica alata o Precise: prikazuje kursor kao krstić, radi preciznijeg selektovanja,

bojenja... • Normal Brush Tip: spoljna linija kursora, pokazuje otprilike 50% oblasti koja će

biti obojena a na koju će biti naneta najveća količina boje • Ful Size Brush Tip: linija kursora, pokazuje 100% oblasti koja će biti obojena • Show Crosshair in Brush Tip - selektujete ovaj dijalog, da bi vam mali krst bio

iscrtan unutar kursora za četkicu.

TRANSFORMISANJE

Transformisanje u Photoshopu se sastoji od niza promena koje možete da izvršite na selekciji, layer-u, skupu layer-a, masci layer-a. Transformacija se takoñe može primeniti i na putanju, vektorski oblik, vektorsku masku, granicu selekcije... Transformisanje utiče na kvalitet slike prilikom manipulisanja rasterskom grafikom, tj. kada manipulišete sa pixel-ima. Transformisanje vektorske putanje, ili oblika nije destruktivno, jer samo menjate matematičke jednačine koje definišu iscrtavanje objekta. Transformacija se sastoji od rotate, scale, skew, distort, ili perspective transformisanja, takoñe možete da obrćete objekat po vertikali i horizontali, kao i da ga rotirate u pravcu kazaljke na satu za 90 stepeni, ili obrnuto. Da biste izvršili transformaciju, prvo selektujte objekat na kojoj želite da je primenite. Ako je potrebno, podesite reference point (tačka u odnosu na koju će transformacija da se izvrši) pre toga. Možete da primenite nekoliko transformacija zaredom, da posmatrate njihove rezultate u realnom vrementu, i zatim ih konačno primenite (Enter), ili poništite (Esc). Šta i kako? Da biste transformisali ceo layer, prvo učinite aktivnim željeni layer, a zatim se pobrinite da niste greškom selektovali samo neki njegov deo. Background layer nije moguće transformisati, prvo ga morate pretvoriti u običan layer.

53

Da biste transformisali samo deo nekog layer-a, učinite aktivnim taj layer, a zatim selektujte nekim alatom za selekciju deo layer-a koji želite da transformišete. Da biste transformisali više layer-a istovremeno, učinite aktivnim sve željene layer-e u layer paleti, a zatim primenite na njima željenu transformaciju. Sloj ćete učiniti aktivnim, tako što kliknete na njega u Layers paleti, ako želite da selektujete više slojeva, to možete učiniti tako što ćete držati Shift (ako su u nizu) ili Ctrl (ako su razdvojeni). Ako želite da transformišete vektorsku masku, ili masku layer-a, prekinite vezu (unlink) maske i izaberite njenu ikonicu u Layer pallet-i. Da bi transformisali putanju, ili vektorski oblik, izaberite Path Selection tool da biste izarali celu putanju, ili Direct Selection tool da biste izabrali deo putanje. Ako selektujete tačke na putanji, samo segmenti putanje koji su povezni sa tim tačkama biće transformisani. Ako želite da transformišete selekciju, napravite, ili učitajte (load) selekciju, zatim idite na: Select > Transform Selection Ako želite da transformišete Alpha channel, učinite ga aktivnim u Channels pallet-i, zatim primenite željenu transformaciju. Zadavanje ili pomeranje referentne tačke za transformaciju Sve transformacije se dešavaju oko fiksne tačke koja se naziva reference point. Po ppredefinisanim podešavanjima, ova tačka se nalazi u centru stvari koju transformišete. U slučaju da želite da promenite položaj ove tačke, to vam je omogućeno u reference poin locator-u, koji se nalazi u Options bar-u

• Izaberite komandu za transformisanje (Ctrl+T). Oko stvari koju transformišete pojaviće se četvorougao sa ručicama i uradite nešto od sledećeg:

• U Options bar-u kliknite na željeni kvadratić ureference point locator-u Svaki od ovih kvadratića predstavlja jedan od mogućih položaja referentne tačke unutar četvorougla za transforamciju, tzv. bounding box-a. Primetite da je trenutno izabrab centralni kvadratić. Ako želite da premestite reference point u gornji levi ugao bounding box-a, kliknite na kvadratić u gornjem levom uglu unutar reference poin locator-a unutar Options bar-a.

• Takoñe, promenu položaja referentne tačke možete izvršiti povalačenjem direktno u bounding box-u, tako što ćete uhvatiti tačku i prevući je na željeno mesto, primetite da ova tačka može da stoji van granica bounding box-a.

Scale, rotate, skew, distort, apply perspective, or warp

• Izaberite ono na čemu želite da primenite transformaciju • zatim idite na: Edit > Transform > Scale, Rotate, Skew, Distort, Perspective, ili Warp

Slika 38. Meni Transformacije

54

• podesite referentnu tačku ako želite i uradite nešto od sledećeg: • ako ste izabrali Scale, povucite ručice na bounding boxu u željenom pravcu,

primetite da se veličina objekta koji transformišete menja. Ako želite da povećavate ili smanjujete objekat koji transformišete proporcionalno, držite Shift. Kada kursor pozicionirate preko ručki u bounding box-u on će se pretvoriti u dvostruku strelicu koja vam pokazuje pravac skaliranja objekta. Ovo isto možete učiniti iz Options bara, tako što ćete uneti novu numeričku vrednost u predviñeno polje, pobrinite se da ikonica link bude aktivna ako želite da skalirate proporcionalno.

• Ako ste izabrali Rotate, pozicionirajte kursor van bounding box-a, primetite kako

će se on pretvoriti u dve strelice koje povezuje zakrivljena linija. Sada možete rotirati objekat u željenom pravcu.

• Ako želite da rotaciju ograničite na 15 stepeni, držite Shift. • U slučaju da želite da izvršite rotaciju numeričkim putem, unesite novu numeričku

vrednost u polje za vrednost rotacije .

• Ako ste izabrali Skew pozicionirajte kursor na nekoj od srednjih ručki na

stranicama, primetite da se kursor promenio. Sada možete da pomerate celu stranicu pokretima koji podsećaju na njeno kliženje.

• Ako ste izabrali Distort, povucite neku od ručki bounding box-a da biste ga proširili ili skupili. Ovom komandom, tj. kasnijim povlačenjem ručki u popriličnoj meri vam je data sloboda da deformišete objekat kako želite.

• Ako ste izabrali Perspective, povucite neku od ručki koje se nalaze u uglovima,

time menjate perpektivu objekta koji transformišete.

• Ako ste izabrali Warp, izaberite koju Warp tehniku želite da primenite iz Warp pop-up minija u Options bar-u, takoñe možete izvršiti izmene i ručno, tj. povlačenjem ručki na mash-u.

55

Slika 39. Warp meni

• Za sve tipove transformacija moguće je uneti numeričke vrednosti u Options bar-u

• Sada, pošto ste već primenili jednu komandu, možete da je potvrdite, tj. Da je i definitivno primenite, ili u slučaju da želite da završite još neku transformaciju na objektu možete da idete na: Edit > Transform submenu, ili da desnim klikom kliknete unutar bounding box-a,

i onda iz padajućeg menija izaberete novu željenu transformaciju. • Ako želite da Warp-ujete sliku, morate da kliknete na Switch Between Free Transform And Warp Mode dugme u Options bar-u.

Kada ste završili, pred vama stoje dve mogućnosti: • Ako želite da i DEFINITIVNO potvrdite, tj. primenite izmene ili pritisnite Enter, ili

Commit button u Options bar-u, ili kliknite dva puta unutar oblasti transformacije.

• Ako želite da poništite izmene, pritisnite Esc, ili Cancel button u Options bar-u Flip i Rotate komande

1. Izaberite ono na čemu želite da primenite transformaciju 2. Idite na Edit > Transform i izaberite jednu od sledećih komandi iz menija (ili

pritisnite Ctrl+T, a zatim kliknite desnim tasterom miša na bounding box): • Rotate 180° da biste rotirali za pola okreta

• Rotate 90° CW da biste rotirali u pravcu kazaljke na satu za četvrtinu

okreta

• Rotate 90° CCW da biste rotirali suprotno od pravca kazaljke na satu

za četvrtinu okreta

• Flip Horizontal to da biste obrnuli horizontalno duž njegove vertikalne

ose

• Flip Vertical da biste obrnuli vertikalno, duž horizontalne ose

56

Slika 40. Transformacije

Warp Komanda Warp pruža vam mogućnost da menjanjem položaja kontrolnih tački menjate oblik slike (image), putanje (path), oblika (shapes)... Pop-up meni ove komande vam nudi neke od predefinisanih oblika ove komande (Arc, Arc Lower, Arc Upper...), ovi oblici su takoñe podložni promenama, tako da ih možete menjati prilagoñavati prema svome nahoñenju.

1. Izaberite ono na čemu želite da primenite Warp komandu 2. Da biste izabrali ovu komandu uradite nešto od sledećeg:

• Edit > Transform > Warp • Ako ste pre primene ove komande koristili Free Transform komande, a ne

želite još definitivno da primenite izmene, morate da kliknete na Switch Between Free Transform And Warp Modes dugme u Options bar-u.

3. Ako želite da primenite Warp prema predefinisanom obliku, izaberite taj oblik iz pop-up menija (Arc, Arc Lower, Arc Upper...)

4. Ako želite možete da menjate oblik mash-a preko povlačenja kontrolnih tačaka, segmenata bounding box-a, ili oblasti unutar samog mash-a. Da biste podesili krive (curves), koristite ručke kontrolnih tačaka. Ovo je veoma slično podešavanju kriva kod vektorske grafike.

5. Ako želite da rotirate efekat Warp-a bez rotiranja grafike na koji se on primenjuje, idite na Warp menu, kliknite na Change The Warp Orientation dugme unutar Option bar-a.

6. Ako želite da promenite referentnu tačku kliknite na novu unutar Reference point

locator-a 7. Da biste podesili koliki nivo warp-a želite, upišite željenu vrednost u predviñeno

numeričko polje, Bend- kontroliše savijanje, X- kontroliše distorziju po horizontali, Y- po vertikali...

8. Kada ste završili, pred vama stoje dve mogućnosti: • Ako želite da i DEFINITIVNO potvrdite, tj. primenite izmene ili pritisnite

Enter, ili Commit button u Options bar-u, ili kliknite dva puta unutar oblasti transformacije.

• Ako želite da poništite izmene, pritisnite Esc, ili Cancel button u Options bar-u

57

Slika 41. Efekat dobijen Custom warp komandom, pomeranjem ručki mesh-a

HISTORY & UNDO

Veoma često ćete u toku rada na nekom dokumentu u Photoshopu, poželeti da poništite neku izmenu koju ste učinili, ili da se vratite na stanje od pre nekoliko izmena. Dok vam komanda Undo u većini drugih programa pruža tu mogućnost, u Adobe Photoshop-u stvari stoje malo drugačije. Korišćenje komandi Undo & Redo Ove komande vam pružaju mogućnost da poništite, ili ponovo učinite neku izmenu. Veoma je važno da shvatite da vas ova komande vodi samo jedan korak u istoriju prilikom korišćenja komande Undo, odnosno vraća u stanje pre njene primene korišćenjem komadne Redo. Ovim komadama možete pristupiti iz menija: Edit > Undo/Redo (Ctrl+Z) Sigurno se pitate koja je onda primena ovih komandi, ako se njima može vraćati samo jedan korak unazad. Pa primena komande Undo vam pruža mogućnost da pre svega uporñujete sliku pre i posle vršenja neke izmene, npr. primene nekog filtera… Ako je operacija ili komanda koju ste uradili neponištiva, komanda Undo će biti nedostupna, a njeno ime će se promeniti u Can’t Undo Komande Step Backward/Forward Komanda koja vam je na raspolaganju u Photoshopu a njena upotreba ima isti rezultat koji ima u drugim programima upotreba komande Undo je komanda Step Backward, kojoj se pristupa iz menija Edit: Edit > Step Backward/Forward Ova komanda vas vraća (po predefinisanim vrednostima) do 20 koraka u istoriju vašeg dokumenta. Komanda Revert Pored komande Undo, koju smo razmatrali malopre, u Photoshop-u, postoji komanda koja vas vraća na poslednju sačuvanu verziju vašeg dokumenta. Ta komanda je komanda Revert. Njoj pristupate na sledeći način: File > Revert Pošto se u nastavku ove lekcije budemo upoznali sa History palett-om, primetite da je Revert dodata u ovu paletu kao neponištivo stanje (history state). History palette Preko History palette-a na brz i lak način možete se vratiti do 20 koraka unazad unutar dokumenta na kome ste izvršili izmene. Svaki put kada izvršite neku izmenu na slici, novo stanje se beleži u History palette. Klikom na neko od ovih stanja, dokument poprima izgled koji je imao kada je na njemu primenjena ta promena. Od nje dalje možete vršiti nove promene. Takoñe možete koristiti History pallete da biste brisali stanja slike, ili da biste kreirali dokument iz stanja (state) ili snapshot-a.

58

Da biste prikazali History palette izaberite:

Window > History ili kliknite na ikonicu History palette

Slika 42. Paleta History

Sama paleta može se podeliti u 2 regiona: • u prvom su snapshot-ovi, čim otvorite History palette u njemu se nalazi jedan

snapshot dokumenta na kome radite, to je poslednji sačuvani izgled dokumenta. U ovaj region će se slagati svi nov snapshotovi koje budete stvarali (na slici iznad to je Snapshot1)

• u drugom regionu su stanja (states) dokumenta, tj njegov izgled posle izvršenih promena. Ta stanja sadrže naziv akcije koja je preduzeta, a rezultirala je promenom dukumenta. Poslednje stanje slike iznad je stanje posle akcije Free Transform. Ovo stanje je trenutno obeleženo, tj. aktivno stanje, ako želite možete da obeležite bilo koje drugo stanje, kao što je već rečeno.

Ispod ove druge grupe nalaze se tri dugmeta:

• dugme za kreiranje novog dokumenta iz trenutnog stanja

• dugme za pravljenje novog snapshot-a

• dugme za brisanje stanja (state) Prilikom upotrebe History palette treba obratiti pažnju na sledeće stvari:

• Izmene unutar samog progama, kao što su: izmene na paletama, akcije, podešavanja, collor setting... neće se pojaviti unutar History paltte, zato što to nisu izmene na samom dokumentu.

• Kao što je rečeno, paleta po predefinisanim podešavanjima može da prikaže proteklih 20 stanja. Ovaj broj možete da promenite tako što ćete ići na:

59

Edit > Preferences > Performances A zatim upisati novu vrednost u History States dijalog.

Slika 43. Podešavanje stanja History palete

• Starija stanja se automatski brišu da bi oslobodila mesto za memoriju (RAM) koju

Photoshop koristi. Ako odreñeno stanje želite da zadržite kroz rad, kliknite na njega, a zatim napravite njegov snapshot.

• Kada jednom zatvorite i ponovo otvorite dokument, primetićete da su sva stanja i snapshot-ovi uklonjeni iz palete.

Nova stanja se dodaju na dno liste, dok su najstarija na samom vrhu. Svako stanje se izlistava tako da se prikazuje ime alata ili komande korišćene za promenu dokumenta

• Kada izaberete neko stanje, ako ispod njega postoje neka stanja, ona postaju slabo vidljiva, na ovaj način možete da vidite koje će promene biti poništene, ako nastavite da radite sa izabranim stanjem (po predefinisanim podešavanjima)

• Kada izaberete stanje ispod koga postoji još stanja, i izvršite neku izmenu na tom stanju, sva stanja koja su se nalazila ispod njega biće poništena, i ustupiće mesto izmeni koju ste načinili (po predefinisanim podešavanjima)

• Kada već učinite nešto slično gornjem primeru, a poželite da u sledećem koraku vratite poništena stanja, iskoristite komandu Undo.

• Po predefinisanim podešavanjima, brisanje nekog stanja briše sva stanja koja dolaze posle njega, ako želite da to izmenite idite na strelicu za otvaranje opcija palete i iz padajućeg menija izaberite History Options:

• čekirajte Allow Non-Linear History, sada kada izbrišete neko stanje, stanja ispod njega će biti nedirnuta.

Ostala podešavanja ovog prozora su:

• Automatticaly Create First Snapshot- automatski stvara snapshot dokumenta čim se novi dokument otvori

• Automatically Create New Snapshot When Saving- stvara novi snapshot čim sačuvate dokument

• Show New Snapshot Dialog by Default- aktiviranje ove komande primoraće Photoshop da vas svaki put pita za ime novog snapshota, umesto da mu ga on sam daje

• Make Layer Visibility Changes Undoable- po predefinisanim podešavanjima uključivanje ili isključivanje vidljivosti layer-a, tj. male ikone koja predstavlja oko sa njegove leve strane ne beleži se u History palette, tako da ga nije ni moguće poništiti komandom Undo. Kada čekirate ovu komandu, ova promena na layer-u se onda beleži u History palette.

History Brush lUz pomoć alatke History Brush možete da bojite koristeći selektovano stanje (state) ili snapshot nekog dokumenta. Na primer ako imate sliku u koloru, zatim je prebacite u crno belu boju (Desaturate), možete odreñenim delovima slike da vratite originalne boje koristeći ovu tehniku. Izaberite stanje u kome slika ima sve boje (full color), tako što ga nećete učiniti aktivnim (aktivan bi trebalo da bude state na kome želite da izvršite izmene), već kliknite na prazan box sa njegove leve strane, gde bi trebalo da se pojavi mala ikona četkice. Potom izaberite alatku History Brush , podesite veličinu četkice i preñite njom preko delova slike kojima želite da vratite boju.

60

Slika 44. History brush

Edit History Log Veoma je moguće da ćete se u budućnosti sresti sa situacijom da morate da beležite sve što ste uradili u Photoshop-u radi vaših potreba (da biste videli koje ste sve izmene primenili), ili potreba vašeg klijenta (koliko ste vremena proveli prilikom izrade dokumenta), Edit History Log vam pomaže u tome, on beleži tekstualnu istoriju promena (imena alata i komandi) koje ste primenili na dokument, njegove metadata možete da pregledate preko File Info prozora, ili preko Adobe Bridge-a. Pored beleženja ovih podataka u metadata nekog dokumenta, možete da izaberete da se ona čuvaju u posebnom tekstualnom fajlu. Ako ste izabrali prvu mogućnost, trebalo bi da znate da će to povećati težinu fajla, kao i vreme njegovog snimanja i učitavanja. Pošto je ova opcija po predefinisanim podešavanjima isključena, da biste je uključili idite na: Edit > Preferences > General

Slika 45. Edit History Log

Čekirajte box History Log, kao na slici iznad. Pod Save Log Items To, možete da izaberete da li Log želite da čuvate u metadata, tj. u samom dokumentu, posebnom tekstualnom fajlu, čiju lokaciju bi potom trebalo da definišete, ili želite da čuvate Log na oba načina. Edit Log Items sadrži sledeće mogućnosti: Session Only - samo da snimite podatke o tome kada i koliko je Photoshop bio uključen, kao i kada ste započeli rad na dokumentu i kada ste ga završili. Ne sadrži podatke o izmenama koje ste vršili na dokumentu. Concise - Pored informacija o sesiji, sadrži i tekst koji se nalazi u History palette dokumenta Detailed - Sadrži pored svega što sadrži i Concise još i tekst iz Actions palette, ovo je najdetaljnije beleženje Log-a, kao što mu i samo ime kaže.

SELEKCIJA & ALPHA KANAL

Selekcija (selection) izoluje jedan, ili više delova dokumenta na kome radite. Korišćenjem ove Photoshop-ove mogućnosti u stanju ste da editujete (menjate) i primenjujete filtere i efekte na odredjenu oblast dokumenta, ostavljajući pri tome ostale njegove delove netaknutim. Adobe Photohsop CS5, ima dva seta alatki za selektovanje rasterskih i vektorskih podataka. U ovoj lekciji pažnju ćemo posvetiti načinima selektovanja rasterskih podataka. Selekcija može biti kopirana, pomerana, ili sačuvana i uskladištena u alpha channel, kanal koji skladišti selekciju kao sliku koja je u grayscale modu, a naziva se mask (maska). Ova slika je indentična invertovanoj (obrnutoj) selekciji, maska prekriva delove

61

slike koji nisu selektovani, čuvajući ih na taj način od bilo kakvih promena. Ovakvu sačuvanu masku u svakom trenutku možete ponovo da pretvorite u selekciju, učitavanjem (load) alpha channel-a ponovo u sliku. Selektovanje sa Marquee tools Ove alatke vam pružaju mogućnost da pravite selekciju u obliku četvorougla, ili elipse, kao i redove, odnosno kolone od jednog pixel-a. Nudi vam se izbor izmeñu nekoliko alata:

• Rectangular Marquee pravi četvorougaonu selekciju (ako želite da vam sve stranice selekcije budu jednake, držite Shift)

• Elliptical Marquee pravi selekciju u obliku elipse (ako želite da napravite slekciju u obliku kruga, držite Shift)

• Single Row ili Single Column Marquee definiše granice selekcije tako da dobijate kolonu, odnosno red širine 1 pixel.

Pošto izaberete alata u Options baru će se pojaviti sledeće opcije:

Slika 46. Načini selektovanja objekata

A- Stvarate novu selekciju B- Na već postojeću selekciju dodajete novu selekciju C- Iz postojeće selekcije oduzimate novu selekciju D- Pravite presek izmeñu postojeće selekcije i nove selekcije

U nastavku Options bara na raspolaganju su vam sledeće komande:

Slika 47. “Option bar” selekcije

Feather - Zamućuje (blur) ivice selekcije, tako što pravi oblast prelaza izmeñu selekcije i pixela koji je okružuju. Ova opcija može da dovede do gubitka detalja u pograničnim oblastima selekcije. Feathering možete da definišete za Marquee tools, Lasso tool, Polygonal Lasso tool, ili Magnetic Lasso tool, pri tome je potrebno da alat bude izabran, kakao bi se pojavila traka sa njegovim opcijama (Options bar). Ova komanda se takoñe može primeniti i pošto ste izabrali selekciju, idite na: Select > Modify > Feather (ALT+Ctrl+D)

Slika 48. Modifikacija selekcije

62

Anti-alias- ova opcija “pegla” nazubljene pixel-e na ivicama selekcije, tako što ublažava prelazak boja (color transition) izmeñu ivica selekcije i okolnih pixel-a. Menjaju se samo pixel-i na ivicama, ne postoji oblast prelaza, tako da ova opcija ne dovodi do gubitka detalja. Opcija je veoma korisna kada se seče, kopira ili prenosi selekcija. Anti-alias se bira pre nego što se alatka primeni, pošto se selektovanje izvrši, Anti-alias se ne može primeniti na selekciju. Za Rectangular Marquee & Elliptic Marquee Tool, možete u Options baru izabrati neki od ponuñenih stilova:

• Normal proporcije selekcije biće utvrñene na osnovu povlačenja alata, tj. selekciju odreñujete povlačenjem

• Fixed Aspect Ratio - unosom validnih numeričkih podataka, postavljate odnos izmeñu visine i širine

• Fixed Size- pruža vam mogućnost upisa numeričkih podataka, za širinu i visinu

Slika 49. Rectangular Marquee tool

Da bi se selekcija prilikom povlačenja kursora širila iz svih centra, a ne iz neke ivične tačke, držite Alt.

Slika 50. Elliptic Marquee Tool

Lasso tool, Polygonal Lasso tool , Magnetic Lasso tool Ova alatka vam pruža mogućnost da slobodnom rukom nacrtate selekciju. Veoma je korisna prilikom selektovanja oblasti koje su neravnomerne, a pri tome nemaju zajedničke boje. Alatka se koristi na sledeći način:

1. Izaberite alatku iz Toolbox-a, klikom na alatku Lasso tool 2. Options bar ove alatke sadrži nekoliko opcija, koje su već pokrivene prilikom

upoznavanja sa alatkama Marquee:

Slika 51. Opcije Marquee alata

podesite željene opcije vezane za selekciju, ili njen deo, Feather i Anti-alias... 3. Kliknite na mesto, na kome želite da započnete iscrtavanje selekcije, potom

pokretima slobodnom rukom iscrtajte selekciju. Kao što samo ime alatke Lasso

63

kaže, ovom alatkom se obuhvata selekcija neke oblasti, drugim rečima početna i krajnja tačka moraju da se preklope. Kada iscrtate selekciju, zatvorite je.

4. Da biste iscrtali selekciju koja ima prave linije, u toku crtanja alatkom Lasso,

pritisnite taster Alt, trenutno aktivan alat će postati Polygonal Lasso tool . Princip njegovog korišćenja se sastoji u tome da ova alatka iscrtava selekciju u obliku poligona, a koristi se na isti način, tako što kliknete postavljajući polaznu tačku selekcije, a zatim svakim novim klikom postavljate njenu novu tačku, koja definiše poligonalnu selekciju. Selekciju zatvarate tako što spojite prvu i poslednju tačku, pri tome će kursor signalizirati promenom svoje pojave, kada je zatvaranje selekcije moguće. Selekciju takoñe možete zatvoriti I duplim klikom, us slučaju kada se tačke ne poklapaju. Photoshop će automatski zatvoriti selekciju, povlačenjem prave linije izmeñu njih.

Polygonal Lasso tool , takoñe stoj u Toolboxu, i može se koristiti zasebno. Njegov Options bar izgleda identično, kao i za alatku Lasso.

Neka od svojstava alatke Polygonal Lasso tool su: • Ako želite da vam jedna linija bude u odnosu na drugu pod uglom od 45°,

držite Shift prilikom iscrtavanja. • Ako želite da se sa ove alatke, brzo prebacite na alatku Lasso tool

pritisnite Alt, kada završite iscrtavanje selekcije slobodnom rukom, pustite

Alt, da biste se vratili na Polygonal Lasso tool . • Da biste izbrisali poslednji iscrtani segment selekcije pritisnite taster (Del).

Magnetic Lasso tool je alatka prilikom čijeg korišćenja ivica selekcije se priljubljuje za ivice definisanog dela slike. U slučaju da ste izabrali 32 bitni dokument, ova alatka vam neće biti dostupna. Princip korišćenja alatke je sledeći:

1. Izaberite alatku iz Toolbox-a 2. Podesite njene opcije u Options bar-u:

Slika 52. Opcije Magnetic lasso alata

Kao što vidite, prvi deo Options bar-a je identičan kao i kod predhodnih alata, dok su vam na raspolaganju još neke opcije:

• Width da biste podesili širinu područja koje se detektuje, upišite broj u ovo polje. Taj broj se odnosi na broj pixel-a (po predefinisanim vrednostima) od kursora, koji će biti semplirani...

• Contrast- ovo polje postavlja osetljivost Lasso alatke na ivice koje će biti unutar oblasti koje se detektuje. Broj može biti izražen u % (procentima), od 1%–100%.

Manji broj = veći broj ivica • Frequency- Ovo polje odreñuje broj fastening point-a, tj tačaka, koje odreñuju

selekciju, što je veći broj, odnosno fastening point-i učestaliji, to će selekcija biti preciznija

• Tablet pressure kliknite na ovu opciju, ako koristite tablu za crtanje. Magic Wand tool

Magic Wand tool vam pruža mogućnost da izaberete odreñeni deo dokumenta, na osnovu sličnosti u bojama (plavo nebo na slici), bez toga da morate da pratite njegove spoljne linije (outline). Da li će selekcija da obuhvata oblast ili oblasti samo jedne, ili više boja, zavisi od podešavanja color range-a, odnosno tolerancije (tolerance), u Option bar-u za ovaj alat.

Slika 53. Opcije Magic wand alata

64

Nove opcije u Options baru Magic Wand tool-a su: • Contiguous- čekiranjem ove oblasti selekcija će obuhvatiti samo oblasti koje su

povezane, drugim rečima ako se na dokumentu nalaze dve oblasti crvene boje, a one nisu povezane, čekiranjem ove opcije selektovaćete samo onu oblst na koju kliknete.

• Sample All Layers- Selektuje semplirajući boje koje se nalaze na svim dokumentima, ako ova opcija nije uključena, Magic Wand tool semplira samo bije sa trenutno aktivnog Layer-a.

Selekcija pomoću komande Color Range Color Range komanda selektuje odreñeni deo slike na osnovu neke boje, ili raspona boja (color range) bilo unutar odreñenog dela dokumenta (odreñenog selekcijom), ili celog dokumenta. Ova komanda nije na raspolaganju prilikom rada sa 32 bitnim dokumentima. Da biste pokrenuli prozor ove komande, idite na: Select > Color Range…

Slika 54. Meni prozora Color Range i dokument na koji se komanda primenjuje

Centralni deo prozora zauzima previw selekcije, odnosno slike: Selection - prikazuje približno kako će izgledati selekcija, na osnovu boje ili boja koje ste semplirali, bele oblasti su selektovane, crne neselektovane. Image - Prikazuje celu sliku Selekcija se vrši tako što željenu boju na željenu boju kliknete eyedropper toolom. Pošto pipetom izaberete sa originalne slike, ili preview oblasti (u slučaju da ste selektovali Image) odreñenu boju, klikom na pipetu pored koje je znak (+), možete dodati još boja selekvciji, a na pipetu pored koje je (-) oduzeti.

Fuzzines klizač omogućava da povećate, odnosno smanjite color range, on je predstavljen u vidu sive boje u okviru preview dela prozora. Kada jednom izaberete selekciju koju i dalje nameravate da koristite, možete je sačuvati, i ponovo učitati. Ovo možete uraditi direktno iz Color Range prozora, preko dugmadi Save, odnosno Load. U slučaju da želite da sačuvate već postojeću selekciju, to možete učiniti iz: Select > Save Selection.

65

Slika 55. Čuvanje selekcije

Ako ste u Channel padajućem meniju ostavili New, selekcija će se uskladištiti u Alpha channel-u dokumenta, koji možete da pogledate klikom na Channels jezičak Layer palette. U polje Name, upišite ime selekcije, potrudite se da ime bude opisno, kako biste prilikom korišćnja Load Selection komande lako prepoznali o kojoj se selekciji radi u slučaju da ih imate više.

BOJENJE I GRADIENT

Bojenje u Photoshop-u menja boju pixel-a dokumenta. Koristeći alate za bojenje možete da menjate izgled neke slike, kreirate ili menjate maske na alpha channel-u, bojite prošlim stanjem (History brush tool)... Veliki broj opcija koji imate skoro kod svakoga alata, pruža vam mogućnost potpune kontrolu prilikom njihovog korišćenja, omogućavajući vam da stvorite zapanjujuće efekte. U Adobe Photoshopu CS5, postoji nekoliko alata za bojenje. Alati Brush tool i Pencil tool rade kao tradicionalni alati, tako što potezima nanosite boju na dokument. Alati Gradient, Paint Bucket i Fill command se koriste kada želite da odredjenom bojom, ili prelivom boja prekrijete veću površinu. Svaki od ovih alata ima svoj Options bar sa karakterističnim ocijama. Biranje boja Na dnu palete Toolbox, nalaze se dva crno bela kvadrata, koja su preklopljena (po predefinisanim vrednostima), ako su vam neke druge boje izabrane, a želite da brzo vratite na osnovne, pritisnite tater (D) - default. Kvadrat koji je u prednjem planu je crn (Foreground Color), dok je onaj ispod njega (u pozadini) beo (Background color). Alatke za bojenje, najčešće koriste boju prednjeg plana, da bi bojile pixele na dokumentu. Ovu boju možete promeniti iz crne, tako što ćete kliknuti na crni kvadrat. Otvoriće vam se prozor za izbor boja, Color Picker:

66

Slika 56. Color picket prozor

A-boja koja će biti izabrana B-trenutna boja C-Nova boja, tj. boja koja će biti izabrana D-ikonica koja vam signalizira da li je izabrana boja van gamuta E-ikonica koja vam signalizira da li je izabrana boja van web-safe boja F-čekiranjem ovog dugmeta, možete da birate samo web-safe boje G-polje za izbor boja H-color slider (klizač za izbor boja) I- vrednosti koje odredjuju pojedinu boju

Primetite da vam u Title bar-u ovog prozora u zagradi piše da li birate Foreground ili Background Color, tj. da li za boju prednjeg plana ili boju pozadine. Najveći deo ovog prozora zauzima polje sa bojama. Povlačenjem kruga, tj. semplera iz njenog gornjeg levog ugla na novu poziciju birate novu boju, tj. boju koja će zameniti postojeću. Klizač koji se nalazi desno od ovog polja, služi vam da biste lakše izabrali odreñenu boju, ili njene nijanse. Takoñe, možete semplirati boju koja se nalazi već na vašem dokumentu. Potrebno je samo da dok je otvoren ovaj prozor kliknete kursorom miša na boju u dokumentu, primetite kako se kursor tokom tog procesa promenio iz strelice u alatku Eyedropper . U polja koja su na grafici označena sa (I) možete, kada postanete malo iskusniji, upisivati vrednosti i na taj način odreñivati svojstva boje. Na primer R stoji za količinu crvene (red), G za količinu zelene (green), B za količinu plave (blue)... Takoñe svaka boja se beleži pomoću heksadecimalne vrednosti, koja se unosi u polje koje je označeno sa (#). Izabravši neku boju možete da vidite njenu heskadecimalnu vrednost, kada sledeći put budete želeli da izaberete tu identičnu boju, možete jednostavno upisati tu vrednost u polje za izbor. Bojenje alatkom Brush i Pencil Alatke Brush i Pencil boje pixel-e dokumenta trenutnom bojom prednjeg plana (foreground color), pri tome alatka Brush simulira nanos boje koji bi učinili potezi četkicom, dok Pencil tool simulira boju koju bi nanela olovka ili drvene bojice. Da biste bojili pomoću ovih alata:

• Izaberite boju prednjeg plana koju želite (foreground color)

67

• Iz Toolbox-a izaberite Brush tool ili Pencil tool . • Izaberite veličinu četkice (Brush) Options bar-u klikom na malu strelicu koja

pokazuje na dole • Ako želite podesite ostale opcije u Option bar-u • Crtate ili bojite tako što kliknete na dokument i držite levi taster miša prilikom

povlačenja: za crtanje prave linije dežite Shift; ako vam je selktovan airbrush u opcijam, kliknite i držite na dom mestu, da biste povećali gustinu boje

Options bar Iako opcije koje su vam na raspolaganju variraju od alata do alata, ipak većina ih je ista ili slična:

• Mode ova opcija odredjuje način na koji će se boja koju ste izabrali i koristite je pri bojenju ili crtanju da se uklopi sa pozadinskim pixel-ima, tj sa pixel-ima preko kojih bojite, nova boja koju dobijete naziva se result color

• Opacity odredjuje nivo neprovidnosti boje koju primenjujete. Kada bojite preko odreñenog prostora, iako više puta predjete preko dela koji je obojen providnost boje koju nanostite, to jest koju ste naneli neće se smanjit, sve dok ne pustite levi taster miša, i ponovite operaciju. Kada ponovite, vi sada, na već postojecu boju nanosite novu. Opacity od 100% je neprovidna.

• Flow kontroliše “protok” boje koja se nanosi na dokument dok prevlačite alatom preko njega. Što je vrednost u procentima manja, protok je manji.

• Airbrus simulira bojenje sa airbrush-om. Kako prevlačite preko odredjene oblasti, boja se ugradjuje u nju sve više i više dok držite pristisnut levi taster miša. Tvrdoña četkice, njena opacity i flow kontrolišu koliko brzo i u kojoj količini se

boja nanosi ovim metodom. Kliknite na dugme da biste aktivirali ovu opciju. • Auto Erase automatski boji bojom pozadine (background) preko oblasti koje su

obojene bojom prednjeg plana (foreground) ispod se nalaze slike Options bar-ova Pencil tool-a i Brush tool-a :

Slika 57. Option bar Pencil toola

68

Slika 58. Option bar Brush toola

Brush palette Alatka Brush, pored ovih opcija, poseduje i svoju paletu, iz koje do detalja možete podesiti osobine četkice. U ovoj paleti možete birati setove četkica, na sličan način kao i prilikom biranja u Brush Preset Picker-u, ali takoñe možete modifikovati već postojeću četkicu, ili dizajnirati novu četkicu, zasnovanu na vašim podešavanjima. Ovu paletu čine sledeće celine:

Slika 59. Brush paleta

A- ikonica katanca, koja kada je zaključana onemogućava menjanje podešavanja za tu karakteristiku, u ovom slučaju je Shape Dynamics zaključan

B- otključana ikonica katanca, dakle podešavanja za ovu karakteristiku četkice su izmenljiva

C- četkica koja je trenutno izabrana, i koju možete da menjate, klikom na neku drugu četkicu unutar ove oblasti (Brush Tip Shape), selektujete nju

D- podešavanja karakteristika četkice

69

E- Previw, tj. preliminarni prikaz kako će izgledati potez četkicom koju ste izabrali, ili koju kreirate, sve izmene koje izvršite update-uju se u realnom vremenu i možete ih pratiti preko ovog prozora

F- Pop-up menu ovog prozora, omogućava vam pristup opcijama poput Reser Brushes, Save Brushes, Load Brushes.

G- Brush Tip Shape ili oblik vrh četkice H- Opcije za trenutno aktivnu karakteristiku trenutno aktivne četkice

Podešavanja karakteristika četkice Ovom prilikom ćemo spomenuti samo neke od najvažnijih karakteristika i njihova podešavanja koja su vam na raspolaganju u Brush palette:

• Shape dynamics odreñuje varijante u otisku četkice koje ona ostavlja u svom nanosu:

• Size Jitter - odreñuje u kojoj razmeri će varirati veličina četkice • Minimum Diameter - odreñuje minimalni prečnik četkice koji je dozvoljen u njenim

varijacijama (ako su neke od varijacija izabrane) • Angle Jitter - odreñuje u okviru kojih vrednosti će varirati ugao nanosa četkice

(stroke), tj. ugao pod kojim se on nanosi • Roundness Jitter and Control – odreñuje kako u okviru nanosa varira zaobljenost

četkice • Minimum Roundness - Minimalna zaobljenost četkice, do koje zaobljenosti može

da varira u nanosu • Scattering - odreñuje kakav će biti raspored otisaka četkice u nanosu. Što je veća

vrednost, veća je udaljenost izmeñu pojedinih otisaka: • Count- odreñuje broj otisaka po intervalu razmaka, veći broj znači veći broj

otisaka, tj. gušći nanos • Count Jitter - odreñuje varijacije otisaka • Texture - uključivanjem ove opcije omogućeno vam je da vaši potezi četkicom

izgledaju kao da su napravljeni na odreñenoj teksturi, takoñe moguće je I da bojite tom teksturom

• Scale - odreñuje veličinu teksture • Texture Each Tip - primenjuje izabranu teksturu na svaki otisak četkice, umesto

da tretira ceo nanos kao jedan otisak • Depth - odreñuje koliko će se boja ugraditi, tj. prodreti u teksturu • Dual Brush - ova opcija vam omogućava kombinovanje dve četkice radi stvaranja

jednog otiska, slikaju se samo oblasti u kojima se obe četkice ukrštaju, tj prekrivaju. Na raspolaganju su vam opcije za Mode (blenda), Diameter (veličinu vrha), Spacing (rastojanje), Scater (rastojanje otisaka), Count (gustinu razmaka izmeñu nanosa).

• Foreground/Background Jitter - odreñuje u kojoj će razmeri da varira boja nanosa izmeñu boje prednjeg plana i boje pozadine

• Noise - automatski dodaje šum (Noise) nanosu četkice • Wet Edges - simulira nanos dobijen upotrebom vodenih bojica • Airbrush - simulira upotrebu airbrusha, sa njegovim karakteristikama, koje su već

opisane • Smoothing- “pegla” poteze četkice, praveći lepše prelaze prilikom menjanja

pravca Pravljenje nove četkice

Kreirajte novi dokument 75 x 75px (opciono) Pritisnite Ctrl+Shift+N, a zatim Enter, da biste kreirali novi layer Nacrtajte četkicom odgovarajuće veličine zvezdu. Idite na Edit > Define New Brush Preset, zatim mu dajte ime koje želite:

70

Slika 60. Pravljenje četkice

Takoñe, pošto u paleti Brushes definišete i ostale parametre, npr. hardnes, airbrush… moguće je da ih zapamtite, idite na opcije ove palete i izaberite Define Brush preset… Postoji mogućnost da iskoristite vrh koji ste stvorili, zatim otvorite tu četkicu, a potom joj u brush paleti dodate još opcija, dakle na raspolaganju vam je izuzetno velika sloboda.

Gradient

Ovaj alat vam omogućava da napravite prelaz izmeñu više boja. Oblast koju želite da popunite ovim prelazom selektujete, u suprotnom, on će popuniti ceo aktivni layer. Kada izaberete željenu oblast, izaberite Gradient tool iz Toolbox-a i prevucite preko oblasti, puštajući levi taster miša tek kada stignete do tačke gde želite da se prelaz završi. Opcije ovoga alata su sledeće:

Slika 61. Gradijent opcije

• Linear gradient pravi pravolinijski prelaz izmeñu boja • Radial gradient pravi kružni prelaz izmeñu boja koji ide od centra ka ivicama

kruga • Angle gradient pravi prelaz koji se pravi kružno oko centralne tačke • Reflected gradient pravi prelaz kombinujući dva simetrična pravolinijska

prelaza • Diamond gradient pravi prelaz u obliku dijamanta

Opcija Dither omogućava stvaranje “ispeglanijeg” (smoother) prelaza. Ako želite da unutar gradienta imate i providen delove izaberite opciju Transparency. Klikom na Gradient Editor, otvoriće se padajući meni, koji će vam omogućiti izbor predefinisanih gradijenta, ili kreiranje novog:

71

Slika 62. Gradijent editor

A. padajući meni ove palete B. ručica za Opacity (moguće ju je pomerati) C. ručica za boju (moguće ju je pomerati, njenim izborom prikazuju vam se njene

vrednosti u sekciji D) D. polje u kome se ispisuju vrednosti za trenutno izabranu ručicu E. srednja tačka prelaza izmeñu dve boje, moguće ju je pomerati

Kada izaberete gradijent koji vam odgovara, možete ga sačuvati jednostavnim klikom na dugme New, pri tome ga imenujući u polju Name.

KOREKCIJA TONALITETA I BOJA

Kao što im i samo ime kaže, ove komande služe da izvrše korekciju boja na slici, meñutim, neke od njih se pored ove funkcije, još mogu koristiti i za dobijanje veoma interesantnih i neobičnih efekata. U ove komande spadaju:

• Auto Color command – automatski ispravlja balans boja (color balance) slike. Iako njeno ime implicira da se ova komanda izvršava automatski, na raspolaganju vam stoje opcije za fino podešavanje parametara na osnovu kojih će ona biti izvršavana. Ona, po predefinisanim vrednostima, izvršava pretragu slike, na osnovu koje identifikuje senke (shadows), srednje tonove (midtones) i jako osvetljene oblasti (highlights), zatim uklanja srednje tonove, čineći još neke izmene na senkama i osvetljenim delovima.

Da biste pristupili ovoj komandi, idite na: Image > Adjustments > Auto Color Izvršavanje ove komande je potom momentalno, ne nudi vam se nikakva mogućnost za podešavanje njenih parametara. Skraćenica je (Shift+Ctrl+B) U sklopu sledeće komande Levels će biti objašnjeno kako pristupiti parametrima Auto Color command-e.

• Levels command- ova komanda služi za ispravljanje tonalnog raspona (tonal range) kao i za balansiranje boja (color balance) tako što podešava intenzitet

72

nivoa senki, srednjih tonova i svetlih delova. Najčešće se koristi za potamnjivanje i posvetljavanje slike, kao i za pretvaranje u crno-belu. Centralni deo ovoga prozora zauzima The Levels histogram, koji predstavlja vizuelni vodič za izmene tonova.

Da biste izvršili ovu komandu idite na: Image > Adjustments > Levels (Ctrl+L) Otovriće se novi prozor, koji bi trebao da bude sličan prozoru ispod:

Slika 63. Prozor Levels

A. senke (shadows) B. srednji tonovi (midtones) C. svetli delovi (highlights) D. izvršava komandu Auto Color Correction, koja je objašnjena iznad E. opcije za komandu Auto Color Correction

Povlačenjem crne ručice u desno, vaša slika će postati tamnija, dok ćete povlačenjem desne ručice ulevo dobiti suprotan efekat (ovo se odnosi i na Input Levels dok je kod dijaloga Output Levels efekat suprotan) Izmene koje izvršite su destruktivne.

• Curves command – Još jedan način za podešavanje tonal range (tonalnog raspona) cele slike je upotreba komande Curves (Krive). Ova komanda vam omogućava da postavite do 14 tačaka, koje će definisati tonal range vašeg dokumenta (od senki do svetlih tonova), sa druge strane, komanda Levels ima samo tri podešavanja: white point (belu tačku), black point (crnu tačku), gamma.

Tonal range je predstavljen pravom dijagonalnom linijom. Da biste pristupili ovom prozoru idite na: Image > Adjustments > Curves (Ctrl+M) Otvoriće se novi prozor, sličan ovom na slici ispod:

73

Slika 64. Prozor Curves

A. izvršite izmene dodajući tačke na liniju B. nacrtajte krivu (curve) olovkom C. highlights D. midtones E. shadows F. klizač crne i bele tačke G. Curve Display Options H. Postavite crnu tačku (black point) I. Postavite sivu tačku J. Postavite belu tačku K. Prikaži presecanje (clipping) • Photo Filter command - ova komanda oponaša tehniku pri kojoj se stavlja

obojeni filter ispred objektiva foto-aparata da bi se prilagodio color balance i “temperatura” svetla koje prolazi kroz objektiv na film. Komandi se pristupa iz: Image > Adjustments > Photo Filter

Otvoriće se prozor:

74

Slika 65. Photo filter

U padajućem meniju filter vam je na raspolaganju veliki broj predefinisanih filtera. Ipak, ako ni jedan ne zadovoljava vaše potrebe, možete obeležiti Color dugme i izabrati boju koja vam odgovara. Klizačem Density kontrolišete njenu gustinu. Gledajte da vam dugme Preview uvek bude uključeno, jer vam ono omogućava da vidite kako će izgledati neka primena neke komande, iako je još niste izvršili.

• Color Balance command - Ova komanda menja celokupnu mešavinu boja na slici, koristeći se količinom Cyan, Magenta, Yelow, Red, Green, Blue u njihovom dobijanju, i to zasebno u shadows, zasebno u midtoners I zasebno u highlights.

Povlačenjem klizača u okviru polja za ColorBalance podesite količine boja prema vašim potrebama. Pri tome vodite računa da li se boja koju želite da prilagodite nalazi u senkama, svetlim tonovima ili srednjim tonovima. Pobrinite se da Preview bude uključen. Komanda se nalazi u: Image > Adjustments > Color Balance (Ctrl+M)

Slika 66. Prozor Color Balance

• Hue/Saturation command - ovaj dijalog omogućava podešavanje vrednosti za Hue (nijansa), Saturation (zasićenost) i Lightness (osvetljenost) cele slike, ili pojedinačnih kompozicija, takoñe komanda omogućava i istovremeno podešavanje svih boja na slici. Posebno je koristna za fino podešavanje. Pristupa joj se iz: Image > Adjustments > Hue/Saturation (Ctrl+U)

75

Slika 67. Prozor Hue/Saturation

Upotreba komande je veoma laka. Pomeranjem klizača Hue menjate, pomeranjem Saturation (Zasićenost), Lightnest (posvetljujete). Klikom na Colorize, menjate sve boje pomeranjem klizača Hue

• Match Color command - izjednačava boje sa jedne fotografije sa bojama sa druge, boje sa jednog layer -a sa bojama drugog, boje iz jedne selekcije sa bojama druge, koja je ili u istom ili drugom dokumentu.

• Replace Color command - ova komanda menja jednu boju na slici ili u okviru selekcije, sa drugom bojom. Komandi se pristupa iz: Image > Adjusments > Replace Color.

Boju koju želite da zamenite birate u polju Selection, klikom na Eyedropper tool, ako hoćete da dodate koš neku boju kliknite na Eyedropper tool sa znakom (+). Centralni deo zauzima mali prozor koji prikazuje masku, maskirane oblasti su crne, nemaskirane bele (selection) ili sliku (image).

76

Slika 68. Prozor Replace color

U polju Replacement birate boju kojom želite da zamenite boju, njoj možete podesiti i neke karakteristike slično kao i u prozoru Saturation.

LAYERS (SLOJEVI)

Veoma veliki deo funkcionalnosti Photoshopa počiva na pružanju mogućnosti korisniku da sadržaj svog dokumenta postavi na zasebne slojeve (layers), te tako prilikom vršenja izmena, primene filtera, stilova, ili specijalnih efekata, promene trpi samo sloj koji je aktivan. Svi layeri su providni, sem Background layer-a (i on može da bude providan), tako da, kao što vidite na slici iznad, vi možete delimično da vidite tekst crvenog layer-a, LAYER-a 1, iako ga najvećim delom prekriva LAYER 2. Deo koji ne vidite prekriva zeleni četvorougao na sloju 2. Ovo se dešava zato što je LAYER 2 iznad LAYER-a 1. Ako bismo želeli da tekst koji se nalazi na LAYER-u 1 bude vidljiv, mogli bismo to da postignemo na nekoliko načina:

• Mogli bismo da pomerimo sloj 1 ulevo (koristeći alat Move tool ), dok tekst ne bi postavo vidljiv, pri tome bismo mogli i da pomeramo ostale slojeve, dok ne dobijemo željeni rezultat.

• Mogli bismo da premestimo LAYER 1 iznad LAYER-a 2, tako da bi njegov sadržaj sada prekrivao sadržaj LAYER-a 2.

77

• Mogli bismo da smanjimo Opacity LAYER-a 2. Ovo su najvažnije tehnike koje bismo mogli da upotrebimo za rešavanje ovog izuzetno prostog zadatka. Radi lakšeg predstavljanja layer - a i principa na kome oni počivaju, poslužićemo se slikom ispod:

Slika 69. Slojevi

Paleta Layers Ova paleta po predefinisanim podešavanjima zauzima donji desni deo radnog prostora. Ako ste menjali podešavanja i sada je ne vidite, idite na: Window > Layers (ili pritisnite F7) Ovu paletu činu sledeće celine:

Slika 70. Paleta Layers

A. meni ove palete, sadrži opcije za kreiranje novog sloja, za dupliranje sloja, brisanje, kao i Merge, odnosno spajanje 2 sloja... sadrži veći deo komandi koji sadrži meni Layer u komandnoj traci (Menu bar).

B. Folder za grupisanje slojeva, tzv – layer Group (na slici su u njega grupisana 2 sloja, slojevi 2 i 1), klikom na strelicu sa leve strane ikonice grupe, možete grupu smanjiti ili proširiti.

C. Aktivan sloj/layer, veoma je važno da se na početku rada sa slojevima naviknete da obratite pažnju da li ste selektovali sloj na kome želite da vršite izmene, jer je njih moguće vršiti samo na aktivnom sloju. Selektovani, tj. aktivni layer je obojen u plavo, na našoj slici to je layer 2. Sloj selektujete tako što kliknete na njega,

78

ako želite da izaberete više slojeva koji su u nizu, kliknite na prvi i držite Shift dok ne kliknete na poslednji. Ako selektujete slojeve koji su “razbacani”, tj nisu u nizu, kliknite na jedan sloj, zatim kliknite na ostale držeći Ctrl.

D. Expand/Colapse layer Effects- dugme za proširivanje, ili smanjivanje efekata koji su primenjeni na dati sloj. Na slici gore, na sloj je primenjen efekat Bevel and Emboss.

E. Layer Effects (efekti za odreñeni sloj) F. Background layer, tj. pozadinski sloj, to je sloj koji se nalazi na samom dnu Layer

palette, nemoguće mu je menjati Opacity, ili Fill, kao ni Blending modes. Da biste vršili ove promene, morate ga pretvoriti u obličan layer. Ovaj sloj je nemoguće izbrisati dok je on jedini sloj u dokumentu. Važno je da primetite da ovaj sloj ima neku popunu (Fill), ako stvarate novi dokument sa popunom, on će imati Background layer, ako stvarate bez popune (transparent), neće. Dakle dokument koji nema popunu prilikom svog kreiranja nema Backgroun layer.

Sa leve strane svakog sloja nalazi se njegov Thumbnail, tj mala slika sadržine tog sloja, ovoj slici možete promeniti veličinu, tako što ćete otići na Palette Options u Layer Palette meniju. Iz ovog menija takoñe možete kreirati novi layer (New Layer), mada je upotreba komande Shift+Ctrl+N ili klik na ikonicu , koja se nalazi na dnu palete. Duplirate postojeći layer (Duplicate Layer), ova komadna vam daje više kontrole prilikom dupliranja layera, jer se otvara novi prozor, preko koga možete da promenite neke od ponuñenih opcija (naziv dupliranog sloja, njegova destinacija...) tokom praktičnog rada, češće se upotrebljava skraćenica Ctrl+J, ili jednostavno uhvatite kursorom miša sloj koji želite da duplirate i prevucite ga na ikonicu novog dokumenta . Sledeća komanda koju imate u meniju Layers palette jeste Delete Layer, ova komanda briše selektovani sloj, isto postižete i ako selektuje te sloj i kliknete na ikonicu kante za otpatke , ili uhvatite mišem sloj koji želite da izbrišete i prevucite ga na ovu ikonicu. Opcija Delete Hidden Layers će biti aktivna samo u slučaju da u paleti Layers imate bar jedan skriveni sloj, sloj je skriven ako je ikonica oka sa njegove desne strane isključena. Komanda Delete Hidden Layers, briše sve skrivene layer-e u dokumentu. Komanda New Group, stvara novu Grupu, tj. Folder u kome možete da grupišete slojeve njihovim prevlačenjem u nju. Isto postižete i klikom na ikonicu Grupe (mala fascikla) . New Group from Layers se koristi kada selektujete sloj, ili nekoliko slojeva koje želite da smestite u novu grupu, Photoshop će to uraditi automatski. Prilikom korišćenja komadi za kreiranje nove rupe, otvara se prozor koji vam omogućava da detaljnije kontrolišete ovaj proces (ime nove grupe, boju u paleti...)... Lock all Layers in Group zaključava sve slojeve u okviru neke grupe, isto možete postići time što ćete selektovati grupu i kliknuti na ikonicu katanca . Ova ikonica se nalazi u sekciji Lock, koja služi za zaključvanje (sa leva na desno):

• zaključava transparentnih delova sloja • zaključava pixel-e sloja, ne dozvoljavajući vam da vršite izmene • sprečava vas da menjate položaj sloja, tj. da ga pomerate • zaključava sve gore pomenute parametre

Komadan Convert to Smart Objects je prvi put uvedena u Photoshop CS. Ona vam pruža mogućnost da odreñeni Layer pretvorite u “pametni objekat”, korišćenje ove komande će vam omogućiti da vršite nedestruktivne transformacije na sloju na kome je ona primenjena. To je moguće. Zato što smart objects u sebi čuvaju sve početne podatke o sloju ili slici, tako da u slučaju da smanjite neki objekat na 30%, a posle poželite da ga vratite na 100%, nećete primetiti nikakav gubitak u rezoluciji, što bi bilo nemoguće u radu sa rasterskom grafikom, bez primene ove opcije. Link Layers komanda, povezuje selektovane slojeve, isto možete učiniti i klikom na ikonicu lanca , pošto ste selektovali slojeve koje želite da povežete.

79

Select Linked Layers selektuje sve slojeve koji su meñusobno povezani, da biste je korisitli morate da budete pozicionirani na sloju koji je povezan bar sa još jednim slojem Merge Down komanda koja spaja sloj sa slojem koji je ispod njega, prečica je Ctrl+E. Merge Visible ili Shift+Ctrl+E spaja sve slojeve čiji sadržaj je vidljiv na monitoru. Flatten Image ova komanda pegla celu sliku, stavljajući ceo njen sadržaj na jedan sloj, Background layer. Palette Options otvara novi prozor, prozor sa opcijama za paletu slojeva:

Slika 71. Opcije Layers palete

U njoj, kao što je već rečeno možete da podesite veličinu ikonice sloja (Thumbnail size), da li želite da se na ikonici prikazuje prostor koji sloj zauzima u celom dokumentu (entire Document), ili želite da obuhvata samo granice sloja (Layer Bounds)... Primetite da velikom broju ovih komandi možete pristupiti tako što ćete kliknuti desnim tasterom miša na sloj. Neke od opcija koje nisu pokrivene u ovoj lekciji, kao što su Layer style , Blending modes, biće objašnjne u narednim lekcijama. Opacity, Fill Opacity kontroliše neprovidnost nekog sloja, vrednost od 100% znači da je sloj neprovidan, vrednost od 0% da je skroz providan, tj. nevidljiv. Fill označava vrednost u procentima popune sloja, vrednost od 100% znači da je popuna sloja stoprocentna, 0% da popune nema. Kada radite sa više slojeva, tj. kada radite sa sadržajem koji je rasporeñen na više slojeva, veoma često ćete poželeti da taj sadržaj rasporedite tako što ćete ga poravnati u odnosu na donju ivicu, gornju ivicu, možda ćete hteti da ga postavite na sredinu dokumenta, da napravite jednak razmak izmeñu njega... Da biste iskoristili komande koje vam to omogućavaju, prvo selektujete sve slojeve čiji sadržaj želite da poravnate, zatim izaberite Moov tool, u optionsbar-u ovog alata će se pojaviti opcije Align, zatim kliknite na neko poravnanje koje želite da primenite:

Slika 72. Opcije poravnanja

80

LAYER STYLES

Photoshop vam pruža mogućnost da sadržaju layer-a, dodate jedan ili više efekata poput senke, unutrašnje senke, sjaja... Ovi efekti su vezani za sadržaj sloja i ako izmenite sadržaj, izgled efekata će odmah biti osvežen i prikazivaće novo stanje. Na primer, ako imate kvadrat na sloju na kome je efekat Drop Shadow i naknadno na taj sloj dodate i trougao, efekat senke će biti primenjen i na njega. Jedan ili više efekata koji su primenjeni na odreñeni sloj, nazivaju se stil (style) tog sloja. Ovaj stil se može sačuvati i potom učitati kada god to poželite. Predefinisanim stilovima možete pristupiti iz Layer Style palette, ali o tome nešto kasnije. Prozoru Layer Style možete pristupiti na nekoliko načina: Layer > Layer Style > potom izaberite stil koji želite Na dnu Layers palette kliknite na ikonicu Add layer style Dva puta kliknite na prikaz sloja u paleti Layers

Slika 73. Stil sloja

U okviru novog prozora trebalo bi razlikovati 2 grupe: A – sa leve strane se nalaze efekti koje možemo da primenimo, trenutno aktivan efekat se nalazi na plavoj traci, efekti koje smo izmenili i koji će biti primenjeni na sadržaj sloja imaju čekiran box sa leve strane. B – desno od efekata se nalaze opcije za trenutno aktivni efekat. Na slici su trenudno aktivna podešavanja za Blending Options, koja se otvaraju prva po predefinisanim podešavanjima. Ona vam daju mnogo bolju kontrolu nad time kako će se sloj stopiti sa drugim slojevima.

Najvažniji efekti: Drop Shadow – stvara senku koja pada iza sadržaja sloja. Kada kliknete na ovaj efekat, otvoriće vam se njegove opcije:

81

Slika 74. Opcija Drop Shadow

Structure: • Blend Mode: namešten je na Multiply, jer je taj mod ističe tamne tonove.

Desno od njega nalazi se polje u kome možete izabrati boju senke. • Opacity (neprovidnost) – definiše neprovidnost senke • Angle (ugao) – definiše pod kojim uglom senka pada, ugao možete

menjati ili manuelno, okretanjem unutar kružnice, ili upisivanjem numeričke vrednosti

• Use Global Light (globalna osvetljenost) – Trenutno podešavanje senke postaje podešavanje senke za sve slojeve koji imaju ovaj efekat

• Distance (udaljenost) – udaljenost senke od objekata koji je pravi • Spread (širenje) – kako se senka širi, definiše njenu gustinu... • Size (veličina) – definiše veličinu senke • Quality (kvalitet): • Contour – u zavisnosti od toga da li ste kliknuli na strelicu ili na sliku,

otvara ili padajući meni sa predefinisanim konturama:

Slika 75. Konture

U njemu možete izabrati neku od kontura senke. Pomerite ceo prozor Layer Styles u stranu, tako što ćete ga uhvatiti za Title bar, da biste mogli da vidite kakve se promene vrše na senci. Ako ste kliknuli na sliku, otvoriće vam se novi prozor, prozor Contour editor, primetite da je Layer Styels prozor i dalje aktivan. U ovom prozoru možete kreirati svoju sopstvenu konturu senke dodajući tačke na liniju konture u grafikonu Mapping. U njemu možete i sačuvati ili učitati već kreiranu konturu.

82

Inner Shadow (unutrašnja senka) – za razliku od Drop Shadow, Inner Shadow pada unutar granica sadržaja sloja. Opcije koje možete menjati ovom efektu su identične kao i kod prozora Drop Shadow, te ih ovde nećemo izlagati.

Slika 76. Efekat opcije Inner shadow

Outer Glow (spoljašnji sjaj) – Ako želite da stvorite utisak da sadržaj sloja emituje sjaj oko sebe, ovo je pravi efekat za vas. Opcije koje sadrži su:

Slika 77. Opcija Outer Glow

Structure

Blend Mode – odreñuje način stapanja sjaja sa pozadinskim pixel-ima, Screen mod j predefinisani mod, zato što ističe svetle nijanse. Opacity - Neprozirnost sloja Noise (šum) – dodaje šum svetlu

Ispod Noise možete izabrati da li želite da sjaj čini jedna boja i koja, ili želite da ga

čini preliv (gradient), koji možete definisati klikom na padajući meni. Elements Spread – kontoliše % širenja sjaja oko sadržaja sloja Size – kontroliše veličinu sjaja u pixelima, tj koliko zahvata pixel-a od granica sadržaja Quality – nudi slična podešavanja vezana za konturu sjaja Inner Glow – Ima identična podešavanja kao i Outer Glow

Slika 78. Efekat opcije Inner glow

83

Bevel and Emboss – sadržaju layera dodaje različite kombinacije senki i posvetljenih delova (highlights), tako da sadržina dobija “dubinu”. Koristi se za postizanje 3D efekata i naglašavanje ivica. Opcije koje nudi su: Structure:

• Style – odreñuje poziciju bevel-a, možete da izaberete da li želite da bevel bude Outer Bevel (spoljni), Inner Bevel (unutrašnji), Emboss.

• Technique – padajući meni koji vam omogućava izbor Smooth, Chisels Hard, ili Chisel Soft bevel-a.

• Depth – klizač koji odreñuje jačinu efekta, odnosno nijanse, svetla i senki. • Size - klizač koji odreñuje veličinu efekta • Soften - klizač čijim pomeranjem efekat možete ublažiti ili pojačati • Shading: • Angle - Odreñuje ugao pod kojim će se efekat primeniti • Altitude – odreñuje visinu svetlosnog izvora • Gloss contour – klikom na ovu opciju koja je slična opciji Curves, možete ili

izabrati neko od predefinisanih podešavanja, ili kreirati sopstvenu krivu, koja će uticati na svetle delove, senke i nijansu efekta.

Slika 79. Opcija Bevel and Emboss

Color, Gradient, and Pattern Overlay – Ispunjava sadržaj sloja bojom, prelivom ili šablonom. Opcije ovih efekata nećemo detaljnije objašnjavati Stroke – Oblaže spoljnu ivicu sadržaja sloja linijom boje, preliva ili šablona. Ovaj efekat se naročito često primenjuje kod teksta. Opcije su:

84

Slika 80. Opcija Stroke

Structure: Size (veličina) – definiše veličinu stroke-a u pixel-ima, predefinisana vrednost je 3px Position – nudi vam izbor izmeñu sledećih pozicija stroke-a u odnosu na sadržaj sloja:

• Outside – spolja • Inside - unutra • Center – u centru

Blend Mode – definiše kako će se stroke uklopiti sa pozadinskim pixel-ima Fill Type – način popune Color – klikom na boju, otvara vam se prozor Select Stroke color, u kome boju birate na identičan način kao i u Color Picker prozoru. Paleta Styles Ovoj paleti se pristupa iz Window > Styles, u paleti se nalaze predefinisane vrednosti stilova, odnosno efekata. Njih primenjujete na odreñeni sloja, tako što ih uhvatite i prevučete na njega. Stilovi koje sačuvate tokom rada će biti dostupni iz ove palete, njih možete sačuvati I I direktno iz nje, tako što ćete učiniti aktivnim sloj koji sadrži odreñene efekte koje želite da sačuvate, a zatim kliknuti na ikonicu Create New Style u paleti Styles, ova ikonica je identična onoj za stvaranje novog sloja u paleti Layers.

Slika 81. Paleta Styles

Levo od nje je ikonica koja uklanja stil sa aktivnog sloja (layer-a), ali ga ne briše.

85

Desno je ikonica koja uklanja sloj koji želite; uhvatite sloj koji želite da izbrišete i prevucite ga do ove ikonice, zatim pustite levi taster miša.

RETUŠIRANJE

Photoshop CS5 poseduje nekoliko alatki za kloniranje, koje retuširanje fotografije čine veoma lakim. Pored alata za kloniranje, na raspolaganju vam stoje i alati za uklanjanje crvenih očiju, četkice za “lečenje” slike... Ovi alati su toliko moćni da ljudsko lice posle retuširanja njima izgleda prirodno. Red Eye tool Ova alatka uklanja efekat ”crvenih očiju” nastao usled korišćenja blica, sa fotografija ljudi ili životinja. Ovaj efekat nastaje prilikom korišćenja blica u zatamnjenim prostorijama prilikom refleksije svetla o mrežnjaču subjekta.

Alatka Red Eye tool se nalazi u Toolboxu. Izaberite je, zatim kliknite na crvenu oblast oka. Ako niste zadovoljni rezultatom, poništite izmenu (Undo) i podesite neke od opcija alata u njegovom Options bar-u:

Slika 82. Opcije Red eye toola

Pupil Size – povećava ili smanjuje oblast koja se tretira sa Red Eye tool Darken Amount – zadaje vrednost potamnjenja koje će se izvršiti

Slika 83. Efekat Red Eye toola

Clone Stamp tool Ova alatka preslikava jedan deo slike drugim, ili jedan deo dokumenta delom drugog dokumenta (oba dokumenta moraju biti otvorena i biti u istom color modu). Moguće je da deo jednog layer-a preslikate na drugi. Alatka je veoma korisna ako želite da duplirate neku oblast slike, ili uklonite neželjene objekte. Alat radi na taj način što prvo definišete sampling point, tj. oblast sa koje želite da kopirate. Ovo vršite tako što izaberete Clone Stamp tool iz Toolbox-a i pritisnete Alt, zatim kliknete na sampling point. Na raspolaganju vam je niz opcija za ovu alatku:

Slika 84. Opcije Clone stamp toola

• Brush – menjate veličinu četkice, tj veličinu oblasti koju ćete preslikavati

86

• Mode – menjate pod kojim blending modom želite da se preslikavanje izvrši • Opacity – kontroliše neprozirnost sloja koji se duplira • Flow – kontroliše “protok”, slično kao kod Brush tool-a • Airbrush – simulira airbrash alat • Aligned – Kada semplirate neku oblast i počnete da je duplirate, primetite kako na

ekranu postoje dva krstića, jedan u centru kruga, koji vam pokazuje na koju oblast trenutno preslikavate, a drugi, veći krstić sa koje oblasti trenutno semplirate. Veći krstić uvek prati manji krstić koji je u krugu dok ne pustite taster miša. Kada ponovo krenete da duplirate, veći krstić se vraća na oblast sa koje ste započeli sempliranje na početku. Ako ne želite da se ovo desi, već da nastavite da semplirate sa oblasti gde ste prošli put stali (pre nego što ste pustili levi taster miša) čekirajte opciju Aligned.

• Sample – iz padajućeg menija možete da izaberete: • Current Layer – predefinisano podešavanje, omogućava sempliranje samo sa

trenutno izabranog layera, drugim rečima izmene ćete moći da vršite samo na tom sloju

• Current & Below – Semplira sve što se nalazi na trenutno aktivnom sloju i ispod njega. Pruža vam mogućnost da recimo kreirate novi layer iznad sloja sa koga želite da semplirate, i zatim preslikavate sa slojeva ispod na njega (novi sloj)

• All Layers – semplira sve layer-e (sem adjusment layer-a) i preslikava na trenutno aktivni sloj

Healing Brush Ovaj alat služi za ispravljanje nesavršenosti na slici (bore, mladeži...) tako što ih stapa sa teksturom oblasti koju ste semplirali. Princip rada je sličan kao kod korišćenja Clone Stamp tool-a , sa tim što Clone Stamp tool direktno kopira piksele koje semplirate na

oblast na koju želite, dok Healing Brush izjednačava teksturu, senčenje, providnost pixel-a koje ste semplirali, sa onim koje ''lečite''. Na raspolaganju su vam sledeće opcije:

Slika 85. Opcije Healing Brush toola

Mode bira blending mod Source bira kojim ćete izvorom piksela da tretirate. Izaberite Sampled ako hoćete da koristite pixel-e sa slike, ili Pattern ako hoćete da koristite pixel-e sa šablona. Ako ste izabrali Pattern izaberite šablon iz padajućeg menija:

Slika 86. Korišćenje šablona

87

Aligned Ako želite da nastavite da semplirate sa oblasti gde ste prošli put stali (pre nego što ste pustili levi taster miša) čekirajte opciju Aligned. (isto kao i kod Clone Stamp tool ) Sample – iz padajućeg menija možete da izaberete: Current Layer – predefinisano podešavanje, omogućava sempliranje samo sa trenutno izabranog layera, drugim rečima izmene ćete moći da vršite samo na tom sloju Current & Below – Semplira sve što se nalazi na trenutno aktivnom sloju i ispod njega. Pruža vam mogućnost da recimo kreirate novi layer iznad sloja sa koga želite da semplirate, i zatim preslikavate sa slojeva ispod na njega (novi sloj) All Layers – semplira sve layer-e (sem adjusment layer-a) i preslikava na trenutno aktivni sloj.

Spot Healing Brush tool

Spot Healing Brush tool brzo uklanja nesavršenosti sa vaših fotografija (pege,

mladeži, bubuljice…). Ona radi na sličnom principu kao i Healing Brush , tj. izjednačava teksturu, senčenje, providnost pixel-a koje semplirate, bilo da su oni sa slike

ili Pattern-a, sa onim koje ''lečite''. Za razliku od Healing Brush , Spot Healing Brush

tool ne zahteva od vas da odredite mesto sa koga ćete da semplirate pixel-e, ona to radi automatski, koristeći pixele koji se nalaze u okolini oblasti koju retuširate. Kao što joj samo ime kaže, ova alatka se koristi isključivo za ispravljanje nedostataka na slici koji se nalaze na odreñenoj oblasti (mladež, bubuljica, pega), dakle oblasti koje možete da ispravite jednim klikom.

Opcije koje su vam na raspolaganju kod alata Spot Healing Brush tool :

Slika 87. Opcije Spot Healing brush toola

Proximity Match koristi pixel-e koji se nalaze na ivici selekcije da bi našao odreñene pixel-e na slici koje koristi da bi tretirao izabrani deo slike. Create Texture - koristi sve pixel-e koji su u okviru selekcije da bi stvorio teksturu kojom će tretirati selektovanu oblast. Sample All Layers – semplira sve slojeve. Možete da uključite ovu opciju, zatim kreirate novi sloj koji će biti aktivan. Taj novi sloj kreirajte iznad sloja koji želite da semplirate, tako da će sve promene biti izvršene na ovom novom sloju, ostavljajući originalni, sa koga ste semplirali netaknut. Patch tool Ovaj alat vam pruža mogućnost da popravite odreñeni deo slike koji selektujete pixel-ima sa druge oblasti slike, ili pixel-ima šablona (pattern). Ona radi na sličnom principu kao i Healing Brush, tj. izjednačava teksturu, senčenje, providnost pixel-a koje semplirate, bilo da su oni sa slike ili Pattern-a, stapajući ih sa područjem koje tretirate. Iaberite Patch tool iz Toolbox-a. Pobrinite se da u Options bar-u bude izabrana opcija Source.

Slika 88. Opcije Patch toola

Iscrtajte selekciju oko oblasti na slici koju želite da tretirate. Kada ste zatvorili selekciju, kliknite na nju i ne puštajući prevucite je iznad oblasti sa kojom želite da je zamenite. Momentalno ćete u oblasti koju zamenjujete dobiti Preview, kada budete zadovoljni izgledom, pustite levi taster miša. Ako želite da vam selekcija koju ste načinili bude “zakrpa”, kliknite na opciju Destination, sada klikom na selekciju i njenim prevlačenjem na neku oblast krpite tu oblast

88

selekcijom. Da bi se akcija izvršila potrebno je da pustite levi taster miša kada ste iznad željene oblasti. Držeći taster Shift, možete dodavati nove oblasti koje označite prevlačenjem već postojećoj selekciji Držeći taster Alt, oduzimate od postojeće selekcije deo koji označite prevlačenjem Držeći pritisnutim kombinaciju tastera Alt+ Shift i prevlačenjem preko postojeće selekcije ostaju aktivne oblasti selekcije koje su nastale presecanjem nove i stare selekcije. Rezultat upotrebe Spot Healing Brush tool-a, Healing Brush tool-a, Patch tool-a i Clone Stamp tool-a prikazan je na slici desno.

Slika 89. Rezultat upotrebe Spot Healing Brush tool-a

Blur tool Ovaj alat služi za ublažavanje oštrih ivica na slici, kao i za smanjivanje detalja na njoj. Što više bojite na slici njime, ona postaje sve zamagljenija. Opcije ovog alata su:

Slika 90. Opcije Blur toola

Brush – podešava veličinu četkice kojom će biti obuhvaćena oblast koju zamagljujete Strenght –podešava količinu zamagljenja koja će biti primenjena na sliku Sample All Layers – semplira sve slojeve. Možete da uključite ovu opciju, zatim kreirate novi sloj koji će biti aktivan. Taj novi sloj kreirajte iznad sloja koji želite da semplirate, tako da će sve promene biti izvršene na ovom novom sloju, ostavljajući originalni, sa koga ste semplirali netaknutom sloju, netaknut. Sharpen tool Ovaj alat povećava kontrast duž ivica slike, izoštravajući ih i čineći ih jasno uočljivim. Ako preko iste oblasti preñete više puta, ovaj efekat će postati uočljiviji. Opcije koje su vam na raspolaganju:

Slika 91. Opcije Sharpen toola

Brush – podešava veličinu četkice kojom će biti obuhvaćena oblast koju izoštravate Strenght –podešava količinu efekta koji će biti primenjena na sliku koju izoštravate

89

Sample All Layers – semplira sve slojeve. Možete da uključite ovu opciju, zatim kreirate novi sloj koji će biti aktivan. Taj novi sloj kreirajte iznad sloja koji želite da semplirate, tako da će sve promene biti izvršene na ovom novom sloju, ostavljajući originalni, sa koga ste semplirali netaknut.

TEKST

Kao što smo već videli u lekciji koja se bavila pregledom alata (Toolbox), Photoshop CS 3 poseduje alate za unos teksta. Sam tekst se u Photoshopu sastoji od spoljnih linija (outlines) koje se baziraju na vektorima. Photoshop čuva ove outlines, i koristi ih kada povećavate ili smanjujete tekst (scale), kada ga čuvate kao PDF, ili EPS tip dokumenta... Kao rezultat korišćenja vektora, moguće je na tekst unutar Photoshopa primeniti odreñene tehnike koje će poboljšati oštrinu njegovih ivica (crisp, sharp...), kao i sam prikaz teksta, nezavisno od rezolucije dokumenta. Kada počnete da unosite tekst u dokument, u Layers palette se stvara novi sloj, koji se zove Type layer. Pošto se ovaj sloj stvori, možete da ga editujete i primenjujete komande i efekte na njega. Jedna od komandi koju je moguće primeniti na ovaj sloj je komanda Rasterize. Type layer matematičke podatke koji definišu tekst (zasnovan je na vektorima), onog trenutka kada ga rasterizujete (Rasterize), vi ivice koje su do tada bile opisane vektorima konvertujete u pixel-e. Kao rezultat tog procesa teskt koji je prividno ostao isti ne možete više da editujete, kada ga povećavate primetićete pikselizaciju... Na tekst se ne mogu primanjivati Filteri, dok se on ne rasterizuje. Osim komande Rasterize, koja je destruktivan i posle koje ne možete više editovati tekst, posetoji i nekoliko drugih komandi, posle čije primene je ovo moguće: Change orientation of type – menjanje pravca kucanja Anti-aliasing – smanjenje nazubljenosti ivica Konvertovanje izmeñu Point type i Paragrph type opcije Stvaranje radne putanje (working path) iz teksta Primena komandi transformisanja, sem komandi Perspective i Distort Korišćenje Layer Styles Korišćenje komande Warp Načini unosa teksta: Postoje dve osnovne vrste unosa teksta: Point type to je horizontalna ili vertikalna linija teksta, koja počinje od mesta na kome ste kliknuli unutar dokumenta. Tekst se ispisuje slovo po slovo, pri čemu se desna granica teksta neprekidno pomera. Ovaj način za unos teksta je koristan ako želite da dodate nekoliko rači.

Slika 92. Point type

Paragraph type – Ako želite da dodate čitav paragraf teskta (pasus), onda koristite ovaj način. Ulazite u ovaj mod, tako što kada izaberete Type tool, prevučete preko dokumenta njime, slično kao i kod pravljenja selekcije alatkom Marquee tool. Pošto to uradite, primetićete da su se oko oblasti koju ste izabrali pojavile granice. Ove granice kontrolišu prostor koji će tekst unutar njih zauzimati, ne dajući mu da ih preñe. Pošto završite unos teksta, na raspolaganju su vam opcije za formatiranje, koje ćemo obraditi u nastavku lekcije.

90

Slika 93. Paragraph type

Tekst na putanji – Pored pomenuta dva glavna načina unosa teksta u Photoshopu je moguće da kreirate putanju, izaberete Type tool i kliknete na početak putanje, tekst koji unosite pratiće ovu putanju

Slika 94. Tekst na putanji

Unos teksta: Tekst se unosi na sledeći način: Izaberite ili Horizontal Type tool ili Vertical Type tool , ako želite da unosite tekst na Point type način, samo kliknite unutar dokumenta, tamo gde želite da unos teksta počne. Tačka sa malom linijom (koja će se povećavati kakao kucate) i kursor koji trepće označavaju mesto gde će se tekst unositi. Ako želite da unesete paragraf teksta, prevlačenjem selektujte oblast dokumenta koju želite da paragraf zauzima. Pojaviće se granice paragrafa i kursor koji će treperiti. Takodje, pošto odredite granice paragrafa, unutar njega možete da iskopirate teskt iz nekog drugog programa za editovanje teksta, poput Word-a, Notepad-a. Iz komandne linije možete da izaberete neke od opcija:

Slika 95. Opcije vezane za tekst

Change the Text Orientation, ova komanda menja pravac kucanja teksta, dozvoljavajući vam da se prebacite sa Horizontal, na Vertical type tool sam jednim klikom.

91

Font family - Ovaj padajući meni služi za biranje fontova, u ovom slučaju trenutno je izabran Euromode font. Klikom na njega se otvara spisak svih fontova koje imate instalirane na vašem računaru:

Ovim padajućim menijem odreñujete stil fonta koji može biti Normal, Italic, Bold ili Bold Italic.

Font size - Padajući meni koji odreñuje veličinu fonta.

Služi za izbor anti-aliasing (sprečavanje nazubljensoti ivica) metoda: • None ne primenjuje nikakav anti-aliasing • Sharp utiče na tekst tako da on izgleda najizoštrenije moguće • Crisp utiče na tekst tako da on izgleda malo izoštrenije • Strong tekst izgleda “deblje” • Smooth tekst se pojavljuje bez nazubljenosti, ali nema oštrinu.

Ova polja služe za formatiranje teksta: • Left align text – poravnava tekst uz levu ivicu • Center text – centrira tekst • Right align text – poravnava tekst uz desnu ivicu.

- ovo polje služi za izbor boje teksta, klikom na njega otvara se prozor koji je isti kao i za biranje boja.

- Warped text, klikom na ovo polje otvara se prozor u kome možete pristupiti opcijama za warping teksta. Pošto su iste kao i opcije kod komande Warp, nećemo ih posebno obrañivati:

Slika 96. Opcije vezane za Warp text

Character palette/Paragraph palette, otvara novi prozor, prozor palete Character/Paragraph:

92

Slika 97. Prozor palate Character/Paragraph

A – Font family B – Font Size C – razmak izmeñu slova (Kerning) D – visina Fonta u procentima E – podešava razmak teksta od linije osnove (baseline) F – različiti dodatni stilovi fontova G – padajući meni za biranje jezika H – opcije I – font style J – razmak izmeñu redova K – menja tracking za selektovane karaktere L – širina fonta M – boja fonta N – anti-alieasing metod Klikom na jezičak Paragraph, otkriće se paleta Paragraph:

Slika 98. Paleta Paragraf

A - formatiranje teksta unutar paragrafa B – uvlačenje leve margine, prvog reda ili desne margine C – dodaje razmak pre paragrafa ili posle paragrafa

FILTERI

Adobe Photoshop CS5 raspolaže velikim brojem filtera. Korišćenjem i kombinacijom ovih filtera može da dobije neograničeni broj krajnjih rezultata. Koristeći neki od filtera, možete da retuširate slike, da primenite neki od specijalnih efekata iz Art galerije i tako pretvorite fotografiju u akvarel ili skicu, ili da napravite jedinstvene efekte koristeći filtere iz grupe „distortion“. Filteri se mogu koristiti za rešavanje jednostavnih zadataka, poput

93

izoštravanja fotografija, preko naprednijih zadataka dodavanja specijalnih efekata, do stvaranja kompletne kompozicije ni iz čega. Pored načina na koji se primenjuju filteri, u ovoj lekciji ćemo napraviti kratak pregled grupa u koje su rasporeñeni filteri unutar Photoshop-a, zadržavajući se samo na najvažnijim. Primena filtera 1. U zavisnosti od toga šta želite da uradite: Ako želite da primenite filter na sloj, izaberite taj sloj Ako želite da primenite filter samo na odreñenu površinu nekog sloja, selektujte taj deo, obratite pažnju da ste na tom sloju. Ako želite da primenite filter nedestruktivno, tako da možete da mu menjate podešavanja kasnije i tako prilagoñavate filter kompoziciji, izaberite Smart Object, koji sadrži sliku na kojoj želite da primenite filter 2. Izaberite filter koji želite 3. U prozoru filtera izaberite opcije koje elite, zatim kliknite na OK Način upotrebe filtera Skoro svi Filteri imaju Preview, tako da možete posmatrati promene koje razna podešavanja unutar filtera, kao i sam filter izazivaju na vašoj slici. Pored primene filtera na sloj, takoñe možete primeniti filter na Smart Object, takav filter nije destruktivan, za razliku od ostalih primena filtera. Prilikom upotrebe filtera, trebalo bi obratiti pažnju na sledeće stvari: 1. Filteri se mogu primeniti na aktivni, vidljivo sloj ili selekciju 2. Svi filteri se mogu primeniti na fajlove koji imaju 8 bita, većina samo radi na ovoj dubini 3. Filteri koji se mogu primeniti na 16 bitne fajlove: Liquify, Vanishing Point, Average Blur, Blur, Blur More, Box Blur, Gaussian Blur, Lens Blur, Motion Blur, Radial Blur, Surface Blur, Shape Blur, Lens Correction, Add Noise, Despeckle, Dust & Scratches, Median, Reduce Noise, Fibers, Cloud 1, Cloud 2, Lens Flare, Sharpen, Sharpen Edges, Sharpen More, Smart Sharpen, Unsharp Mask, Emboss, Find Edges, Solarize, De-Interlace, NTSC Colors, Custom, High Pass, Maximum, Minimum, i Offset. 4. Filteri koji se mogu primeniti na 32 bitne fajlove: Average Blur, Box Blur, Gaussian Blur, Motion Blur, Radial Blur, Shape Blur, Surface Blur, Add Noise, Cloud 1, Cloud 2, Lens Flare, Smart Sharpen, Unsharp Mask, De-Interlace, NTSC Colors, Emboss, High Pass, Maximum, Minimum, and Offset. 5. Filteri se ne mogu primenjivati na Bitmap fajlove ili indexed-color slike 6. Neki filteri jedino rade sa RGB formatom 7. Odreñene filtere kompjuter izvršava tako što isključivo koristi RAM, u slučaju da ne posedujete dovoljno RAM-a, moguće da ćete dobiti poruku o grešci. Filter Gallery vam pruža mogućnost brzog pregleda velikog broja filtera na jednom mestu. Preko nje možete da primenjujete više filtera na dokument, isključujete vidljivost ili efekte u potpunosti za odreñene filtere, resetujete opcije, ili emnjate red kojim su filteri primenjeni na sadržaj dokumenta. Treba obratiti pažnju da nisu svi filteri sadržani u Filter Gallery. Da biste otvorili Filter Gallery, idite na: Filter > Filter Gallery Potom možete kliknuti na kategorije filtera, da biste videli koji su vam filteri na raspolaganju:

94

Slika 99. Galerija filtera

A- Preview, pozor koji prikazuje koje se promene vrše primenom odreñenih filtera na vašem dokumentu. Ako ne vidite celu sliku, a ne želite da je smanjite, možete je pomerati klizačem, ili pak, pozicionirajte miša iznad ovog dela prozora, kursor će se pretvoriti u alatku Hand, kliknite i povucite sliku...

B- Trenutno aktivna grupa filtera, filteri koje ona sadrži i koje je moguće primeniti su izlistani

C- Show/Hide Filter Thumbnails, dugme koje služi za prikazivanje ili skrivanje ikonica filtera

D- Opcije za trenutno aktivni filter (na slici je to filter Difuse Glow) E- Trenutno aktivni filter, ispod njega imamo primenjena još 2 filtera F- Ikonice za dodavanje novog filtera, novi filter se dodaje na vrh. Ikonica je

identična ikonici za novi sloj. Ikonica kante za otpatke predstavlja ikonicu za brisanje selektovanog filtera

G- Ikonica oka koja služi za skrivanje filtera, tj. poništavanje njegove primene na dokument, ali ne i njegovo brisanje, tako da ga uvek ponovnim klikom možete vratiti.

H- Kategorije filtera I- Trenutno aktivni Thumbnail filtera. Za ovaj filter se prikazuju opcije u sekciji D J- Polje za ZOOM-iranje, povećavanje i smanjivanje možete vršiti slikom na +/- ili

unosom numeričke vrednosti u %. Filter galerija sadrži sledeće grupe filtera: Artistic Effects: razne tehnike koje se koriste u slikanju, a kojim se postiže, na primer da posle njiihove primene fotografija izgleda kao akvarel, pastel, fresko tehnika... Brush Strokes: razni efekti čija primena simulira upotrebu raznih četkica, tj. različitih tehnika nanosa četkicom za njihovo stvaranje. Na primer, ako primenite neki od ofih filtera na fotografiju, ona će izgledati kao da je slikana četkicom, krajnji rezultat naravno varira od filtera koji ste izabrali iz ove grupe.

95

Distort: upotrebom ovih filtera, dobijate utisak kao da sliku gledate kroz staklo, vodu... Koriste se za postizanje prirodnog ili neprirodnog izobličenja, u Filter Gallery se nalaze samo neki. Sketch: Filteri iz ove grupe dodaju teksturu slici, često se koriste za postizanje 3D efekta. Takoñe ih je moguće upotrebiti za postizanje privida da je sadržaj nacrtan slobodnom rukom, jer ponekad sadržaj posle njihove primene podseća na skicu. Stylize: U Filter Gallery se nalaz samo jedan efekat iz ove grupe, krajnji rezultat podseća na impresionistički slikarski pravac. Texture: Konvertuju sliku tako što primenjuju selektovanu teksturu na njenu sadržinu. Svim filterima iz Filter Gallery možete pristupiti iz menija Filter. Pored već pomenutih u njemu se nalaze: Blur: razne vrste zamagljenja, koje služe za ublažavanje ivica, specijalne efekte ili simulaciju Motion Blur-a (zamagljenja usled pokreta). Noise: Različiti filteri koji dodaju šum slici Render: grup filtera koja služi za stvranje najrazličitijih specijalnih efekata: preliva, munja, elektriciteta, svetlosnih izvora...

• Clouds- stvara oblake • Different Clouds – stvara oblake sa varijacijama • Fibers – simulira vlakna • Lens Flare – simulira izvor svetlosti u koji gledate

Sharpen: Filteri koji se koriste za izoštravanje slike. Kada primenite neki Filter, ako želite da ga ponovo primenite, ne biste li ga pojačali, možete da iskoristite tastaturnu prečicu Ctrl+F. Kao što je već rečeno moguće je primenivati nekoliko filtera uzastopno krajnji rezultat će zavisiti od redosleda kojim ih primenjujete, dakle da biste ponovili neki efekat nije dovoljno samo znati koje ste filtere primenili, već i koji je njihov raspored.

WORLD WIDE WEB I INTERNET

DOMENI

Pamćenje zapisa IP adresa je nepraktično - kao pomoć je uveden servis za dodelu domena. Domen predstavlja skup hijerarhijskih naziva područja od kojih je sastavljena adresa veb lokacije tj. URL (Uniforme Resource Locator): http://www.its.edu.rs DNS (Domain Name Service) omogućava konverziju korisnicima razumljivog oblika zapisa u numerički - potreban računaru za komunikaciju. Čini ga hijerarhijska struktura imena koja se zasniva na domenima. Distribuiranim BP se realizuje hijerarhija domena. Internet ima preko 200 osnovnih domena (top-level domains). Svaki domen može da ima poddomene itd. Svaki domen sadrži jedan ili više računara. Osnovni domeni nose opšta imena ili geografska (državna) imena. Koren stabla je neimenovan. Ime domena može biti naziv kompanije koja se bavi odreñenim poslom. Ovaj domen se registruje i jedino je korisnik koji ga je registrovao u mogućnosti da ga koristi. Ime domena je unikatno – ne može se pojaviti na Internetu dva puta. Naziv domena ne sme da počne ili da se završi crticom (-). Mala i velika slova su ravnopravna. Domen se zakupljuje na period od 1 do 10 godina. Izbor imena domena Pri izboru naziva domena potrebno je najpre proveriti njegovu raspoloživost. Dobar izbor naziva domena u sebi sadrži ime firme, (kraće reči bez upotrebe crtica). Npr. dobar izbor je www.mojafirma.com, a loš www.123moja12-firma456.com. Meñutim, sve bolje adrese su već rezervisane. Provera da li je neka adresa slobodna ili ne, ko je drži ako je zauzeta i koji domeni su slobodni, može se izvršiti na sajtu www.register.com. Na primer, ako je www.vasaadresa.com zauzeto možda je www.vasaadresa.net slobodno i sl.

96

Top level domeni Ono se dodeljuje na osnovu profila organizacije koja zakupljuje godišnje pravo na ime domena. Svi kodovi država u geografskoj šemi se sastoje od dva znaka, a imena domena u negeografskoj šemi su dužine tri (a i više) znaka. Dužina posledenjeg dela imena odreñuje da li ime potpada pod geografski ili negeografski sistem imena. Organizacija dalje sama dodeljuje imena server računarima. Sama organizacija odlučuje da li želi geografsko ili negeografsko ime domena. Generički top-level domeni

• .edu – edukacioni sajtovi • .com – komercijalni sajtovi • .gov – vladini sajtovi • .mil – vojni sajtovi • .net – sajtovi administratora mreža • .org – neprofitne organizacije

Generički top-level domeni U novembru 2000. godine Internet korporacija za dodeljena imena i brojeve (Internet Corporation for Assigned Names and Numbers, ICANN), koja upravlja sistemom imenovanja domena na Internetu, odobrila je nove top-level domene:

• .aero Vazdušne transportne organizacije • .biz Biznisi • .coop Kooperativna preduzeća, kao što su kreditni savezi • .info Informativni servisi • .museum muzeji • .name Lične registracije prema imenu • .pro Licencirani profesionalci, kao što su advokati, lekari, računovoñe i sl.

Country code top level domeni Svaka zemlja ima svoju dvoslovnu oznaku. Sa njom se završavaju adrese veb prezentacija koje potiču iz te zemlje. Te oznake odgovaraju standardu ISO 3166 i nazivaju se nacionalni domeni najvišeg nivoa:

• .yu – Srbija i Crna Gora (ukinut) • .rs – Srbija • .ba – Bosna i Hercegovina • .de – Nemačka • .uk – Engleska • .sl – Slovenija • .mk – Makedonija

Domeni u Srbiji Cena domena ne bi smela da preñe cenu .com i .org domena koja se kreće oko deset dolara godišnje. Novina je i mogućnost registrovanja top level domena, odnosno sajtova koji će kao sufiks imati samo .rs bez prefiksa co ili org. Domen mogu da zakupe fizička lica i stranci koji imaju sedište u Srbiji (.rs i .in.rs). Hostovanje domena je oko 20 € godišnje. Provera zauzetosti teritorijalnog domena može se uraditi na adresi www.nic.rs. Domen .org.rs mogu registrovati samo organizacije i udruženja grañana, kulturne ustanove (muzeji, pozorišta i sl.). Domen .ac.rs. predviñen je za akademske ustanove (univerzitete, institute i sl.). Domen .edu.rs mogu registrovati institucije koje se bave obrazovanjem, privatne škole, kao i preduzeća čija je primarna delatnost edukacija ili obuka bilo koje vrste. Proces registracije .rs domena traje izmeñu 3 i 30 dana. Domen mora da se registruje kod administratora prvog nivoa. Plaća se godišnja naknada. Domeni se označavaju uzlaznom putanjom, npr: ime_odeljenja.ime_kompanije.com.

97

WWW - WORLD WIDE WEB

WWW je najpopularniji servis Interneta. To program koji upravlja Veb stranicama. WWW je distribuirani sistem za čitanje i pretraživanje prema kome se svakom Internet dokumentu dodeljuje jedinstvena adresa. To je globalni grafički hypertext informacioni sistem koji se izvršava na Internet mreži. Ist tako to je i sistem Internet servera koji podržava posebno formatirane dokumente u posebnom jeziku pod nazivom HTML (HyperText Markup Language) koji omogućava veze prema drugim dokumentima, kao i grafičkim, audio i video datotekama. Sistem je organizovan po principu klijent - server. Svaki računar koji pruža neku vrstu usluge ili koji nudi neke svoje resurse na korišćenje (npr. korišćenje podataka sa njegovog hard diska) naziva se serverom. S druge strane, svaki računar koji koristi usluge servera je klijent. Generalno, server je bilo koji računar koji daje neke svoje usluge na korišćenje drugim računarima. Isto tako, klijent je bilo koji računar koji "posuñuje" i koristi uslugu ili neki resurs drugog računara. Zbog toga svaki računar može biti ili klijent ili server, i jedno i drugo, ili ništa od toga. Druga važna stvar je način komunikacije izmeñu klijenta i servera. To je posebno važno, jer se svi komunikacijski protokoli, uključujući i TCP/IP i HTTP, sporazumevaju upravo na taj način. Kada klijent želi zatražiti pristup nekoj usluzi ili resursu servera, šalje mu zahtev za pristup usluzi. Nakon toga server šalje odgovor klijentu i omogućava mu korišćenje zatražene usluge. Na taj se način zahtevi i odgovori razmenjuju sve do završetka komunikacije. Klijentsko-serverski model nije danas tek tako prihvaćen kao jedno od najboljih rešenja za realizaciju računarske mreže. Meñutim, postoje mnoge njegove prednosti. Za početak, taj je model mreže vrlo ekonomičan, jer se veliki računarski kapaciteti i kapaciteti za smeštanje podataka traže samo na strani servera. Osim toga, pokazao se dosta praktičnim u svakodnevnom radu, jer je moguće rasporediti opterećenje jednog računara (npr. glavnog servera) na više njih. Klijentski program je jednostavno program kojim pristupate nekoj odreñenoj usluzi na serverski. Na primer, pretraživač za World Wide Web je primer klijentskog programa. Serverski program izvršava se na serverskom računaru i opslužuje zahteve klijenata. Bitno je jedino da klijent i server razmenjuju podatke po istim pravilima - koristeći isti protokol. Veb klijentski programi Programi kao što su Interent Explorer, Netscape, Mozila FireFox, Opera – nalaze se na računarima korisnika. Ovi programi se nazivaju pretraživač ili brauzeri. Oni prosleñuju zahteve serverima. Prihvataju odgovor servera, interpretiraju HTML kod i prikazuju Veb stranu na računaru klijenta. Veb Serveri Veb serveri ili HTTP serveri čuvaju WWW stranice i na zahtev brauzera ih prosleñuju. Protokol koji omogućava komunikaciju brauzera i veb servera naziva se HTTP (Hipertext Transfer Protokol). Kratka istorija World Wide Web-a 1945-1995 1945. Američki naučnik dr Vannevar Bush opisao Memex, hipotetični foto-elektro-mehanički ureñaj za pamćenje dokumenata na mikrofišu (za kreiranje i praćenje tekstualnih veza (linkova) izmeñu njih) 1960. NLS - prototip sistema koji uz pomoć miša vrši čitanje i editovanje koristeći hiperveze, razmenjuje elektronsku poštu i sl. 1965. Ted Nelson uvodi pojmove Hypertext i Hypermedia, a 1967. Andy van Dam je izumeo tzv. Hypertext Editing System. 1980. – Na CERN-u konsultant Tim Berners-Lee je napisao program ENQUIRE, koji je omogućavao stvaranje veza izmeñu proizvoljnih čvorova. Svaki čvor je imao naziv, tip i listu dvosmernih veza.

98

1990. – Na CERN-u je Tim Berners-Lee razvio program WorldWideWeb kao WYSIWYG browser/editor sa mogućnošću direktnog kreiranja linkova. Tim Berners-Lee je istovremeno i tvorac HTML-a. Principi vezani za hipermedija dokumente Svaka stranica (page) ima sopstvenu fizičku adresu (u slučaju World-Wide Web-a, njegov Uniform Resource Locator ili URL). Čitalac se može slobodno pomeriti sa jedne stranice na drugu klikom na reč, niz reči ili sliku, kao vezu (link). Veza je dizajnirana i posebno označena na ekranu (osvetljena u drugoj boji ili podvučena). URL (Uniform Resource Locators) adresa Pristup bilo kom dokumentu ili servisu putem Veb pretraživača. Format URL: protokol://internet_adresa/putanja/ime_fajla.ext ili protokol:internet_adresa Primer URL za pristup Veb dokumentu: http://www.microsoft.com/windows/index.html Dinamički Veb sajtovi Na početku razvoja veba bile su zastupljene statičke strane (gotove datoteke). Danas se stranice ne isporučuju direktno sa diska veb servera, već se generišu na zahtev. Sadržaj se može generisati na serverskom ili klijentskom računaru. Serverska strana. Skriptovi za obradu zahteva i generisanje HTML strane:

• PHP (Hypertext Preprocesor) – usmeren na komuniciranje izmeñu veba i serverskih BP

• JSP (Java Server Pages) – slično PHP, ali se dinamički deo piše programom JAVA • ASP (Active Server Pages) – primenjuje se Microsoftov jezik za skriptove

Klijentska strana. Delovi HTML-a – skriptovi – koji se izvršavaju na strani korisnika, tj. interaguju sa korisnikom

• Najpopularniji je JavaScript • JVM (Java Virtual Machine) – ugradnja apleta u HTML stranu, koji se interpretira u

čitačima • ActiveX controls – programi prevedeni na mašinski jezik Pentium procesora, koji

se hardverski izvršavaju Pretraživači (Search Engines) Razvitkom Interneta i povećanjem broja WWW stranica razvili su se i tzv. pretraživači – programi koji u sebi sadrže alate za pretraživanje raznih baza podataka. Ove stranice su znatno olakšale pretraživanje resursa i pronalaženje željenih informacija na Internetu a najpoznatije su: Google, Yahoo, Altavista, Krstarica itd. Služe za olakšano nalaženje potrebnih informacija na vebu. Veb krauleri ili pauci su softverski roboti koji sistematski pretražuju Veb. Neki pretraživači koriste ključne reči i Bulovu logiku za obavljanje pretrage, a neki drugi koriste u pretrazi hijerarhijske direktorijume ili drvo sadržaja. Veb portal Veb portal je ulazni veb sajt koji omogućava pristup drugim sajtovima, usluge korisnicima Interneta tj. brz i jednostavan pristup različitim servisima. Portal prikuplja informacije sa različitih izvora i čini ih pristupačnim različitim korisnicima. Portali se mogu podeliti na:

• potrošačke koji obuhvataju: pretraživač, e-mail servis, sobe za četovanje, reference, novosti i sportske vesti, virtuelne prodavnice i druge servise,

• korporacione koji služe da zaposlenima u datoj korporaciji pruže različite servise,

• vertikalne koji obuhvataju više članova jedne specifične industrijske grane ili ekonomskog sektora.

99

Cookies (Kolačići) To su manji fajlovi koje zapisuje brauzer i kome pristupa pre slanja zahteva serveru. Koristi se za autentifikaciju, praćenje i nadgledanje specifičnih informacija o korisniku kao što su liste predmeta, korisničko ime, šifre i slično. U njemu se navode potrebne informacije o prethodnoj sesiji sa datom stranicom.

PRINCIPI VEB DIZAJNA

Principi veb dizajna obuhvataju sledeće: • Dinamiku veb sajta, • Planiranje i analizu, • Prikupljanje materijala, • Planiranje sajta i • Dizajn principe.

Dinamika veb sajta Veb sajt je aktivna i dinamična tvorevina. Sadržaj dobrih sajtova redovno se ažurira, što znači da sajt koji sadrži zastarele informacije gubi na svojoj svrsi i nameni. Održavanje sajta zahteva stalna vraćanja i reviziju kompletiranih delova. Uspešne firme sebi nikad ne bi smele da dozvole da informacije na sajtu budu starije od nekoliko dana, bez obzira o kakvoj vrsti poslovanja se radi Planiranje i analiza Prilikom planiranja izrade sajta treba dati odgovore na sledeća pitanja: Zašto posetioci dolaze na sajt? Šta već znaju o toj temi i šta je moguće još ponuditi? Da li žele štampanu informaciju? Osim toga, uvek je poželjno ostvariti link ka sličnim sadržajima. Višejezička podrška je danas neophodna. Prikupljanje materijala Pre samog unosa sadržaja potrebno je izvršiti prikupljanje materijala vezanih za prezentaciju. Period prikupljanja je relativan. Obrada i formatiranje sadržaja u formi pogodnoj za prikaz na sajt obuhvata prebacivanje materijala u elektronski oblik, formatiranje prema dizajnu sajta, skeniranje slika i dr. Planiranje sajta Pri samom planiranju treba izabrati strukturu sajta i predvideti prostor za buduća proširenja. Izabrati dizajn stranice tako da kompletna prezentacija mora biti u jednom (prepoznatljivom) stilu ili template-u. Dizajn principi

• Dizajn principe obuhvataju sledeće: • korišćenje kontrasta, • prikaz teksta na pozadini, isticanje važnih delova, • prostorna povezanost, • grupisanje srodnih pojmova, bulleted liste • poštovanje šablona • linkovi za navigaciju moraju biti isti na svakoj stranici, • primenjivati umerenost, • nije dobra ni siromašna ni sadržajem pretrpana stranica, • ne koristiti po svaku cenu multimedijalne sadržaje, • izbalanisiran prikaz. • Treba koristiti jednostavnu pozadinu ili je uopšte ne koristiti • Pozadina ne treba da odvlači pažnju posetilaca sajta - najbolja je ona

pozadina, koju posetilac sajta i ne primećuje

100

• Osim bele pozadine, koristiti pastelne boje i blage paterne i teksture - većina najboljih sajtova ima belu pozadinu (www.b92.net, www.yahoo.com, www.google.com, www.krstarica.com)

• Izbegavati drečave pozadine i jake boje, • Izbegavati prenaglašene „patterne“ koji odvlače pažnju, kao i upotrebu

slika ili clip-artova za pozadinu.

Tekst na veb sajtu Tekst na sajtu mora biti čitljiv. Što je veći kontrast izmeñu boje teksta i boje pozadine to je bolja čitljivost teksta. Najbolja moguća varijanta je crna boja teksta na beloj pozadini. Kombinacija boje pozadine i teksta mora biti prijatna i lako čitljiva. Izbegavati drečave kombinacije, kao što je npr. crveni tekst na ljubičastoj pozadini. Ne koristiti kombinacije koje zamaraju oči. Pored izbora boje i kontrasta, jako je važno da tekst na stranici bude jasno formatiran. I kada se izabere najbolji kontrast teksta i pozadine (crno-belo) tekst može nekad biti nepogodan i nepregledan za čitanje jer nisu istaknuti važni detalji ili nema izdvojenih grupa. Grafika na veb sajtu Današnje Internet prezentacije sadrže grafičke i multimedijalne sadržaje. Obratiti pažnju na veličinu slika jer se suviše velike slike, sporo se učitavaju. Izbegavati postavljanje nepotrebne grafike . Ako je neophodno na sajt postaviti velike slike onda bi trebalo napraviti male slike (kao preview), koje će korisnik birati i po želji otvarati. Važnost izbora boja Izbor boja na stranici je jako bitan jer boja privlači pažnju, prodaje proizvod, ostavlja pozitivan utisak, čini informaciju jasnijom. Klasifikacija sajtova

• Klasifikacija prema sadržaju o informacioni o transakcioni o zabavni o eksperimentalni itd.

• Klasifikacija prema organizaciji o komercijalne o vladine o obrazovne o dobrotvorne i o lične

• Klasifikacija prema vrsti prikaza o tekst orijentisani, sa fokusom ka tekstualnom sadržaju o GUI (graphical user interface) orijentisani o metaforični, prema metafori iz stvarnog života o eksperimentalni (kreativni, odnosno inovativni) i o portali

HTTP I HTML

HTTP je mrežni protokol koji služi za postavljanje fajlova i drugih podataka (resursa) na World Wide Web. HTTP je protokol koji se zasniva na običnom tekstu (HTML) tako da može jednostavno da se prenosi preko bilo kog medijuma. Omogućava meñusobno povezivanje neograničenog broja dokumenata putem linkova. Odvija preko TCP/IP socket-a HTTP komunikacija se odvija slanjem poruka izmeñu klijenta ((request) kada se nešto traži od servera) i servera (odgovor (response) koji server vraća). Pretraživač je HTTP klijent i šalje zahteve HTTP serveru (tj. Veb serveru). HTTP server osluškuje na portu 80.

101

Zahtevi ili odgovor mogu biti neispravni pri tome HTTP vraća poruku sa statusom i opisom greške. HTTP kao viši protokol koristi TCP/IP protokol za prenos HTML strana. HTTP protokol je tehnologija na kojoj je bazirana elektronska prezentacija. Ova tehnologija podržava kako tekst tako sliku, zvuk i video. Tehnički uslovi neophodni za korišćenje WWW-a su posedovanje aplikativnih softvera za čitanje prezentacije kao što su : Microsoft Internet Explorer, Netscape Navigator, Opera, Mozila Firefox, ... HTTP se koristi za prenos resursa, ne samo fajlova. Resurs je podatak (chunk of information) koji se može identifikovati pomoću URL-a. Najčešće je resurs fajl, ali može biti i dinamički generisan rezultat upita, izlaz CGI skripta, dokument dostupan na nekoliko jezika ili nešto drugo. Struktura HTTP transakcije HTTP koristi klijent-server model: HTTP klijent otvara konekciju i šalje poruku sa zahtevom (request) HTTP serveru; server onda vraća poruku sa odgovorom (respond) koja obično sadrži zahtevani resurs. Format poruka sa zahtevom i odgovorom je sličan. Obe vrste poruka se sastoje od:

• Inicijalne linije • Nula ili više linija sa zaglavljem (header lines) • Prazne linije • Tela poruke • GET metod

Kada pristupate Internetu obično u pretraživaču otkucate adresu veb stranice tj. URL koji želite da vidite npr. http://www.24x7.com.mk/default.aspx. Pri tome pretraživač koristi GET metod, kreirajući HTTP paket sa zaglavljem ka serveru koji je definisan IP adresom iz URL- a. Zaglavlje izgleda: Initial Request Line Sastoji se od 3 dela razdvojena prazninama:

• Naziv metoda, • Lokalna putanja zahtevanog resursa, • Verzija HTTP-a koja se koristi

Tipičan zahtev bi bio: GET /path/to/file/index.html HTTP/1.0 Putanja je deo URL-a posle imena hosta. Verzija HTTP-a je uvek u formatu "HTTP/x.x". Initial Response Line Sastoji se od 3 dela razdvojena prazninama:

• verzija HTTP-a, • statusni kod odgovora (response status code) koji daje rezultat zahteva i • English reason phrase koji opisuje statusni kod.

Tipični statusne linije su: HTTP/1.0 200 OK HTTP/1.0 404 Not Found Notes Statusni kod je trocifreni ceo broj gde prva cifra označava opštu kategoriju odgovora:

GET /defaulut.aspx HTTP/1.1 Host: www.24x7.com.mk Content-Type: text/html

102

103

Tabela 2. Statusni kodovi

Protokoli za transfer fajlova: FTP, POP, SMTP, HTTPS (secure). HTML Format veb strane je univerzalno prihvatljiv i pisan u jeziku koji se naziva HTML (Hipertext Markup Language). Nezavisno od tipa računara svi brauzeri razumeju HTML jezik. Da bi se pristupilo bilo kojoj adresi mora se posedovati njena adresa odnosno URL. Univerzalnost URL-a i HTML-a omogućava korisniku da sa bilo kog dela planete pristupi bilo kojoj veb stranici. Aktuelna verzija HTML 4.01. Jezici koji omogućavaju da se precizno opiše izgled i sadržaj jednog teksta. Od posebnog su značaja: SGML (Standard General Markup Language), TeX i LaTeX (za matematičke tekstove), PostScript (jezik laserskih štampača), RTF (Rich Text Format), ... Jezici za opis hiperteksta Najznačajniji jezici ove vrste su: SGML, HTML (HyperText Markup Language), pojednostavljena verzija SGML-a, XHTML (eXtensible HTML) i XML (Extensible Markup Language, "kompromis" izmeñu preterane složenosti SGML-a i jednostavnosti HTML-a). Hypertext Markup Language (HTML) je serija standardnih kodova i konvencija dizajniranih za kreiranje stranica koje će biti prikazane u programima kakav je Veb pretraživač. Veb stranica uključuje formatirani tekst i komande što uslovljava da Veb pretraživač učitava i prikazuje slike i druge multimedijalne elemente (film, zvuk, animacije) na istoj. Komande govore kako će se tekst ili slika prikazati na stranici. HTML stranice imaju ekstenziju .html ili .htm. HTML je struktuirani opisni jezik koji se koristi za izradu Veb strana. Predstavlja pojednostavljeni podskup SGML-a. HTML elementi ukazuju WWW čitaču šta treba da preduzme i kako treba da prikaže tekst. HTML dokument je plain-text (ASCII) file koji kreiramo pomoću bilo kog tekst editora (npr. Notepad).

104

WYSIWYG HTML editori (Dreamweaver, Home Page, Front Page). Hypertext i Hyperlinks. Hypertext (hiperlink) link - korišćenjem specijalnih komandi u HTML, Veb autor može promeniti dati tekst (sliku) dajući mu mogućnost da klikne na isti. To je tekst koji sadrži veze ili linkove ka drugim dokumentima ili na samog sebe. Skup stranica (u obliku datoteka) meñusobno povezanih linkovima koje su umetnute u stranice. Za razliku od običnog teksta, koji se čita linearno (sleva na desno, odozgo naniže), hipertekst se čita prateći hiper-veze u tekstu, dakle, ne nužno na linearan način. HTML i XHTML Prva verzija - HTML 1.0 standard, najnoviji HTML 4.01 standard (završen 1999). Od tada, HTML razvoj fokusira se na kreiranje HTML elemenata kompatibilnih sa XML (eXtensible Markup Language) - standard dizajniran da bude osnova za mnoge markup jezike. XML - koristi se za kreiranje i definisanje markup jezika za specifične aplikacije, u industriji, itd. Zbog važnosti XML-a, cilj W3C konzorcijuma je: prepisati HTML u XML tako da standardi budu kompatibilni. Zašto novi standard? Mnogi veb pretraživači podržavaju XML, tako da će XHTML postati samo jedan modul od mnogo različitih XML-zasnovanih jezika koji će biti razumljiv pretraživačima i drugim aplikacijama kao i u različitim tipovima ureñaja (telefoni, ručni računari). HTML nije programski jezik! Programiranje je proces kreiranja skripti ili aplikacija korišćenjem jezika kao što su C++ ili Java. Kreiranje veb stranica odnosi se na koncepte CSS – Cascade Style Sheet skriptovanje (programiranje). HTML je napravljen u cilju kodovanja i prikazivanja dokumenata. HTML dokument sadrži tag-ove koji odreñuju format, podlogu i strukturu Veb dokumenata. Poseduje tagove kojima se kreiraju odnosi izmeñu tekstulanih elemenata unutar jednog ili više dokumenata. Tekstualni elementi koji su povezani meñusobno nazivaju se hipertekstulani elementi. Minimalni html kod <html> <head> <title>Neki naslov</title> </head> <body> </body> </html> Osnovne HTML komande <HTML> predstavlja oznaku gde počinje dokument <head > označava početak ili kraj zaglavlja <body > označava početak ili kraj osnove dokumenta <body background > označava pozadinu dokumenta <p> oznaka za početak pasusa <p align=““> horizontalno poravnanje paragrafa <br> prelom reda <h1> do <h6> prikaz naslova od najvećeg do najmanjeg <img src=“putanja/datoteka”> oznaka za postavljanje slike <center> centriranje teksta ili slika <table> rad sa tabelom <tr> (table row) označava dužinu tabele <tw> (table width) označava širinu tabele <td> označava podatke koje upisujemo u ćeliju tabele <a href=" "> oznaka za link <font> rad sa fontom <font color=""> boja slova <font size =""> veličina slova <font face =““> vrsta fonta <ol> uredjena lista

105

<ul>neuredjena lista <li> stavka liste <!- Ovo je komentar –> <input> unošenje podataka na Veb stranu Pravila jezika HTML

• HTML dokumenti su struktuirani • Jezik HTML ne pravi razliku izmeñu malih i velikih slova • HTML prepoznaje samo jedan razmak • HTML elementi treba da su zatvoreni, osim ako su prazni • Elemente jezika HTML treba ugnježdavati • Atribute jezika HTML treba smeštati u znakove navoda • Čitači ignorišu nepoznate atribute i elemente jezika HTML

XHTML nasuprot HTML

• XHTML elementi moraju biti pravilno ugnježdeni • XHTML elementi moraju biti zatvoreni • XHTML elementi pišu se malim slovima • XHTML elementi moraju imati jedan root element

ŠTA JE CSS?

Jednostavan i moćan jezik kojim se definiše stil veb dokumenata. Radi sa HTML dokumentima i definiše način prezentovanja sadržaja. Prezentacija je specificirana pomoću stila koji je smešten:

• direktno u HTML (inline preko atributa style), • u head deo HTML dokumenta (ugrañeni preko taga style), • u obliku posebnih stranica stilova (vezani preko elementa link).

Stranice sa definisanim stilom sadrže CSS pravila. Svako pravilo selektuje elemente jednog HTML dokumenta. Pravila definišu kakav će biti stil elemenata. Brojni HTML fajlovi mogu se linkovati za jedan CSS fajl Stilovi Postoji tri tipa kaskadnih stilova koji mogu uticati na prezentaciju HTML dokumenta u pretraživaču:

• Browser style sheets (stil pretraživača) o Pretraživači primenjuju stilove na sve veb dokumente. Iako ovi

stilovi variraju od pretraživača do pretraživača, oni svi imaju zajedničke karakteristike: crni tekst, plave linkove i ljubičaste posećene linkove. Ovo je podrazumevani stil pretraživača.

• User style sheets (korisnički stil) o Korisnik je osoba koja pregleda veb sajt. Većina modernih

pretraživača dozvoljava korisnicima da setuju njihove sopstvene stilove unutar njihovih pretraživača. Ovi stilovi će pregaziti podrazumevane stilove pretraživača samo za datog korisnika.

• Author style sheets (autorski stil) o Autor je osoba koja razvija veb sajt. Kada se primeni osnovni stil na

stranicu, definisan kao autorski stil, on će pregaziti i korisničke i pretraživački definisane stilove.

Zašto kaskadni? Stilovi se mogu kaskadno menjati od jednog do drugog. Kaskade odreñuju pravila koja definišu prioritete stilova koji će se primeniti na dokument. Mogu da se nalaze u okviru samih HTML elemenata upotrebom STYLE atributa (CLASS atributa). Mogu da se navode blokovi CSS pravila u okviru STYLE elementa HEAD taga. Mogu da se kreiraju u odvojenim dokumentima stilova (datotekama sa ekstenzijom .css) i da se referenciraju u okviru strana sa LINK elementom.

106

Nasleñivanje Stilovi se nasleñuju od elemenata roditelja (parent). Primer: <body> <h1> Naslov </h1> <p> Paragraf </p> </body> Stilovi koji se definišu za tag body naslediće tagovi h1 i p sve dok se ne primeni neko drugo pravilo koje će preklopiti nasleñivanje. Krenimo od HTML-a: <h1> Naslov 1 </h1> <h2> Naslov 2 </h2> <p> Ovo je neki početak paragrafa... </p> 1.HTML sa inline stilom <html> <head> <title> Stilovi </title> </head> <body> <h1 style="text-align: center;" > Naslov 1 </h1> <h2 style="font-style: italic;"> Naslov 2 </h2> <p style="color: maroon;"> Ovo je neki početak paragrafa... </p> </body> </html> Ugrañeni stil. Kreiranje Ugrañeni stil se koristi upotrebom STYLE elemenata unutar head dela HTML dokumenta: <style> selektor {blok za deklaraciju} </style> </head> Definisanje selektora - selektor "selektuje" elemente na HTML stranici koji je pokriven pravilom stila. U našem primeru SELEKTORI su: h1, h2 i p. Kreiranje bloka za deklaraciju – to je kontejner koji se sastoji iz onoga što stoji izmeñu velikih zagrada (uključujući i njih). h1 {...} h2 {...} p {...} Kreiranje deklaracije - deklaracija govori pretraživaču kako da prikaže bilo koji element na strani koji je selektovan. Deklaracija se sastoji iz svojstva (property) i jedne ili više vrednosti (values), odvojenih dvotačkom (:). Na kraju svake deklaracije je znak tačka-zarez (;) Kombinovanje selektora Primer kombinovanih pravila koji imaju iste deklaracije, a različite selektore: <style> h1 { color: blue; } p { color: blue; }

107

</style> Ova pravila se mogu kôdirati i kao: <style> h1, p { color: blue; } </style> Ako više selektora dele iste deklaracije oni se mogu grupisati zajedno i time, potrebu da se ista pravila više puta pišu, smanje. Svaki selektor mora biti odvojen zarezom. <html> <head> <style> h1, h2 { text-align: center; color: navy; } h2 { font-style: italic; } p

{ color: maroon; } </style> </head> <body> <h1>Naslov 1</h1> <h2>Naslov 2</h2> <p>U ovom dokumentu primenjuje se ugrañeni stil primenom STYLE taga</p> </body> </html>

Karakteristike pozadine <style> BODY { background: midnightblue; color: lime } </style> Svojstva fonta Vrednost svojstva font-family izmeñu vitičastih zagrada ({}) deo je CSS deklaracije izgleda koja čitaču govori koji font da upotrebi. CSS svojstvo font-size pruža mogućnost zadavanja veličine teksta Veb stranice u tačkama (pt), u pikselima (px), brojem tačaka elementa roditelja (em) Izgled slova, reči i prored Svojstvo letter-spacing omogućava upravljanje razmakom izmeñu slova: p {letter-spacing:5px} Svojstvo word-spacing upravlja razmakom izmeñu reči: p {word-spacing:5px} Svojstvo line-hight upravlja proredom (podrazumevana vrednost ovog svojstva je 1em): p {line-height:12pt} Izgled slova, reči i prored Svojstva za upravljanje izgledom slova, reči i proreda mogu se zadati u bilo kojim CSS jedinicama mere (pt, px, in, cm, itd) Uvlačenje pasusa Uvlačenje prvog reda pasusa moguće je korišćenjem pravila p {text-indent:2em} Iako se mogu koristiti sve jedinice mere (pt, px, in, cm) najbolje je koristiti emove, jer se emovi menjaju u skladu sa promenom veličine fonta. „EM“ space ili em razmak je jedinica mere u tipografiji za razmak širine kao kod odreñenog slova mereno tipografskim tačkama. Za mnoge fontove radi se o širini velikog slova M i odatle potiče ime ovog znaka.

108

Upravljanje razmakom izmeñu elemenata CSS svojstva margin-top i margin-bottom koriste se za upravljanje prostorom iznad, odnosno ispod elementa. Raspored elemenata na stranici CSS svojstvo „position“ zadaje poziciju elementa na stranici. Apsolutno rasporeñivanje omogućava postavljanje objekta u odnosu na levu ivicu i vrh stranice. Relativno rasporeñivanje omogućava odreñivanje mesta elementa u odnosu na element koji će biti pored njega. Korišćenjem apsolutnog rasporeñivanja jedan elemenat može se postaviti preko drugog. Shorthand svojstvo omogućava da se vrednosti više svojstava specificiraju unutar jednog svojstva. Šta je <div>? DIV element je kontejner koji se koristi radi dodavanja strukture HTML dokumentu. On pravi blokove prezentovanog sadržaja. Selektori klasa Selektori klasa se mogu koristiti za selektovanje bilo kog HTML elementa kome je dodeljen atribut class. <html> <head> <title>Selektor klasa </title> </head> <body> <div id=“heder"> <h1> Naslov </h1> Ovo je neki tekst. <p> Ovo je neki <a href="#">drugi tekst </a> u hederu. </p> </div> <div id="navigacija"> <ul> <li><a href="#" >meni 1</a></li> <li><a href="#">meni 2</a></li> <li><a href="#">meni 3</a></li> </ul> </div> <div id="footer"> A ovo treba da je <a href="#">futer</a>... </div> </body> </html> Na prethodnom primeru postoje dva HTML elementa sa class atributom <p class="intro"> i <a href="#" class="intro">. Korišćenje selektora klasa <style> p.zaseban { padding-left: 0.2em; border-left: solid; border-top: none; border-bottom: none; border-left-width: thin; border-color: #ff0099; } </style> <P class=zaseban>Neki izdvojen tekst kao pasus dokumenta. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">

109

<title>New Page 1</title> <style> p.zaseban { padding-left: 0.2em; border-left: solid; border-top: solid; border-bottom: solid; border-left-width: thin; border-color: #ff0099; } </style> </head> <body> <h1>Ovo je veliki naslov</h1> <p>a ovo je neki tekst</p> <p>a ovo je neki tekst</p> <P class=zaseban>Neki izdvojen tekst kao pasus dokumenta. <p>a ovo je neki tekst</p> <p>a ovo je neki tekst</p> </body> </html> Selektori klasa se mogu koristiti za selektovanje bilo kog HTML elementa kome je dodeljen atribut class. Da li koristiti ID ili Class? Klase se mogu koristiti više puta koliko god je to potrebno u dokumentu. ID se može primeniti samo jednom u dokumentu. Ako se isti selektor koristiti više puta prednost se daje class atributu. Poravnanje teksta veb stranice CSS mogućnosti za poravnanje teksta postavljaju se u opisu stila, definisanjem nepridružene klase pravila: .left {text-align:left}, .right {text-align:right}, .center {text-align:center}, .justify {text-align:justify}. Pomoću atributa class u HTML oznakama može se poravnavati tekst u okviru bilo kog elementa koji može sadržati tekst (tekst tela stranice, ćelija tabele, samo odreñenih ćelija ili odreñenih redova tabele...) Na primer, poravnanje uz obe ivice celog teksta: <body class=“justify”>. Upravljanje marginama CSS svojstva margina omogućavaju precizno upravljanje prostorom koji čitač ostavlja CSS (Cascade Style Sheet). Postoje 4 svojstva margina: margin-left, margin-right, margin-top i margin-bottom. Svako svojstvo označava stranu elementa na kojoj je razmak. Za zadavanje širine margine mogu se koristiti sve CSS jedinice za meru dužine (px, pt, em, in, mm, cm, itd.). Univerzalni selektori Univerzalni selektori koriste se za selektovanje bilo kog elementa. Npr. za setovanje boje slova svih elementa u crvenu, koristi se *: <style> * { color: red; } </style> Podešavanje izgleda liste CSS svojstvo list-style-type koristi se za zadavanje izgleda oznaka elemenata liste. CSS svojstvo list-style-position koristi se za odreñivanje mesta oznake elementa liste u odnosu na tekst elementa liste. Ovo svojstvo može imati jednu od dve vrednosti: Outside – čitač postavlja oznaku liste izvan teksta elementa liste Inside – čitač prikazuje oznaku elementa liste kao deo teksta elementa.

110

DREAMWEAVER

DREAMWEAVER – OSNOVNI PROZOR I MENI

Dreamweaver je program za izradu veb strana, koji omogućava vizuelno projektovanje i ureñivanje, kao i neposredno pisanje HTML koda. Takoñe omogućava izradu dinamičkih veb aplikacija koristeći serverske jezike kao što su ASP, ASP.NET, COLD FUSION, MARKUP LANGUAGE (CFML), JSP I PHP. Dreamweaver skraćuje vreme izrade veb prezentacije, a ima i alatke za njihovo menjanje i održavanje. Ovaj program je dosta fleksibilan jer i napredne tehnike čini pristupačnim i olakšava njihovo korišćenje. Objedinjavanjem velikih mogućnosti projektovanja i programiranja pruža mnoštvo pogodnosti i početnicima i iskusnijim korisnicima. Ovaj tekst je namenjen korisnicima koji imaju malo ili nimalo iskustva u korišćenju Dreamweavera i u njemu se neće govoriti o pravljenju složenih aplikacija i dinamičkih veb prezentacija u kojima se koriste baze podataka, specifično ponašanje servera i Web aplikacija, jer je za njih neophodno poznavanje gore navedenih serverskih jezika. I pored svih korisnih stvari koje nudi Dreamweaver, ne sme se zaboraviti i ona takoñe veoma važna stvar a to je detaljno planiranje sajta, jer sigurno ste se vec dosta puta susreli sa sajtovima čiji je fokus usmeren na alate i tehnologije, natrpane Java Apletima, Java Script efektima, raznim animacijama i zvucima, ali nažalost, bez pravog logičkog sadržaja. Po otvaranju Dreamweavera susrećemo se sa sledećim elementima:

Slika 100. Dreamweavera – osnovni prozor

Insert Bar - sadrži tastere za unos različitih tipova objekata, kao što su slike, tabele, layer-i u dokument. Svaki objekat je predstavljen HTML kodom koji omogućava podešavanje različitih atributa. Najveći deo opcija koje će se koristiti u Dreamweaveru upravo se nalazi u panelu Insert.

111

Slika 101. Panel Insert

Document Toolbar - sadrži tastere i pop-up menije za podešavanje izgleda prozora dokumenta. Inače u Dreamweaveru postoje tri načina prikazivanja, to su Design View, Code View i Split Design and Code. Dugmad za menjanje tih prikaza nalaze se na levoj strani ovog toolbar-a. Document Window - prikazuje tekući dokument i rad na njemu. U donjem levom uglu prozora dokumenta nalazi se birač HTML oznaka (Tag Selector), u njemu se hijerarhijski prikazuju HTML oznake koje pripadaju trenutno izabranom elementu. Početna HTML oznaka je uvek <body>. Property Inspector - omogućava menjanje osobina selektovanih objekata ili teksta. Svaki objekat poseduje različite osobine. Panel Group - je grupa panela sa desne strane: Application, CSS, Files,…. Da bi otvorili željeni panel kliknite na strelicu sa leve strane imena panela. Site Panel - omogućava upravljanje fajlovima i folderima koji čine vaš sajt. Takoñe obezbeñuje i pristup fajlovima na hard disku, slično kao kod Explorera.

KREIRANJE SAJTA

Reč sajt ima više značenja: • Veb sajt predstavlja skup strana na serveru kojima posetilac pristupa preko svog

pretraživača. • Remote site, skup fajlova na serveru koji čine veb sajt, uglavnom gledano sa

pozicije autora samog sajta. • Local site, fajlovi na lokalnom računaru identični onima na udaljenom sajtu. Sa

njima se radi na računaru, a potom se prebacuju na server. • Site definition, u Dreamweaveru označava karakteristike lokalnog sajta sa

informacijama o tome kako lokalni sajt komunicira sa udaljenom sajtom. Najčešće korišćen način kreiranja veb sajta je kreiranje i rad sa veb stranama, na lokalnom računaru, a zatim prenos kopija tih strana na veb server kako bi one postale dostupne javnosti. Takav rad i ovde se podrazumeva. Sam postupak kreiranja je sledeći:

• Iz menija Category izaberite opciju Site a zatim New site.

112

Slika 102. Kreiranje sajta

Okvir za dijalog Site definition nudi mogućnost izbora osnovnog (Basic) ili naprednog (Advanced) postupka kreiranja sajta. Izaberite Basic i kliknite next.

• Sada upišite ime vašeg sajta i preñite na sledeći korak. • Dreamveawer sada pita da li želite da radite sa serverskim tehnologijama (ASP,

ASP.NET, PHP, JSP...). Izaberite Ne, jer će ovde biti razmatrani samo statički sajtovi. Definiciju samog sajta uvek možete izmeniti kada izaberete iz menija Site/Edit Sites...

• Program vas pita kako želite da radite sa datotekama vašeg sajta. Pritisnite radio dugme : 'Edit local copies on my machine, then upload to server when ready (Recomended)'.

• Sada treba da upišete gde želite da smestite datoteke sajta, ili pritisnite folder ikonicu desno od polja za unos teksta ako ste već prethodno odredili mesto za sajt. Taj izabrani folder se naziva lokalni korenski direkrorijum i pomoću njega Dreamweaver odreñuje putanje dokumenata, slika i hiperveza vašeg sajta.

• U sledećem koraku vas program pita 'How do you connect to your remote server'. Obzirom da se radi o lokalnom sajtu izaberite 'None'.

• Pritisnite 'Next' da biste prešli na sledeći korak. Pregledajte podatke koje ste do sada zadali i pritisnite dugme 'Done' da bi završili kreiranje sajta. Novokreirani sajt možete videti u sajt panelu.

KREIRANJE NOVE VEB STRANE

Iako Dreamweaver otvara nov dokument (stranu) bez naslova, često ćete sami morati da pravite nove strane i to će te činiti na sledeći način:

• Izaberite New iz opcije File. Otvoriće se okvir za dijalog New document sa dve kategorije General i Templates.

• Na kartici General nudi vam se mogućnost izbora neke od ponuñenih predizajniranih strana, ali preporučujemo izbor 'prazne' HTML strane (kategorija Basic Page, opcija HTML).

Novi dokument bez naslova (Untitled-1), koji se automatski otvara kada pokrenete Dreamweaver je HTML strana. Vrstu tog dokumenta možete promeniti kada pritisnete dugme Preferences u istoimenom prozoru. Kreiranu stranu možete sačuvati tako što izaberete opciju Save iz menija File. Preporučljivo je snimiti datoteku pre stavljanja bilo kakvog teksta ili slika, jer će tada sve putanje koje se odnose na te elemente biti propisno formirane. Davanje naslova Web strani Svaki HTML dokument mora imati naslov, koji prvenstveno služi za identifikaciju i vidi se na naslovnoj traci pretraživača. Taj naslov takoñe postaje ime Bookmarka koji se prilaže uz veb stranu. Zbog toga treba izabrati kratke izraze koji najbolje opisuju namenu same strane. Ako zaboravite da imenujete stranu Dreamweaver će je nazvati Untitled document. Najzad, strani dajemo ime upisujući ga u polje Title u Document Toolbar-u.

113

Ukoliko Document Toolbar nije vidljiv može se pronaći u biranjem opcije Document iz Toolbars opcije menija View. Davanje boje pozadine U Dreamweaveru se boja pozadine lako menja pomoću specijalne palete boja za veb (Web – safe Color Pallete). Da bi promenili boju izaberite opciju Page Properties iz menija Modify. U ovom prozoru, u okviru opcije Appearance pritisnite polje sa bojom (opcija Background). Prikazaće se paleta boja, a pokazivač miša će se pretvoriti u pipetu. Dovedite pipetu iznad željene boje. Možete primetiti da se boja u HTML-u definiše heksadecimalnim brojem, koji opisuje količinu njene crvene, zelene i plave komponente. Sada označite boju i pritisnite dugme Apply. Slika na pozadini strane Na pozadinu se obično stavlja slika čijim se kopijama popločava cela strana. Strana može imati definisanu i boju i sliku za pozadinu. U prozoru Page Properties, u okviru opcije Appearance, pritisnite dugme Browse do polja Background image i izaberite željenu sliku. Preporučljivo je staviti sve slike koje će se koristiti za izradu strane u jedan folder lokalnog korenskog direktorijuma. Odreñivanje boje fonta Kada ste izmenili boju pozadine, ili stavili sliku na nju, poželjno je da prilagodite boju slova teksta pozadini. Prilikom biranja boja za dokument izaberite one kombinacije koje se dobro slažu i koje su dovoljno kontrastne. Odabir boje teksta se takoñe vrši u okviru Page properties prozora u polju za boju teksta. Upisivanje i formatiranje teksta Tekst se naravno, upisuje neposredno u dokument. Ali, da bi sve izgledalo kako treba, preporučljivo je pridržavati se nekih pravila. Jedan od načina podešavanje formata paragrafa obavlja se preko opcije Format:

Slika 103. Opcija Format Paragraf

• Postavite tačku umetanja u paragraf (ili selektujte paragraf(e)) • U meniju Format – Paragraf format odaberite format paragrafa ili neki za

naslove (H1, H2, ...) ili preformated tekst

Kada napišete naslov, moguće je formatirati ga izborom jednog od ponuñenih šest formata za naslov (naslov prvog nivoa, Heading 1, ima najveća slova). Kada pasusu dodate HTML oznaku naslova, automatski se ispod njega dodaje odreñen prazan prostor čiju veličinu ne možete menjati. Preporučljivo je da prvi naslov na strani bude jednak nazivu same strane. Kada ste formatirali naslov pritisnite Enter. Tada dodajete novi red koji označava početak novog pasusa, što možete i videti u Tag selektoru gde je dodata oznaka pasusa <p>. Za

114

običan tekst koristi se, po pravilu, format pasusa. Ne zaboravite da posle nekog vremena sačuvate vaš rad. Ako hoćete da preñete u novi red a da pri tom ne bude dodatnog razmaka izmeñu prethodnog i novog reda pritisnite Shift + Enter. To znači da ste ostali u istom pasusu. Označavanjem bilo kog reda nekog pasusa i njegovim formatiranjem, formatirate celi pasus. Osim poravnanja, pasuse teksta možete i da uvučete od margina. Za to se koriste dugmad Text Indent i Text Outdent. Mogućnosti za poravnanje teksta su standardne (levo, desno, centralno i obostrano). Umetanje specijalnih znakova unutar teksta veb stranice obavlja se iz menija Text izborom poslednje opcije:

Slika 104. Panel za umetanje specijalnih znakova

Umetanje se vrši tako što se:

• Postavi tačka umetanja ne mesto gde će biti znak i • Klikne se na odgovarajuće dugme na Insert panelu • Ili preko Insert > HTML > Special Characters

U Dreamweaveru možete praviti dve vrste lista (spiskova), ureñene liste (Ordered List) i neureñene (Unordered List), liste nabrajanja. Da bi napravili (ne)ureñenu listu, potrebno je selektovati željeni deo teksta i pritisnuti dugme (Un)Ordered List na Property panou. Šemu numerisanja ureñene liste (number, roman, alfabet) moguće je odabrati pomoću List Item opcije na property panou. Ista opcija služi za modifikovanje neureñene liste (bullet, square). Često je potrebno poslednje formatiranje ponoviti na sledećim pasusima ili drugom izabranom tekstu. To je najlakše uraditi koristeći naredbu Repeat, iz menija Edit, ili prečicom sa tastature Ctrl + Y. Ubacivanje lista obavlja se na sladeći način:

• Selektuju se paragrafi koji će biti delovi liste • Uključi se opcija za numerisane ili nenumerisane liste • Ako je potrebna složena lista, koriste se dugmad za uvlačenje paragrafa

Slika 105. Rad sa listama

115

Rad sa fontom Web strane će biti zanimljivije i lakše će se čitati ako promenite font kojim se prikazuje tekst. Morate voditi računa o činjenici da korisnici mogu da menjaju veličinu prozora i fonta kao i boju slova. Izgled teksta se menja od korisnika do korisnika. U HTML-u ne možete da utičete na prored teksta i meñuslovna rastojanja. Font cele strane ili izabranog dela teksta se može menjati na više načina, direktno na panou Properties, u padajućoj listi Font ili izborom opcije Format -> Font -> Edit Font List. Da bi posetilac video stranu onako kako ste je napravili mora na svom računaru imati instaliran font koji ste zadali. Kombinacije instaliranih fontova čine da čitač prikazuje tekst u drugom fontu. Ako prvi font u spisku fontova nije instaliran, pretraživač će pokušati da upotrebi drugi a na kraju treći. Ako ni jednog od tih fontova nema pretraživač korisnikovom računaru, tekst se prikazuje u podrazumevanom fontu čitača. Kombinaciju fontova možete da promenite kad izaberete opciju Edit Font List. Izaberite kombinaciju fontova i zatim jednu od sledećih opcija:

• da biste dodali ili uklonili font, izaberite font i pritiskajte dugmad sa strelicama koje premeštaju fontove izmeñu spiskova chosen (izabrani) i available (dostupni).

• da biste dodali ili uklonili kombinaciju fontova pritiskajte dugmad sa znakovima + i - u gornjem levom uglu okvira.

• ako želite da dodate font koji nije instaliran u sistemu upišite ime fonta u polje ispod liste available fonts, i pritisnite dugme sa dvostrukom strelicom.

U HTML-u su mogućnosti menjanja veličine fonta ograničene. U panelu Properties izaberite listu veličina fontova Size. Veličine su poslagane od +1 do +7 i od -1 do -7. Ako izaberete broj bez predznaka zadali ste apsolutnu veličinu fonta, a biranjem broja sa predznakom + ili - zadajete relativnu veličinu fonta, npr. broj +1 daje font za jedan broj veći od njegove osnovne veličine. Podrazumevana osnovna veličina fonta u pretraživaču je 3. Takoñe u Dreamweaveru se boja teksta lako menja. Na panelu Properties pritisnite dugme Text Color i izaberite željenu boju. Sve boje koje upotrebite se čuvaju u panelu Assets koji se nalazi u panelu File. Najčešće korišćene boje snimite u direktorijum Favorites. Kreiranje linkova izmeñu stranica istog sajta

• Selektujete tekst (ili sliku) na stranici koja će da služi kao hot spot. • Zatim na Properties panelu podesite polje link kucanjem, ili pokazivanjem

na fajl u Files panelu, ili klikom na dugme fascikle i pronalaženjem željenog fajla.

Pravljenje linkova ka drugim sajtovima

• Selektuje se tekst ili slika koji će biti hot spot • Ukuca se adresa stranice u polje link • Kada se kuca u polje link obavezno se unosi puna adresa stranice npr.

http://www.google.rs

Apsolutne i relativne putanje Kada pravite linkove ka drugim sajtovima putanje su uvek apsolutne (počinje sa http://...). Kada pravite linkove ka stranicama vašeg sajta možete da birate da li će biti apsolutne ili relativne. Prepuručuju se relativne putanje (njih Dreamweaver automatski pravi kada pokazujete na fajl). Ako se desi da se u polju link ispiše file:///.... To znači da imate apsolutnu putanju do fajla na vašem računaru. Ovakav link ne radi sa drugih računara i morate ga popraviti.

116

Kreiranje linkova ka odreñenim delovima stranice

• Prvo se označi mesto na stranici na koje će da pokazuje link (sidro, anchor),

• Umetne se sidro preko Insert Named anchor ili sa Insert panela, npr. na kraju teksta KRAJ a na početku VRH

• Zatim se pravi hiperlink ka delu stranice • U polju link se napravi link ka stranici sa dodatkom #imesidra (znak #

označava da koristimo sidra i obavezan je), (# kraj ili # vrh)

Kreiranje linkova da bi se pokrenulo slanje e-maila

• Selektuje se tekst ili slika koji će da posluže kao hot spot • U polje link se unese mailto:email@adresa • Ovakav link automatski pokreće program za slanje pošte i u novu poruku

unosi adresu email@adesa

Može i preko Insert - Email Link. Tu je potrebno samo uneti e-mail adresu. Umetanje slika preko menija ili preko panela Insert Umetanje slika preko panela Files

• Pronañe se slika u Files panelu • Prevuče se slika na odreñeno mesto u dokumentu

Panel Assets

Služi za lakše pronalaženje slika i drugih objekata koji se mogu umetnuti na stranicu. Ovde se odmah vidi i umanjeni prikaz slike. Slika se može ubaciti pomoću ovog panela isto kao i sa Files panela.

Image placeholder - ako još uvek nemamo sliku, a hoćemo da “rezervišemo” mesto za nju. Podešavanje svojstava slike - promena veličine slike se može izvesti direktno u prozoru dokumenta ili preko Properties panela. Pozicija slike se može promeniti prevlačenjem ili preko “cut-paste” Mapiranje slike - cilj je napraviti više hiperlinkova od jedne slike ili napraviti samo odreñeni deo slike hiperlinkom. Postoj tri vrste aktivnih područja: pravougaona, kružna, i poligonalna. Pravljenje mapa obavlja se na sledeći način:

• Selektuje se slika • Uključi se odgovarajuća alatka za crtanje aktivnih

područja • Nacrta se aktivno područje • Sada je potrebno podesiti svojstva aktivnog područja (link)

NAVIGATION BAR – TRAKA ZA NAVIGACIJU

Traka za navigaciju je niz slika povezanih sa stranama prezentacije. Ne postoji u verziji Dreamweaver CS5, pa ćemo objasniti korišćenje u svim nižim verzijama programa. Po lakoći korišćenja trake za navigaciju su slične jednostavnim slikama sa prelazom (Rollover Image). Svaka slika na traci moze imati do četri stanja u zavisnosti od akcija posetioca. Prvo stanje Up Image prikazuje se kada se strana tek učita. Drugo stanje Over Image prikazuje se kada posetilac preñe pokazivačem preko slike. Ista stanja imaju obične slike sa prelazom. Na traci za navigaciju možete upotrebiti još dva stanja. Kada posetilac pritisne sliku prikazuje se trće stanje, Down Image. Četvrto stanje slike Over While Down Image prikazuje se kada posetilac preñe preko slike koju je već pritisnuo.

117

Traka za navigaciju služi za prikazivanje trenutnih i prethodnih akcija posetilaca. Treće stanje obično izgleda kao pritisnuto dugme, što posetiocu ukazuje nato da je pritisnuo sliku. Po pritisnutom dugmetu posetilac zna koju stranu gleda. Označite mesto na strani (u okviru za navigaciju) gde želite da unesete traku za navigaciju i izaberite opciju Insert -> Images Objects -> Navigation Bar. Otvara se prozor Inset Navigation Bar (Slika). U polje Element Name upišite ime prve slike na traci na navigaciju umesto imena Unnamed1. U naredna četiri polja se smeštaju slike za četiri različita stanja (polje browse) dugmeta u zavisnosti od akcija posetilaca. Zatim u polju „When Clicked go to URL“ napravite link za to dugme do željene strane. Ta strana će se otvoriti u onom okviru koji navedete u polju posle reči In. Imate takoñe mogućnost izbora horizontalne ili vertikalne orijentacije dugmadi trake za navigaciju u polju Insert. Dok birate opcije u ovom prozoru, ime elementa (dugmeta) koje se menja prikazuje se u spisku Nav Bar Elements na vrhu prozora. Dodavanje novih odnosno brisanje nepotrebnih dugmadi se vrši znakovima (+) i (-). Redosled dugmadi birate strelicama gore-dole. Pritisnite OK i uneli ste traku za navigaciju. Ako hoćete kasnije da je promenite izaberite Modify ->Navigation Bar. Otvoriće se prozor Modify Navigation Bar gotovo identičan prozoru Insert Navigation Bar, samo bez mogućnosti biranja vertikalnog ili horizontalnog položaja trake za navigaciju. Hiperveze se podrazumevano usmeravaju ka okviru ili prozoru u kome se nalaze. Ako želimo da se link otvara u nekom drugom okviru na Panelu Properties u polju Target izaberite željeni okvir. Kad god napravite nov okvir njegovo ime se automatski dodaje padajućoj listi Target. U ovoj listi ima i drugih opcija. Opcija _Blank učitava povezanu stranu u nov neimenovan prozor pretraživača. Opcija _Parent učitava povezanu stranu u skup okvira koji je roditelj okvira sa hipervezom. Ako okvir koji sadrži hipervezu nije ugnježden, povezana strana se učitava u ceo prozor pretraživača. Opcija _Self učitava povezanu stranu u isti okvir ili prozor koji sadrži link. Ovo se podrazumeva, pa to obično ne morate da zadajete. Opcija _Top učitava povezanu stranu u ceo prozor pretraživača i time uklanja sve okvire.

Slika 106. Kreiranje navigacije pomoću Navigation Bara

118

TABELE

Umetanje tabele vrši se preko opcije Insert - Table ili dugme na Insert panelu pokreću dijalog za umetanje tabele. Broj redova ili kolona tabele se može kasnije promeniti na Modify -> Table ili na Properties panelu, kada je selektovana tabela. Podešavanje parametara tabele vrši se na Properties panelu, kada je selektovana tabele ili u meniju Modify -> Table. Dodavanje redova ili kolona vrši se na Properties panelu tako što se unesu novi brojevi kolona i redova. U meniju Modify Table odabere se Insert Row ili Insert column. Deljenje ćelija - označi se ćelija koja se deli, zada se komanda Modify Table Split cell ili na poperties panelu dugme Split cell. Spajanje ćelija - selektuju se ćelije koje se spajaju - zada se komanda Modify Table Merge cells ili na Properties panelu dugme Merge cells.

CSS STYLES PANEL

Ukoliko nije aktivan CSS panel otvoriće se preko opcije Window - CSS styles. Prikaz panela u All i Current modu. Pravljenje inline CSS stila

Slika 107. Inline stil kreiranje

• Kliknite na dugme New CSS rule na CSS Styles panelu. Otvoriće se New CSS Style dijalog

• Pod Selector Type odaberite opciju (Class, ID, Tag (inline), ili Compound). • U Define polju selektovati opciju This Document Only, kojom bismo

definisali inline stil

Podešavanje stila Svojstva koja se ovde podešavaju su podeljena u kategorije (Type, Background, Block, Box, ... ). U svakoj su grupisane odreñena svojstva. Npr. u kategoriji box se nalaze podešavanja za margine.

Slika 108. Definisanje stila

119

Izmena stilova u All modu

Slika 109. Izmena stilova

• Kliknite na dugme All na vrhu CSS Styles panela. • Uradite jedno od sledećeg: • Dupli klik na pravilo u CSS panelu da bi se otvorio prozor za izmene CSS

stila. • Selektujte pravilo u CSS panelu, a zatim ga menjajte preko komandi u dnu

CSS panela. • Selektujte pravilo u CSS panelu, a zatim kliknite na dugme Edit Style u dnu

CSS Styles panela.

Izmena stilova u Current modu

• Kliknite na dugme Current na vrhu CSS Styles panela. • Odaberite element na stranici da bi se prikazale njegove osobine. • Uradite jedno od sledećeg: • Dupli klik na osobinu u CSS panelu da bi se otvorio prozor za izmene CSS

stila. • Odaberite osobinu na CSS panelu a zatim je izmenite preko komandi u dnu

CSS panela. • Odaberite osobinu na CSS panelu a zatim je izmenite preko Properties

inspektora.

Dodavanje svojstava na CSS pravilo

• Označite pravilo u (ako ste u All modu), ili odaberite svojstvo (ako ste u Current modu).

• Uradite jedno od sledećeg: • Ako je aktivan Show Only Set Properties view, kliknite na Add Properties

dugme i dodajte svojstvo. • Ako je odabran Category view ili List view panelu, samo podesite vrednost

koji želite da dodate

Pravljenje CSS stranice prati sledeći niz koraka:

• File - New • Biramo kategoriju Blank Page i u njoj CSS • Dodavanje pravila na CSS stranicu • Dodavanje pravila u CSS stranicu je isto kao i dodavanje inline CSS stilova

na HTML stranicu

Upotreba gotovih HTML stranica vezanih za stilove omogućena je na sledeći način:

• File - New • Biramo kategoriju Page Designs (CSS) i u njoj biramo željeni izgled • Automatski se kreira HTML stranica i CSS stranica sa željenim stilovima

Pravljenje gotovih CSS stranica realizuje se na sledeći način:

• File - New • Biramo kategoriju CSS i u njoj biramo željeni izgled

120

• Ovim dobijamo gotovu CSS stranicu koju možemo da povezujemo sa HTML stranicama

Povezivanje HTML stranice sa stilovima uključuje sledeće:

• Otvori se dokument i uključi CSS styles panel • Pritisne se dugme Attach style sheet,

• Odabere se opcija Link

KREIRANJE LAYOUT-A STRANE

Jednostavne Web strane se brzo prave smeštanjem teksta i slika neposredno na stranu. Meñutim, div tagovi pružaju više mogućnosti za razmeštanje elemenata na strani. Oni omogućavaju predstavljanje informacija na organizovan način. U Design prikazu se prilikom kreiranja div tagova iscrtavaju pravougaonici u koje se zatim ubacuju tekst i slike. Veličinu i raspored tih pravougaonika moguće je proizvoljno menjati. Napravimo sledeće div-ove:

• okvir – okvir cele stranice • heder

o sadrzaj i u okviru njega: levaKolona i desnaKolona • navigacija • futer

Redosled kreiranja DIV-ova

Definisanje css stilova i umetanja div tagova obavlja se redom po koracima datim na slikama:

Slika 110. Kreiranje div-ova

1

2

3

121

Izgled stranice

Slika 111. Kreiranje “layouta” stranice

Krajnji izgled css fajla body { background-color: #FFFFA4; text-align: center; margin: 0px; padding: 0px; } #okvir { text-align: left; width: 770px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; background-color: #486796; border: thick groove #FFF;} #sadrzaj { margin-top: 0px;

padding-top: 0px;} #heder { margin-top: 10px; margin-bottom: 10px;} #navigacija { height: 30px; border: medium groove #FFF;} #levaKolona { float: left; width: 365px;} #futer { margin-top: 12px; margin-bottom: 12px; clear: both;} #desnaKolona { float: right; width: 365px;}

HEDER

NAVIGACIJA

FUTER

LEVAKOLONA DESNAKOLONA

SADRZAJJ

OKVIR

122

Komentar: Selektor body podešen je sa poravnanjem center da bi se cela stranica pravilno videla preko starijih čitača (IE 5.x).razčlaniti

SKRIPT JEZICI - JAVASCRIPT

JavaScript predstavlja programski jezik koji možete koristiti za dodavanje interaktivnosti svojim veb stranicama. To jezik koji se interpretira u veb pretraživaču i uključen je u neku HTML stranu. Kreirala firma Netscape i prvobitno je ovaj skript jezik nazvan LiveScript. JavaScript ima korene u Javi, ali je mnogo više povezan sa HTML-om. JavaScript je platformski potpuno nezavistan i može da se izvršava na bilo kom kompatibilnom pretraživaču. JavaScript vam dopušta da napravite aktivni korisnički interfejs, dajući korisnicima povratne informacije dok se kreću kroz stranice. JavaScript možete koristiti kako biste obezbedili da korisnici unose ispravne informacije u obrasce. Ukoliko vaši obrasci zahtevaju izračunavanja, možete ih izvršavati u JavaS-criptu na mašini korisnika, bez bilo kakve obrade na strani servera. Sa JavaScriptom, imate mogućnost da pravite namenske HTML stranice, u zavisnosti od postupaka korisnika. JavaScript ne dopušta čitanje i pisanje datoteka na mašini klijenta. To je dobro, jer svakako ne biste želeli da veb stranica bude u stanju da čita datoteke sa vašeg diska, ili da upisuje viruse na vaš disk, ili da rukuje datotekama na vašem računaru. JavaScript ne dopušta čitanje ili pisanje datoteka na mašinama servera. Postoji veliki broj slučajeva u kojim bi ovo bilo zgodno (kao što je čuvanje broja ostvarenih poseta te strane ili podataka za popunu obrasca), ali JavaScriptu nije dopušteno da to radi. Umesto toga, potrebno je da na serveru imate program koji će rukovati ovim podacima i čuvati ih. JavaScript ne može da zatvori prozor koji nije sam otvorio. Tako se izbegava situacija u kojoj neka lokacija preuzima vaš pretraživač, zatvarajući prozore svih drugih lokacija. Da bi u veb pretraživaču videli efekte JavaScripta, pretraživač mora biti JavaScript kompatibilan. Za pisanje ili modifikovanje skriptova se može koristiti bilo koji jednostavni tekst editor kao što je na primer Notepad. Pre postavljanja skripta u kod, potrebno ga je testirati u što većem broju pretraživača.

KOMPAJLERSKI I INTERPRETATORSKI JEZICI

Kompajlerski jezici su jezici kod kojih se programski kôd konvertuje u mašinski pre nego što se i pokrene, što znači da će se ta konverzija izvršiti samo jednom (Java). Interpretatorski jezici su jezici kod kojih se konverzija kôda dešava u momentu njegovog pokretanja i izvršava se svaki put kada se kôd pokrene (JavaScript). Razlike izmeñu Jave i JavaScripta prikazane su u sledećoj tabeli:

JAVA JAVASCRIPT

Prevodi se na serveru pre izvršavanja na klijentu

(kompajler).

Interpretira ga WWW čitač - ne prevodi se (interpetator).

Objektno-orijentisan jezik. Postoji podrška za objekte, klase,

nasleñivanje...

Objektno-baziran jezik. Postoje ugrañeni objekti.

Apleti su odvojeni od HTML dokumenata (iz kojih se pozivaju) Integrisano u HTML dokument

Promenljive se moraju deklarisati (jaka tipizacija)

Promenljive se ne moraju deklarisati (slaba tipizacija)

Tabela 3. Razlike izmeñu Jave i JavaScripta

123

KORIŠĆENJE JAVASCRIPT-A

JavaScript – korišćenje iz html – a

Drugi način deklaracije skripta

Za starije pretraživače <html> <body> <script type="text/javascript">  </script> </body> </html> Html iz Java Script-a

HTML DOM tutorijal HTML Document Object Model (HTML DOM) definiše standardni način za pristup i manipulaciju HTML dokumentima. DOM prezentuje HTML dokument sa strukturom drveta sa elementima, atributima i tekstom.

124

Slika 112. HTML DOM

Java script u zaglavlju

Java script u elementu body

125

Eksterni java script

HTML kod Ekserni JS kod <html> <head> <title>Untitled Document</title> <script type="text/javascript" src="javascriptKod.js"> </script> </head> <body onload="poruka()"> </body> </html>

// JavaScript Document function poruka() { alert("Ovo je neka poruka") }

Svojstva Java Script-a

• Java script je „case sensitive“. • Oznaka ; na kraju naredbe je opciona. • Sa ; se mogu napisati višestruke JavaScript naredbe u istoj liniji. • Bez oznake ; JavaScript naredbe se moraju pisati u posebnim linijama. • Blokovi u JavaScript-u izmeñu oznaka zagrada { i }, kao u C++-u, Java-i,

PHP-u,… i drugim jezicima. • Blok predstavlja celinu – ekvivalentnu jednoj naredbi.

Komentari u JavaScript-u

• Komentar na kraju reda – linije je “//” • Proizvoljni komentar izmeñu znakova “/*” i “*/” – multi line komentar. • Kao i u drugim programskim jezicima, komentari služe za:

o Opis programa običnim govornim tekstom. o Privremeno isključivanje delova programa tokom razvoja programa.

JavaScript promenljive JavaScript nije strogo tipizirani jezik, tako da deklaracija promenljivih nije obavezna. Promenljiva x se PRVI put u programu može navesti kao:

x = 5. Tip promenljive se deklariše implicitno – preko trenutno dodeljene vrednosti - script jezik. Deklaracija promenljive x: var x = 5; x = “Hello World”; Tip podatka koji sadrži promenljiva može da se menja u toku programa. Ime promenljive je „case sensitive“ i sastoji se od slova (a – z, A – Z), cifara (0 – 9) i znaka “_” – underscore. Prvi znak imena promenljive mora biti slovo ili “_”. Osnovni – ugrañeni tipovi podataka mogu biti:

• Undefined • Null • Boolean • Number • String

Osim ovih osnovnih tipova postoje i objekti – grañeni i korisnički definisani.

126

Javascript operatori. Aritmetički operatori

Tabela 4. Aritmetički operatori

Javascript operatori. Operatori dodele

Tabela 5. Operatori dodele

Javascript operatori. Operatori poreñenja

Tabela 6. Operatori poreñenja

Javascript operatori. Logički operatori

Tabela 7. Logički operatori

127

SKRIPT TAGOVI

Dat je primer Javacript koda: <html> <body bgcolor="brown"> <p>paragraf 1</p> <script language="javascript"> document.bgcolor = "pink"; </script> </body> </html> Veb strana tretira se kao dokument kada se primenjuje skriptovanje. Dokument ima svojstva (properties), npr. boja njegove pozadine (bgColor). Pozivanje svojstva obavlja se na sledeći način: document. ime svojstva. Setovanje svojstava Metod setovanja svojstava korišćenjem HTML-a je statički:

• vrednost se setuje samo jednom i nikad se ne menja. • setovanje svojstava korišćenjem JavaScript-a omogućava dinamičku

promenu date vrednosti npr. Bgcolor (bgColor)

KORIŠĆENJE JAVASCRIPTA

JavaScript je program izgrañen iz funkcija i naredbi, operatora i izraza. Osnovna jedinica je naredba ili izraz koji se završava sa tačkom-zarezom. document.writeln ("Ovo radi!<BR>"); Gornja komanda poziva writeln() metod, koji je deo document objekta. Tačka-zarez ukazuje na kraj komande. JavaScript komanda može biti u više redova, ali se na kraju završava sa tačkom-zarezom. Komandni blokovi Naredbe se grupišu u blokove naredbi, koji su izdvojeni velikim zagradama: { document.writeln("Da li ovo radi? "); document.writeln("Radi!<BR>"); } Izlaz iz JavaScripta Ostvaruje se metodama

• write (šalje tekst u prozor WWW čitača bez pomeranja) i • writeln (isto kao write(), s tim što se posle ispisa teksta kursor pomera za

jedno mesto)

document.write("Test"); document.writeln('Test');

INTERAKCIJA SA KORISNIKOM

Alert() metoda omogućava slanje poruka korisniku, ali ne i preuzimanje odgovora od njega. Metod prompt() omogućava jednostavnu interakciju sa korisnikom. Prompt() kreira dijalog prozor u kome se može proslediti poruka korisniku, ali se formira i polje u koje korisnik može uneti proizvoljan tekst. JavaScript ima mogućnost da kreira male dijaloge za ispis ili unos teksta koji su potpuno nezavisni od sadržaja HTML dokumenta. Najjednostavniji način da se prosledi kratka poruka korisniku je korišćenje alert metoda: alert("Kliknite na OK za nastavak.");

128

Demonstriranje parsinga <html> <body bgcolor="white"> <p>paragraph 1</p> <script language="javascript"> // 1.script blok alert("prvi skript blok"); </script> <p>paragraph 2</p> <script language="javascript"> // 2.script blok document.bgcolor = "red"; alert("drugi skript blok"); </script> <p>paragraph 3</p> </body> </html>

Slika 113. Primena alert metode

Interakcija sa korisnikom - promt <html> <head> <title>primer</title> </head> <body> <script language="javascript"> document.write("<h1>dobrodošli"); document.writeln(prompt("unesite vaše ime:",” ”)); document.write(" u svet javascripta!</h1>"); document.write('<p>čestitamo</p>'); </script> </body> </html>

EVENT & ACTION (DOGAĐAJ I AKCIJA)

Kada se stranica pregleda u pretraživaču, neke akcije korisnika mogu da izazovu pokretanje nekog koda. Primer: Event: Kada preñemo mišem preko nekog teksta, Action: on promeni boju. Behaviors panel Uključuje se komandom Window – Behaviors. Pojavljuje se u desnoj grupi panela. Dodavanje behavior-a obavlja se na sledeći način:

• Dodaje se na sliku ili link ili sloj • Selektuje se objekat i na Behaviors panelu se klikne na dugme „+“ i doda se akcija. • Potrebno je podesiti koji event pokreće akciju, kao i samu akciju

Poslovne grafičke i multimedijalne aplikacije sa veb dizajnom Skripta

129

Slika 114. Panel Behaviors

Promena Bahavior-a

• Selektuje se element na stranici • U behaviors panelu se promeni event • Dva puta se klikne na akciju da bi se promenila akcija • Dugmad sa strelicama menjaju redosled behaviora • Dugme minus je za brisanje

Slika 115. Izbor dogañaja i akcija

Dodavanje behavior-a na tekst

• Na običan tekst se ne može dodati behavior, ali može na link • Pretvori se tekst u link koji ne vodi nikud. (Upise se # ili JavaScript u polje link) • I na njega se doda behavior

Akcija SwapImage

• Služi da se slika automatski promeni kada npr. preñemo mišem preko nje • Pripremite dve slike • Prva se postavi na stranicu (poželjno je dati joj ime) • Selektuje se slika • Dugme „+“ na Behaviors panelu Akcija: SwapImage


130

• Odabere se druga slika • Podesi event koji pokreće akciju

Tekst na statusnoj liniji

• Behavior se dodaje na body tag • Selektuje se body element (npr. na tag selector-u) • Doda se akcija Set Text of Status Bar

Slika 116. Izbor opcije teksta na statusnoj liniji

Validacija formi

• Dodaje se na svaki element forme za koji treba da se uradi provera • Selektuje se element • Doda se akcija validate form • Podese željeni parametri • Event koji pokreće akciju treba da bude ili onChange ili onBlur

Šta su dogañaji? Dogañaji su signali koji se generišu kada se odigra odreñena akcija. Dogañaji u WWW čitaču su kada korisnik klikne na hipertekst link, kada se promeni podatak u ulaznom polju forme ili kada se završi učitavanje WWW dokumenta. U sledećoj tabeli prikazani su redom nazivi dogañaji, opisi istih i njihovi obrañivači.


131

DOGAĐAJ Blur Click Change Focus Load Mouseover Mouseout Select Submit Unload

OPIS Dogaña se kada se ulazni fokus prebaci sa elementa forme (kada korisnik klikne van polja forme). Dogaña se kada korisnik klikne na formu ili na link. Dogaña se kada korisnik promeni vrednost u text, textarea ili select elementima forme. Dogaña se kada polje forme dobije ulazni fokus. Dogaña se kada se učitava HTML dokument u WWW čitač. Dogaña se kada korisnik pomera miša preko objekta.

Dogaña se kada miš preñe preko objekta. Dogaña se kada korisnik izabere ulazno polje forme. Dogaña se kad je forma prosleñena HTTP serveru (kada korisnik klikne na dugme za slanje sadržaja forme). Dogaña se kada korisnik napušta HTML dokument, pre nego što počne sa učitavanjem novog HTML dokumenta.

OBRAĐIVAČ DOGAĐAJA onBlur onClick OnChange OnFocus OnLoad OnMouseOver OnMouseOut OnSelect OnSubmit OnUnload

Tabela 8. Dogañaji u Javascriptu


132

LITERATURA

1. Photoshop, online kurs, ITAcademy, LINK group 2. Dreamweaver MX 2004, skripta, Fakultet organizacionih nauka, Univerzitet u Beogradu

Documents

POSLOVNE, GRAFI ČKE I MULTIMEDIJALNE APLIKACIJE SA VEB …v2.link-onlineservice.com/media/files/PAWD.pdf · 2019. 7. 12. · Računarska grafika ... • Turbo • Vector • Ubuntu