Hvordan lage et nettsted Layout Bruke Photoshop

Hvordan lage et nettsted Layout Bruke Photoshop


Å bygge et nettsted layout er en utfordrende oppgave som tar grafikk designere år å mestre. For både erfarne og uerfarne, gir Adobe Photoshop en rekke verktøy som hjelpemiddel i prosessen med å lage et nettsted 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. Fra og med logo designet vil også få fart på layout skapelse.

Bruksanvisning

1 Opprett en ny fil i Photoshop ved å klikke på "File" -menyen og velge "New". Størrelsen på bildet ditt vil avgjøre det ferdige størrelsen på ditt nettsted, 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 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 ditt nettsted header, som er det området som vises på toppen av websiden. Dette området bør være begrenset til ikke mer enn 200 piksler i høyden. Inkluder nettstedets navn og logo i 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 navigeringslinje under overskriften som er ca 50 piksler høy. 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 "Hjem", "Om oss," "Kontakt," "Produkter," osv).

4 Lag en boks under navigasjonslinjen for å representere det området som teksten på nettstedet ditt går. Du kan la dette feltet stå tomt for nå, men du må ha det området som er reservert, slik at du ikke legger design til det. Området kan være så bredt som din header og navigasjonslinjen, eller være smalere for å imøtekomme sidefelt til venstre, høyre eller begge deler.

5 Design sidefelt hvis du forlot rommet for dem. Disse sidestolper vil starte under header og vil gå ned hele lengden av siden helt til bunntekst. Sidestolpen din kan enten inkludere grafikk eller fotografier, eller kan være et annet område for tekst. Hvis du reserverer områdene for tekst, kan du la dem stå tomme. Ellers begynner å utforme grafikken som vises i sidefelt.

6 Lag en bunnteksten nederst i 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 nok plass mellom topp- og bunntekst for teksten som design vil automatisk vokse og krympe til å romme 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 sitt utseende. 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 flere endringer uten tap i kvalitet.

8 Velg "Slice" verktøy fra verktøylinjen til venstre, og dra valg rundt ulike områder av bildet. Hvis du bruker bare en overskrift, tekstområde og bunntekst, gjøre tre valg rundt disse tre områdene. Hvis du følger sidefelt, opprette flere skiver rundt disse områdene. Dra et utvalg boks rundt et område med stykket 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 filnavn for hver av skivene du har opprettet, og vil generere et eget bilde for hver av sektorene. Sektorene kan deretter kobles til ditt nettsted layout ved hjelp av et webdesign program som Frontpage eller Dreamweaver, eller for hånd ved hjelp av HTML-kode.

Hint

  • Se på andre nettsteder for design og layout ideer. Ikke bare kopiere andres design, men la deres ideer inspirere design.
  • Hvis du ikke har erfaring med å lage grafikk eller nettstedet oppsett ved hjelp av Photoshop, kan du vurdere å ansette en profesjonell grafikk designer til å gjøre jobben for deg.
  • Inkludert kopibeskyttede bilder i ditt nettsted layout kan utsette deg for et søksmål fra bildets opphavs. Ikke bruk andres bilder i layouten uten tillatelse.