Mens Photoshop er utviklet primært for å redigere og forbedre bilder og lage grafikk , kan du bruke programmet " Slice Tool" og " Save for Web & Devices " alternativer for å lage web-sider fra din PSD bildefiler. Bruk Slice Tool til å kutte (eller " slice" ) PSD i seksjoner . Hver skive blir en egen web element , for eksempel en knapp eller tekstfeltet. Photoshop plasserer hver skive i sin egen HTML-tabell . Du kan deretter legge til lenker eller andre HTML- koder til de ulike sektorene og eksportere PSD til en HTML-side . Du trenger
Adobe Photoshop CS3 eller nyere
Vis flere instruksjoner
Opprette en nettside i Photoshop
en

Start en ny PSD bilde i Photoshop med dimensjoner du ønsker for din webside, som dette: Klikk på "File " på menylinjen og velg "New " for å vise den nye dialogboksen. Skriv inn siden bredden ( i piksler ) i " bredde" -feltet og høyde ( i piksler ) i " Høyde "-feltet .
2

Type " 96 " i " Resolution" -feltet, og klikk "OK". Dette skaper et blankt lerret for nettsiden din .
3

Opprett banner grafikk og knapper øverst på siden. Du kan importere eksisterende bilder og plassere dem hvor du vil ha dem eller bruke Photoshops grafikk og tekst verktøy for å opprette og layout banneret.
4

Velg " Slice Tool" ( femte knappen fra toppen i Toolbox ) . Hvis Slice Tool ikke vises , klikk og hold knappen og velg " Slice Tool" fra fly-out .
5

Dra musepekeren rundt den første knappen eller område i banneret der du ønsker å opprette en kobling . Photoshop oppretter en boks , eller " slice ", rundt objektet og plasserer den i en tabell. Når du eksporterer side , din stykker vises som separate objekter i de enkelte HTML-tabeller .
6

Høyreklikk på skive og velg " Rediger Slice Options " fra fly-out menyen for å åpne Slice Options dialogboksen. Bruk denne dialogboksen til å definere egenskapene til knappen din . For eksempel inn URL link i "URL "-feltet . Skriv inn målet nettleser siden , alternative koder , og så videre . Klikk "OK".
7

Gjenta disse trinnene for å lage knapper og redigering slice alternativer for hvert område du ønsker å lage klikkbare.
8

Bruk Slice Tool til å definere et område på siden der du vil plassere en tekstboks . Høyreklikk på skive og velg " Rediger Slice Options " fra fly-out menyen .
9

Klikk på " Slice Type" drop- down og velg " No Image ". "Tekst som vises i celle "-feltet vises. Du kan enten skrive inn teksten i dette feltet eller kopiere og lime inn fra et tekstbehandlingsprogram. Når du er ferdig , klikk " OK ".
10

Klikk på " Slice Type" drop- down og velg " No Image . " The " Tekst som vises i celle "-feltet vises. Du kan enten skrive teksten i dette feltet eller kopiere og lime inn fra et tekstbehandlingsprogram Når du er ferdig , klikk " OK "

. Merk: . dette feltet støtter de fleste HTML-koder. For eksempel , for å gjøre noe av teksten kursiv , bare plassere teksten mellom " din tekst < /i> " tags . Bruk "

" for å lage avsnitt bryter , og så videre.

Merk også at teksten i denne tabellen ikke vises inne i Photoshop --- du kan ikke se det før du eksporterer siden.
11

Fortsett å legge til og definere skiver for tekst, bilder , grafikk og så videre, helt til du er ferdig med oppsettet .
12

Klikk på " File" på menylinjen og velg "Lagre for Web og enheter . " Dette åpner Save for Web & Devices dialogboksen . Bruk denne dialogboksen til å kontrollere bakgrunnsfarge, bilde komprimering og kvalitet , og så videre.
13

Klikk på " Lagre" -knappen for å navngi og eksportere nettside .