Hvordan kode en PSD weboppsett

Du kan opprette og kode PSD weblayouter i Photoshop. PSD er Photoshop native filformat. For å kode en PSD for Web, start ved å utforme layouten i Photoshop. Definer Web sidedeler, som header, bunntekst, sidebar og knapper, med Slice Tool, og deretter bruke Photoshop stykke dialogboksen Alternativer for å kode de ulike delene av oppsettet.

Bruksanvisning

1 Åpne Photoshop PSD-filen du ønsker å konvertere til en weblayout, eller starte en ny Photoshop-dokument ved å klikke på "File" -menyen og velge "New". Dette åpner dialogboksen Ny. Klikk på "Preset" drop-down menyen og velg "Web". Dette viser alternativer for å sette opp en webside layout. Du kan velge en av de forhåndsinnstilte Web sidestørrelser fra "Size" drop-down menyen, eller definere en egendefinert størrelse med "bredde" og "Høyde" feltene. Klikk på "OK".

2 Legg ut websiden som ønsket. For eksempel kan du lage en header bilde øverst på siden, samt en navigasjonsmeny, eller du kan lage en meny ned til venstre på siden. Du kan også opprette en bunntekst på tvers nederst på siden. Dine designmuligheter er nesten ubegrenset.

3 Velg "Slice Tool" i verktøypanelet. The Slice Tool ligger på Crop Tool fly-out menyen. Klikk og hold "Crop Tool," og velg deretter "Slice Tool" fra flyout.

4 Hold museknappen og dra "Slice Tool" over den første delen av websiden. The Slice Tool skiver PSD i seksjoner og plasserer hver del i en HTML-tabell. For eksempel kan du lage en skive for overskriften, bunnteksten, sidepanelet og hver knapp eller menyelement.

5 Skjær opp PSD som ønsket.

6 Klikk og hold "Slice Tool" i Verktøy-panelet for å vise fly-out menyen, og velg deretter "Slice Select Tool."

7 Dobbeltklikk på en skive du ønsker å kode. For eksempel, for å gjøre en knapp en klikkbar lenke, dobbeltklikker du på knappen sin skive. Dette åpner for stykke dialogboksen Alternativer.

8 Klikk på "URL" -feltet og skriv linken destinasjon.

9 Klikk på "Message Text" feltet og skriv en melding. Dette er teksten som vises når brukeren svever musepekeren over skive i en nettleser.

10 Velg "Alt Tag" feltet og skriv inn alternativ tekst for stykket. Dette er teksten som vises dersom nettleseren ikke kan vise bildet. I stedet, en tekst link som inneholder alt koden teksten vises.

11 Gjenta denne prosessen for hver skive du ønsker å kode.

12 Klikk på "File" -menyen og velg "Lagre for Web og enheter." Dette åpner Lagre for Web og enheter dialogboksen.

1. 3 Klikk "Lagre" for å åpne "Lagre optimalisert som" dialogboksen.

14 Klikk på "Format" drop-down menyen og velg "HTML og bilder", og klikk deretter på "Slices" drop-down menyen og velg "Alle Slices."

15 Klikk på "Lagre". Photoshop lagrer skivet opp PSD Web layout som en HTML-fil og oppretter separate bildefiler for hver skive, lagre dem i en undermappe kalt "bilder".

Hint

• Du kan gjøre endringer i hmtl koden i Dreamweaver eller et tekstredigeringsprogram, for eksempel Notisblokk.
• Når du laster opp HTML-siden til en webserver, ikke glem å laste opp bilder mappen. Ellers vil PSD Web layout ikke vises riktig.