I en verden hvor visuelt indhold dominerer, bliver evnen til at gøre billeder mere interaktive stadig vigtigere. Selvom et simpelt billedformat som JPEG ikke i sig selv kan indeholde klikbare links, tilbyder Adobe Photoshop metoder til at indlejre linkfunktionalitet i dine billeder, afhængigt af det endelige eksportformat. Dette åbner op for muligheder inden for webdesign, interaktive præsentationer og digitale dokumenter, hvor du ønsker, at specifikke områder af et billede eller elementer i en fil skal føre brugeren videre til en anden destination, hvad enten det er en hjemmeside, en fil eller en anden del af et dokument.
Der er primært to scenarier, hvor du kan tilføje links i Photoshop, baseret på det format, du eksporterer til: at linke til filer i PDF- eller SWF-eksport, og at skabe klikbare områder på et billede til webbrug (HTML-eksport).
Link til Filer i PDF og SWF
Når du arbejder med dokumenter eller præsentationer, der skal eksporteres som PDF- eller SWF-filer direkte fra Photoshop (via funktioner som f.eks. 'Save As' eller 'Export' der understøtter disse formater og interaktive elementer), kan du tilføje links, der peger på eksterne filer. Når en bruger klikker på et sådant link i den eksporterede PDF- eller SWF-fil, vil den linkede fil åbne i sit standardprogram – for eksempel vil en .doc-fil åbne i Microsoft Word.
Processen til at tilføje disse fil-links afhænger typisk af, hvordan du opretter indholdet i Photoshop, der skal blive til PDF'en eller SWF'en, og hvilke interaktive paneler eller indstillinger der er tilgængelige under eksporten. Det er afgørende, at den fil, du linker til, er tilgængelig for den person, der åbner den eksporterede fil. Hvis du f.eks. deler en PDF med en kollega, skal den linkede fil ligge på en delt server eller et sted, som kollegaen har adgang til, og ikke kun på din lokale harddisk. Photoshop sikrer, at linket er indlejret korrekt i eksportfilens metadata eller struktur, så den kan fortolkes af PDF-læsere eller SWF-afspillere til at åbne den specificerede fil.
Denne metode er særligt nyttig, når du opretter digitale porteføljer, interaktive rapporter eller præsentationer, hvor du ønsker at give seeren nem adgang til relaterede dokumenter, regneark eller andre filer uden at skulle indlejre selve filen direkte i PDF'en eller SWF'en.
Skab Klikbare Områder med Slice Tool til Web (HTML)
Den mest almindelige forespørgsel om links i Photoshop handler ofte om at gøre specifikke områder af et billede klikbare, typisk med henblik på visning på en hjemmeside. Som nævnt kan et JPEG-billede alene ikke indeholde et link. Løsningen i Photoshop involverer brugen af Slice Tool og en specifik eksportfunktion, der genererer den nødvendige HTML-kode til at håndtere linksene.
Slice Tool lader dig opdele dit billede i mindre rektangulære områder, kaldet 'slices'. Hver slice kan derefter tildeles specifikke webegenskaber, herunder et URL-link. Når du eksporterer billedet ved hjælp af funktionen 'Save for Web (Legacy)', genererer Photoshop ikke kun de billedfiler, der svarer til hver slice, men også en HTML-fil, der samler disse billeder og indeholder koden for linksene. Når denne HTML-fil åbnes i en webbrowser, vil billedet fremstå som en helhed, men de områder, du definerede med Slice Tool og tildelte links, vil være klikbare.
Trin for Trin: Tilføjelse af Link til et Billede via Slice Tool
Processen for at tilføje et link til et område af et billede i Photoshop, beregnet til webvisning, følger typisk disse trin:
- Åbn Dit Billede i Photoshop: Start med at åbne det JPEG-billede eller et hvilket som helst andet billedformat, du ønsker at redigere. Gå til 'File' > 'Open' og vælg din billedfil. Billedet vil typisk åbne som et baggrundslag.
- Tilføj Elementet der skal Hyperlinkes: Hvis det er et specifikt element (f.eks. et logo eller et ikon) på billedet, du vil gøre klikbart, kan det være en god idé at tilføje det som et separat lag. Du kan gøre dette ved at gå til 'File' > 'Place Embedded' og vælge den fil, du vil indsætte. Placer og juster elementet, hvor du ønsker det skal være på billedet. Dette element definerer det område, der skal gøres klikbart.
- Brug Slice Tool: Vælg Slice Tool fra værktøjslinjen. Dette værktøj kan være gemt under beskæringsværktøjet (Crop Tool). Klik og træk med Slice Tool for at tegne en rektangulær boks (en slice) rundt om det område af billedet, som du vil gøre klikbart. Hvis du tilføjede et specifikt element i trin 2, skal du tegne slicen, så den præcist dækker dette element.
- Rediger Slice Indstillinger: Højreklik på den slice, du netop har oprettet. En kontekstmenu vil poppe op. Vælg 'Edit Slice Options' fra denne menu. En dialogboks med indstillinger for slicen vil nu blive vist.
- Tilføj Hyperlinket: I 'Slice Options' dialogboksen finder du et felt mærket 'URL'. Dette er her, du indtaster den webadresse (URL), som slicen skal linke til. Indtast den fulde adresse, startende med http:// eller https:// (f.eks. 'https://www.eksempel.dk'). Du kan også angive et 'Target' (f.eks. '_blank' for at åbne linket i et nyt faneblad/vindue), men det vigtigste for linkfunktionaliteten er URL-feltet. Klik 'OK' for at gemme indstillingerne for slicen.
- Eksporter Dit Billede (Save for Web): Det afgørende skridt for at få linket til at virke på web er eksporten. Gå til 'File' > 'Export' > Save for Web (Legacy). Dette åbner en omfattende dialogboks til weboptimering. Vælg det ønskede format, som i dette tilfælde er JPEG, og juster eventuelle kvalitetsindstillinger. Vigtigst er knappen 'Save...'. Klik på 'Save...', vælg destinationen på din computer, og Photoshop vil nu generere en HTML-fil og de nødvendige billedfiler (opdelt ifølge dine slices).
Det er vigtigt at forstå, at den resulterende JPEG-fil (eller rettere, de resulterende JPEG-filer for hver slice) ikke indeholder linket i sig selv. Linket er gemt i den medfølgende HTML-fil, som Photoshop genererer. For at se og bruge det klikbare billede online, skal du uploade både HTML-filen og mappen med billedfiler (typisk navngivet 'images' eller lignende) til din webserver. Når HTML-filen åbnes i en webbrowser, vil den samle slicesene og aktivere linksene.
Denne teknik er utrolig alsidig og kan bruges til mange formål, fra at skabe klikbare menuer eller navigation i et billede til at tilføje interaktive hotspots på et kort eller en produktvisning i e-handel. Selvom det ikke er den eneste måde at skabe interaktivitet på web, er det en effektiv metode, der udnytter Photoshops evne til at håndtere billeder og generere webklart indhold via Save for Web funktionen.
Husk, at succesfuld implementering af disse links afhænger af korrekt eksport og, i web-tilfældet, korrekt upload af *alle* de genererede filer (HTML og billeder) til det sted, hvor de skal tilgås.
Ved at mestre disse teknikker kan du tilføje et lag af funktionalitet og engagement til dine visuelle kreationer direkte fra Photoshop, hvad enten de er tiltænkt digitale dokumenter eller online platforme.
Hvis du vil læse andre artikler, der ligner Tilføj Links i Photoshop Billeder, kan du besøge kategorien Redigering.