Photoshop - web slicing

Rad bi se naučil razrez dizajna spletne strani v Photoshopu (uporabljam CS6). Z nekega tutoriala sem že pobral datoteko v formatu psd. Ko datoteko odprem, se prikaže slika (gre za modalno okno, kamor naj bi se vpisal nek tekst in gumb, s katerim okno zapreš). Vprašanje je, kaj lahko s Photoshopom naredim - lahko recimo ustvarim html input (textbox), kamor bom lahko vpisal tekst? Pogruntal sem že, kako shranim spletno stran (zgenerira se html in slike), vendar nikakor mi ne rata ustvarit input, textarea, button itd. Se kaj takega v Photoshopu sploh da, ali moram ročno urejat html, da bom na koncu imel vnosno polje in gumb? Če je to možno, kako se to naredi?

Razrez dizajna in potem dejansko programiranje kode spletne strani sta dva ločena koraka. Razrez dizajna služi le za to, da dobiš grafične elemente ustreznih velikosti in kvalitete, katere boš kasneje uporabil pri izdelavi strani. Pri tem si s Photoshopom nimaš več kaj dosti za pomagat.

To da ima ob razrezu še opcijo izvoza v HTML je bolj neuporabno kot ne, odmisli raje.

Lahko narediš seveda iz Photoshopa design v internet stran v slikah in določiš kje so gumbi. Ampak to so prakse izpred 15 let. Povečal se ti bo load time, stran zelo verjetno ne bo responsive, s tem ko imaš veliko slik je seveda stvar počasna in je SEO (po domače optimatizacija spletne strani) zelo slab. Tebi je v interesu, da narediš stran v HTML, da je:

- responsive
- hitro se nalaga
- se mimogrede naučiš in razumeš za kaj gre
- da ne naštevam dalje.

Kar se obrazcev in form tiče, si poglej osnove html5, kjer imaš večino že omogočenega, kakšne detajle potem seveda pedenaš v CSS (recimo v Photoshopu s color pickerjem najdeš točno barvo, kot si jo imel v Photoshopu v predlogi). Za posamezne elemente (recimo background ali sam element) lahko še vedno uporabiš del razreza v Photoshopu, načeloma pa se izogibaš temu. Grafika se generira z CSS, HTML canvas, SVG, WebGl in še morje drugega. Da bo obrazec varen in zaščiten boš tako rabil zadaj še skripto da pošilja recimo to kar bo nekdo vnesel v obrazec.

Sicer pa spletne strani in Photoshop imata iz leta v leto manj skupnega, še posebej če se držiš standardov, trendov in podobnega, česar se drži večina. Recimo če že rabiš nekaj v tej smeri. Sicer pa PSD/JPG/PNG -> bolj ali manj dead!