VISOKA POSLOVNA KOLA STRUKOVNIH STUDIJA BLACE

DIPLOMSKI RADPrimena Photoshopa u izradi veb sajtovaIgor Radunovi

U Blacu, 2011. god.

VISOKA POSLOVNA KOLA STRUKOVNIH STUDIJA BLACE

Primena Photoshopa u izradi veb sajtova- DIPLOMSKI RAD -

Kandidat:Igor Radunovi

Mentor: mr Suzana Markovi dipl.ing.elek. predava U Blacu, 2011. god.2

Sadraj1. 2. 3. SADRAJ.........................................................................................................................................................3 UVOD................................................................................................................................................................4 OSNOVE DIZAJNA........................................................................................................................................5 DIZAJN....................................................................................................................................................................5 WEB DIZAJN (WEB DESIGN)........................................................................................................................................5 DIZAJNIRANJE WEB STRANICA......................................................................................................................................5 ESTETSKI I FUNKCIONALNI KRITERIJUMI VEB STRANE.......................................................................................................6 OSNOVNE APLIKACIJE SVAKOG DIZAJNERA.....................................................................................................................7 4. OSNOVE PHOTOSHOP-A............................................................................................................................8 TA JE PHOTOSHOP?..................................................................................................................................................8 PSD FORMAT..........................................................................................................................................................9 MOGUNOSTI I VERZIJE FOTOOPA ............................................................................................................................10 5. RADNO OKRUENJE PHOTOSHOPA....................................................................................................11 PALETA ALATA.......................................................................................................................................................12 OPCIJE ALATA (OPTION BAR).....................................................................................................................................13 PODEAVANJE RADNOG PROSTORA..............................................................................................................................14 6. .........................................................................................................................................................................14 TASTATURNE PREICE..............................................................................................................................................16 ...........................................................................................................................................................................16 SLOJEVI (LAYERS)..................................................................................................................................................16 7. PHOTOSHOP I DIZAJN KONKRETNOG VEB SAJTA........................................................................17 KREIRANJE I PLANIRANJE UNAPRED ODREENOG VEB SAJTA............................................................................................18 DIZAJN HEADER-A..................................................................................................................................................19 DIZAJN DELA ZA PREDSTAVLJANJE PROIZVODA.............................................................................................................21 DIZAJN DUGMADI....................................................................................................................................................22 DIZAJN GLAVNOG SADRAJA.....................................................................................................................................22 DIZAJN FUTERA.......................................................................................................................................................23 8. PREVOENJE .PSD DIZAJNA STRANE U VEB STRANU.................................................................24 PRIPREMA ZA PREVODJENJE U HTML...........................................................................................................................24 REZANJE .PSD-A I OPTIMIZACIJA POZADINE ZAGLAVLJA..............................................................................................25 PREVODJENJE I OPTIMIZACIJA LOGO-A.........................................................................................................................26 REZANJE .PSD DUGMADI ........................................................................................................................................27 9. PRIMENA FOTOOPA U IZRADI DIZAJNA ZA POJEDINANE ELEMENTE VEB SAJTA......28 JEDNOSTAVAN DIZAJN HORIZONTALNOG MENIJA............................................................................................................28 SVRHA BANERA.......................................................................................................................................................29 IZRADA BANERA SA POKRETNIM ELEMENTOM ..............................................................................................................30 KREIRANJE ARE (PATTERN-A) ZA POZADINU SAJTA ................................................................................................33 KORIENJE PATTERN-A...........................................................................................................................................33

3

Uvod

4

Osnove dizajnaDizajnDizajn je primenjena umetnost koja nastaje procesom donoenja serije odluka koje imaju za cilj konstruisanje, oblikovanje ili kreiranje neega primenjljivog. Dizajn se obino odvija po unapred odreenom planu, ideji ili zamisli. Svrha dizajna je realizacija plana ili ideje koji mogu biti uzrokovani potrebom da se rei odreen problem. Zbog toga se proces dizajna esto definie i kao proces reavanja problema.

Web dizajn (web design)Web dizajn (web design) je vrsta dizajna, u mnogim segmentima srodna grafikom dizajnu - takoe kombinuje tipografiju, ilustraciju, fotografiju, multimediju. Kao i u grafikom dizajnu poruku je potrebno oblikovati tako da je prepoznatljiva i razumljiva namenjenoj publici. No, bitna stavka koja web dizajn odvaja od grafikog dizajna je u izvrnom delu: osim to je potrebno poznavati tehniku prirodu Interneta, web dizajn je specifian zbog svoje dinamike strukture: web stranice su "ive", granaju se i neprestano obnavljaju.

Dizajniranje web stranicaIzrada web stranica ili dizajniranje web stranica moda je jedan veoma zahtevan proces . Prvo treba nauiti ta je web dizajn i koji su njegovi elementi.Vani elementi su alati za izradu, odnosno programi u kojima se web stranica kreira. Najkorisniji alati za izradu web stranica su Adobe programi Fireworks, Dreamweaver, Flash i Photoshop. No da bi pristupili tim alatima moraju se proi neki osnovni elemente. Poetak izrade je prikupljanje samih materijala, tekstova i slika, kada su prikupljeni svi materijali sledea stavka koja je i najvanija je sama ideja. Najbolja ideja doe kroz analizu samih materijala, zato materijal koji se prikupi mora biti jako kvalitetan, posebno slike jer su oni najvaniji element svakog web dizajna. Slike moraju biti jako kvalitetne i najvanije kvalitetno obraene. Od slika kreu vani elementi pri izradi web stranice, a to je sama struktura i boje. Bitno je te stvari pregledno rasporediti unutar cele strukture.Kada se rei problem sa materijalima i ideja vano je biti upoznat sa glavnim jezicima unutar samog web dizajna, a to su HTML i CSS. Bez poznavanja tih jezika i njihovih kodova sama izrada e biti gotovo nemogua. Svaka web stranica je u sutini koliina kodova koji su napisani u jeziku HTML-a, a samo ureenje vri se preko CSS-a. Pre su se web stranice radile preko direktno pisanih kodova, danas to pisanje radi sam program, ali bitno je znati njihovo znaenje da bi imali mogunost za prepoznavanje neke greke.Web dizajn kao takav dosta je teak posao, pogotovo danas kada stranice vie nisu obine i jednostavne, web dizajn se ne moe nauiti preko noi jer i kada se naui rad sa alatima, onda tek dolaziti najtei deo posla, a to je idealan dizajn, osim to stranica mora biti tehniki ispravna, struktura mora biti u svim ispravnim proporcijama, font mora biti jednak, stranica mora imati i svoj besprekoran izgled. Bitno je da za klijenta napravite jedinstveni izgled web stranice. Svaka stranica za klijenta se radi kao za sebe, daje se maksimum pri izradi obraajui panju na svaki sitni detalj. Svakog dana je potrebna veba i to po par sati 5

dnevno sve elemente web dizajna od same teorije do prakse. Svaki klijent je daljnja preporuka i odlinim radom preko svakog klijenta se otvaraju vrata prema drugima..

Estetski i funkcionalni kriterijumi veb straneOvo su neka od uputstava za kreiranje stranice koja zadovoljava barem osnovne estetske i funkcionalne kreiterijume: Tekst i pozadina ne smeju biti u konfliktu Ukoliko postoji i jedno slovo na stranici koje se ne moe proitati zbog konflikta sa pozadinom, vreme je da promenite pozadinu ili barem poveate kontrast izmeu pozadine i teksta. Najlake je da tekst potamnite a pozadinu posvetlite. Tekst mora biti dovoljno velik da se moe itati, ali ne vei od toga Ovo pravilo naravno da ne vai za naslove koji bi trebali 2-3 veliine biti vei od samog teksta Hijerarhija informacija mora biti jasna Da li je ono to posetilac stranice prvo vidi zaista ono to je najvanije na stranici? Igrajte se sa pozicijom i veliinom slika, naslova, slogana i samog teksta dok hijerarhija panje ne bude jasna. Kolone teksta moraju biti ue da posetioci sajta sa irim monitorima ne bi imali problema sa itanjem teksta. Navigacija po sajtu mora biti vidljiva u 2 sekunde! Da se posetilac moe snai na sajtu bez itanja posebnog prirunika Navigacija mora biti ista kroz celi sajt (ili da se logiki menja recimo svaki odeljak moe imati drugu boju)Navigacija mora korisniku davati do znanja gde se trenutno nalazi Veliki sajtovi bi trebali imati mapu sajta (sitemap) Korisno ne samo zbog posetilaca ve i zbog pretraivaa Stranica mora da se brzo uitava Velike slike ne treba nepotrebno natrpavati na stranicu Osnovna navigacija bi trebala da staje u prozor 640480 Potrebno je koristiti grafike elemente kao to su slike, citati iz teksta, podnaslovi da se razbiju veliki blokovi teksta Svaka stranica mora da izgleda kao da pripada istom sajtu koristei iste elemente kroz ceo sajt

6

Osnovne aplikacije svakog dizajneraPre nekoliko godina ovom granom kreativne industrije vladala je estoka konkurencija. Dizajnerima poetnicima bilo se teko sakupiti novac za skup aplikacija koje e koristiti u svojim kreacijama. Ne samo zbog samih mogunosti programa, koje su u veini sluajeva bile podjednake, ve i u problemu kolaboracije i razmene fajlova sa drugim dizajnerima, i na kraju sa tamparijama. Danas je situacija dosta jednostavnija. Velike softverske kue pokupovale konkurentske firme i iako i dalje postoji mnogo softverskih reenja koja se pokuavaju probiti uglavnom niskom cenom, veina, kako poetnika tako i profesionalnih dizajnera i umetnika, odluuje se za proverena reenja. Jedna od najveih firmi se bavi programima za veb a ovo su neki od njih: Adobe Photoshop Obrada fotografija i svih rasterskih formata, takoe i prvi korak mnogim web dizajnerima u kreiranju web-sajtova Adobe illustrator kreiranje i obrada svih vektorskih formata kao i konverzija rasterskih u vektorske formate. Koristi se za kreiranje pojedinanih grafika, bilborda, plakata i obino jednostraninog promotivnog matreijala flajera, broura, vizit-karica Adobe In Design - Kreiranje kataloga, broura, i ostalog viestraninog promotivnog materijala, kao i prelom teksta Adobe Dreamweaver - Kreiranje statinih i dinamikih internet prezentacija web sajtova Adobe Flash-Kreiranje interaktivnih internet i multimedijalnih prezentacija, kao i interent igara Adobe Premiere - Linearna video montaa. Profesionalni program za osnovnu video obradu Adobe AfterEffects - Obrada video materijala Adobe Acrobat - Aplikacija za kreiranje i pregled PDF fajlova

7

Osnove Photoshop-ata je photoshop?Adobe Photoshop ili skreno Photoshop je progrm Adobeovih programera i autora Photoshopa, Thomasa Knolla, z rd s digitalnim fotografijama. Thomas Knoll, pisao je program na svom Macintosh Plus raunaru tako da slui za prikazivanje crno belih slika. Ovaj program, nazvan Display, privukao je panju njegovog brata Johna Knolla, koji ga je nagovorio da od ovog programia naprave kompletan program za obradu slika. 1990. Mac OS . Windows-a se upoznali sa Photoshop-om po izlasku e Photoshop 2.5, 1992. . Ovj progrm se moe koristiti z modifikovanje starih fotografija ili z prvljenje novih poevi od prznog pltn z crtnje. Pri pretrivnju internet svkodnevno nilzimo n dugmad n koje treb d kliknemo kako bismo izabrali odreenu stranicu. Meni sjt n kome su porene sekcije, odnosno ponude sjt, ikonice, lepe tekstulne poruke i sve ostlo uglvnom je nprvljeno u Photoshopu. Photoshop je progrm koji se moe koristiti i z kreiranje internet strnic. Alti koji su n rspolgnju unutr Photoshopa, ne smo d omoguvju stvrnje grfike, ve pruju kompletnu kontrolu z optimizciju te grfike u sluju postvljnj n veb, ko i mogunost kreirnj veb strnic, menij ili bner profesionlnog izgled. Unutr Photoshopa je mogue kreirti grfiku veb strne, ztim je isei n iseke, potom generisti HTML kod i slike koje potom moete uvesti u progrm poput Dreamweaver-a rdi dlje obrde. Obrd digitlne fotogrfije i sve to ide uz to dns je nezobilzn deo ne smo veb rzvoj nego i brojnih drugih deltnosti, sve to je gotovo nemogue kvlitetno i profesionlno urditi bez Photoshopa. Grfik je privukl msu ljudi n Internet, p slike ine 90% sdrj n vebu, Photoshop je svetski broj jedn u obrdi slik. Ko rezultt tog, Photoshop je posto nerskidivo povezn s vebom. Kvlitetn dizjn veb strnice donosi stlne posetioce, doprinosi ozbiljnosti firme i povev konkuretnost n tritu.Uprvo su veb dizjneri oni koji izrdom i urirnjem veb strnica stvaraju sliku o firmi n internetu. Veina veb dizajnera vizuelni dizajn radi u Photoshopu. Veina rasterskih slika, bez obzira na nain nastanka (skeniranje, digitalna fotografija, hvatanje sadraja ekrana) zahteva neku vrstu obrade pre upotrebe. To moe biti obino prilagoavanje digitalnog formata (isecanje, promena kolor modela), retuiranje radi poboljanja izgleda ili uklanjanja nedostataka, komponovanje slike iz vie izvora, kao i primena posebnih filtera radi postizanja posebnih vizuelnih efekata. Adobe Photoshop je program za obradu rasterskih slika. Predstavlja sloen i veoma obiman programski proizvod, pa ovladavanje velikim brojem njegovih funkcija zahteva veoma mnogo vremena. Za potrebe vebi i uspeno korienje programa nije potrebno poznavati sve njegove mogunosti, ve je dovoljno ovladati osnovnim funkcijama neophodnim za najee obrade rasterskih slika u tipinim poslovnim primenama, kao to su izrada poslovnih prezentacija i dizajn Web stranica . Photoshop je konstruisan na takav nain da moe nesmetano saraivati s drugim programima Adobe kompanije, npr. Adobe InDesign. Photoshop stavlja sve vei akcenat na nedestruktivnu obradu fotografija. 8

Postoji ogroman broj naina na koje je mogue drastino izmeniti sliku a da se ne promeni nijedan originalni piksel na njoj. Photoshop je jedan od najboljih programa koji su ikada napravljeni i nalazi upotrebu u svim sferama drustva od kucne upotrebe do najvecih organizacija bilo da je u pitanju delimicno korigovanje fotografija, pravljenja CV-a u pdf formatu ili dizajniranje sajtova, reklama, postera. Bukvalno Photoshop moze da sluzi svakom i za svaku potrebu. Zbog svojih velikih i sirokih mogucnosti Photoshop poseduje ogroman broj komandi i dodataka koji na prvi pogled mogu da zbune i odbiju potencijalnog korisnika, sto je pogresno jer se osnovne stvari u radu sa Photoshopom vrlo brzo naue. Photoshop je jedan od najpopularnijih programa na svetu i osim to je mogue uraditi skoro sve to moe da se zamisli, za ovaj program je napravljeno i mnogo dodatnih programa koji rade u sklopu sa Photoshop-om a zovu se Photoshop Plugins i ponju ko mini-urednici koji menjju sliku. Njei oblik su filter dodci koji pruju rzliite efekte z slike. Oni se nlze u meniju Filter (eng. Filter). Adobe Camera RAW (tkoe poznt ko ACR i Camera RAW) je posebn dodtk, koji Adobe isporuuje bespltno, pre sveg se koristi z itnje i procesuirnje raw dtotek slik, tko d rezultujue slike moete obrditi u Adobe Photoshop.

PSD FormatFormati predstavljaju nain uvanja informacija u datoteci, tako da se one mogu koristiti u drugim aplikacijama, tampati, ili postaviti na Web stranu i koristiti na Internetu. U svetu operativnog sistema Windows, formati datoteka su definisani troslovnim oznakama tipa datoteka (tj. nastavcima imena datoteka), kao to su .doc za dokumente iz programa za obradu teksta i .bmp , za rasterske slike (bit mape). Iako Adobe Photoshop podrava veliki broj formata kompresije digitalnih slika, koji se koriste za uvanje digitalnih slika kao to su BMP, GIF, JPG ili JPEG, PNG, PICT, TIF.. osnovni Photoshop-ov format je PSD (Photoshop Document). PSD je radni Photoshop-ov format, tj. sva editovanja koja se vre u Photoshop-u, ak i editovanja slika drugih formata, vrie se u PSD formatu. Npr. kod editovanja JPG slike, slika se momentalno prebacuje u PSD pri samom poetku editovanja, tako to se JPG slika premesta u nov PSD lejer (sloj). Ono to je specifino za PSD format je upravo to to radi sadri lejere, to nije sluaj kod drugih formata. Photoshop Format (PSD). Photoshop format (PSD) je podrazumevani format datoteke i jedini format pored Large Document Size koji podrava veinu mogunosti Adobe Photoshop-a. Zbog uske integracije Adobe prozvoda, drugih Adobe programa kao to su Adobe Illustrator, Adobe InDesign, Adobe After Effects mogu direktno da uvezu PSD datoteke i sauvaju veinu mogunosti Photoshopa. Prilikom uvanja PSD-a mogu se podesiti podeavanja kako bi se poveala kompatibilnost datoteke. Ovo e sauvati kompozitnu verziju slike kao slojevitu (layered) tako da moe da se ita od strane drugih aplikacija ukljuujui prethodne verzije Adobe Photoshop. U Photoshopu je mogue sauvati kao PSD datoteku 16 bita po kanalu (channel) i visok dinamiki opseg 32 bita po kanalu slika (HDR). PSD format prua mogunost izrade dizajna za web stranicu. Izrada svake web stranice poinje, po pravilu, planiranjem i skiciranjem na papiru. Onda sledi izrada u Photoshopu pa kodiranje i prebacivanje iz PSD-a u HTML ili CSS. Mogua je i konverzija PSD-a u Joomla stranicu.Ovakav nacin pravljenja sajtova je dosta zastupljen, a i jako jednostavan, daje potpunu slobodu dizajniranja i uz malo poznavanja HTML-a i CSS-a mogu se napraviti odlicni sajtovi. Mana koritenja Photoshopovog matinog formata jeste to to druge aplikacije moda nee moi da ga otvore. Da biste prenosili datoteke izmeu aplikacija, da biste ih tampali ili objavljivali na Webu, morate ih sauvati u kompatibilnom formatu. 9

