Photoshop er et fantastisk værktøj for dem, der ønsker at tage en visuel tilgang til web -design , eller som er intimideret af tanken om at håndtere HTML-kode. Det har alle de værktøjer, du har brug for at integrere billeder, tekst og grafik i en webside layout og alt det nødvendige for at optimere disse elementer til web og Adobe Dreamweaver i særdeleshed. Hvad du har brug
Computer
Adobe Photoshop Software (helst CS3 eller højere)
billeder og indhold til en webside ( eller dummy-indhold )
Show Flere Instruktioner
Initial Setup
1

Launch Photoshop , og vælg Filer > Ny i programmenuen . Klik på Preset drop- down menuen og vælge Internet. Juster Size drop- down til en standard web størrelse, du gerne vil have din side til at være.
2

Vælg Fil-> Åbn i programmenuen , og åbn det billede, du gerne vil bruge som din header . Dette vil skabe en ny fane eller et vindue for billedet , afhængigt af dine Photoshop -indstillinger.
3

Vælg Rektangulær Marquee Tool fra Tools panelet til venstre på din lærred. Indstil Style drop- down menu til Fixed Size i værktøjet Options panelet over din lærred og indstille bredden lig med bredden af ​​den side, du oprettede i trin 1 . Højden kan være så høj eller lav , som du gerne vil header billedet skal vises på din webside .
4

Vælg Move Tool fra Tools panelet , og flyt markeringsramme over det område af billedet du vil bruge som din header image. Vælg Image> Crop i programmenuen .
5.

Vælg Rediger> Kopier for at kopiere det beskårne header image . Skift tilbage til fanen eller vinduet med din webside lærred. Vælg Rediger> Sæt ind for at indsætte header på websiden. Ved hjælp af Move Tool, header billede, så dets øverste hjørner matcher de øverste hjørner af din webside at flytte.
Design din side og skabe Slices
6

Åben og tilføje andre elementer , du ønsker til din webside . Du kan indsætte i andre billeder med den samme proces, der anvendes til at indsætte header. Medtag en menu med tekst ved hjælp typen Tools fra panelet Værktøjer . De fleste web- sider indeholder en header , et organ, der omfatter din primære indhold og grafik eller billeder forbundet med dit indhold eller menupunkterne , og en fodnote , som ofte indeholder kontaktoplysninger eller meddelelser om ophavsret .
7

Husk den grundlæggende idé om tabeller i website design, når der udstikker din side i Photoshop.
8

vælg View > Snap i programmenuen , og vælg Slice Tool, indlejret under Crop Tool i panelet Værktøjer . Klik og træk en boks med værktøjet omkring helhed af din side til at begynde.
9

Gør skiver omkring header , krop og sidefoden på din side til yderligere opdele siden. Denne proces er begyndelsen på om siden i en tabel format til brug i Dreamweaver.
10

Make skiver omkring hver grafisk element i header , krop og footer , såsom menu knapper, logoer eller billeder . Prøv at holde skiver til dine knapper afstemt og justering elementer. Snap -funktionen vil hjælpe med at gøre dette lettere .
Lagring og Optimering af din Design for Dreamweaver
11

Adgang computerens skrivebord og oprette en ny mappe til din webside . Mac-brugere vil vælge Finder > Ny mappe . Windows-brugere vil højreklikke på skrivebordet og vælg Ny > Mappe. Oprette en mappe inde i denne ene med titlen " billeder ".
12

Retur til Photoshop , og vælg Filer > Gem til web (eller Gem til web og enheder for CS4 brugere) . Dette får en dialog boks, hvor du vil optimere dine skiver billeder til nettet og Dreamweaver .
13

Make filtype , kvalitet og farve justeringer til hver af dine skiver i højre kolonne af dialogboks . Vælg et udsnit ved at klikke på det i displayet i dialogboksen . Fotografiske billeder skal gemmes som JPEG-filer i drop- down lige under Preset og ensfarvede billeder som logoer eller menuknapper kan gemmes i GIF-format for optimal web ydeevne. Kvalitet kan foretages justeringer i de to drop-downs nedenfor. De fleste billeder kan have deres kvalitet reduceres, mens stadig ser fint på din webside , så sænke kvaliteten , indtil du ser en mærkbar forskel . Det gør din side indlæses hurtigere .
14

Klik på Gem , når hver skive er blevet justeret . Vælg HTML & Billeder i formatet dropdown i dialogboksen , der vises. Ændre destinationsmappen til billederne mappe inde websiden oprettes mappen på skrivebordet. Dit layout er nu optimeret og klar til brug i Dreamweaver. Elementerne i din side kan findes i filerne paletten i Dreamweaver, til højre for dit websted vinduet. Du kan få et kig på hele din layout skiver og optimeret til web og vedligeholdes som du har designet den i Photoshop ved at åbne . Html-fil oprettet i din billeder mappe, når du fuldført Gem til web i Photoshop.