- Vežba 1 (dodatan materijal) - Kreiranje Web šablona (template) pomoću softvera Adobe Photoshop CS

- Vežba 1 (dodatan materijal) - Kreiranje Web šablona (template) pomoću softvera Adobe Photoshop CS

1. Pokrenite Adobe Photoshop CS i otvorite novi dokument sa komandom File / New 2. Otvoriće se dijalog prozor za podešavanje osnovnih parametara. 3. Važni parametri za podešavanje dokumenta, prilikom izrade web šablona, su: a. Dimenzije (width, height) b. Rezolucija c. Color Mode 4. U našem primeru osnovne parametre postavite na: Width=900 piksela, Height=640 piksela, Resolution=75 pixels/inch, Color Mode= RGB, 8 bit (slika 1.) slika 1. 5. Otvaranjem novog Photoshop dokumenta po automatizmu se kreira pozadinski sloj (Background layer) i na njemu se ništa od elemenata ne postavlja osim što možete alatkom za bojenje da popunite boju pozadine. 6. Napravite novi sloj (Layer/New/Layer) i nazovite ga ZaLogoPodloga i pomoću alatke za pravougaonu selekciju nacrtajte pravougaonik kao na slici2. Da bi ste mogli da obojite aktivnu selekciju morate da budete na sloju na kome je napravljena selekcija a to znači da je sloj ZaLogoPodloga u paleti Layers zaplavljen. 2

7. Da bi od selekcije dobili konkretan elemenat moramo da je ispunimo nekom bojom. Za bojenje se koriste dve alatke i to kantica kojom bojite elemenat sa jednom (izabranom) bojom i gradijent pomoću koga možete da izaberete dve ili više boja, kao i način prelivanja boja iz jedne u drugu. 8. Da bi ste došli do alatke za bojenje gradijentom iz paleti alatki aktivirajte alatku za bojenje ( kantica ) i prikazače vam se i alatka za bojenje gradijentom. ( slika 2.) Slika 2. 9. Izaberete Gradient Tool. Svaka alatka iz palete alatki ima svoja dodatna podešavanja. Izborom alatke aktivira se dodatan meni za podešavanje koji se nalazi ispod Fajl menija (slika 3.) A Slika 3. 10. Izaberete način za prelivanje boja koji može biti linear, radijalan, ugaoni, reflektovani i dijamantski. 11. Da bi ste otvorili prozor za podešavanje boja u gradijentu klinete na deo obeležen slovom A na slici 3. 12. Otvara se prozor Gradient Editor pomoću koga podešavate boje koje želite da budu prisutne u prelivu. (slika 4) 3

Slika 4. 13. Prilikom podešavanja boja u prozoru Gradient Editora klizači koji su na slici 4 označeni sa slovom B koriste se za dodavanje i biranje odgovarajućih boja a klizači označeni sa C koriste se za podešavanje providenosti boja. 14. Kada podesimo boje za preliv potrebno je još i da obojimo željeni element. U našem slučaju to je pravougaona selekcija postavljena na sloju ZaLogoPodloga. Selekciju bojimo gradijentom tako što povučemo miša od leve ka desnoj strani selekcije. Da bi izašli iz moda za selekciju potrebno je da pritisnete CTRL+D ili iz File menija izaberete komandu Select/Deselect. Dobili smo elemenat koji pomoću alatke za pomeranje (Move Tool) možete da pomerate (pod uslovom da je sloj na kome se nalazi elemenat aktivan). 15. Kreirajte novi sloj i nazovite ga CrveniDeo. Na njemu kreirajte pravougaonu selekciju i obojite je gradijentom kao na slici 5. C B 4

Slika 5. 16. Kreirajte novi sloj i nazovite ga BelaUspravnaLinija. Pomoću pravougaone selekcije nacrtajte uspravnu liniju i obojite je u belu boju pomoću alatke za bojenej (kantica). (slika 6) Slika 6. 5

17. Kreirajte novi sloj i nazovite ga BelaHorizontalnaLinija. Iz palete alatki izaberite tzv. selekciju za jedan red (Single Row Marquee Tool-slika 7) i nacrtajte jedan red. Slika 7. 18. Da bi ste mogli da obojite ovu selekciju prvo morate da uvećate prikaz dokumenta pomoću alatke za uvećenje (lupa) a onda da obojite u belu boju pomoću alatke za bojenje (kantica). (slika 8). 6

Slika 8. 19. Kreirajte novi sloj i nazovite ga SiviDeo. Iz palete alatki izaberite alatku za pravougaonu selekciju nacrtajte pravougaonik. Obojite ga sivom bojom i postavite ga na mesto kao na slici 9. 7

Slika 9. 20. Aktivirajte alatku za pisanje teksta. Prilikom pisanja teksta automatski se kreira sloj za tekst označen sa slovom T. 21. Napišite tekst MESTO ZA LOGO ( u dva reda ) i obojite ga belom bojom. Tekst postavite na mesto kao na slici 10. Ukoliko se tekst ne vidi treba da premestite tekstualni sloj iznad sloja ZaLogoPodloga u paleti Layers. slika 10. 22. Pomoću alatke za tekst napišite tekst kao na slici 11. 8

Slika 11. 23. Pomoći navedenih alatki i na isti način kao što je u prethodnim tačkama prikazano nacrtati šablon kao je prikazan na slici 12. NAPOMENA: Svaki elemenat kreirati na posebnom sloju. Slika 12. 9

ZADATAK ZA SAMOSTALAN RAD: Napraviti web šablon kao na slici 13. Slika 13 Napomena: Za elemente koji predstavljaju navigaciju (Link 1, Link2,... Link 5) u zaglavlju stranice kreirati pravougaonu selekciju na kreiranom sloju, obojiti je u crveno i primeniti stilove za slojeve (Blending Options) koje otvarate desnim klikom miša kao na slici 14. 10

Slika 14. Otvoriće se dijalog prozor u kome se izborom stila ( sa leve strane ) mogu podesiti razni paarmetri koji se prikazuje na desnoj strani. (Slika 15) Slika 16. 11

12