Mogunosti i verzije FotoopaPhotoshop ima veze sa ostalim Adobe programima za ureivanje medija i animacija. Photoshop ov format .PSD (Photoshop Document) uva slike sa podrkom za veinu opcija dostupnih u Photoshop u. To ukljuuje slojeve sa maskama, boje, ICC profile, transparentnost, tekst, alfa kanale, iseke i duoton podeavanja. Razlikuje se od mnogih drugih formata (npr. EPS ili GIF) koje ograniavaju sadraj da osigura prilagodljivu i predvidljivu funkcionalnost. Popularnost Photoshop a podrazumieva da .PSD format bude iroko primenjivan i da bude podran od strane svih kompetentnih programa. Format .PSD moe biti exportovan u Adobe Illustrator, Adobe Premiere Pro I After Effects i obrnuto, kako bi napravili standardizovane profesionalne DVD - eve i pruili nelinearno ureivanje i servise specijalnih efekata, kao to su pozadine, tekstura, i sl., namenjenih za televiziju, film i web. Photoshop je program za editovanje slika baziran na pixelima za razliku od programa kao to su Macromedia FreeHand (sada se ne koristi), Adobe Illustrator, CorelDraw ili Inkscape, koji su bazirani na vektorskom ureivanju slika. CS3 ima nove mogunosti poput pojednostavljenog interfejsa, unapreen Camera Raw1, bolja kontrola nad opcijama za tampanje, poboljana PDF podrka i bolje upravljanje Adobe Bridge om. Novi alati za editovanje u CS3 su paleta Klone Izvora (eng. Clone Source palette) i ne destruktivni Pametni filteri (eng. Smart Filters) i druge mogunosti kao to su podeavanja svetlosti i kontrasta i unapreeni Vanishing Point2 modul. Kontorla opcije Crnobijelog podeavanja je unapreena pomeranjem klizaa kroz skalu sivih tonova, slino kao kod Chanel Mixer podeavanja. Rad u Photoshop u je olakan s novim alatima kao to je alat za brzo selektovanje (Quick Selection tool) i alatom za poboljavanje ivica (Refine Edge tool) i unapreenom tehnologijom za spajanje slika. CS3 Extended sadri sve mogunosti kao i CS3, plus alati za importovanje i obradu 3D grafika, poboljavanje videa i alati za sveobuhvatnu analizu slika, koritenje MATLAB3 integracije i podrku DICOM4 datotekama. Photoshop CS4 poseduje novu 3D podrku koja omoguava slikanje, crtanje direktno na 3D modelima, omotavanje 3D objekata 2D slikama, konvertovanje gradient mapa u 3D objekte, dodavanje dubine slojevima i tekstu, bolji kvalitet tampanja. Podrava zajednike 3D formate, nova podeavanja, skaliranje slika, olakana rotacija slike i prikaz informacija o datoteci. Adobe je slubeno predstavio i novu verziju svog glavnog proizvoda Photoshop CS5 Softver donosi brojne novine, meu kojima su i oekivana 64-bitna podrka za Mac OS X Windows verzija postoji u 64-bitnom izdanju od CS4. Osim toga, Adobe sada integrie automatsko ispravljanje greaka soiva za irok spektar kamera i objektiva, a kvalitetnija je i podrka za HDR fotografiju. Znaajno je olakano retuiranje fotografija sa novim alatom koji u obzir uzima i pozadinu, a tu su i napredniji alat za selekciju, puppet warp za mono manipulisanje objektima na sceni kao i kolekcija novih kistova sa posebnim fizikalnim funkcijama i dinamikom. Neke od njih se odnosi na efekte poput curenja tinte, meanja boja i oblika kistova, a celi proces raunanja fizike moe biti hardverski ubrzan na grafikoj kartici. Dodatak za rukovanje raw slikama sada poseduje napredne algoritme iz Lightrooma 3, a glavni Adobeov ovek za Photoshop, Bryan Hughes, navodi preko 36 promena i novina u ovoj verziji.

10

Radno okruenje PhotoshopaOno to prvo uoimo, posle startovanja svakog programa, jeste radno okruenje. Photoshop poseduje veoma lepo i funkcionalno dizajniran grafiki interfejs. Kada se prvi put pokrenete Adobe Photoshop CS4, pod uslovom da nisu menjana podeavanja (default settings), na ekranu se vidi raspored panela i menija isti kao na slici-1. ispod. Radni prostor se moe podeliti na nekoliko celina:

(slika-1.)

Pri vrhu prozora se nalazi linija menija (komandna linija), meni koji je veoma slian menijima drugih programa za Windows. On se sastoji od menija: File, Edit, Image, Layer, Select, Filter, View, Window, Help. Klik na bilo koje ime menija, otvara njegov podmeni, to je veoma slino Windows radnom okruenju. U nastavku linije menija, nalaze se komande koje se veoma esto koriste, koje se mogu videti na slici-2.

(slika-2.)

Komande prikazane na slici-2 se koriste za: 1. Link do Adobe Bridge 2. Meni za ukljuivanje/iskljuivanje mree i 3. Procenat prikaza aktivnog 4. Komanda za premestanje dokumenta po radnoj 5. Komanda za uveliavanje/umanjivanje 6. Komanda za rotiranje pogleda na 7. Meni za izbor prikaza vie aktivnih 8. Meni za izbor naina rasporeda elemenata samog Photoshop-a.

aplikacije voica dokumenta povrini dokumenta dokument dokumenata 11

Paleta alataSa leve strane radne povrine nalazi se paleta sa Photoshop alatima. Svaki alat reaguje na modifikatore. Modifikatore predstavljaju Control, Shift i Alt i oni menjaju funkciju alata. Obino su kumulativni, to znai da ukoliko pritisnete dva ili tri tastera dobicete dve ili sve tri modifikacije Inae, ako desnim tasterom kliknete na povrsinu slike pojavice se kontekstno osetljivi meni koji nudi komande za koje Photoshop "misli" da e vam biti potrebne. Neki alati (oni koji u donjem desnom delu dugmeta imaju malu crnu strelicu) su sloeni i sastoje se iz vie slinih alata. Tako na primer alat Marquee ima etiri oblika - pravougaonik, elipsu, horizontalnu liniju i vertikalnu liniju. Do ovih drugih oblika alata dolazi se tako to se miem pritisne iznad dugmeta alata i dri neko vreme, posle koga se pojavi mala pod-paleta iz koje se izabere drugi oblik. Moete ih dobiti i uzastopnim pritiskanjem shortcut-a. 1. Move tool Alat koji slui za pomeranje odreenog dela slike ili celog layera (sloja). Obelei se npr. deo slike, klikne se miem i vue taj dio do eljenog cilja. 2. Marquee tools - Skup alata koji slui za selektovanje dela slike. 3. Lasso tool - slui za slobodnom obeleavanje, kliknemo i sami crtamo koji deo emo obeleiti. 4. Magic Wand tool - Ovaj alat omoguava da selektovanje (obeleavanje) odreenog dela slike u zavisnosti od boja. 5. Crop tool - Ovim alatom se selektuje (obeleava) jedan deo slike pritom odbacujui sve ostalo. 6. Eye dropper tool - Ovim alatom uzimate uzorak boje iz postojee slike. 7. Healing Brush tools - Healing brush omoguava da ispravljanje nesavrenstva na slikama poput ogrebotina i sl. 8. Pencil tool olovka slui za crtanje linija sa otrim ivicama. 9. Clone Stamp tool - Ovim alatom je mogue duplirati odreene delove slike. 10. History Brush tools - History Brush tool crta prethodno stanje slike u trenutno, uva se svaka akcija koja se napravi od kad se otvori neku slika 11. Eraser tools - Eraser tool - gumica za brisanje 12. Fill tool - je alat kojim se moe ispuniti vei deo odabrane povrine samo jednim klikom. 13. Blur tool je jednostavan alat. Slui za zamuivanje slike pri crtanju. 14. Dodge tool se koristi da se osvetle pikseli na odreenim delovima slike. 15. Pen tool slui za postavljanje anchora (tzv. sidrita), tj. take na kojem se linije spajaju. 16.Text tool - Ukratko, obelei se deo slike i napie eljeni tekst 17.Path selection tool je vrlo slian Move tool-u, samo ovaj alat slui za pomeranje vektorskih oblika tj putanja 18.Rectangle, Rounded Rectangle, Eclipse i Poligon Tool su osnovni vektorski oblici koji se ovim alatom mogu crtati 19.Hand tool - Ovaj alat se koristi za navigaciju kroz sliku kada je ona prevelika pa ne stane u celosti na va ekran. Korienje alata je jednostavno. Klikne se negde na slici i pomera mi. 20.Zoom tool - Ovim alatom reguliete stepen zumiranosti (poveanosti) slike. 12

