Hoe maak je een afbeelding Kaart Photoshop maken

Engage bezoekers van de site met de afbeelding kaarten die functioneren als koppelingen . Shironosov / iStock / Getty Images

Wanneer u op een deel van het beeld van een website en uw browser springt naar een andere webpagina, een afbeelding kaart is waarschijnlijk verantwoordelijk voor die actie.Website ontwerpers kunnen HTML-code die klikbare hot spots op elke foto creëert schrijven.Construeren image maps met de hand is tijdrovend, omdat u de exacte coördinaten van elke hot spot moet identificeren.Met de Slice functie in Photoshop, je tekent hot spots op de afbeelding om de HTML-code die u nodig hebt automatisch te genereren.

Maak Afbeelding Kaart

  1. Start Photoshop en open een afbeelding die u wilt omzetten in een beeld kaart.Klik en houd de "Crop" tool om een ​​menu met andere instrumenten te geven.Klik op de "Slice" tool om het te selecteren.

  2. Klik op een punt binnen het beeld en sleep de Slice tool om een ​​selectiekader te tekenen rond het gedeelte van het beeld dat u wilt aanklikbaar maken.Photoshop trekt extra "auto plakken" rond andere del

    en van het beeld.Deze automatische segmenten zorgen dat alle delen van een beeld worden opgenomen in een plak.

  3. Klik met de rechtermuisknop in het segment dat u hebt gemaakt en selecteer "Edit Slice Options" om het venster Slice Options te openen.Typ de URL die u wilt associëren met de slice.U kunt ook de standaard naam die Photoshop gaf de slice door het intikken van een nieuwe in de "Name" tekstvak vervangen.

  4. Klik op "OK" om het venster Slice opties te sluiten en terug te keren naar het beeld.Klik op een ander punt binnen het beeld en sleep het gereedschap Segment extra schijfjes te maken als dat nodig is.

aanpassen Afbeelding Kaart Slices

  1. Selecteer de "Slice Select Tool" op de werkbalk en klik in een stukje dat u wilt verplaatsen.

  2. Houd de linkermuisknop ingedrukt en sleep het segment naar een nieuwe locatie.

  3. Houd de muiscursor over een van de randen van de slice en een lijn met pijlen aan beide uiteinden weergegeven.Klik op die lijn, houd de linkermuisknop ingedrukt en sleep de muis als u de slice groter of kleiner te maken.Afbeelding

Opslaan Kaart

  1. Klik op "File", gevolgd door "Opslaan voor web" om het opslaan te openen voor het Web-venster.

  2. Klik op "Preset" en selecteer een van de bestandstype-opties die worden weergegeven.Keuzes omvatten GIF 128 Dithered, JPEG Hoge en PNG-24.

  3. Klik op "Opslaan" om een ​​venster dat bestanden en mappen van uw harde schijf wordt geopend.Blader naar de map waarin u de afbeelding wilt kaart bestanden op te slaan en typ een naam voor de afbeelding kaart in de bestandsnaam tekstvak.

  4. Klik op de "Formaat" drop-down menu en selecteer "HTML en afbeeldingen." Klik op "Save" om alle bestanden op te slaan in de map die u hebt opgegeven.

Tips & amp;Waarschuwingen

  • Photoshop slaat elk segment als een afzonderlijke afbeelding in een map met afbeeldingen.Het programma slaat ook een HTML-document met dezelfde naam als de naam die u in de "File Name" tekstvak getypt heeft.Als u dat HTML-bestand in de File Explorer te vinden en dubbelklik op het bestand, uw browser geopend en wordt uw afbeelding kaart.Klik op de verschillende delen van het beeld kaart om te navigeren naar de URL's die u hebt toegewezen aan de schijfjes.Bijvoorbeeld, als u een Kaart van de VS verdeeld in staten door het creëren van een plak voor elke staat, kunt u een staat klikken om naar de URL toegewezen stukje van die staat.
  • Geef plakjes betekenisvolle namen en u vindt het makkelijker om ze te identificeren als je ooit wilt de HTML-code die Photoshop gegenereerd tweaken.Bijvoorbeeld, als je een stukje dat de staat Iowa omringd gemaakt, kon je de slice Iowa noemen.
  • U zult waarschijnlijk wilt uw afbeelding kaart beelden op te slaan in hetzelfde formaat als de oorspronkelijke afbeelding.Bijvoorbeeld, als het een JPEG, kies een van de JPEG-opties van de vooraf ingestelde drop-down menu in de Opslaan voor web-venster.Kies "JPEG Low," bijvoorbeeld, en Photoshop genereert lage kwaliteit JPEG-afbeeldingen.De lagere kwaliteit van een afbeelding, hoe sneller laadt in een webbrowser.
  • Dit artikel is van toepassing op Adobe Photoshop CC, 2014 versie.Sommige informatie kan variëren in andere versies van de software.

Resources

  • Photoshop Essentials: Photoshop Afbeelding Navigatie Tips, trucs en snelkoppelingen
71
0
1
Graphics Software