Hvordan lager jeg en hyperkobling i Photoshop?

...

Lag to eller flere klikkbare områder ved å legge til nye stykker i Photoshop.

Bildekreditt: Bilde med tillatelse fra Adobe.

Ved å bruke Slice-verktøyet i Adobe Photoshop CC kan du gjøre et hvilket som helst bilde, eller deler av et bilde, til en klikkbar hyperkobling. Haken med denne funksjonen er at for å få hyperkoblingen til å fungere, må du lagre bildet som en HTML-fil i stedet for en vanlig JPG eller PNG. Heldigvis er dette en funksjon alle kan bruke, selv om du ikke er en ekspert på koding. Photoshop lager HTML-koden for deg og legger inn bildet i et nettvennlig bildeformat.

Trinn 1

...

Velg "Slice Tool."

Bildekreditt: Bilde med tillatelse fra Adobe.

Åpne et hvilket som helst bilde i Photoshop. Ideelt sett bør det være noe stort nok til å vises godt i en nettleser. Velg "Slice Tool" fra verktøykassen. Hvis det ikke er synlig, klikk og hold nede i høyre hjørne av beskjæringsverktøyet, eller et annet verktøy i gruppen som er synlig, og velg deretter "Skiveverktøy".

Dagens video

Steg 2

...

Dra markøren over bildet for å lage en skive.

Bildekreditt: Bilde med tillatelse fra Adobe.

Dra markøren over området du ønsker skal være klikkbart. For å lage en enkelt hyperkobling på et bilde, kan du dra markøren over hele bildet.

Trinn 3

...

Lag så mange skiver du ønsker.

Bildekreditt: Bilde med tillatelse fra Adobe.

Dra Slice Tool-markøren over bare en del av bildet hvis du vil ha mer enn én hyperkobling. Etter at du har sluppet museknappen, kan du lage et nytt stykke for neste hyperkobling. Hvis ønskelig, kan du opprette et dusin eller flere hyperkoblinger på et enkelt bilde.

Trinn 4

...

Dobbeltklikk på et stykke for å legge til en hyperkobling.

Bildekreditt: Bilde med tillatelse fra Adobe.

Dobbeltklikk på en skive med skiveverktøyet for å åpne vinduet for skivealternativer. For å lage en hyperkobling må du skrive inn nettsidens adresse i "URL"-feltet. Mens de andre feltene er valgfrie, vil bruk av et navn hjelpe til med å skille en lenke fra en annen. Å legge til "_blank" i Target-feltet spesifiserer at koblingen skal åpnes i en ny nettleserfane. Alt Tag-feltet er teksten som vises hvis bildet ditt ikke er synlig i ikke-grafiske nettlesere eller mens bildet lastes inn. Meldingstekst-feltet er det nettleseren viser i stedet for URL-en i statuslinjen.

Trinn 5

...

Lagre filen i HTML-format.

Bildekreditt: Bilde med tillatelse fra Adobe.

Velg "Lagre for web" fra Fil-menyen når koblingene dine er fullført. Velg enten "PNG-24" eller "JPG" som forhåndsinnstilling, og klikk deretter på "Lagre"-knappen. Klikk på "Format"-menyen og velg "HTML og bilder." Dette endrer filformatet til HTML. Etter at du har klikket på "Lagre", oppretter Photoshop en enkelt HTML-side ved hjelp av bildet og koblingene du opprettet. Selve bildefilen lagres i en Bilder-mappe. Last opp både HTML-filen og Bilder-mappen til samme katalog på nettstedet ditt ved å bruke din favoritt FTP-klient.

Tips

Med et grunnleggende tekstredigeringsprogram som Notisblokk, kan du redigere HTML-filens kode som du ville gjort med en hvilken som helst webside. For eksempel, hvis du foretrekker å beholde nettstedbildene dine i en annen mappe, kan du endre den angitte mappen "/images" til hvilken som helst mappe du velger og deretter flytte bildet til den mappen.

Du trenger ikke Photoshop for å legge til en hyperkobling til et bilde på en webside eller e-post. De fleste e-postprogrammer inkluderer en hyperkoblingsfunksjon, vanligvis tilgjengelig bare ved å høyreklikke på bildet etter å ha satt det inn i meldingen. Hvis du laster opp bildet til nettstedet ditt, kan du legge det til som et klikkbart bilde på en hvilken som helst side ved å bruke HTML5-kode som: