Pošto sam konačno postavio sve elemente, vreme je da izaberem oblik u kome će oni biti predstavljeni na Web-u. Pri tome mogu da koristim tzv. Web grafiku tj. rasterske slike, ili da upotrebim HTML i CSS kodiranje. Treba imati na umu da se stranice koje sadrže HTML i CSS brže učitavaju i da će popularni servisi za pretraživanje poput Google-a, lakše „skenirati“ njihov sadržaj.

U ovom slučaju, najveći deo stranice je moguće postaviti uz pomoć HTML-a i CSS-a ali se za pojedine delove ipak mora upotrebiti grafika. Upravo zbog toga je neophodno da primenom odgovarajuće tehnike izdvojim određene segmente i sačuvam ih u obliku nezavisnih fajlova. U ovoj lekciji ću vam pokazati kako se to radi.

Za početak je neophodno da postavim još nekoliko pomoćnih linija jer će mi to znatno olakšati konačni odabir. To se pre svega odnosi na ovaj mali polukružni objekat koji predstavlja trenutno izabranu opciju, pa ću ga prvo uveličati a zatim pokrenuti funkciju Move i kliknuti na njega. Na taj način sam izvršio selekciju, pa mi neće biti teško da precizno postavim nove pomoćne linije. Isti postupak moram da ponovim za ilustraciju koja se nalazi sa desne strane, pa ću zato prvo uveličati odgovarajući segment, selektovati sliku i postaviti pomoćne linije. Na žalost, neki od elemenata koje sam koristio nisu pogodni za automatsko postavljanje pomoćnih linija. Upravo je to slučaj sa kružićima koji se nalaze u donjem levom uglu, ali se uz malo truda i ovde mogu postaviti svi potrebni elementi.

Pošto sada imam sve što mi je potrebno, vreme je da vam pokažem kako se vrši isecanje slika. U Photoshop-u se to može uraditi primenom funkcije Slice, a pošto mi ona trenutno nije dostupna, moram prvo da kliknem na ikonu Crop i iz pomoćnog menija izaberem opciju Slice. Nakon toga je dovoljno da uokvirim segment koji mi je potreban i na taj način kreiram novi segment. Program će automatski pratiti pomoćne linije pa mi neće biti teško da precizno obuhvatim čitavu sliku. Na isti način mogu da obeležim i čitav baner dok je za isecanje sitnijih elemenata bolje prvo upotrebiti funkciju Zoom. Ja ću ovaj postupak ponoviti još dva puta, za ovu veliku sliku i kružić koji se nalazi u donjem levom uglu. Ako nakon toga prikažem čitavu stranicu, primetićete da se pored svakog obeleženog segmenta nalazi drugačija oznaka. Pri tome treba imati u vidu da će plavom bojom biti označeni segmenti koje ste sami obeležili, a sivom oni koji su kreirani automatski, bez obzira da li su vam potrebni ili ne. To ne treba da vas brine, jer sve suvišne fajlove možete lako obrisati.

Svakom segmentu je već dodeljeno odgovarajuće ime a ako vam se to ne dopada, vrlo lako ga možete promeniti. Dovoljno je da desnim tasterom miša kliknete na ovu oznaku i iz menija izaberete stavku Edit Slice Options. U okviru koji sledi se umesto postojećeg lako može uneti novo ime. Ja to neću uraditi pa mogu odmah da kliknem da dugme Cancel i zatvorim ovaj okvir.

Photoshop mi omogućava da jednim potezom kreiram i istovremeno optimizujem sve potrebne grafičke elemente. To se može postići primenom funkcije Save for Web koja se nalazi u File meniju. Pošto je ovaj proces potpuno automatizovan, potrebo je samo da izaberem format u kome će biti kreirani budući fajlovi. Meni sasvim odgovara da to bude PNG ali ću za ovu veliku sliku ipak izabrati JPG. Nakon toga treba još samo da kliknem na dugme Save i izaberem folder u kome će biti smešteni svi fajlovi. Kod mene se automatski otvorio folder koji je predviđen za slike, pa mogu slobodno da pređem na ostale parametre. Nazive fajlova ne treba menjati ali zato nije loše da se iz ove liste izabere opcija Images only. Na taj način ću kao krajnji rezultat dobiti samo slike, bez ikakvih dodatnih kodova. Pošto je sve ostalo u redu, mogu da kliknem na dugme Save i dovršim ovaj postupak.

Sada treba još samo da proverim šta sam postigao. Zato ću pokrenuti Windows Explorer i prikazati sadržaj foldera sa slikama. Kao što vidite, u njemu se nalazi mnogo novih fajlova a oni predstavljaju isečke koje mogu da upotrebim za kreiranje nove Web stranice. Da bi vam bilo jasnije o čemu se radi, ja ću promeniti način na koji se prikazuje sadržaj foldera tako da se na ekranu odmah pojave svi grafički elementi. Da bi ih još lakše razlikovao, iskoristiću ovu priliku i pojedinim fajlovima promeniti nazive. Počeću od slike koja predstavlja ponudu meseca a zatim potražiti i grafičke elemente koji su predviđeni za navigaciju. Na kraju, tu su i fajlovi koji će mi poslužiti za kreiranje logotipa i njegovo razdvajanje od ostatka Web stranice.

U ovoj lekciji ste videli kako se kreiraju grafički elementi koje kasnije možete lako upotrebiti kao delove neke Web prezentacije. Isti rezultat se može postići na još nekoliko načina ali mi se čini da je ovaj najbrži i najefikasniji.