Opcije alata (option bar)Traka option bar je traka koja sadri parametre za podeavanje alata kojim se trenutno radi i nalazi se odmah ispod komandne linije. Veoma bitana a najmanje pominjana, traka opcija pokazuje parametre za prilagoavanje (ukoliko su dostupni) uvek kada se aktivira neka alatka u Photoshopu. Od podeavanja parametara zavisi kako e se alatka koja je izabrana ponaati i kakav e krajnji efekat biti. Kada se izabere da se radi sa etkicom (Brush Tool) pojavie se parametri na traci opcija. Prvi parametar koji treba podesiti je veliina etkice i to ete uraditi klikom na mali crni trougao sa desne strane broja koji oznaava veliinu etkice. Pojavie se malo lebdee prozore u kome treba da se izabere etkica sa kojom e se raditi i podesiti njenu veliinu (Size) i tvrdou (Hardness).

Evo primera kakav e trag ostavljati etkica sa razliitim parametrom tvrdoe:

13

Podeavanje radnog prostoraJedan od glavnih odlika radnog prostora u Adobe Photoshop CS3 Extended, kao i njegovim prethodnicima, jeste njegova prilagodljivost potrebama korisnika. Kako sve vie i vie budete ulazili u svet Photoshopa, shvatiete da vam prostora za rad uvek nedostaje, jednostavno to je injenica. Uskoro ete poeti da traite naine da to vie iskoristite radni prostor koji vam je na raspolaganju, a tu su vam dizajneri novog Photoshopa izali u susret. Predefinisani raspored paleta je napravljen tako da odgovara najveem broju korisnika, to sa druge strane uopte ne mora da znai da e zadovoljiti vae potrebe. U ovoj lekciji emo se pozabaviti radom sa paltema, njihovim skrivanjem, otvaranjem novih paleta, njihovim grupisanjem, pamenjem njihovog rasporeda... Dakle svim onim pojedinostima koje e vam pomoi da to optimalnije iskoristite va radni prostor.

Sve komande koje su u vezi sa skrivanjem i prikazivanjem elemenata interfejsa, ili njegovim organizovanjem se nalaze u meniju Window. Moemo mu pristupiti i preko tastaturne preice Alt + W Kada otvorimo ovaj meni, primetiemo da su komande u njemu grupisane u 3 grupe, podeljene meusobno horizontalnim linijama. Prvu grupu emo za sada preskoiti, da bismo joj se vratili na kraju ove lekcije. Ako pogledamo drugu grupu, koja zauzima najvei deo prostora, primetiemo da su neke komande ekirane, ova grupa predstavlja komande za pozivanje, tj. Skrivanje i 14

pokazivanje panela. ekirani paneli, su u stvari paneli koji su trenutno aktivni, jo tanije, 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 CS3, kao i u nekim ranijim, paneli sa slinim namenama grupisani su u grupe radi lakeg snalaenja samog korisnika. Ako vam se uini da bi bilo bolje grupisati panele u nove grupe, to moete uiniti na sledei nain: Uhvatite eljeni panel za deo gde mu je ispisano ime (tzv. jeziak panela) i prevucite ga u sledeu grupu; neto slino moete da uradite i sa celom grupom panela, uhvatite kursorom za title bar eljene grupe, i prevucite je na novo mesto, ono moe biti skoto bilo gde unutar radnog prostora Photoshopa. Neke grupe panela je mogue poveati kada stoje zasebno, druge ne, grupe kod kojih je to mogue imaju u desnom donjem uglu mali trugao od takica, kao na slici ispod:

Ako mislite da nekom panelu nije mesto u grupi, moete ga ugasiti klikom na krsti koji se nalazi desno od imena tog panela; ako elite da iskljuite celu grupu panela kliknite na krsti koji se nalazi u title baru te grupe panela. Takoe, u sluaju da elite da dobijete vie prostora za panel u kome trenutno radite, moete smanjiti grupu panela koja se nalazi iznad ili sipod njega. To ete postii tako to ete kliknuti na znak minus, koji se nalazi u title baru grupe panela. Ako preete kursorom preko gornje ivice title bara grupe panela, primetiete kako se kursor promenio iz uobicajene strelice u dve strelice koje pokazuju gore i dole, to znai da grupe panela moete i da skalirate, pruajui sebi vei 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. Primetiete da su se palete pretvorile u ikonice, ponovan klik na strelice koje sada pokazuju u levo e vratiti palete na prvobitan poloaj. Isti princip se moe primoniti i na drugu grupu paleta, koja se po predefinisanim podeavanjima prvi put pojavljuje u obliku ikonica, a ine je: History, Actions, Tool Presets, Brushes...

15

Tastaturne preicePoznavanje tastaturnih preica u Adobe Photohop CS3 e vam omoguiti produktivniji rad. U Adobe Photoshopu CS3 postoji veliki broj predefinisanih tastaturnih preica, kojima se pristupa iz menija: Edit>Keybord Shortcuts (da se podsetimo, tri take znae da e se klikom na ovu komandu otvoriti novi prozor sa opcijama) Takoe ovom meniju moete pristupiti i preko preice Alt+Shift+Ctrl+K

Slojevi (Layers)Jedna od najveih prednosti Photoshopa je oduvek bio rad sa slojevima. Slike moemo slagati kroz veliki broj slojeva dobijajui raznovrsne efekte. Mogunost njihovog slaganj i jeste svrha postojanja slojeva u Photoshopu. Slojevi moda na prvi pogled deluju kompleksno, ali filozofija koja stoji iza njih je prilino jednostavna. Oni omoguavaju da se slika podeli na zasebne delove, koji se mogu nezavisno da obradjivat. To omoguava da se svaki pojedinani sloj tretira kao da je potpuno zaseban dokument. Tako da ukoliko se desi greka na nekom sloju moe se jednostavno ukloniti, bez posledica po dokument u celini. Najlaksi nain da se objasni ta su slojevi je upravo kroz primer. Na slici se vidi jedan Photoshop dokument koj sadri 2 sloja:

16

Pvi sloj jeste samo razglednica, dok drugi sloj ini samo tekst. Pri radu u Fotoopu, sve izmene, brisanja itd. se deavaju samo na sloju na kome se nalazimo (koji je obeleen), bez opasnosti da se izbrie sadraj nekog drug sloja. Zamislimo da je slojni dokument u stvari skup providnih papira od kojih svaki sadri po deo slike (neki detalj, tekst itd) i kada ih sve sloimo jedan preko drugog dobijamo celinu to jest sliku. Ponekad se moe desiti da u dokumentu imamo na desetine slinih slojeva pa e postati dosta teko razlikovati ih samo po slici ispred njih. Zbog toga uvek je pametno slojevima davati imena kako bi se u daljem radu ne bi smo gubili u svoj toj guvi. Desnim klikom mia na neki od slojeva pojavie se meni, idemo na Leyer Properties i u polju Name kucamo eljeno ime. Ba kao to i zvui pomeranje slojeva je prilino jednostavno. Kako bi promena rasporeda slojeva, naprimer na ovoj slici dovela do promene izgleda cele slike (tj. ne bi se uopste video tekst, zato sto fotografija nije providna) veoma je bitan raspored slojeva kao i nacin njihovog pomeranja. Slojeve pomeramo po radnoj povrini koristei alatku Move Tool, sve to je potrebno je da iz palete slojeva odaberemo sloj koje elimo da pomerimo i aktivacijom alatke Move Tool prevlaimo sloj po radnoj povrini

