Prvi korak u izradi novog Web sajta se najčešće sastoji u izradi skice koja će vam pomoći da pronađete odgovarajuće grafičko rešenje i postavite njegove osnovne elemente. Ja ću u te svrhe upotrebiti Photoshop jer mi on omogućava da počnem od potpuno praznog ekrana i postepeno dodajem nove objekte.

Pre nego što pređem na nešto konkretnije, želeo bih da vas podsetim da je trenutna veličina ovog dokumenta 960×690 piksela što odgovara većini savremenih uređaja od PC računara do „pametnih“ telefona. Osim toga, ja sam već uključio prikaz lenjira (Rulers) i aktivirao pomoćne linije (Guidelines) što se lako može proveriti iz View menija. Za precizno pozicioniranje bi trebalo uključiti i Info panel jer se u njemu najbolje može pratiti položaj pojedinih elemenata.

Za početak ću na vrhu uokviriti polje čija visina iznosi tačno 110 piksela a nakon toga na njegovu donju ivicu postaviti jednu pomoćnu liniju. Ona će se automatski poklopiti sa postavljenom granicom što znači da sam je postavio na željeno mesto. Ovaj postupak mogu da ponovim i na donjoj ivici da bi zaglavlje (Header) i podnožje sajta (Footer) bili iste veličine. Sa leve i desne strane mi je potreban manji razmak pa ću se zadovoljiti sa 10 piksela. Na ovaj način sam na sve četiri ivice postavio pomoćne linije pa mogu da pređem na nešto konkretnije.

Za početak ću na stranicu postaviti sliku koja predstavlja logotip moje kompanije. U tom cilju ću iz File menija pokrenuti funkciju Place jer mi ona omogućava da istovremeno promenim veličinu i oblik novog elementa. Meni to za sada nije potrebno, pa ću jednostavno pritisnuti Enter i završiti ovu operaciju. Sada treba još samo da je postavim na odgovarajuću poziciju tj. u gornji levi ugao. Ako obratite pažnju na ikonicu koja se nalazi u Layout panelu, videćete da je u pitanju tzv. Smart Object što znači da mogu da ga menjam a da se to ne odrazi na njegov kvalitet. Photoshop vam omogućava da koristite različite grafičke formate pa vam neće biti teško da postignete željene rezultate.

Traka za navigaciju može biti postavljena horizontalno ili vertikalno. Meni se više dopada prva varijanta pa ću zato pokrenuti funkciju za unos teksta (Type tool) i kliknuti negde pri vrhu ekrana. Tip i veličina slova mi u ovom trenutku nisu bitni pa ću iskoristiti ono što mi je trenutno na raspolaganju. Bitno je samo da između pojedinih stavki ostane dovoljno slobodnog prostora da bi se one jasno razlikovale. Čim unesem kompletan tekst, mogu da ga jednim potezom postavim na odgovarajuće mesto i pređem na sledeći element. Da bih malo ubrzao ovaj postupak, ja sam sve potrebne tekstove već pripremio i smestio u poseban fajl. Pošto se on nalazi među primerima za vežbu, neće mi biti teško da ga otvorim i počnem sa kopiranjem. Za početak ću selektovati jedan red i prebaciti ga u Photoshop. Na isti način mogu da prebacim i ostale podatke i tako kompletiram podnožje ove Web stranice. Pošto pri unosu nisam vodio računa o položaju pojedinih elementa, moram da ih malo sredim tj. poravnam sa pomoćnim linijama.

Isti sistem mogu da ponovim i za popunjavanje središnjeg dela. U tom cilju ću prvo selektovati čitav pasus s tim da bi za njegov prenos u Photoshop trebalo primeniti malo drugačiji postupak. Umesto da samo kliknem na praznu površinu i pritisnem tastere Control+V, ja ću prvo definisati poseban okvir i zatim upotrebiti funkciju Paste. Nakon toga će sav ubačeni tekst biti smešten u zadato polje što znači da ću kasnije moći lakše da ga oblikujem.

Pošto mi je na ovoj stranici ostalo još malo slobodnog prostora, ja ću selektovati još jedan red i preneti ga u Photoshop. On se sastoji od tri pojma pa moram da ih razdvojim a to se najlakše može udariti kombinacijom funkcija Cut i Paste. U stvari, jedan od njih treba zameniti slikom, pa ću ga zato prvo obrisati a zatim pokrenuti funkciju Place i na njegovo mesto postaviti odgovarajuću ilustraciju. Čim sa Enter potvrdim njen unos, mogu da je pomerim na desnu stranu i još malo uredim ovaj deo.

U ovoj fazi je najvažnije obezbediti sve potrebne elemente koji treba da se pojave na novoj Web stranici a njihovo finalno oblikovanje možete ostaviti za kasnije. Ja sam to upravo dovršio, pa ću iskoristiti ostatak ove lekcije da vam pokažem kako se u Photoshop-u grupišu pojedini slojevi (Layers). U ovom slučaju su mi potrebne tri grupe – zaglavlje (Header), telo (Body) i podnožje (Footer) pa ću zato selektovati elemente koji čine prvu grupu i kliknuti na ovu opciju. U tom trenutku će se pojaviti novi meni pa mi neće biti teško da iz njega izaberem funkciju New Group From Layers i da je nazovem Headers. Sledeća tri elementa se nalaze u središnjem delu stranice pa ću njih smestiti u grupu pod nazivom Body a ostatak prebaciti na Footers. Pošto sam na ovaj način rasporedio skoro sve slojeve treba još samo da malo uredim ovu listu tj. da na njen vrh postavim Headers a da ispod njega ostanu ostali sadržaji. Za ovu sliku je očigledno da pripada srednjem delu, pa ću i nju prebaciti u odgovarajuću grupu. Kao što vidite, sada su svi slojevi svrstani u odgovarajuće grupe a njihov sadržaj se lako može proveriti klikom na neku od ovih strelica.