Tutorial på Hvordan lage en webside i Adobe Photoshop

Mens Photoshop er primært laget for å redigere og forbedre bilder og lage grafikk, kan du bruke programmet "Slice Tool" og "Lagre for Web og enheter" alternativer for å lage web-sider fra PSD-bildefiler. Bruk Slice Tool til å kutte (eller "slice") PSD i seksjoner. Hver skive blir en egen web element, for eksempel en knapp eller tekstfelt. Photoshop legger hver skive i sin egen HTML-tabell. Deretter kan du legge inn linker eller andre HTML-koder til de ulike sektorene og eksportere PSD til HTML-side.

Bruksanvisning

Opprette en nettside i Photoshop

1 Start en ny PSD bilde i Photoshop med dimensjonene du ønsker din nettside, som dette: Klikk på "File" på menylinjen og velg "New" for å vise dialogboksen Ny. Skriv inn sidebredde (i piksler) i "Bredde" -feltet og høyden (i piksler) i "Høyde" -feltet.

2 Skriv "96" i "Resolution" og deretter på "OK". Dette skaper et tomt lerret for nettsiden din.

3 Opprett banner grafikk og knapper øverst på siden. Du kan importere eksisterende bilder og plassere dem der du vil ha dem eller bruke Photoshop-grafikk og tekst verktøy for å lage og layout banneret.

4 Velg "Slice Tool" (femte knappen fra toppen i verktøykassa). Hvis Slice Tool ikke vises i øyeblikket, 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 vil opprette en kobling. Photoshop oppretter en boks, eller «skive», rundt gjenstanden, og plasserer det i en tabell. Når du eksporterer siden, din stykker vises som separate objekter i enkelte HTML-tabeller.

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

7 Gjenta disse trinnene for å lage knapper og redigering stykkealternativer 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 "Edit Slice Options" fra fly-out menyen.

9 Klikk på "Slice Type" drop-down og velg "No Image." "Text vist i Cell" -feltet vises. Du kan enten skrive inn teksten i dette feltet eller kopiere og lime den inn i et tekstbehandlingsprogram. Når du er ferdig, klikk "OK".

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

Merknad: Dette feltet støtter de fleste HTML-koder. For eksempel, for å gjøre noe av teksten kursiv, bare plassere teksten mellom "<i> din tekst </ i>" tags. Bruk "<p>" for å lage avsnittsskift, og så videre.

Merk også at teksten i denne tabellen ikke vises 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 "Fil" på menylinjen og velg "Lagre for Web og enheter." Dette åpner Lagre for Web og enheter dialogboksen. Bruk denne dialogboksen til å kontrollere bakgrunnsfarge, bildekomprimering og kvalitet, og så videre.

1. 3 Klikk på "Lagre" -knappen for å navn og eksportere nettsiden.

Hint

• Hver skive blir en ny bildefil. Photoshop lagrer skivene i en underkatalog som heter "bilder". Sørg for å laste opp denne mappen når du distribuerer siden til en webserver.