Hyperlinks toevoegen in Adobe Illustrator of Photoshop

Bij elk soort project of presentatie is het vaak handig om links naar bronnen of citaten op te nemen. Het is makkelijk om dit te doen met bijvoorbeeld Microsoft Powerpoint of Word. Maar hoe zit het met onze favoriete beeldbewerkingsprogramma’s?

Hyperlinks opnemen in Adobe Photoshop en Illustrator vereist meer ingewikkelde procedures dan simpelweg tekst kiezen of op een afbeelding klikken met de rechtermuisknop. Gebruikers kunnen echter de ingebouwde functies van Adobe gebruiken om deze taak uit te voeren. Wie een hyperlink wil koppelen aan een specifiek woord, een afbeelding of een ander element in een van deze programma’s, moet inventief zijn.

Hoe voeg ik een hyperlink toe in Photoshop

Om een hyperlink op te nemen in een afbeelding met behulp van Adobe Photoshop, kun je gebruikmaken van het gereedschap Slice, waarmee je een specifieke URL kunt toewijzen aan een bepaald deel van de afbeelding in plaats van gebruik te maken van conventionele tekstgebaseerde links. Het is belangrijk op te merken dat na het maken van een dergelijke link, de resulterende compositie moet worden opgeslagen en gedistribueerd als een HTML-bestand, omdat het geen ondersteuning biedt voor het direct delen van gekoppelde documenten als PDF-bestanden.

Stap 1: Open je Photoshop-bestand

Open in Adobe Photoshop het gewenste bestand en selecteer een geschikte locatie voor het opnemen van een hyperlink. Het is aan te raden om de link boven een tekstueel of grafisch element te plaatsen, zoals “Boek nu” of een social media symbool. Deze methode is van toepassing ongeacht of de hele afbeelding bestaat uit platte elementen of gebruikmaakt van gelaagdheid in de compositie.

Stap 2: Gebruik het gereedschap Bijsnijden

Om het gereedschap Bijsnijden in Adobe Photoshop te gebruiken, moet je eerst het gereedschap Bijsnijden op de werkbalk selecteren en ingedrukt houden. Deze actie zal extra gereedschappen onthullen, waaronder het gereedschap Snijden dat wordt weergegeven door een mespictogram. Gebruikers kunnen ook de aangewezen sneltoets (C gevolgd door een punt) gebruiken om het gereedschap Slice snel te vinden in de software.

Omlijn eerst het gewenste gebied in de afbeelding door een rechthoekige grens te maken met de aanwijspijl. Laat ten tweede de muisknop los en maak een ankerpunt voor de link op de gekozen locatie. Sleep ten slotte het ankerpunt naar de gewenste bestemming terwijl je de linkermuisknop ingedrukt houdt tot het zijn uiteindelijke positie bereikt. Het is cruciaal om nauwkeurig te zijn bij het tekenen van de bounding box om ervoor te zorgen dat alleen het bedoelde deel van de afbeelding wordt gelinkt.

Stap 3: Voeg uw URL toe

Wijzig de instructies voor het bewerken van een nieuw ingevoegde afbeelding als volgt:1. Klik met de rechtermuisknop op de nieuw ingevoegde afbeelding en kies “Edit Slice Options” in het contextmenu. Klik met de rechtermuisknop op de pas ingevoegde afbeelding en kies “Edit Slice Options” in het contextmenu. Er verschijnt een dialoogvenster met verschillende configuratie-instellingen.2. Zoek in dit dialoogvenster het URL-veld en voer daarin de gewenste hyperlink in. Om de gelinkte inhoud in een apart browsertabblad weer te geven in plaats van de huidige pagina te vervangen, voer je “\_blank” in het veld Doel in.3. Voor extra duidelijkheid en toegankelijkheid geef je een informatieve beschrijving van de afbeelding in het veld Alt Tag, waarna je op “OK” klikt om de wijzigingen op te slaan. Het is cruciaal om alt-tekst op te nemen om de bruikbaarheid van visuele elementen te verbeteren voor mensen met een handicap of mensen die hulptechnologieën gebruiken.

