Hvordan Design en nettside i Photoshop for Dreamweaver

Photoshop er et flott verktøy for de som ønsker å ta en visuell tilnærming til web design eller som er skremt av tanken på å håndtere HTML-kode. Den har alle verktøyene du trenger for å integrere bilder, tekst og grafikk til en webside layout, og alt som trengs for å optimalisere disse elementene for nettet, og Adobe Dreamweaver spesielt.

Bruksanvisning

Førstegangs oppsett

1 Start Photoshop og velg Fil> Nytt fra programmenyen. Klikk på Preset rullegardinmenyen og velg Internett. Juster Size rullegardin til en standard Web størrelsen du ønsker at siden skal være.

2 Velg Fil-> Åpne fra programmenyen og åpne det bildet du ønsker å bruke som overskrift. Dette vil skape en ny fane eller et vindu for bildet, avhengig av dine Photoshop innstillinger.

3 Velg Rectangular Marquee Tool fra Verktøy-panelet til venstre på lerret. Sett rullegardinmenyen Stil til fast størrelse i panelet Verktøyinnstillingane over din canvass og angi bredden lik bredden på siden du opprettet i trinn 1. Høyden kan være så høy eller kort som du ønsker at header image skal vises på websiden.

4 Velg Move Tool fra Verktøy-panelet og beveger rammen over området av bildet du vil ha som din header image. Velg Bilde> Beskjær fra programmenyen.

5 Velg Rediger> Kopier for å kopiere det beskårede header image. Bytt tilbake til fanen eller vinduet som inneholder websiden lerret. Velg Rediger> Lim inn for å lime overskriften på websiden. Ved hjelp av Move Tool, flytte toppbildet slik at de øverste hjørnene matche de beste hjørnene av websiden.

Designe din side og skape Slices

6 Åpne og legge til andre elementer du vil websiden. Du kan lime inn i andre bilder ved hjelp av den samme prosessen som brukes til å lime inn spissen. Inkluder en meny med tekst ved hjelp av type verktøy fra verktøypanelet. De fleste nettsider inkludere en overskrift, et organ som inkluderer hovedinnholdet og grafikk eller bilder knyttet til innholdet eller menyelementer, og en bunntekst, som ofte inneholder kontaktinformasjon eller merknader om opphavsrett.

7 Husk den grunnleggende ideen om bord i webdesign når legge ut siden i Photoshop.

8 Velg Vis> Fest fra programmenyen og velg Slice Tool, nestet under Crop Tool i verktøypanelet. Klikk og dra en boks med verktøyet rundt helheten av siden din for å begynne.

9 Gjør skiver rundt header, kropp og bunnteksten på siden til ytterligere dele siden. Denne prosessen er begynnelsen på å legge siden ut i en tabell format for bruk i Dreamweaver.

10 Gjør skiver rundt hvert grafisk element i header, kropp og bunntekst som menyknapper, logoer eller bilder. Prøv å holde skiver for knapper og samkjøre elementer justert. Snap-funksjonen vil hjelpe på å gjøre dette enklere.

Lagre og optimalisere design for Dreamweaver

11 Tilgang stasjonære datamaskinen og oppretter en ny mappe for websiden. Mac-brukere vil velge Finder> Ny mappe. Windows-brukere vil høyreklikke på skrivebordet og velg Ny> Mappe. Lag en ekstra mappe inne i denne ene tittelen "bilder."

12 Gå tilbake til Photoshop og velg Fil> Lagre for Web (eller Lagre for Web og enheter for CS4-brukere). Dette bringer opp en dialogboks der du vil optimalisere skiver bilder for web og Dreamweaver.

1. 3 Gjør filtype, kvalitet og fargejusteringer til hver av skivene i høyre kolonne i dialogboksen. Velg en skive ved å klikke på det i visningsvinduet i dialogboksen. Fotografiske bilder skal lagres som JPEG-filer i rullegardin rett under Preset og solid fargede bilder som logoer eller menyknappene kan lagres i GIF-format for optimal Web ytelse. Kvalitetsjusteringer kan gjøres i de to drop-downs nedenfor. De fleste bildene kan ha sin kvalitet reduseres samtidig ser fint på websiden, så senke kvaliteten til du ser en merkbar forskjell. Dette gjør siden lastes raskere.

14 Klikk på Lagre når hver skive er justert. Velg HTML og bilder i Format dropdown i dialogboksen som vises. Endre målmappen til bilder mappen i websiden mappe på skrivebordet. Din layout er nå optimalisert og klar til bruk i Dreamweaver. Elementene i siden din kan bli funnet i filer paletten i Dreamweaver, til høyre på nettstedet ditt vindu. Du kan få en titt på hele oppsettet skiver og optimalisert for web og vedlikeholdes som du laget den i Photoshop ved å åpne HTML-filen opprettet i bilder mappen når du har fullført Lagre for Web i Photoshop.

Hint

• Sørg for å skape nye lag for hvert nytt element lagt til din design. Dette gjør det enkelt å gjøre endringer senere og holder elementer isolert slik at en feil i en ikke betyr dekonstruere hele design.
• Brukere som arbeider på en versjon av Photoshop før CS3 har ikke Save for Web alternativet, men kan utføre samme funksjon i Adobe Imageready, som er inkludert med tidligere versjoner, og kan startes direkte fra Photoshop.