Photoshop i dizajn konkretnog veb sajtaOsnovna namena Photosopa jeste manipulacija slikama, kreiranje slika, kombinovanje vie slika, izmena detalja itd. Ipak jako veliki broj veb dizajnera koristi ovaj program za dizajn svojih veb stranica, pre svega zbog velikog broja izuzetnih opcija koje Photoshop poseduje.

17

Kreiranje i planiranje unapred odreenog veb sajtaPre nego se pone s kreiranjem dizajna potrebno je pripremiti radnu povrinu.Potrebno je sve boksove sa alatima pravilno rasporediti da bi alati bili na dohvat ruke, a da je pritom radna povrina pregledna, kako bi se to lake i bre manipulisalo alatima. Tek kada je sve rasporedjeno, poinje se sa novim dokumentom. Novi dokument se otvara kao i kod kreiranja slika, izabere se file>new i dobije prozor kao na slici.

U ovom prozoru se podeava irina (Width) i visina (Height) stranice. Za irinu se preporuuje 1024 piksela a za visinu 768 piksela poto se radi stranica za rezoluciju monitora 1024 x 768 piksela. Visina i nije toliko bitna. Stranica koja se kreiramo nee biti irine 1024 piksela, ve mora biti manja kako bi korisnik mogao da vidi celu stranicu po irini. Da bi se ovo postiglo, potrebno je postojei dokument podeliti na 3 dela. Jedan veliki deo u kome e se kasnije raditi dizajn stranice (na sredini) i dva manja dela koja e sluiti kao margine. Pri deljenju dokumenta, najbolje je prvo izabrati alat za uveliavanje (zoom) kako bi bilo lake precizno deljenje stranice.Ako se eli napraviti stranica ija e konana irina biti 960 piksela, potrebno je da sredinji deo bude ove irine, a sa obe strane ovog dela predvidjenog za stranicu, nalazie se margine jednake irine. Ako imamo dokument 1024 piksela, od toga sredinji deo 960 piksela, za margine nam ostaje 64 piksela, tj. po 32 piksela za obe margine. Potrebno je jo i ukljuiti lenjire (view>rulers) i moe se pristupiri deljenju stranice.Da bi se podelila stranica potrebno je postaviti linije (guide) koj e obeleiti delove predviene za dizajn i delove za margine. Ovo se postie klikom na lenjir i povlaenjem linije na 32. piksel za prvu marginu odnosno na 992. piksel za drugu marginu. Nakon to se obelei gde e se nalazizi margine deljenjem stranice po vertikali, potrebno je stranicu podeliti i horizontalno, kako bi unapred odredili mesta na kojima e se nalaziti heder (zaglavlje), sadraj, footer (podnoje) i tako dalje. Najbolje je sve ovo predstaviti na papiru, slobodnom rukom skicirati mesta i unapred isplanirati kako e stranica izgledati. Kada se radi na papiru moe se unapred i ispisati gde e ta da se nalazi. Kako izgleda dokument nakom obeleavanja mesta za odreene delove stranice moe se videti na slici ispod.

18

Planiranje i oznaavanje mesta je jedan od uslova kvalitetnog veb dizajna. Bez prave ideje kako e to sve izgledati, nema ni dobre veb stranice. Tek kada se na papiru slobodnom rukom odradi skica stranice i kada se u Photoshop-u odrede ramovi (frejmovi) svakog fragmenta veb stranice moe se poeti sa dizajnom svakog od njih posebno.

Dizajn Header-aOno to je veoma vano kod izrade svakog Photoshop dokumenta jeste i dobra organizacija fajlova unutar .psd fajla. Kada se rade posebno delovi stranice, dobro je i za svaki taj deo napraviti novu grupu sa imenom Header gde e se nalaziti sve to je vezano za dizajn Heder-a. Svaki heder se sastoji od nekakve pozadine, u hederu sam u ovom sluaju planirao da se nalazi glavni meni i logo na levoj strani heder-a . Prvo to se treba napraviti to je pozadina za koju je najbolje da se kreira nova grupa unutar grupe Heder. Da bi uredili pozadinu prvo je treba oznaciti sto se cini alatom Select tool. Jo jedna korisna opcija za obeleavanje jeste opcija Snap koja se nalazi u kartici View glavnog menija. Kada je ova opcija ukljuena, pri obeleavanju je mnogo lake oznaiti fragment unutar Guide-ova (linija za obeleavanje) jer e se jednostavno lepiti za Guide. Kada se obelei prostor predvidjen za heder, kreiranje pozadine je mogue uraditi korienjem Gradient toola gde emo izabrati dve razliite boje ili dve nijanse iste boje. Ja sam uzeo dve nijanse zelene boje.

Da bi pozadina izgledala lepe moe se uraditi i odreena senka. Fotoop ima vie opcija koje se koriste za izradu senke (Blending Options>Drop Shadow itd). Sve te opcije su korisne kada je u pitanju kreiranje slike. Meutim kada je u pitanju Heder, senku elimo samo sa donje strane. Kod pomenutih opcija prilikom rezanja svih fragmenata veb stanice, ove 19

opcije nee biti dobre, jer e senke ostajati i na izrezanim stranama Heder-a, to nije dobro. Za kreiranje senke sa donje strane Heder-a potrebno je napraviti novi sloj(layer) koji treba da se nalazi ispod pozadine hedera.Zatim je potrebno oznaiti sloj senka stisnuti ctrl i oznaiti sloj pozadina. Zatim u kartici select izabrati modify feather izaberemo irinu senke u pikselima (npr. 3) i dobili smo senku. Sledee to je potrebno jeste da pravljenje logo-a. Postoje mnogo naina za izradu logo-a ali je najjednostavnije oznaiti grupu logo i alatom Horizontal tzpe tool napisati svoj logo, u mom sluaju Fotoop i veb.Zatim se mogu dodati efekti na sloj logo za konaan izgled.

.

Kada je logo zevren, sledee to treba uraditi u okviru hedera jeste glavni meni, ili navigacija. Za izradu navigacije takoe e nam biti potreban tekst alat. Jednostavno se oznai mesto i napiu nazivi stranica, koji e predstavljati navigaciju. To se moe u raditi u jednom sloju, ali ako je u pitanju kompleksnija navigacija, potrebno je pravljenje posebnog sloja za svako dugme.Mogue je dodati senku na navigaciju, kako bi potamneo deo pozadine oko navigacije i samim tim navigacija bila istaknutija. Postoji jo mnogo naina za izradu navigacije, logoa i kreiranja 3D dugmadi ali je ovo jedan od najjednostavnijih i najbrih naina za izradu hedera koji i pored jednostavnosti moe da izgleda veoma lepo.

20

Dizajn dela za predstavljanje proizvodaKada je zavren heder sa svim svojim delovima, prelazi se na sledei deo koji se koristi za predstavljanje proizvoda odnosno onoga to je osnova tema stranice.Prvo i osnovo jeste da kreiramo novu grupu, koja e unutar nje sadrati vie grupa.Treba voditi rauna da se grupa Predstavljanje proizvoda nalazi ispod grupe Heder. Za kreiranje ovog dela stranice takoe je potrebno napraviti pozadinu, u ovom sluaju vie pozadina.Zatim bie nam potreban tekst kao i slika proizvoda.Ono to treba prvo uraditi nakon kreiranja grupa za odredjeni deo stranice jeste kreiranje pozadine. Pozadinu kao i kod hedera treba obeleiti select alatom, a zatim gradient tool za boju. Ovoga puta umesto linearnog gradienta izabrao sam radialni. Kada se zavri prvi deo pozadine, na isti nain se uz pomo gradienta uradi I drugi deo, a onda se kao kod hedera doda senka, koristei poseban layer.

Sledee to je potrebno u delu predstavljanje proizvoda jeste tekst kao i slika proizvoda.Tekst se dodaje na klasian nain, koristei Type tool I dodatkom efekata po elji. Kada je tekst gotov, moe se dodati slika proizvoda. Da bih to uradio napravio sam 3 nova sloja. U svaki sloj ubacio sam po jednu ikonicu Photoshopa, Dreamveawera I Flash-a. Oznacio sam svaku slicicu posebno i smanjio ih tako sto sam nakon oznaavanja izabrao Transforme selection. Za svaki sloj posebno sam dodao senku i dobio sam izgled slike proizvoda kao na slici ispod.

21

Dizajn dugmadiOno to je sledee to treba uraditi na naoj veb stranici jesu dugmad. Ja sam izabrao da dodam dugmad koja e imati zaobljene uglove. Da bi uspeli da napravimo zaobljenu dugmad, potrebno je da izaberemo alat Rounded Rectangle Tool i u opcijama ovog alata odabrati Paths kako bi napravili selekciju sa zaobljenim ivicama. Da bi od Paths-a dobili selekciju . Ako obojimo tu selekciju i ukljucimo senku, dobili smo dugme. Poto nam je potrebno dva dugmeta, samo razliitih boja, izabraemo duplicate group i samo pomeriti novo dume na svoje mesto, a zatim mu promeniti boju.

