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 Web , og Adobe Dreamweaver spesielt. Du trenger
Computer
Adobe Photoshop -programvare (fortrinnsvis CS3 eller høyere)
bilder og innhold for en webside ( eller dummy innhold )
Vis flere instruksjoner
Initial Setup
en

Launch Photoshop og velg Fil> Ny fra programmenyen. Klikk på Preset drop- down menyen og velg Web . Juster Størrelse drop- down til en standard Web størrelsen du vil at siden skal være .
2

Velg Fil - > Åpne fra programmenyen og åpne bildet du ønsker å bruke som din header . Dette vil skape en ny fane eller vindu for bildet , avhengig av Photoshop innstillinger .
3

Velg Rectangular Marquee Tool fra Verktøy -panelet til venstre for lerret. Sett Stil drop- down menyen for å Faststørrelse i Tool Options panelet over din lerret 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 bildet skal vises på websiden .
4

Velg Move Tool fra Verktøy -panelet og flytte den stiplede rammen over området av bildet du vil bruke som header image . Velg Bilde > Beskjær fra programmenyen .
5

Velg Rediger> Kopier for å kopiere den beskjæres header image . Bytt tilbake til fanen eller vinduet som inneholder websiden lerret. Velg Rediger > Lim inn for å lime inn header på websiden. Ved hjelp av Move Tool , flytt header image slik at de øverste hjørnene matche de beste hjørnene av websiden.
Utforme Page og Lage Slices
6

Åpen 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. Inkluderer en meny med tekst ved hjelp av den typen verktøy fra Verktøy -panelet . De fleste websider inneholde en overskrift , et organ som inkluderer ditt viktigste innhold og grafikk eller bilder knyttet til innholdet eller menyelementene , og en bunntekst , som ofte inneholder kontaktinformasjon eller opphavsrett .
7

Husk grunntanken i tabeller i webdesign når legge ut siden din i Photoshop.
8

velg Vis> Fest fra programmenyen , og velg Slice Tool, nestet under Crop Tool i Verktøy- panelet. Klikk og dra en boks med verktøyet rundt helheten av siden for å begynne.
9

Gjør skiver rundt header , kropp og bunntekst på siden din for 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 av overskriften, kropp og bunntekst , som menyer, knapper, 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 datamaskinens skrivebord og opprette en ny mappe for din webside. Mac-brukere vil velge Finder > Ny mappe . Windows-brukere vil høyreklikke på skrivebordet og velg Ny > Mappe . Opprette en ekstra mappe i denne ene tittelen " bilder. "
12

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 .
13

Gjør filtype, kvalitet og farge justeringer til hver av skiver i høyre kolonne i dialogboksen. Velg en skive ved å klikke på den i visningsvinduet i dialogboksen . Fotografiske bilder skal lagres som JPEG- filer i drop- down like under Preset og ensfarget bilder som logoer eller menyknappene kan lagres i GIF -format for optimal Web ytelse. Kvalitet justeringer 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 at siden lastes raskere .
14

Klikk på Lagre når hver skive er blitt justert . Velg HTML og bilder i formatet dropdown i dialogboksen som vises. Endre målmappen til bildene mappen inne websiden mappe opprettet på skrivebordet . Layouten er nå optimalisert og klar til bruk i Dreamweaver . Elementene på siden din kan bli funnet i filer palett i Dreamweaver , til høyre for nettstedet ditt vindu . Du kan få en titt på hele oppsettet skiver og optimalisert for Web og vedlikeholdes slik du utformet den i Photoshop ved å åpne . Html -fil opprettet i bilder -mappen når du har fullført Save for Web i Photoshop .