Mens Photoshop er primært designet til at redigere og forbedre fotos og skabe grafik, kan du bruge programmets " Slice Tool " og " Gem til web og enheder " muligheder for at oprette websider fra din PSD billedfiler. Brug Slice Tool til at skære (eller " slice" ) PSD i sektioner. Hver skive bliver en særskilt web element, såsom en knap eller tekstfelt . Photoshop placerer hver skive i sin egen HTML-tabel . Du kan derefter tilføje hyperlinks eller andre HTML -tags til de forskellige skiver og eksportere PSD til en HTML- webside. Ting du skal
Adobe Photoshop CS3 eller nyere
Vis Flere Instruktioner
Oprettelse en webside i Photoshop
1

Start en ny PSD billede i Photoshop med dimensionerne du ønsker for din webside, som dette: Klik på " File" på menulinjen , og vælg "Ny " for at vise dialogboksen Ny . Indtast sidens bredde ( i pixels ) i " Width " feltet og højden ( i pixels ) i " Højde " feltet.
2

Type " 96 " i " Resolution" , og klik "OK". Dette skaber et tomt lærred til din webside .
3

Opret banner grafik og knapper på tværs i toppen af siden . Du kan importere eksisterende billeder og placere dem , hvor du vil have dem eller bruge Photoshops grafik og tekst værktøjer til at oprette og layout banneret.
4

Vælg " Slice Tool " ( femte knap fra toppen i Værktøjskasse ) . Hvis Slice Tool ikke vises , klik og hold på knappen og vælg " Slice Tool " fra flue -out.
5.

Træk musemarkøren rundt på første knap eller et område i banneret , hvor du ønsker at oprette et link. Photoshop opretter en kasse , eller " slice ", omkring objektet og placerer det i en tabel. Når du eksporterer siden, dine skiver vises som separate objekter i de enkelte HTML-tabeller .
6

Højreklik på skive og vælg " Rediger Udsnitsindstillinger " fra flue -menu for at åbne Slice Options dialogboks. Brug denne dialogboks til at definere egenskaberne for din knap . For eksempel ved at skrive URL- linket i "URL " feltet. Indtast målet browserside alternative tags, og så videre. Klik på "OK".
7

Gentag disse trin for at oprette knapper og redigering udsnitsindstillinger for hvert område , du ønsker at gøre klikbare.
8

Brug Slice Tool til at definere et område på siden, hvor du vil placere en tekstboks. Højreklik på skive og vælg " Rediger Udsnit Options" fra fly- out menu.
9

Klik på " Slice Type" drop- down og vælg " Intet billede ". Den " Tekst vist i celle" felt vises . Du kan enten skrive din tekst i dette felt eller kopiere og indsætte det fra et tekstbehandlingsprogram. Når du er færdig , klik på " OK ".
10

Klik på " Slice Type" drop- down og vælg " No Image . " The "Tekst vist i celle" felt vises . Du kan enten skrive din tekst i dette felt eller kopiere og indsætte det fra et tekstbehandlingsprogram , når du er færdig , klik på " OK "

Bemærk : . . dette felt understøtter de fleste HTML-tags. For eksempel , for at gøre noget af teksten kursiv blot placere teksten mellem " din tekst " tags. Brug "

" for at oprette afsnit pauser, og så videre.

Bemærk også, at teksten i denne tabel ikke vises indenfor Photoshop --- du kan ikke se det, før du eksporterer siden.
11

Fortsæt med at tilføje og definere udsnit til tekst, billeder , grafik og så videre, indtil du er færdig layoutet.
12

Klik på " File" på menulinjen og vælg "Gem til web og enheder . " Dette åbner Gem til web og enheder dialogboksen . Brug denne dialogboks til at styre baggrundsfarve, billede kompression og kvalitet, og så videre.
13

Klik på "Gem "-knappen for at navngive og eksportere websiden.
< Br >