Rezanje PSD dizajna za kodiranje u HTML

Savladali smo alate u photoshopu, naučili početne HTML i Css kodove i došlo je vrijeme da svoj prvi dizajn izrežemo i ukodiramo.
Ovaj članak će pomoći početnicima da naprave svoje prve korake na tom putu.

Dakle, nacrtali smo svoj prvi dizajn. Svaki element nalazi se (trebao bi) na svom posebnom layeru. (slika 1)

slika 1

1. Čišćenje

Layere sada možemo počistiti tako da u kantu za smeće na dnu dockera sa layerima odvučemo sve nepotrebne, tj ugašene, suvišne layere koji su nam preostali.

2. Sortiranje

Ostale layere ćemo grupirati u mape (grupe) . Na dnu dockera sa layerima nalazi se mala ikona mape i klikenmo na nju. Dati ćemo joj ime “tekst” i u nju ćemo odvući  sve layere sa tekstom. U drugu mapu ćemo odvući layere sa slikama. U treću layere sa pozadinom body-a itd.. Kada su nam layeri tako lijepo pospremljeni biti će nam lakše raditi. (slika 2)

slika 2

Važno je napomenuti da se za web dizajn reže PSD dokument a ne JPG ! PSD dokument se UVIJEK čuva za eventualne naknadne izmjene i to zajedno sa označenim slice-ovima.

3. Selektiranje

Sada trebamo prvo ugasiti sve layere sa tekstom i fotografijama jer je to sadržaj a ne dio samog dizajna stranice.

4. Rezanje

Zatim ćemo sa lijeve trake sa alatima odabrati “slice tool”  ,  kliknuti na gornji rub pozadine body-a (tamnosmeđa traka) i povući prema desno oko 10 px pa dolje do donjeg ruba svjetlosmeđe trake držeći pritom stisnutu lijevu tipku miša. Tako smo izrezali traku koja će činiti pozadinu “body- a”. U css-u ćemo joj kasnije dati “repeat-x” kako bi se ponavljala vodoravno duž cijele stranice. Izrezati ćemo i logotip, komadić trake za footer, sliku šalice za header i 2 pozadine za linkove (tabs) u topnavigaciji  za “a” i “a:hover” stanje . (slika 3)

slika 3

5. Brušenje izreza

Kada smo sve to označili, uvećati ćemo sliku (ctrl +) kako bismo sve mogli namjestiti točno na pixel. U gornjem lijevom uglu svakog označenog izreza, u plavom kvadratiću  vidimo broj i malenu kockicu. Kada na to kliknemo desnom tipkom miša (odabrani alat je još uvijek “slice tool”) cijeli okvir će postati narančast i spreman za transformaciju. Kada mišem dođemo na obrub pojaviti će se malene strelice, pa kliknemo lijevom tipkom miša i smanjimo ili povećamo okvir izreza da bude što točniji. (slika 4)

6. Spremanje JPG izreza

Kada smo zadovoljni, idemo na file /save for web , odaberemo quality “70-80″, ” jpg” i “save”. Sada možemo odabrati mapu u koju želimo da nam se izrezi spreme, a pod slices odaberemo opciju “all user slices”. Na kraju kliknemo na “save”.

7. Spremanje PNG izreza

Obično se logotip na stranicu stavlja u transparentnom png (ili gif) obliku. Stoga ćemo sada pogasiti sve mape sa svim layerima osim layera na kojem se nalazi logotip. Ponovo ćemo ići na file / save / save for web, označiti ćemo samo layer sa logotipom, odabrati PNG-24 , označiti “Transparency” i kliknuti na ” save”. U novootvorenom prozoru označiti ćemo da trebamo samo “selected slices” kako bi nam se sada pospremio samo izrez sa logotipom a ne i ostali izrezi. (slika 5)

slika 5

8. Spremanje PSD dizajna sa izrezima

Kada smo sa time gotovi možemo ugasiti naš dizajn.psd , ali ne smijemo zaboraviti spremiti sve promjene kako bi sačuvali izreze za eventualne buduće izmjene. Ako ih ne želimo gledati možemo ih isključiti na View / show / slices.

9. Preimenovanje

Sada u našoj mapi imamo izrez za footer, body background, šalicu za header, dvije pozadine za linkove u topnavigaciji u jpg i logotip u png obliku. Preostaje nam da svakom izrezu damo suvislo ime ( bg-header.jpg, logo.png … )  i sve je spremno za kodiranje naše prve web stranice.

Sretno 🙂