Hvordan lage en HTML CSS Theme From en PSD fil lett

March 18

Du trenger ikke å være ekspert på HTML og CSS for å lage din egen webside. Hvis du har laget en layout i Adobe Photoshop, men vet ikke hvilke skritt å ta for å konvertere PSD-fil til HTML, kan du eksportere bildet til HTML fra Photoshop selv. Før du eksporterer layout, men bør du først bruke slice verktøy for å klippe bildet inn i ulike seksjoner for å gjøre oppsettet enklere å redigere når den er konvertert til HTML. Etter å lagre filen som en Web-dokument i Photoshop, kan du bytte ut noen av HTML med CSS for å rydde opp i koden.

Bruksanvisning

1 Start Adobe Photoshop, deretter "Open". Naviger til mappen der PSD filen er lagret. Dobbeltklikk på filen for å åpne oppsettet. Klikk "Slice Tool" eller trykk "C."

2 Velg et område utenfor bildet. Dra musepekeren over ønsket del, slipp museknappen for å lage en grense boks. Bildet vil bli delt inn i to separate deler.

3 Gjenta trinn to for å fortsette å ha klippet oppsettet inn i forskjellige seksjoner etter behov. Plasser musepekeren over kanten av en grense boksen for å endre størrelsen på boksen, hvis det er nødvendig.

4 Klikk på "File" når du er ferdig å dele oppsettet i ulike seksjoner. Klikk "Save for Web & Devices" for å åpne et nytt vindu.

5 Klikk "Lagre" og deretter velge "HTML og bilder" fra "Format" drop-down menyen. Gi navn til filen, og klikk deretter på "Lagre" igjen for å lage en HTML-tema fra PSD fil.

6 Åpne HTML-dokument i et tekstredigeringsprogram som Notisblokk, vim eller Notepad ++. Legg til "<style>" og "</ style>" koder i mellom "<head>" og "</ head>" koder på toppen av siden.

7 Sett inn følgende i mellom "<style>" og "</ style> tags:

kropp {
}

table {
}

8 Legg til følgende attributter til "kroppen" element i CSS, slik at koden ser slik ut:

kropp {
background-color: #X;
margin: 0;
}

Bytt ut "X" med ønsket bakgrunnsfarge for siden; bruke Adobe Photoshop for å finne den heksadesimale koden for ønsket farge.

9 Legg til følgende attributter til "table" element i CSS:

table {
bredde: W px;
høyde: H px;
padding: 0;
border: 0px;
}

Erstatt "W" og "H" med tilhørende verdier for "width" og "height", som vises i "<table>" tag. Bruk "Find" verktøy - ved å trykke "Ctrl" og "F" - for å finne "width" og "height" attributter om nødvendig.

10 Fjern "bgcolor", "leftmargin", "topmargin", "margin" og "marginheight" fra "<body>" tag. Fjern "id", "bredde", "høyde", "border", "cellspacing" og "cellpadding" fra "<table>" tag.

11 Trykk "Ctrl" og "S" for å fullføre opprett en HTML / CSS tema fra en PSD-fil.

Hint

For å finne den heksadesimale koden for ønsket farge i Adobe Photoshop, klikker du på fargekartet fra verktøylinjen, deretter markere feltet ved siden av "#".
Selv om Adobe Photoshop tilbyr en rask og enkel metode for å konvertere PSD-filer til HTML, kan du finne det lettere å bruke en WYSIWYG - som Adobe Dreamweaver, Microsoft Expression eller Amaya - å lage en HTML / CSS tema.