Bygge et nettsted layout er en utfordrende oppgave som tar grafikk designere år å mestre . For både den erfarne og uerfarne , gir Adobe Photoshop en rekke verktøy som hjelpemiddel i prosessen med å lage en nettside layout. Før du begynner, bør du ha en god ide om hvordan du vil at nettstedet skal se ut. Skisser noen eksempler på papir før du begynner , slik at du allerede har et solid utgangspunkt. Begynner med en logo som allerede er utformet vil også få fart på layout kreasjon. Instruksjoner
en
Opprett en ny fil i Photoshop ved å klikke på "File "-menyen og velge " New". Størrelsen på bildet vil avgjøre den endelige størrelsen på nettstedet ditt, så velg en bredde som passer for de fleste skjermer . En bredde på 750 piksler vil sikre at nettstedet ditt er synlig for alle som bruker en skjermoppløsning som er lik eller større enn 800 -by - 600 . Angi en verdi for høyden på ca 500 piksler. Dette kan justeres senere. Trykk "OK".
2
Design nettstedets header, som er det området som vises på toppen av websiden. Dette området bør begrenses til ikke mer enn 200 piksler i høyden. Inkludere ditt nettsted navn og logo på dette området , samt noen grafikk eller fotografier som synliggjør hensikten med nettstedet ditt . For eksempel kan en nonprofit selskapets hjemmeside layout inkluderer fotografier av personer de har hjulpet .
3
Lag en navigasjonsfeltet etter overskriften din som er ca 50 piksler høyt . Velg " Text Type " verktøy fra verktøylinjen til venstre , og klikk på bildet for å skrive. Skriv inn navnene på de ulike hoved sidene på nettstedet ditt (som " Home", " Om oss ", " Contact, " " Produkter ," etc. ) .
4
Lag en boks under din navigasjonsfeltet til å representere området som teksten på nettstedet ditt vil gå . Du kan la dette området være tomt for nå, men du må ha området reservert slik at du ikke legger design til det. Området kan være så bredt som din header og navigasjon bar , eller være smalere for å imøtekomme sidebars på venstre, høyre eller begge deler .
5
Design sidefelt hvis du forlatt rommet for dem . Disse sidefelt vil starte i henhold til overskriften din , og vil gå ned hele lengden på siden til bunntekst din . Sidefeltet kan enten inkludere grafikk eller fotografier , eller kan være et annet område for tekst . Hvis du reservere områder for tekst , kan du la dem stå tomme . Ellers begynner å utforme grafikken som vises i dine sidefelt .
6
Lag en bunntekst på bunnen av bildet . Bunnteksten bør være så bred som header , men kan være så høy eller kort som du ønsker. Du trenger ikke å bekymre deg for å forlate tilstrekkelig plass mellom topp-og bunntekst for teksten som din design vil automatisk vokse og krympe å huse mer eller mindre tekst . Inneholde informasjon om opphavsrett i bunnteksten samt eventuelle juridiske ansvarsfraskrivelser du ønsker å legge til.
7
Fortsett å jobbe med alle aspekter av nettstedet layout til du er fornøyd med utseendet sitt . Lagre filen ved å klikke på "File "-menyen og velge " Lagre". Lagre bildet i Adobe Photoshop -format ( * . Psd ) , slik at du senere kan gå tilbake til det og gjøre ytterligere endringer uten tap i kvalitet.
8
Velg " Slice " verktøy fra verktøylinjen venstre , og dra valg rundt de ulike områdene i bildet . Hvis du bruker bare en overskrift, tekst -området og bunntekst, gjøre tre valg rundt disse tre områdene . Hvis du har tatt sidebars , opprette flere skiver rundt disse områdene . Dra et utvalg boks rundt et område med skive verktøyet som er valgt er alt som trengs for å lage en skive.
9
Klikk på " File" og velg "Lagre for Web . " Photoshop vil be om filnavn for hver av skivene du har opprettet , og vil generere et eget bilde for hver av sektorene . Sektorene kan da være koblet på igjen for din nettside layout ved hjelp av et webdesign program som FrontPage eller Dreamweaver , eller for hånd ved hjelp av HTML -kode.
