Layout Photoshop – export CSS si HTML

Desi in mod normal incep o categorie de tutoriale explicand mai intai trucuri si lectii de baza in privinta respectivului software, acum voi face o exceptie.

Voi marturisi de la bun inceput ca nu sunt experta in Photoshop dar pot spune ca ma descurc destul de bine si nu intampin probleme.

Tutorialele Photoshop vor fi facute folosind Adobe Photoshop CS2 Versiune 9.0.

Cum se poate face un export CSS si Html+imagini dintr-un layout psd?…nu-i mare filozofie!

Vom lucra pe urmatorul layout: width 775px/height 675px

Am facut un prin screen dupa ce deja am facut slice-urile. Dvs puteti lucra pe orice alt layout cu o singura rugaminte. Denumiti-va layer-le si organizati-le in grupuri “imagini”, “text”, “header” etc nu conteaza ce denumire folositi dar sa va fie usor de localizat.

Cum se taie un layer in slice?

1. Primul lucru de mare ajutor dupa ce terminati un layout si vreti sa-l taiati pentru html este sa selectati optiunile View – Show -Layer Edges si Smart Guides – optiunile va vor ajuta sa taiti fix si egal- aliniere perfecta

2. Ca sa taiti un layout folositi tool-urile “slice tool” si “slice select tool”

Cu primul taiati layout iar cu al doilea puteti reveni asupra unui alt slice si sa-l modificati.

3. Taiti slice-ul gandindu-va la css si html. De ex poza de sus cu imagini -taiati exact unde veti pune o imagine sau unde va fi imaginea box deasupra imaginii. Ganditi-va unde va fi header-ul, cum/cat sa taiati “smart” pentru meniu, footer de asemenea etc.

4. Dupa ce ati terminat de facut toate slice-urile Edit – Save for web o noua fereastra se va deschide si veti alege -Edit in ImageReady.

5. In ImageReady veti urma pasul 1 – View -Show -All.  Puteti deselecta “grid”daca va deranjeaza. In ImageReady asigurati-va ca slice-urile sunt bine taiate si exact cum vreti, probabil in ImageReady veti observa mai bine cum arata slice-urile. Nu uitati sa stergeti textele din layout pentru ca acestea le veti rescrie in html.

6. Urmatorul pas va fi Edit – Output Settings -Slices. In fereastra care se deschide alegeti Generate CSS -by ID iar la Default Slice Naming aveti optiunea de a selecta cum sa fie numite ID-urile din CSS. Nu uitati sa da-ti OK

7. Edit – Save Optimized as In fereastra care apre asigurati-va ca faceti export (save as type)HTML and Images. -Save

8. Eu folosesc Dreamweaver….voi puteti folosi orice alt editor html. In pagina html exportata, cazul meu index.html, aveti codul css. Nu va ramane decat sa puneti respectivul cod css in alt fisier, de ex style.css si sa modificati dupa cum doriti respectivul cod css.

Ca si recomandare pentru anumite slice-uri, cum ar fi background-ul, puteti scoate imagine din html

cazul meu

<div id=”Slice-1″>
<img src=”images/Slice_1.jpg” mce_src=”images/Slice_1.jpg” width=”775″ height=”675″ alt=”">
</div>

si sa o puneti in css ca si background-image: url(Slice_1.jpg) si background-repeat:no-repeat.

Restul tine de cunostintele voastre in CSS (vezi Tutoriale CSS in blog).

Bafta