Adobe Photoshop er primært kendt som et kraftfuldt værktøj til billedredigering og manipulation, men det gemmer også på funktioner, der er relevante for webdesignere. En af disse funktioner gør det muligt at definere specifikke områder inden for et billede, som kan fungere som hotspots – altså klikbare områder, der linker til en URL, når billedet bruges på en hjemmeside. Selvom Photoshop ikke kan erstatte dedikerede webudviklingsprogrammer, kan det effektivt generere både billederne og den nødvendige HTML-kode til at implementere disse klikbare zoner, også kendt som billedkort (image maps).
https://www.youtube.com/watch?v=0gcJCfcAhR29_xXO
Denne teknik er især nyttig, når man designer komplekse billeder eller bannere, hvor forskellige dele af billedet skal lede brugeren til forskellige destinationer. Forestil dig et interaktivt produktbillede, hvor hvert element kan klikkes på for at få mere information, eller et navigationsbanner lavet som ét stort billede, hvor forskellige knapper er indlejret i designet. Ved at bruge Photoshops værktøjer kan du definere disse områder præcist og generere den kode, der gør dem funktionelle på en hjemmeside.
Forstå Konceptet: Hotspots og Billedkort
Før vi dykker ned i processen i Photoshop, er det vigtigt at forstå, hvad vi faktisk skaber. Et billedkort (image map) er en HTML-struktur, der tillader dig at linke forskellige områder af et billede til forskellige destinationer (URL'er). I stedet for at hele billedet er ét stort link, kan du definere flere mindre, ikke-rektangulære områder inden for billedet, som hver især har sit eget link. Photoshop forenkler denne proces ved at lade dig visuelt tegne disse områder på billedet og derefter automatisk generere både de opdelte billedfiler (hvis du vælger at opdele billedet) og den HTML-kode, der binder det hele sammen som et billedkort.
Denne metode var mere udbredt i de tidlige dage af webdesign, men har stadig visse anvendelser, især for statiske, billedtunge elementer, hvor en hurtig måde at tilføje flere links er nødvendig, uden at skulle opdele billedet manuelt i mange små filer og samle dem i en tabel eller ved hjælp af CSS. Photoshop gør hele denne 'skæring' og kodegenerering til en integreret del af eksportprocessen.
Trin-for-Trin: Oprettelse af Klikbare Områder i Photoshop
Processen i Photoshop involverer primært brugen af et specifikt værktøj og en særlig eksportfunktion. Her er trinene:
Trin 1: Åbn dit Billede i Photoshop
Start med at åbne det billede i Adobe Photoshop, som du ønsker at tilføje klikbare områder til. Sørg for, at billedet er færdigredigeret og klar til webbrug med hensyn til dimensioner og filstørrelse.
Trin 2: Brug Slice Tool (Uddelingsværktøjet)
Find Slice Tool (Uddelingsværktøjet) i værktøjspaletten. Det er ofte grupperet med Crop Tool (Beskæringsværktøjet). Du kan aktivere det ved at trykke på tasten 'C' flere gange, indtil Slice Tool er valgt, eller ved at højreklikke på Crop Tool-ikonet og vælge det fra menuen.
Slice Tool bruges til at opdele billedet i mindre segmenter eller 'slices'. Disse slices kan enten bruges til at eksportere billedet som flere separate billedfiler, eller de kan bruges til at definere de klikbare områder til et billedkort. I vores tilfælde bruger vi dem til det sidstnævnte formål, selvom eksportprocessen ofte kombinerer begge.
Med Slice Tool valgt, tegner du simpelthen rektangulære områder over de dele af billedet, som du ønsker skal være klikbare. Klik og træk med musen for at oprette en ny slice. Photoshop opretter automatisk 'auto-slices' omkring de manuelt oprettede slices for at dække resten af billedområdet.
Trin 3: Juster Slices med Slice Select Tool
Når du har oprettet dine slices, kan du justere dem ved hjælp af Slice Select Tool (Værktøjet til valg af uddelinger). Dette værktøj er grupperet sammen med Slice Tool. Vælg det, og klik derefter på en slice for at markere den. Når en slice er markeret, kan du ændre dens størrelse og placering ved at trække i håndtagene eller flytte hele feltet.
Det er vigtigt at bemærke forskellen mellem 'User Slices' (oprettet af dig) og 'Auto Slices' (oprettet automatisk af Photoshop). User Slices har en tynd, solid linje omkring sig, mens Auto Slices har stiplede linjer. Du kan kun tildele linkinformation til User Slices.
Trin 4: Tildel URL'er og Egenskaber til Slices
Dette er kernen i at gøre områderne klikbare. Med Slice Select Tool valgt, dobbeltklikker du på en User Slice, som du ønsker at tildele et link til. Dette åbner dialogboksen 'Slice Options' (Indstillinger for uddeling).
I denne dialogboks finder du flere vigtige felter:
- Name (Navn): Et navn til slicen (valgfrit, men nyttigt til organisering).
- Type (Type): Sørg for, at denne er sat til 'Image' (Billede).
- URL: Her indtaster du den fulde webadresse (URL), som slicen skal linke til, f.eks.
https://www.dinwebsite.dk/produkter. - Target (Destination): Bestemmer, hvor linket skal åbnes. Standardværdier inkluderer
_self(åbner i samme vindue/fane),_blank(åbner i et nyt vindue/fane),_parent, og_top. For de fleste websteder vil_blankeller_selfvære de mest relevante valg. - Message (Meddelelse): Tekst, der vises i browserens statuslinje, når musen holdes over slicen (mindre relevant i moderne browsere).
- Alt Tag (Alt-tekst): Vigtig for tilgængelighed og SEO. Indtast en kort beskrivelse af indholdet af slicen eller linkets destination. Denne tekst vises, hvis billedet ikke indlæses, og læses op af skærmlæsere for synshandicappede brugere.
Udfyld URL-feltet med det ønskede link. Vælg eventuelt en Target og tilføj en Alt Tag. Klik 'OK' for at gemme indstillingerne for den pågældende slice. Gentag denne proces for alle de User Slices, du ønsker at gøre klikbare.
Trin 5: Eksportér til Web (Legacy)
Når du har defineret alle dine slices og tildelt links, er du klar til at eksportere. Gå til menuen File > Export > Save for Web (Legacy)... (Filer > Eksportér > Gem til web (ældre)...).
Dette åbner dialogboksen 'Save for Web (Legacy)'. I denne dialogboks kan du optimere billedkvaliteten og filstørrelsen for webbrug. Vælg det ønskede filformat (f.eks. JPEG, PNG, GIF) og juster indstillingerne for at opnå den bedste balance mellem kvalitet og filstørrelse. Vælg eventuelt forskellige optimeringsindstillinger for forskellige slices, hvis du har opdelt billedet i mange dele.
Det vigtigste trin for at generere HTML-koden er i bunden af dialogboksen. Klik på knappen 'Save...' (Gem...). I dialogboksen 'Save Optimized As' (Gem optimeret som) skal du vælge en mappe til at gemme filerne i.
Nedenfor filnavnsfeltet finder du rullemenuen 'Format'. Vælg 'HTML and Images' (HTML og billeder). Dette sikrer, at Photoshop ikke kun gemmer billedfilerne (opdelt efter dine slices), men også genererer en HTML-fil, der indeholder koden til at samle billedet igen og oprette billedkortet med dine definerede links.
Under 'Settings' (Indstillinger) skal du vælge 'Default Settings' (Standardindstillinger) eller 'Other...' (Andet...) for at finjustere HTML-outputtet. Under 'Other...' kan du i 'HTML' fanebladet specificere, hvordan HTML'en skal genereres, f.eks. om den skal inkludere CSS. For et simpelt billedkort er standardindstillingerne ofte tilstrækkelige.
Klik 'Save' (Gem). Photoshop gemmer nu en HTML-fil og en mappe med billedfilerne (en fil for hver slice).
Implementering på din Hjemmeside
Nu har du en HTML-fil og en mappe med billeder. Åbn HTML-filen, som Photoshop har genereret, i en teksteditor. Du vil finde HTML-kode, der samler billedet ved hjælp af en tabel (typisk) og definerer billedkortet med de links, du har angivet. Du skal kopiere den relevante HTML-kode og indsætte den i kildekoden på den webside, hvor billedet skal vises. Sørg for, at billedfilerne (mappen 'images' eller lignende, som Photoshop opretter) også uploades til din webserver, i den korrekte relative sti i forhold til din HTML-fil.
Den genererede HTML vil typisk indeholde et <img> tag, der refererer til billedet (eller den første slice, hvis billedet er opdelt), og et <map> tag med <area> tags inden i. Hvert <area> tag definerer et klikbart område (baseret på dine slices) og indeholder linkets URL og andre egenskaber som Target og Alt Tag.
Eksempel på den genererede HTML-struktur (forenklet):
<img src="images/ditbillede_slice_01.png" alt="Dit Billede" usemap="#Map">
<map name="Map">
<area shape="rect" coords="X1,Y1,X2,Y2" href="din-url-1.html" alt="Beskrivelse 1">
<area shape="rect" coords="X3,Y3,X4,Y4" href="din-url-2.html" alt="Beskrivelse 2">
<!-- Flere area tags for andre slices -->
</map>
coords-attributten specificerer koordinaterne for det klikbare område (rektanglet i dette tilfælde, da slices er rektangulære). href er linkets destination.
Fordele og Ulemper ved Billedkort fra Photoshop
Fordele:
- Relativt hurtigt at oprette flere klikbare områder på et enkelt, stort billede direkte fra Photoshop.
- Genererer både billedfiler og den nødvendige HTML-kode.
- Visuelt intuitiv proces ved brug af Slice Tool.
Ulemper:
- Billedkort, især dem baseret på slices, er typisk rektangulære. Hvis du har brug for ikke-rektangulære hotspots, skal du redigere HTML'en manuelt eller bruge andre værktøjer.
- HTML'en genereret af Photoshops 'Save for Web (Legacy)' er ofte baseret på tabeller, hvilket betragtes som en forældet praksis for layout i moderne webdesign (CSS er foretrukket).
- Mindre fleksibelt end moderne webteknikker (CSS, SVG, JavaScript) til at skabe interaktive billeder, især med hensyn til responsivt design. Billedkort har det med at have faste koordinater, som ikke skalerer godt med billedet på forskellige skærmstørrelser.
- Processen ligger i en 'Legacy' (ældre) funktion i Photoshop, hvilket indikerer, at Adobe selv ser den som mindre relevant for moderne workflows.
Alternative Metoder i Moderne Webdesign
I dagens webdesignverden er billedkort fra Photoshop sjældent den foretrukne metode til at opnå klikbare områder i billeder. Mere almindelige tilgange inkluderer:
- CSS: Brug af CSS til at positionere transparente links (
<a>tags) oven på et billede. Dette giver fuld kontrol over layout og responsivitet. - SVG (Scalable Vector Graphics): Hvis din grafik er vektorbaseret, kan du oprette interaktive elementer direkte i SVG-filen.
- JavaScript: Brug af JavaScript til at håndtere klik-events baseret på museposition over et billenelement.
- Dedikerede Billedkort Generatorer: Der findes onlineværktøjer og libraries, der er bedre egnet til at oprette responsivt billedkort end Photoshops output.
Ikke desto mindre forbliver Photoshops Slice Tool og Save for Web (Legacy) en hurtig måde at generere et grundlæggende billedkort på, især for enkle, statiske applikationer eller til hurtig prototyping.
Ofte Stillede Spørgsmål
Kan jeg lave ikke-rektangulære hotspots i Photoshop?
Med Slice Tool i Photoshop kan du kun oprette rektangulære slices. Selvom HTML-billedkort teknisk understøtter polygonale og cirkulære områder via <area shape="poly"> og <area shape="circle">, kan Photoshop ikke generere disse former direkte via Slice Tool. Du ville skulle redigere den genererede HTML manuelt for at ændre formen på dine hotspots.
Erstatter Photoshops funktion en fuld webudviklingsapplikation?
Absolut ikke. Photoshops funktion til at generere HTML er meget begrænset og primært designet til at understøtte eksport af slices og billedkort. Den kan ikke håndtere komplekse layouts, interaktivitet ud over simple links, databaseforbindelser eller andre funktioner, der er nødvendige for en moderne hjemmeside. Den leverer kun et lille stykke HTML, der skal integreres i en eksisterende webside.
Hvilket billedformat skal jeg vælge, når jeg gemmer til web?
Valget af format afhænger af billedets indhold:
• JPEG: Bedst til fotografier og billeder med mange farveovergange.
• PNG: Bedst til grafik med skarpe linjer, tekst eller billeder, der kræver gennemsigtighed (PNG-24 understøtter fuld alfa-gennemsigtighed, PNG-8 understøtter kun 1-bit gennemsigtighed).
• GIF: Bedst til simple animationer, grafik med få farver eller billeder med store områder af ensfarvet farve. Kan også håndtere 1-bit gennemsigtighed.
Vælg det format, der giver den bedste billedkvalitet med den laveste filstørrelse. Du kan bruge 'Optimize To File Size' funktionen i 'Save for Web (Legacy)' dialogboksen for at finde den optimale balance.
Er billedkort responsivt?
Som standard er billedkort genereret af Photoshop (med faste koordinater) ikke responsivt. Når billedet skalerer ned på mindre skærme, forbliver koordinaterne for hotspots faste i forhold til det originale billede, hvilket betyder, at de klikbare områder ikke længere stemmer overens med de visuelle elementer i det skalererede billede. For at gøre billedkort responsivt kræves yderligere HTML, CSS eller JavaScript, som ikke genereres automatisk af Photoshop.
At tilføje klikbare områder til dine billeder i Photoshop ved hjælp af Slice Tool og 'Save for Web (Legacy)' funktionen er en specifik teknik, der kan være nyttig i visse scenarier. Selvom den ikke er den mest moderne tilgang til webdesign, giver den en hurtig og visuel metode til at definere hotspots og generere den nødvendige kode og billeder til et billedkort. Ved at mestre disse trin kan du udvide funktionaliteten af dine webgrafikker og skabe mere interaktive elementer på dine websider.
Hvis du vil læse andre artikler, der ligner Lav Klikbare Områder i Photoshop Billeder, kan du besøge kategorien Fotografi.