Hvordan man laver en side i Photoshop med links

January 9

Hvordan man laver en side i Photoshop med links


Typisk vil du bruge webside design software, såsom Dreamweaver, for at skabe HTML websider med links til andre sider eller webadresser. Photoshop er primært en grafik editor og foto touch-up program. Men du kan oprette links i Photoshop PSD billeder med "Slice Tool" og derefter eksportere PSD til en HTML webside. Den Slice Tool skaber "skiver" eller separate billeder, der fungerer som knapper i din HTHL websiden.

Instruktioner

1 Start en ny PSD billede eller åbne et eksisterende billede i Photoshop.

2 Opret billedet som du normalt ville, tilføjer din side banner, knapper og andre genstande. Du kan bruge Photoshops tekst og grafik værktøjer til at oprette dit billede, eller importere eksisterende Photoshop-kompatible billeder og placere dem i PSD, du vil konvertere til en webside. Eller bruge en kombination af begge metoder.

3 Vælg "Slice Tool" (femte i værktøjskassen). Hvis du ikke har brugt Slice Tool før, kan et andet værktøj være aktivt på knappen. Hvis det er tilfældet, skal du klikke på og holde knappen nede og derefter vælge "Slice Tool" fra fly-out.

4 Højreklik på det område, du skiver og vælg "Rediger Slice Options" fra pop-op-menuen. Derved vises dialogboksen Udsnitsindstillinger. Der er flere muligheder i denne dialogboks til oprettelse af links. Skriv filnavn eller URL target side for linket i "URL" feltet. For eksempel: "http://mydomain.com/services.html” (Uden anførselstegn).

Indtast målet browser adfærd i "Target" feltet. For eksempel for at åbne linket i en ny side, skal du skrive "_blank". For at åbne målet linket i samme side, skriv "_self". (Ingen tilbud for enten post.)

5 Klik på "OK" for at anvende linket.

6 Fortsæt skabe skiver og anvende links, indtil du har oprettet alle de links du har brug for.

7 Klik på "File" på menulinjen, og vælg "Gem til web og enheder." Dette viser Gem til web og enheder dialogboksen. Denne dialogboks lader dig styre flere indstillingsmuligheder for din HTML-side, såsom baggrundsfarve, billedkvalitet, kompression, metadata tags (til søgemaskiner) og så videre.

8 Klik på knappen "Gem" for navn og eksportere websiden. Medmindre du ændrer det, Photoshop gemmer HTML-filen i samme mappe som PSD. Dobbeltklik på HTML-filen for at åbne den nye side i en browser og tjekke links. Hvis dine links ikke virker korrekt, tjekke dem i Rediger Udsnitsindstillinger for at sikre de er indtastet og konfigureret korrekt.

TIPS

  • Under eksport, Photoshop opretter et separat billede fra hver skive og placerer det i en undermappe med navnet "billeder". Når du uploader filen til en webserver, skal du sørge for også uploade "billeder" mappe for at vedligeholde dine links.
  • Du kan oprette en tekstboks fra en skive denne måde: I Udsnitsindstillinger, indstille "Slice Type" drop-down til Dette viser en "Tekst vist i celle" felt "Intet billede.". Skriv eller klippe og indsætte din tekst i dette felt. Når du eksporterer filen, de skive eksport som en HTML-tabel, der indeholder tekst.

relaterede artikler