PSD til HTML Tutorial

Når en webutvikler er i ferd med å lage en nettside som regel vil han få en Adobe Photoshop-dokument, eller PSD, fra webdesigner. Dette PSD kan omfatte flere design tilfeller kalles lagsammensetninger. Lagsammensetninger (et nytt lag styringsverktøy i Photoshop) viser webutvikler hvilke endringer til den opprinnelige design for å fokusere på. Utvikleren vurderer deretter hver side og oversetter utforming i skikkelig nettside format og kode. Denne guiden vil hjelpe deg å lage en strategi for å skikkelig konvertere PSD til HTML-sider.

Omtale lagsammensetninger

Klikk deg gjennom hvert Layer Comp i Photoshop for å se de ulike statene i design. Hvert lag Comp vil ha ulike forskjeller som er viktige for utformingen og din kode. For eksempel kan en lagsammensetning har overgangstilstander; en annen kan ha bakgrunn bilde forskjeller. Hvis lagsammensetninger ikke er tilgjengelige, deretter gjennomgå PSD som er.

Lag Guides av hovedområdene

Separer design inn i tre områder: Header, innhold, bunntekst. Dette gjøres i Photoshop gjennom Guides. Lag en guide ved å dra rutenettlinjer med musen fra kanten av Photoshop-dokumentet til kanten av de områdene du ønsker å skille. For eksempel ønsker å lage en guide som skiller heading fra innhold. Det er vanligvis en tydelig forskjell fra der overskriften slutter og hvor innholdet starter; Hvis ikke, bruk sunn fornuft.

Opprett HTML / CSS for hovedområder

I teksteditor kode grunnleggende HTML-koder: html, hode og kropp. Inne i kroppen koden skape en beholder for siden (dvs. <div id = "container"> </ div>). Inne i denne beholderen sette inn en div for overskriften, innhold og bunntekst områder du har opprettet guider for. I Photoshop bruker Rectangular Marquee Tool tegne en boks langs kantene av guidene du har opprettet, og deretter under "Image" (plassert på toppen av programmet) velg "Crop". Gå til "Image" og deretter "Image Size" og du vil se eksakte høyde og bredde dimensjoner av området du beskjæres. Du trenger dette for å definere din CSS. For bakgrunnsbilder, i Photoshop gå til lagpaletten, klikk øynene til å vise og skjule visse lag til du får akkurat den bakgrunnen du trenger.

side Nærmere

Lag guider for padding og marginer mellom områder på siden (dvs. header til innhold, innhold til bunntekst, bunntekst til nederst på siden). Lagre grafikk av alle tekstelementer i uvanlige skrifttyper som ikke kan gjengis som system tekst. For eksempel, tekst gjøres på en Papyrus font må skiver og lagret som et bilde fordi nettet ikke vil gjengi det som system tekst. Veksle mellom lagsammensetninger å sørge for at Guides ikke overlapper.

Opprett HTML / CSS av siden Nærmere

Definer universell CSS for konsistent koder som avsnitt, ankere, tabeller, header koder, og listeelementer. Begynn å koble til innhold starter med topp- og bunntekst deretter fylle innholdet områder. Topp- og bunnteksten er vanligvis konsekvent på hver side av nettstedet ditt. Bryt opp innholdsområdet i kopi, moduler og navigasjon. Skaff farger, fonter og linjeavstand fra PSD og innlemme i din CSS fil.

Sammenligne HTML-fil med PSD

Lagre CSS-filer som CSS- og HTML-filer som HTML. Åpne HTML-fil gjennom flere nettlesere ved å velge Fil og deretter Åpne sted. Gjennomgå HTML-fil mot Photoshop design og se etter forskjeller. Merk forskjeller på et ark, og deretter fikse HTML eller CSS-kode for å matche PSD design. Fortsett denne prosessen til det du ser i nettleseren stemmer overens med PSD design.