Dizajn glavnog sadrajaSledee to treba uraditi jeste sredinji deo stranice. Potrebno je napisati nekoliko tekstova koji ce u kratkim crtama opisivati ime se stranica bava i ubaciti nekoliko sliica. Kao i kod hedera postupak je isti. Prvo i osnovno to radim jeste pozadina. Za glavni sadraj takodje kreiramo novu grupu koja e sadrati pozadinu, tekstove, sliice. S obzirom da je stranica zamiljena kao prezentacija kurseva Fotoopa, Dreamweaver-a i Flasha u glavnom sadraju bi po mom miljenju trebalo da se nadju tekstovi koji e govoriti po neto osnovno o tim kursevima kao i ikonice svakog od tih programa. S obzirom na sam ve odredio delove sadraja odnosno podelio ga na etri celine, u te ramove u ubaciti tekstove o svakom od kurseva. Ikone programa su dostupne na internetu tako da nema potrebe da ih pravim, ve u iskoristiti postojee.Za pozadinu sam izabrao belu boju, kako bi se taman tekst bio dobro vidljiv. Sledee to radim jeste kreiranje novog sloja, koga nazivam pozadina , u okviru grupe Glavni sadraj. Oznaim je selekt tool-om izaberem boju i preicom alt + bakspase obojim. Da bih uradio tekst, takodje otvaram nov sloj, koji treba da bude iznad pozadine kako bi bio vidljiv, a da se nalazi u okviru iste grupe. Kada sam kreirao slojeve za svaki tekst, upisujem tekst korienjem type tool-a. Nalazim ikonice koje su .png formata poto je kod takvog formata kompresije dozvoljena transparentna pozadina i kopiram ih u ramove. Podeavam veliinu ikonica tako to ih oznaim i na desnom kliku izaberem free transform.

22

Dizajn futeraPoto sam za futer ve kreirao pozadinu sledee to mi treba jeste jedna horizontalna linija i tekst. elim da mi crta izgleda malo udubljeno u pozadinu. Za njeno kreiranje potrebno je da layer futer bude ukljuen, kao i njegova senka. Izabrao sam boju koja e u osnovi biti tamnija od najtamnijeg dela futera. Bitno je da se za crtu napravi novi sloj, koji e naravno biti iznad sloja koji je iskorien za plavu pozadinu futera. Kada ukljuimo da guide-ovi budu vidljivi (ctrl+h) , postoji jedan lak nain za crtanje olovkom. Izaberemo za alat olovku i kliknemo na poetak i na kraj horizontalnog guide-a i linija je nacrtana tako da bude prilepljena uz guide. Moe se uiniti da linija nije nacrtana, ali ona samo nije vidljiva dok ne sklonimo guide-ove (ctrl+h) i tamna crta je vidljiva. Za efekat ispupenosti potrebno je nacrtati jo jednu liniju koja e biti jedan piksel ispod ove tamne linije. Kada je gotovo kreiranje futera, moemo pomeriti skicu koju smo napravili kao plan i raspored na naoj stranici kako bi videli kako ona izgleda i to je to to se dizajna tie. Moemo korigovati detalje ako nam se neto ne svidja, vrlo jednostavno, poto smo napravili dobru organizaciju po grupama i slojevima, jednostavno kliknemo na sloj koji je napravljen za deo koji elimo da ispravimo i vrimo editovanje. Sve to ispravljamo, ispravljae se samo na tom sloju i nema opasnosti da obriemo ili prepravimo neto sa drugog sloja. Kada je dizajn gotov, to je tek prvi korak u kreiranju nae veb stranice, sledi izrezivanje svih fragmenata i prevodjenje ovog dizajna u html, a dizajn izgleda kao na sllici ispod.

23

Prevoenje .PSD dizajna strane u veb stranuPriprema za prevodjenje u htmlOno to sledee treba uraditi jeste isecanje .psd stranice na fragmente i ubacivanje u Html i CSS kod kako bi se dobila web stranica. Kao i kod svih drugih kreiranja i editovanja, priprema je dosta bitna kod procesa isecanja. Dizajn postoji, to je reeno i taj deo pripreme za isecanje je zavren. Sledee to je potrebno jeste da se naprave i organizuju folderi u kojima e se uvati sve ono to bude iseeno. Za poetak takvog organizovanja potrebno je napraviti folder sa nazivom nae stranice Fotoop i veb .Taj folder e sluiti kao koreni folder i ostale foldere emo praviti unutar ovog foldera. S obzirom da e konaan rezultat isecanja biti slike i CSS, potrebno je napraviti folder css za css fajlove i jedan folder images u koji emo smestati slike. Za poetak ova dva foldera su dovoljna. Ono to nam je jo potrebno za nastavak prevodjenja .PSD stranice u html kod jeste neki tekst editor. Moe posluiti bilo koji tekst editor, ali sam se ja odluio za Dreamweaver, takodje program firme adobe, i verziju CS3. Program je komercijalan, ali postoje besplatne verzije koje nam mogu posluiti. Postoji jedna funkcija u dreamweaver-u koja meni posebno pomae, a ta funkcija je odredjivanje sajta, znai u dreamweaver-u u kartici Site, napravim novi sajt (New site) i taj novi sajt nazovem Fotoop i veb.Ostavljam sva podeavanja kakva jesu i idem dalje, biram da ne elim da koristim server tehnologiju, idem dalje i doao sam do toga da izaberem gde se nalazi folder koji sam malopre kreirao. Na ovaj nain sam dobio na preglednosti i organizaciji foldera u dreamweaver-u to se vidi na slici sa desne strane. To je to to se tie priprema dreamweavera i sledee to mi treba jeste jedan veoma koristan dodatak za firefox, poto u ovu svoju stranicu prvo prilagoditi za ovaj pretraiva.Taj dodatak koji ja koristim zove se Firebag. To je jedan veoma koristan i besplatan alat koji slui za uoavanje greaka pa ak i za editovanje html i css koda, takozvano debagovanje. Ovo je alat kojim u se ja sluiti, mada postoje mnogo alata ove namene.

Kada je instalacija ovog alata zavrena, zavrena je i priprema za prevoenje dizajna u veb sajt. 24

Rezanje .PSD-a i optimizacija pozadine zaglavljaPre nego ponem sa rezanjem Fotoop dokumenta (PSD-a), otvaram nov html dokument u dreamweaver-u. Odmah mogu promeniti title u naslov moje budue veb stranice Fotoop i veb i snimiu ovaj html dokument u korenom folderu koji sam kreirao pod imenom index.html.Nakon toga otvaram novi CSS dokument, njega ne menjam za sad i snimam ga u folderu CSS pod imenom stil.Kada sam pripremio dokumente u dreamweaver-u, mogu pristupiti rezanju. Postoji mnogo naina za rezanje, uglavnom za rezanje koriste slice tool medjutim ja najvie koristim crop tool. Pre poetka rezanja treba dobro osmotriti stranicu, jer je cilj da stranica ne bude prevelika. Pod pojmom prevelika ne mislim na njenu visinu i irinu ve da nema previe kilobajta. Pogodnosti stranice koja zauzima malo kilobajta su brzo uitavanje. Tenja da se ista stranica predstavi sa to manje kilobajta se takoe reava u Fotoopu i pomou CSS-a. Znai u konkretnom sluaju hedera, ja neu izrezati ceo heder, ve samo delie koje u pokuati da poveam uz pomo CSS-a. Ako alatom Crop pozadinu hedera i predstavljana proizvoda izreem vertikalno, irine jedan piksel, ona e umnoavanjem CSS-om moi da proizvede povrinu skoro istu povrini dosadanjeg dizajna hedera u okviru PSD-a. Jednostavno oznacim alatom Crop celu visinu hedera i predstavljanja proizvoda, sa sivom linijom na dnu. Nije bitno ako ne moemo crop alatom pogoditi irinu od jedan piksel jer se ta irina moe podesiti postupkom image>canvas size>width = 1 px . Sledea stvar koja se jako puno koristi kod seenja stranice jeste snimanje sliica to u uraditi postupkom file>save for web and devices i dobija se prozor fotoopa u kome se moe odabrati format snimanja slike, moe se pogledati kakva e biti posle optimizacije. Izabrau JPEG format, umesto maximuma kvaliteta koji e dati najveu veliinu slike u kilobajtima uzeu naprimer very high koja zauzima neto manje prostora. Moe se pogledati veliina slike odmah i ona iznosi 585 bajta, znai nije ak dostigla ni kilobajt. Nakon tog smanjivanja, mogu stisnuti save, Fotoop e me pitati gde elim da snimim sliku, i ja u odabrati folder images i snimiu sliku pod imenom bgbody.jpeg po emu u znati da je to slika pozadine zaglavlja Pozivanjem ove linije u css fajl komandom : body{ background:url(../images/bg-body.jpg) repeat-x top left; } Gde imamo body koji predstavlja deo na koji se odnosi komanda, background znai da je u pitanju pozadina, onda url slike, repat-x znai da se ova linija ponavlja, top da je gore, left, da se umnoava na levo i to je to. Kao rezultat toga, u pretraivau se dobija pozadina zaglavlja koja tei samo 585 bajta a skoro potpuno ista je pozadini koju smo uradili u psd-u, koja je neuporedivo vea.to se tie pozadine ovog dela to je to, ona je optimizovana i uradjena, sledee to treba uraditi jeste prevesti i optimizovati logo. 25