Stap 4: Sla je bestand op

Klik eerst op “Bestand” in de bovenste menubalk en navigeer dan naar “Exporteren”. Selecteer daar “Opslaan voor web (legacy)” uit de vervolgkeuzelijst. Er verschijnt een dialoogvenster; zorg ervoor dat alle andere instellingen zijn ingesteld op de standaardwaarden, maar wijzig de vooringestelde optie in JPG of PNG door een van de beschikbare opties te selecteren. Klik ten slotte op “Opslaan” om het proces te voltooien.

Voer een bestandsnaam in, kies “HTML en afbeeldingen” in het vervolgkeuzemenu en klik op “Opslaan”. Er wordt dan een HTML-afbeeldingsbestand gemaakt, samen met eventuele bijbehorende slice-afbeeldingen. Je kunt deze bestanden vervolgens bekijken met de juiste software, zoals een webbrowser.

Hoewel ze een ander doel dienen dan een hyperlink, kun je ook inventieve strategieën toepassen in je Photoshop projecten om QR codes te integreren.

Hoe een hyperlink toevoegen in Illustrator

Adobe Illustrator heeft een verborgen gereedschap Slice in de werkbalk; de procedure voor het slicen in Illustrator wijkt echter af van die in Photoshop en staat niet toe dat de gesegmenteerde afbeeldingen als HTML-bestanden worden opgeslagen. Om links in de slices op te nemen is handmatige codering nodig tijdens de daaropvolgende webontwikkelingsfase.

Het is heel eenvoudig om interactiviteit op te nemen in een PDF-document via Adobe Illustrator. Door gebruik te maken van een creatieve methode die bekend staat als ‘maskeren’, wordt het mogelijk om een hyperlink te verbergen in je illustratie. Als je op een bepaald element van het ontwerp klikt, wordt deze verborgen link actief en functioneel.

Stap 1: Open of ontwerp een Illustrator-bestand

Om een hyperlink in Adobe Illustrator op te nemen, moet je eerst de gewenste lay-out in het programma zelf maken. Hierbij moet worden opgemerkt dat deze aanpak een dynamische PDF met interactieve mogelijkheden genereert, die niet noodzakelijkerwijs geschikt is voor elk ontwerpscenario.

Bepaal de specifieke elementen waarmee je een verbinding wilt maken, zoals logo’s, contactgegevens of navigatiepaden naar relevante websites.

Stap 2: Voeg de URL toe

Om ervoor te zorgen dat bepaalde ontwerpelementen ongewijzigd blijven tijdens het bewerken, kun je in Adobe XD gebruikmaken van de functie voor het vergrendelen van lagen. Door het hangslotsymbool in de buurt van het oogpictogram in het Lagenpaneel te selecteren, kun je de aangewezen ontwerplaag of -lagen vergrendelen. Bovendien kun je desgewenst een extra laag toevoegen boven de bestaande lagen door eenvoudigweg op het “+"-teken in het Lagenpaneel te klikken. Het doel van deze stap is om de hiërarchie van je project overzichtelijker en duidelijker te maken.

Om een tekstobject te maken met het tekstgereedschap in Adobe XD, selecteer je het gereedschap in de werkbalk en klik je ergens op je tekenblad zonder de cursor te verslepen. Dit genereert automatisch een plaatshouder voor de tekst. Om deze plaatshouder te vervangen door daadwerkelijke inhoud, plak je de volledige URL, inclusief " http:// “, en vul je eventuele extra informatie in zoals linkbestemmingen of beschrijvingen. Je kunt desgewenst meerdere links in hetzelfde tekstvak toevoegen.

Stap 3: Formaat van de hyperlink wijzigen

