Izrezivanje sličica web layouta za web stranicu

U ovom tutorijalu smo naučili kako napraviti web layout. A u ovom tutorijalu ćemo naučiti kako taj layout izrezati na male sličice za dizajn web stranice.

Otvorite u Photoshopu željeni web layout. Pritisnite na tipkovnici Ctrl+R i pojavit će se Ruleri.



Zatim pozicionirajte kursur miša na gornji Ruler i držeći klik iz njega povucite guide. To vam izgleda kao nekakva svijetlo plava crta. Zatim iz lijevog rulera povucite dva guide-a da to izgleda ovako:



Ovo bijelo u sredini će biti, kao i sve ostalo izrezane slike. Ali kod metanja slika kao dizajn web stranice tu veliku bijelu sliku ćemo maknuti, obojati pozadinu bijelom bojom i tu ćemo pisati tekst.

Zatim napravite isto to za tipke u meniju.



Primjetite da sada više nećemo dobiti samo jednu veliku bijelu sliku u sredini, nego više manjih. No neka vas to ne zabrinjava, svjedno ćemo ih sve izbaciti jer nam ne trebaju.

Još možete vi organizirati sličice kako vama paše, ovo je bio za primjer pa ja neću sve potrebne sličice pravit (npr. gore za linkove je isto potrebno).

Kada ste sve napravili, kliknite na File -> Jump to -> ImageReady ili klinite na ovo:



Ista slika iz photoshopa pojavit će se u ImageReady-u. Kliknite na Slices -> Create Slices from Guides.

Zatim idite na File -> Save Optimized As -> napišite ime vaše web stranice i obavezno označite da bude HTML and Images



Zatim idite u folder gdje ste to usnimili, otvorite html datoteku i vidjet ćete da su slike posložene u tablice tako da tvore dizajn web stranice.

Ako niste previše vješti u HTML-u otvorite tu HTML datoteku u Dreamweaveru.

Zatim ovako gdje god vidite sliku sa čisto bijelom pozadinom kliknite na nju i pritisnite tiku Del (ili Delete) na tipkovnici.



Zatim ovako označite te ćelije (tako da držite pritisnutu lijevu tipku mišta i vučete prema dolje).



Kada ste tako označili ćelije idite na Modify -> Table -> Merge Cells i eto vam mjesto za pisanje teksta na vašoj web stranici.