Profesionalni web dizajneri razvijaju predloške web stranica, obično u moćnim grafičkim urednicima kao što je Adobe Photoshop. Rezultat rada je datoteka sa slikom koja se u ovom obliku dostavlja kupcu. Da biste koristili gotovi dizajn, odnosno postavili web stranicu, morate izrezati predložak.
Potrebno
uređivač rasterske grafike Adobe Photoshop
Instrukcije
Korak 1
Otvorite datoteku predloška u grafičkom uređivaču Adobe Photoshop. Na izborniku odaberite File i Open ili pritisnite kombinaciju tipki Ctrl + O. U dijaloškom okviru koji se pojavi nakon toga, idite u direktorij s datotekom, odaberite je na popisu i kliknite gumb "Otvori".
Korak 2
Odaberite prikladnu skalu za prikaz slike predloška. Koristite alat za zumiranje ili stavke kontekstnog izbornika. Odaberite skalu koja vam omogućava da postavite kursor s preciznošću u pikselima. To je neophodno za precizno postavljanje referentnih linija.
Korak 3
Formirajte skup referentnih linija iznad slike predloška. Uključite prikaz ravnala u prozorima dokumenata ako već nije uključen. Da biste to učinili, pritisnite Ctrl + R ili na meniju odaberite View and Rulers.
Korak 4
Pomaknite kursor miša preko gornjeg ravnala da dodate vodoravnu referentnu liniju. Pritisnite i držite lijevu tipku. Pomaknite kursor miša prema dolje na područje slike. Isto tako, pomoću desnog ravnala možete dodati vodoravne crte.
Korak 5
Dodajte potreban broj referentnih linija i postavite ih duž granica podjele regija predloška. Linije trebaju prolaziti kroz sva mjesta na kojima želite izrezati predložak. Trebali bi ograničiti sve slike i logična područja (logotip, zaglavlje stranice, vodoravni i okomiti izbornici, itd.) Koji će biti predstavljeni na web stranici.
Korak 6
Aktivirajte alat za rezanje. Njegovo se dugme nalazi na vertikalnoj traci s alatima.
Korak 7
Stvorite potreban broj područja za rezanje pomoću alata za rezanje. Odaberite prikladnu skalu za prikaz predloška. Pomoću miša postavite granice područja. Smjernice dodane u trećem koraku pružit će precizno pozicioniranje granica objekata koje kreirate. Po potrebi prilagodite postojeća područja pomoću alata za odabir kriški.
Korak 8
Promijenite svojstva područja rezanja prema potrebi. Aktivirajte alat za odabir izreza. Desnom tipkom miša kliknite željeno područje. U kontekstnom izborniku odaberite stavku Uredi opcije rezanja. U dijaloškom okviru Slice Options, koji će se pojaviti, odaberite vrstu područja (slika, prazno područje, tablica), način popunjavanja pozadine, navedite, ako je potrebno, ime, ciljni URL, sadržaj atributa alt="Image" i druge vrijednosti. Kliknite OK.
Korak 9
Izrežite predložak. Na izborniku odaberite Datoteka i Spremi za web i uređaje ili pritisnite Shift + Ctrl + Alt + S. U dijaloškom okviru Spremi za web i uređaje navedite format i parametre kompresije slike u koje će se izrezati predložak. Kliknite gumb Spremi. Prikazat će se dijalog Spremi optimizirano kao.
Korak 10
Odaberite HTML i slike (*.html) na padajućem popisu Tip datoteke, a u polje Ime datoteke unesite ime datoteke u koju će se postaviti HTML oznaka predloška. Na popisu Kriški odaberite Sve kriške. Navedite direktorij za izlaz i kliknite gumb "Spremi".
Korak 11
HTML datoteka bit će smještena u ciljni direktorij, što je zapravo gotov predložak web stranice. Poddirektorij slika sadržavat će skup slika u koje je izrezan izvorni predložak.
