Wanneer u op een gedeelte van de afbeelding van een website en uw browser naar een andere webpagina springt, is een afbeelding met hyperlinks waarschijnlijk verantwoordelijk voor die actie. Ontwerpers van sites kunnen het schrijven van HTML-code waarmee klikbare hotspots op een afbeelding. Met de hand het construeren van afbeeldingen met hyperlinks is tijdrovend, omdat u de exacte coördinaten van elke hot spot moet identificeren. Met het gereedschap segment in Photoshop tekenen u hotspots in een afbeelding te genereren van de HTML-code u automatisch moet.
Afbeelding met hyperlinks maken
Start Photoshop en open een afbeelding die u wilt converteren naar een afbeelding met hyperlinks. Klik en houd de "bijsnijden" om een menu met andere hulpprogramma's weer te geven. Klik op de "Slice" knop om deze te selecteren.
Klik op een punt binnen de afbeelding en sleept u van de Slice hulpmiddel voor het tekenen van een selectiekader rond het gedeelte van de afbeelding die u wilt maken het aanklikbaar. Photoshop tekent extra "automatische segmenten" rond andere delen van de afbeelding. Deze automatische segmenten zorgen dat alle delen van een afbeelding in een segment worden opgenomen.
Klik met de rechtermuisknop binnen het segment dat u hebt gemaakt en selecteer "Segmentopties bewerken" om de Segmentopties-venster te openen. Typ de URL die u wilt koppelen aan het segment. U kunt ook de standaardnaam dat Photoshop gaf het segment door te typen van een nieuwe transactie in het vak "Naam" tekst vervangen.
Klik op "OK" om het venster Segmentopties sluiten en terugkeren naar de afbeelding. Klik op een ander punt binnen de afbeelding en sleep het gereedschap segment om extra segmenten maken indien nodig.
Kaart afbeeldingssegmenten aanpassen
Selecteer de "segment selecteren" op de werkbalk en klik binnen een segment dat u wilt verplaatsen.
Houd de linkermuisknop ingedrukt en sleept u het segment naar een nieuwe locatie.
Houd de muiscursor op een van de randen van het segment en verschijnt er een lijn met pijltjes op elk uiteinde. Klik op die regel, houdt u de linkermuisknop ingedrukt en sleep de muis als u wilt het segment groter of kleiner maken.
Opslaan van de afbeelding met hyperlinks
Klik op "Bestand" gevolgd door "Opslaan voor Web" het opslaan voor Web-venster openen.
Klik op de "Preset" en selecteer een van de opties voor het type van bestanden die worden weergegeven. Keuzes omvatten GIF 128 gerasterde, hoge JPEG en PNG-24.
Klik op "Opslaan" te openen van een venster waarin u uw harde schijf bestanden en mappen. Blader naar de map waar u de afbeelding kaart bestanden opslaan en typ een naam voor de afbeelding met hyperlinks in het tekstvak Bestandsnaam.
Klik op het "Format" drop-down menu en selecteer "HTML en afbeeldingen." Klik op "Opslaan" om op te slaan van alle bestanden naar de map die u hebt opgegeven.
- Photoshop slaat ieder segment als een afzonderlijke afbeelding in de map images. Het programma slaat ook een HTML-document dat dezelfde naam heeft als de naam die u hebt getypt in het vak "Bestandsnaam". Als u dat HTML-bestand in de File Explorer vindt en dubbelklik op het bestand, wordt in uw browser geopend en weergegeven van uw afbeelding met hyperlinks. Klik op de verschillende delen van de afbeelding met hyperlinks om naar de URL's die u hebt toegewezen aan de segmenten te navigeren. Bijvoorbeeld, als u een Amerikaanse kaart verdeeld in Staten door het creëren van een segment voor elke staat, kunt u een staat om te gaan naar de URL die is toegewezen aan het segment van die lidstaat.
- Segmenten zinvolle namen te geven en u zult vinden het gemakkelijker om ze te identificeren als u ooit wilt tweaken de HTML-code die Photoshop gegenereerd. Bijvoorbeeld, als u een segment dat de staat Iowa omgeven hebt gemaakt, zou u het segment Iowa kunnen noemen.
- U zult waarschijnlijk willen uitgezonderd uw spiegelbeeld kaartafbeeldingen in dezelfde indeling als de oorspronkelijke afbeelding. Bijvoorbeeld, als het een JPEG-bestand, kies een van de JPEG-opties in het vervolgkeuzemenu Voorinstelling in het opslaan voor Web-venster. Kies "JPEG lage," bijvoorbeeld, en lage kwaliteit JPEG-afbeeldingen in Photoshop gegenereerd. Hoe lager de kwaliteit van een afbeelding, des te sneller geladen in een webbrowser.
- Dit artikel is van toepassing op Adobe Photoshop CC, 2014 versie. Sommige informatie kan verschillen in andere versies van de software.