Hvordan lage en side i Photoshop med lenker

Hvordan lage en side i Photoshop med lenker


Vanligvis vil du bruke Web side design programvare, for eksempel Dreamweaver, for å lage HTML-websider med linker til andre sider eller nettadresser. Photoshop er først og fremst en grafikk editor og bilde touch-up program. Du kan imidlertid opprette koblinger i Photoshop PSD-bilder med "Slice Tool" og deretter eksportere PSD til HTML-webside. The Slice Tool skaper "skiver", eller separate bilder, som fungerer som knapper i din HTHL websiden.

Bruksanvisning

1 Start en ny PSD bilde eller åpne et eksisterende bilde i Photoshop.

2 Lage bildet på vanlig måte, og legger siden din banner, knapper og andre objekter. Du kan bruke Photoshops tekst- og grafikkverktøy for å lage bildet, eller importere eksisterende Photoshop-kompatible bilder og plassere dem i PSD du ønsker å konvertere til en webside. Eller bruk en kombinasjon av begge metodene.

3 Velg "Slice Tool" (femte i verktøykassa). Hvis du ikke har brukt Slice Tool før, kan et annet verktøy være aktiv på knappen. Hvis ja, klikk og hold nede knappen og velg deretter "Slice Tool" fra fly-out.

4 Høyreklikk på området du skiver og velg "Edit Slice Options" fra pop-up menyen. Dette viser for stykke dialogboksen Alternativer. Det finnes flere alternativer i denne dialogboksen for å lage lenker. Skriv inn måls filnavn eller URL for koblingen i "URL" -feltet. For eksempel: "http://mydomain.com/services.html” (Uten anførselstegn).

Skriv inn målet leseren atferd i "Target" feltet. For eksempel, for å åpne lenken i en ny side, skriv "_blank". Å åpne målet koblingen i samme side, skriv "_self." (Ingen sitater for enten oppføring.)

5 Klikk "OK" for å søke på linken.

6 Fortsett å lage skiver og bruke linkene til du har skapt alle linkene du trenger.

7 Klikk "Fil" på menylinjen og velg "Lagre for Web og enheter." Dette viser Lagre for Web og enheter dialogboksen. Denne dialogboksen lar deg kontrollere flere konfigurasjonsmuligheter for HTML-siden, som bakgrunnsfarge, bildekvalitet, komprimering, metadata tags (for søkemotorer) og så videre.

8 Klikk på "Lagre" -knappen for å navn og eksportere websiden. Med mindre du endrer det, lagrer Photoshop HTML-filen i samme katalog som PSD. Dobbeltklikk på HTML-fil for å åpne den nye siden i en nettleser og sjekk linkene. Hvis koblingene ikke fungerer ordentlig, sjekk dem i Rediger Slice alternativer for å sørge for at de skrev og konfigurert.

Hint

  • Ved eksport, skaper Photoshop et eget bilde fra hver skive og plasserer det i en underkatalog som heter "bilder". Når du laster opp filen til en webserver, må du også laste opp "bilder" katalog for å opprettholde koblingene.
  • Du kan opprette en tekstboks fra en skive på denne måten: I Slice alternativer, sett "Slice Type" drop-down til Dette viser en "Tekst vist i Cell" feltet "No Image.". Skriv eller klippe ut og lime inn tekst i dette feltet. Når du eksporterer filen, slice eksport som en HTML-tabell som inneholder teksten.