Prevodjenje i optimizacija logo-aSledee to trebamo uraditi u fotoopu jeste izrezivanje logo-a.To emo uraditi tako da nam taj logo, zauzima najmanje mogue prostora. Da bismo to uradili potrebno je iseci deo gde nam je logo, alatkom crop. Zatim, potrebno je iskljuiti sve pozadine, koje su ispod ovog logoa. Kada bi sliku snimali u jpg,ona bi automatski imala belu pozadinu, zato je moram zapamtiti u .png formatu, kako bi pozadina bila providna i ona e se moi prilagoditi svakoj pozadini, kao i ovoj beloj pozadini Worda. To je prednost .png formata, a mana mu je to ga ne podrava IE 6, ali poto je to ve potpuno zaboravljena verzija, ipak sam se odluio za png. Zapamtiu ovaj dokument pod nazivom logo i to je to.

Imamo logo sa providnom pozadinom i malom veliinom u kilobajtima i moemo jednostavno da ga pozovemo u html, otvaranjem novog div taga i kodom Ali ja se neu toliko baviti html-om, css-om i njihovim tagovima, ve samo radnjama u Fotoopu to je tema mog rada dizajn. Bitno je da se vidi kako to sve izgleda kada je optimizovano i ubaeno u DW:

Evo iznad je slika hedera i logoa, nakon seenja i ugradjivanja u Html kod. Stranica je uraena nakon optimizovanja njenih elemenata (slika), a izgleda gotovo slino i uitava se nekoliko desetina puta bre.Na isti nain moemo odraditi i za navigaciju. 26

Rezanje .PSD dugmadiKod prevodjenja u html je veoma bitna optimizacija.Kada se gleda objekat koji treba uvesti u html i css, treba se gledati tako da se pamte samo oni delovi slike koji se ne mogu generisati html-om i css-om.

Kada su u piranju ova dugmat, ono to treba uvati kod njih jesu samo slike, i to bez teksta, jer se tekst moe upisati i u html-u. Kada iseemo dugme, iskljuimo jednostavno ono to ne elimo da se uva. Sto manje detalja, to manje kilobajta. Iskljuiu tekst, i krajnju pozadinu, kako bih sauvao samo lepo zaobljeno dugme. Da bi moglo biti sauvano bez pozadine, tj. sa providnom pozadinom, snimam ga u .png formatu.

Na ovako sauvano .png dugme se u html u upisuje tekst, dodaju efekti promene pri prelasku miem preko njega ili pri kliku na link. Bitno je da se dugme sauva bez teksta kako bi kasnije lake mogao da se menja tekst, kod eventualnih ispravljanja sajta, bez promene slika, ve samo izmenom html-a i css-a. Na isti nain treba izraditi i drugo dugme i to je to. Ubacivanjem ovakvih iseaka kompletnog .PSD dizajna stranice u Dreamweaver i njihovim povezivanjem CSS-om i HTML-om dobija se stranica sa kvalitetnim dizajnom a veoma malom teinom. Izrada dizajna za kompletan sajt u samo jedom .PSD fajlu (Photoshop Document) je samo jedna od mnogobrojnih primena fotoopa u izradi sajtova. Pored toga, ono za ta se koristi, moda i ee, jeste izrada pojedinanih elemenata veb strane.

27

Primena Fotoopa u izradi dizajna za pojedinane elemente veb sajtaJednostavan dizajn horizontalnog menijaJednostavnost je klju lepih internet stranica i jedna od glavnih karakteristika funkcionalnosti. Za kreiranje jednostavnog horizontalnog menija, koji e biti element nekog veb sajta, moda ak i meni vie sajtova, najpogodni program je Fotoop. Isto kao i kod kreiranja dizajna za kompletnu stranu, poinjem sa novim dokumentom. Ono to se razlikuje pri otvaranju novog dokumenta jeste njegova veliina. Veliina koju biram zavisi pre svega od naslova stranica na koje e ovaj meni upuivati. Za primer uzimam jednostavan meni, i biram veliinu od 500x200 piksela. Pozadinu sam obojio radijalnom gradacijom (radial gradient) od srednje tamnoplave do tamnoplave. ifre boja koje sam koristio su #566f99 i #171784. Sledee to radim jeste pravljenje novog sloja i biram pravougaoni marker (rectangular marquee) alatku. Pravim selekciju sa fiksnom veliinom 440x50 piksela na sredini dokumenta. Za razmeravanje se ponovo mogu koristiti guide-ovima

Kada sam napravio selekciju ispunjavam je gradacijom poev od boje # 9fcaf2 na vrhu do #d9d9d9 na dnu.Onda primenjujem nekoliko stilova sloja (layer style) na ovaj sloj. Layer -> Layer Styles -> Drop Shadow Layer -> Layer Styles -> Outer Glow Sada, koristei alatku za tekst, dodajem tekstualne linkove. Podeavanja koje koristim za slova su Verdana, Regular, 13pt, Sharp, # 3f4f91 (i #ac0000 za efekat ispupenosti).Na kraju, dodajem nekoliko linija koje e deliti linkove. Prvo, kreiram novi sloj i ponovo biram pravougaonu alatku za selektovanje. Pravim selekciju 1x50 piksela izmeu prva dva linka. Ispunite (Edite -> Fill) selekciju bojom # a9b8c7. Umnoavanjem sloja i pomeranja ulevo, dobijam razdelnu liniju izmedju svih linkova i primer jednostavanog horizontalnog menija za moj sajt Fotoop i veb je gotov. Sada bi ovaj meni mogao da se prebaci u DW, naravno, bez teksta, njega bi naknadno upisao u Dreamweaveru i dodao roll over efekat.

28

Svrha baneraBaner (eng. Banner, Advertising, Ad) je grafiki prikaz koji se nalazi na istaknutom delu sajta. Kao to je mogue postavljanje reklame u novinama, tako se i na internet sajtu moe postaviti reklama baner i reklamirati svoj internet sajt, svoje usluge, svoju firmu.. Ta usluga se plaa oglaivau tj. onome na ijem sajtu je postavljen baner. Namenjen je da privue to vie posetilaca sa sajta na kome je postavljen. Klikom na baner otvara se internet strana ili neka druga veza koju izabere vlasnik banera i na taj nain se dobijaju potencijalni klijenti. Baner je najee slika (jpeg, gif, png) mada moe biti i multimedijalni sadraj kao to je flash. Tipine veliine banera su 728x90, 468x60, 234x60, 120x90, 120x60, 120x240 i 125x125. Dimenzije su izraene u pikselima. Najea mesta na sajtu na kojima se nalazi baner na veb stranici su prikazana na slici ispod ovog teksta. Poeljno je na baneru istai i adresu sajta, jer obzirom da 92% surfera na sajt dolazi po tano odreenu informaciju ili uslugu, mali broj surfera e se odluiti da prekine svoj surf da bi kliknuo na baner. Ukoliko, meutim, istaknete adresu sajta, postoji velika verovatnoa da e surfer po obavljenom poslu na sajtu gde je video va baner, doi na va sajt i pogledati ga. Broj ovakvih sluajeva se ne moe egzaktno izraziti, ali se zna da on nije zanemarljiv. Treba pomenuti i predlog, koji predlau odreeni strunjaci, a to je da bi svakom baneru trebalo napraviti okvir tankom linijom, jer se smatra da ona izdvaja baner od ostalog dela sajta i ini ga vidljivijim i kvalitetnijim. Izuzetno je bitno da na baneru bude pokretna slika, ona uvek bolje privlai panju od statine slike. Ukoliko je nemogue postaviti animaciju na slici banera, poeljno je u uglu postaviti natpis "Kliknite ovde" ili neto slino, koji e treptati. Namenjen je da privue to vie posetilaca sa sajta na kome je postavljen. Klikom na baner otvara se internet strana ili neka druga veza koju izabere vlasnik banera i na taj nain se dobijaju potencijalni klijenti. Baner je najee slika (jpeg, gif, png) mada moe biti i multimedijalni sadraj kao to je flash. Tipine veliine banera su 728x90, 468x60, 234x60, 120x90, 120x60, 120x240 i 125x125. Dimenzije su izraene u pikselima. Najea mesta na sajtu na kojima se nalazi baner na veb stranici su:

29

Mnogi posetioci internet sajtova smatraju ove reklame veoma dosadnim, jer skreu panju sa stvarnog sadraja internet stranice. Naravno svrha banera je da privue panju i mnogi oglaivai pokuavaju da dobiju to vie poseta postavljanjem zanimljivih banera na udarnim mestima na stranici. Udarne poticije su najee na vrhu stranice, koja je ujedno i najskuplja. Sputanjem dole i cena banera pada.

Izrada banera sa pokretnim elementomZa poetak kreiranja banera potrebno je predvideti mesto gde e taj baner biti smeten. Veliina mesta za smetanje banera je upravo ona veliina koju emo upisati pri otvaranju novog dokumenta u Fotoopu. Za svoj primer banera odabrau veliinu 468x60 jer pravim baner koji e stajati pri vrhu stranice. Baner treba da oslikava na neki nain sajt na koji upuuje i da ima neke osnovne motive sa tog sajta i naravno logo. Prvo to radim jeste otvaranje novog fotoop dokumenta sa rezolucijom 468x60.Kada je dokument otvoren, elim da napravim okvir za svoj baner.Dobro je da se za okvir banera kreira novi sloj, kao i za svaki element PS dokumenta. To u uraditi tako to selektujem sve (ctrl+a) a onda u kartici Edit izaberem opciju Stroke koja se koristi za okvire. Kada se otvori prozor u njemu upisujem irinu tog okvira, ja u staviti da bude veliine 2 px. U istom prozoru mogu odabrati i boju okvira, za koju ja biram svetlo plavu boju (#99ccff). Sada ve imam kreiran okvir u novom sloju i mogu tom sloju pridodati neki efekat, npr konture (contur). Sada ve imam okvir ali mi je pozadina bela. Kako bih izmenio boju pozadine, selektujem sloj ispod okvira (ctrl+a) i izaberem tamniju plavu boju koju sam izabrao za pozadinu sajta (#103277) i onda ispunim obeleenu povrinu (alt + backspace). Logo ve imam uradjen pa u ga samo iskopirati u nov sloj banera.Kada je logo iskopiran, sledee to unosim u baner jeste ikonica fotoopa, koja e asocirati na sam program, kao i tekst prijavite se za kurs.

Kao to sam naglasio da je za baner izuzetno bitno da na baneru bude pokretna slika jer ona uvek bolje privlai panju od statine slike. Poto je nemogue postaviti animaciju na slici banera, ja u uglu postavio natpis "Prijavite se za kurs" koji e treptati.Iz kutije sa alatima uzmam Brush tool (taster B) pa na liniji opcija za ovu alatku kliknem na strelicu da otvorim kolekciju sa etkicama. Ja biram etkicu debljine 13 px mada moe i druga. Na tastaturi pritiskom na taster D i potom taster X bira se bela koja postaje boja kojom u slikati. Uz pomo pritisnutog tastera Shift crtam vertikalnu liniju na platnu. Ukljuivanjem filtera Gaussian Blur (Filter- Blur- Gaussian Blur) i vrednou od 5 px dobijam ovakav izgled linije:

Kao to se vidi na slici ovaj filter je zamaglio liniju. Da linija upadne" u sadraj donjeg sloja idem na Layer- Create a 30

clliping mask. Nakon ovog koraka paleta Layers i platno bi trebalo da izgledaju kao na slici sa desne strane.

Iz kutije sa alatima biram Move tool (taster V) i uz pomo kursora na tastaturi pomeram liniju na poetak teksta (vidi sliku dole). Na ovaj nain je linija ugnjedena u sam tekst, odnosno vidi se samo na tekstu i njeno pomeranje izaziva promene samo na tekstu Prijavite se za kurs

Ako kursorima na tastaturi pomeramo liniju levo desno, dobijamo efekat svetla koje prelazi preko teksta, na ovaj nain smo dobili dinamiku dela banera, to je dovoljno da skrene pogled posetioca sa sajta na kome se nalazi na moj baner, sledee to je potrebno jeste da od ovog PS dokumenta kreiram .gif animaciju koja e biti konaan oblik mog banera. Sada radimo animaciju. Otvoram paletu Animation sa Window- Animation i podeavam opcije Delay (0,1 sec) i Looping (forever) kao na slici dole.

Pravim jo jedan kadar klikom na dugme Duplicates Selected Frame (slika iznad). Vraam se na sliku, i pomou kursora na tastaturi pomeram liniju na kraj teksta (vidi sliku dole)

31

U prozoru Frames to Add" upisujem 40 da program napravi novih etrdeset kadrova i kliknem OK. Animacija je gotova.

Sada je samo treba sauvati u .gif formatu a to radim tako to u kartici File izaberem save for web izaberem u kom formatu elim da sauvam, a to je .gif, zatim kliknem na ok i moj baner je gotov. Jedino to ostaje jeste to da se nadju sajtovi koje e on da krasi i ije e posetioce da privlai.

Na slici sa desne strane se vidi efekat prelaza bele linije preko teksta. To je uvelian tekst sa banera. Animacija izgleda mnogo bolje uivo odnosno kada se postavi na sajtu. Pre svega, na slici sa desne strane sam predstavio animaciju u samo 4 frame-a (frame-kadar) dok je na ovoj kratkoj .gif animaciji ak 42 kadra. Samim tim to postoji vie kadrova i animacija izgleda prirodnije.Animiranje i jeste proces oivljavanja, pa na ovaj nain se postie da baner izgleda ivo i da kao takav privue panju.

32

Kreiranje are (pattern-a) za pozadinu sajtaObrasci Pattern na Engleskom i u Fotoop menijima su veoma bitna stavka za rad i kreiranje sadraja. Skoro svaka kreacija bilo da je to Internet stranica, vizit karta ili logo sadre neki obrazac koji se neprestano ponavlja. Na Internetu se moe pronai veliki broj obrazaca i preuzeti ih besplatno, veliki broj obrazaca dolaze sa instalacijom Fotoopa a mogue ih je i kreirati. Za ta uopte slui pattern? Pattern je ara koja se kreira za kasnije upotrebljavanje. Kada se kreira pattern, kreira se kao novi dokument i tako uva, kako bi kasnije mogao da se pozove za aranje nekog dokumenta.Kako bih bolje objasnio ta je pattern definisau jedan a kasnije ga iskoristiti za pozadinu veb strane. Kao i za svaki novi dokument u Fotoopu, biram file>new a onda u prozoru izaberem dimenzije. Ja u izabrati da moj pattern bude 6x1 piksel, jer nema potrebe da pattern bude vei. On ponavljanjem prekrije veliku povrinu bilo koje dimenzije. Izabrao sam da bude irine 6 jer elim da kreiram pattern koji e pozadinu veb strane prekriti tako da na njoj budu linije irine 3 px od svetlije i tamnije plave boje. To radim tako, to prvih 3 piksela popunim tamnoplavom dok drugih 3 svetloplavom bojom, i to je to to se tie patterna veoma jednostavno.

Kada sam kreirao ovakav patern potrebno je da ga zapamtim. Ovde postoji razlika u odnosu na snimanje drugog PS dokumenta jer je proces pamenja paterrna drugaiji. Da bih ga zapamtio (definisao) u kartici edit biram opciju deffine patern i dobijam prozor u kome upisujem ime patterna, npr Uzdune pruge i imam aru koju u kasnije koristiti.

Korienje pattern-aPoto elim da napravim stranu veliine 960x768 koja e imati uzdune pruge tamno plave i svetlo plave boje, za to e mi trebati pattern koji sam ve kreirao. Otvaram novi dokument dimenzije 960x768, zatim kreiram novi sloj. Novi sloj obeleavam ceo (ctrl+a). Kako bi mi stranica imala zaobljene ivice, 33

na ve obeleeni sloj pritiskom na desni klik se nalazi opcija feather(pero).U prozoru ove alatke se upisuje koliko elimo da bude zaobljena stranica. Ja u uneti 8px i kliknuu na ok. Na ovaj nain imam selekciju sa zaobljenim ivicama. Kako bih ispunio selekciju, na desnom kliku se nalazi opcija fill koja ima tu namenu.U padajuem meniju use biram ime elim da ispunim obeleenu povrinu. Izabrao sam pattern, a u listi patterna biram pattern koji sam kreirao za ovu stranicu uzdune pruge, i kliknem ok, na ovaj nain mi je pozadina sa zaobljenim ivicama postala prugasta.

34