Om de hyperlinks aan het zicht te onttrekken, vergroot of wijzigt u de tekstinhoud zodat deze het gebied omvat waarnaar wordt gelinkt. Dit kan betekenen dat je de kleur van de tekst moet veranderen om de positie ervan beter zichtbaar te maken. Hoewel deze methode niet gebruikelijk is om typografie in Adobe Illustrator aan te passen vanwege het onaantrekkelijke uiterlijk wanneer het zichtbaar is, wordt het acceptabel geacht omdat de gemanipuleerde tekst verborgen blijft.

Gebruik het Selectiegereedschap (V) om de afmetingen van je tekst aan te passen, zodat deze het hele gebied beslaat waar een gebruiker normaal gesproken interactie heeft met een hyperlink.

Stap 4: Hyperlinks verbergen

Er bestaan twee methoden om hyperlinks te verbergen, die elk vergelijkbare resultaten opleveren.

Door de hyperlinklaag boven de ontwerplaag te plaatsen en de ondoorzichtigheid ervan op nul te zetten nadat alle elementen zijn geplaatst, kun je het gewenste visuele effect bereiken. Selecteer hiervoor alle elementen in de laag terwijl de ontwerplaag vergrendeld blijft en druk vervolgens op Command \+ A (voor Mac) of Control \+ A (voor Windows) om de ondoorzichtigheid van de laag op nul procent te zetten.

Om een transparante achtergrond te krijgen voor de inhoud op deze webpagina, volg je deze stappen:1. Navigeer naar het menu “Venster” bovenin je scherm.2. Selecteer de optie “Eigenschappen”. 3. Pas de ondoorzichtigheidsschuif in het venster dat verschijnt aan naar een waarde van nul procent (0%). Hierdoor worden hyperlinks vrijwel onzichtbaar terwijl de integriteit van de onderliggende tekstvakken behouden blijft.

Een alternatieve aanpak bestaat erin hyperlinks onder visuele componenten in de compositie te plaatsen. Door ze op een afzonderlijke laag te plaatsen, heb je de flexibiliteit om hun rangschikking in het lagenpaneel aan te passen. Door hyperlinks naar de basislaag te verplaatsen, kunnen ze verborgen blijven onder andere ontwerpelementen die ze aan het zicht kunnen onttrekken.

Als je geen specifieke laag hebt toegewezen aan je hyperlinks, is het eenvoudig om ze achter andere elementen te plaatsen. Klik hiervoor met de rechtermuisknop op de hyperlink in kwestie en selecteer “Schikken” in het contextmenu. Kies vervolgens “Naar achteren sturen”.

Stap 5: Sla uw bestand op

Navigeer naar het menu “Bestand” en klik vervolgens op de optie “Opslaan als”. Er verschijnt een nieuw venster waarin u een geschikte bestandsnaam voor uw document kunt opgeven. Het is essentieel dat u het PDF-formaat kiest door “PDF” als bestandsformaat te selecteren. Zorg ervoor dat dit geen printklare PDF is, maar een veelzijdige versie.

Je hebt de mogelijkheid om je Adobe Illustrator bestanden te exporteren in verschillende formaten naast de .pdf, hoewel dit niet wordt aanbevolen voor het maken van interactieve hyperlinks. Om interactiviteit te bereiken met links binnen een pdf-bestand, moet het eerst worden geconverteerd naar een digitaal formaat. Na het opslaan kun je gewoon door het document navigeren door op de ingesloten hyperlinks te klikken.

Als je je ontwerp wilt afdrukken, kun je het beste een QR-code genereren met Adobe InDesign en Illustrator.

Voeg eenvoudig hyperlinks toe aan uw projecten

Het opnemen van hyperlinks in Illustrator en Photoshop kan de algehele kwaliteit van multimediaprojecten zoals webdesign, digitale nieuwsbrieven en presentaties aanzienlijk verbeteren door gebruikers een interactieve ervaring te bieden. Deze links maken naadloze navigatie naar verschillende bestemmingen mogelijk, of het nu een boeiende virtuele rondleiding is of een relevante informatiebron zoals een Wikipedia-item, wat uiteindelijk de ontmoeting van de kijker met de inhoud verrijkt.