Hvordan lage et bildekart Bruke Photoshop

Når du klikker på en del av en nettside bilde og din nettleser hopp til en annen webside, et bildekart er trolig ansvarlig for handlingen. Site designere kan skrive HTML-kode som skaper klikkbare hot spots på et bilde. Bygging av bildekart for hånd er tidkrevende fordi du må identifisere de eksakte koordinatene for hver hot spot. Med Slice verktøy i Photoshop, trekke deg hot spots på et bilde for å generere HTML-koden du trenger automatisk.

Bruksanvisning

Lag bildekart

1 Start Photoshop og åpne et bilde du ønsker å konvertere til et bildekart. Klikk og hold "Crop" -verktøyet for å vise en meny med andre verktøy. Klikk på "Slice" verktøyet for å velge det.

2 Klikk på et punkt inne i bildet og dra Slice verktøyet til å tegne en markeringsramme rundt den delen av bildet du vil lage klikkbare. Photoshop trekker ekstra "auto skiver" rundt andre deler av bildet. Disse auto skiver sikre at alle deler av et bilde er tatt i en skive.

3 Høyreklikk i stykket du opprettet, og velg "Edit Slice Options" for å åpne for stykke vinduet Alternativer. Skriv inn URL-en du ønsker å knytte til stykket. Du kan også erstatte standardnavnet som Photoshop ga stykket ved å skrive en ny en i "Name" tekstboksen.

4 Klikk "OK" for å lukke Slice Options vinduet og gå tilbake til bildet. Klikk et annet punkt inne i bildet og dra Slice verktøy for å opprette flere skiver etter behov.

Juster bildekart Slices

5 Velg "Slice Select Tool" fra verktøylinjen og klikk inne i en skive du vil flytte.

6 Hold nede venstre museknapp og dra stykket til et nytt sted.

7 Hold musepekeren over en av slice kanter og en linje med piler på hver ende vises. Klikk den linjen, hold nede venstre museknapp og dra musa hvis du trenger å gjøre stykket større eller mindre.

Lagre bildekart

8 Klikk på "File" og deretter "Save for Web" for å åpne Lagre for Web vinduet.

9 Klikk på "Preset", og velg ett av filtype alternativene som vises. Valgene inkluderer GIF 128 utjevnet, JPEG Høy og PNG-24.

10 Klikk "Lagre" for å åpne et vindu som viser harddisken filer og mapper. Bla til mappen der du vil lagre bildekartet filer og skriv inn et navn på bildekartet i Filnavn-tekstboksen.

11 Klikk på "Format" drop-down menyen og velg "HTML og bilder." Klikk "Lagre" for å lagre alle filene i mappen du har angitt.

Hint

• Photoshop lagrer hver skive som et eget bilde i en bildemappe. Programmet lagrer også et HTML-dokument som har samme navn som navnet du skrev inn i "File Name" tekstboksen. Hvis du finner ut at HTML-fil i File Explorer og dobbeltklikker på filen, åpnes nettleseren og viser bildekartet. Klikk ulike deler av bildekartet for å navigere til de nettadressene du tildelt skiver. For eksempel, hvis du delt en amerikansk kart i statene ved å lage en skive for hver stat, kan du klikke en stat for å gå til nettadressen tilordnet den statens skive.
• Gi skiver meningsfulle navn, og du vil finne det lettere å identifisere dem hvis du noen gang ønsker å finpusse HTML-koden som Photoshop generert. For eksempel, hvis du opprettet en skive som omringet delstaten Iowa, du kunne navnet stykket Iowa.
• Du vil sannsynligvis ønske å lagre image kartbilder i samme format som originalbildet. For eksempel, hvis det er en JPEG, velg en av JPEG-alternativene fra Preset rullegardinmenyen i Save for Web-vinduet. Velg "JPEG Low", for eksempel, og Photoshop genererer lav kvalitet JPEG-bilder. Den nedre et bildes kvalitet, jo raskere det lastes i en nettleser.
• Denne artikkelen gjelder for Adobe Photoshop CC 2014 versjonen. Noe informasjon kan variere i andre versjoner av programvaren.