Slik konverterer PSD til Javascript og CSS Fast

Du kan åpne en Photoshop PSD-filen i Adobe Photoshop, bruk deretter en kombinasjon av verktøy for å lage en webside fra denne filen. Disse verktøyene inkluderer "Slice" verktøy for å dele filen inn i "<div>" koder og "Save for Web & Devices" verktøyet som inkorporerer Web språk, slik som Javascript og CSS, som kan være nødvendig for siden. Dette alternativet er en praktisk løsning hvis du er kjent med Photoshop, men ikke med de metoder som er nødvendig for å kode en webside.

Bruksanvisning

1 Start Adobe Photoshop CS5. Klikk "Fil" og "Open", og deretter dobbeltklikker du PSD-fil.

2 Høyreklikk på "Crop" verktøy fra verktøykassen på venstre side av skjermen, og klikk deretter på "Slice" verktøyikonet.

3 Klikk på lerret og dra skive valgboksen inntil den inneholder alle elementene vil inkludere som en del av websiden. Gjenta til hele siden er inneholdt i disse valgboksene. Når du konverterer PSD filen til en web-side, vil disse elementene inngå som "<div>" tags, som er et strukturelt element av websider.

4 Klikk "Fil" og "Lagre for Web og enheter."

5 Klikk på "Lagre" -knappen.

6 Klikk på rullegardinmenyen til høyre for "Format", deretter "HTML og bilder."

7 Klikk på rullegardinmenyen til høyre for "Settings", deretter "Other". Dette åpner et nytt Output Settings vinduet.

8 Klikk på "HTML" drop-down menyen og klikk på «stykker."

9 Klikk på "Generer CSS" under Slice utgang.

10 Klikk "OK" og "Lagre". HTML-siden, samt Javascript-filer til noen, CSS og bildefiler, er opprettet og lagret i mappen indikeres øverst i vinduet.

Hint

• Hvis du har tenkt å laste opp din webside til en web hosting leverandør, slik at andre kan vise siden, også laste opp noen bilder som ble opprettet da du konverterte PSD filen til en web-side.