Ovo je jedan mali dio tutoriala za Web dizajnere (ljude koji to žele biti i koji marljivo uče).
Crtanje template-a
Template je u prevedenom značenju predložak ili ako vam još nije jasno, to je izgled stranice, slika cjelokupne stranice. Kako napraviti predložak to sve ovisi o vama koliko dobro baratate Photoshopom i koliko imate smisla za crtanjem. Trenutno se sad neću pisati o tome kako se crta u Photoshopu jer to bi trajalo jako dugo.
Izrezivanje Template-a
Ono što Web dizajneri koriste u Photoshopu je izrezivanje predloška kako ne bi morali svaki dio stranice posebno crtati i spremati, tu nam služi Photoshop u kojem nacrtate cijeli predložak, a zatim ga na djelove izrežete pomoću Slice Tool-a. Za ovaj tutorial ja ću koristiti gotovi template.
Izrezivanje i nije tako težak posao. Uzmite Slice Tool i označite kako i što želite odrezati. Za početak evo kako bi header ovoga templatea trebalo odrezati. Razlog zašto header nije odrezan po cijeloj dužini je taj što je pozadina crna i kad bi se rezao od ruba do ruba, slika bi bila oko 1000 px širine što je u ovom slučaju nepotrebno jer je pozadina crna i pozadinu lako dobijemo CSS-om.
Ovo isto napravite i na ostalim elementima, naprimjer navigacija. Kako ne bi rezali sve od ruba do ruba jer je to stvarno nepotrebno, možete odrezat samo dio veličine do jedan centimetar ili manje. Razlog zašto samo komad navigacije je taj što tekst možete dodati HTML kodom, a CSS-om napraviti da se ovaj mali komad slike od navigacije ponavlja od ruba do ruba.
Izrezivanje podloge za lijevi i desni stupac potrebno je izrezati samo jednom, nema potrebe za rezanjem svakog stupca posebno. Evo kako bi to trebalo napraviti. Tekst nije bitan jer se on dodaje u HTML-u. Dakle potreban je gornji dio stupca u koji dolazi naslov, jedan mali dio sredine od nekih 2 - 5 milimetara će služiti kao pozadina koja će se ponavljat i završni dio je donji rub. Dakle tri slike.
Na ovaj isti način odrezat ćemo i glavni stupac, to jest pozadinu za glavni sadržaj na stranici. Dakle tri slike, vrh, sredina i dno.
Kako bi znali koja je koja slika kad ju spremate, uzmite Slice Select Tool i kliknite dva puta na header i upišite naziv slike, npr. header i kad budete spremali sliku zvati će se header.png. Tako vrijedi i za druge slike.
Sve što sad trebate je da odete na File > Save for Web & Devices i kliknete na svaku sliku posebno i odaberete njezin format (GIF,JPEG,PNG...). Ono što trebate dobiti je dobru kvalitetu slike i koja će se brzo učitavati. U kutu dole ispod slike imate koliko će se sekundi učitavati slika na određenoj brzini. Koliko ćete spanjiti sve ovisi o vama.
Nakon što ste svakoj slici koju mislite odrezati dodali format i broj boja, potrebno je označiti slike koj mislite izrezati. Pritisnite i držite shift (u CS4 verzijama, u starijim je mislim control - ako se ne varam) i klikajte na svaku sliku koju želite spremiti. Nakon toga kliknite Save, odaberete Images Only i Selected Slices što znači da će odrezati samo označene slike, i kliknete gdje želite da vam se slike spreme i to je to.
Sad sve što trebate je slike ubaciti u HTML pomoću CSS-a. Više o HTML-u i CSS-u na Tutorial za Web dizajnere.
Ivan M. 
. Mnogi su me pitali kako izrezat template, koji je to alat, pa evo po ovome sad mogu naučit koristit alat, a kasnije će sa iskustvom više znat kako i što izrezat...
...kad uradim index i CSS .kako ću CSS-om dodat sliku-dali to treba ovako staviš sliku dako backgound ili pozadina ,i onda napravit strukturu ...sad kako treba napravit strukturu?? ako ti se neda objašnjavat možeš li mi bar dat link u kojem to detaljno objašnjuje.
