Het ontwerp van gebruikersinterfaces vereist vaak het gebruik van vormen en symbolen om een aantrekkelijke en gebruiksvriendelijke ervaring te creëren. In deze tutorial leer je hoe je vormen in Adobe XD zelf kunt maken en symmetrisch kunt gebruiken om je ontwerp efficiënter te maken. We bespreken het gebruik van de basisgereedschappen om snel verschillende iconen en symbolen te creëren die je in je projecten steeds opnieuw kunt gebruiken.
Belangrijkste inzichten
- Symbolen en vormen kunnen direct in Adobe XD worden gemaakt of geïmporteerd.
- Het gebruik van de Pathfinder-tool maakt het mogelijk om efficiënt lijnen te verbinden om complexe vormen te creëren.
- Symbolen moeten worden gebruikt voor objecten die meerdere keren nodig zijn, om tijd te besparen en consistentie te waarborgen.
Stapsgewijze handleiding
1. Raster activeren en beginnen met het lijngereedschap
Om te beginnen met het maken van vormen, activeer je eerst het raster door in te zoomen op het werkgebied. Het raster helpt om de elementen precies uit te lijnen. Met het lijn gereedschap kun je al veel bereiken. Klik erop en houd de Shift-toets ingedrukt om een rechte lijn te trekken.
2. Pijlen maken met Pathfinder
Je kunt nu de lijnen die je getekend hebt, op dezelfde maat aanpassen. Selecteer alle lijnen die je hebt getekend om de Pathfinder-tool te gebruiken. Gebruik de functie "Toevoegen" om de lijnen samen te voegen tot één pijl. Als de hoeken te scherp zijn, activeer dan de optie voor afgeronde hoeken.
3. Een hamburgericoon maken
Voor het hamburgericoon trek je eerst een lijn met een bepaalde dikte. Daarna selecteer je het herhalingsraster en voeg je twee andere lijnen toe om de drie streepjes voor het icoon te maken. Groepeer vervolgens de lijnen om het icoon stabiel te houden.
4. Het padgereedschap gebruiken voor creatieve vormen
Nu gaan we het padgereedschap gebruiken om creatievere vormen te maken. Trek een cirkel en voeg dan met de Pathfinder een paar extra ankerpunten toe. Dit maakt het mogelijk om gebogen vormen te maken, zoals in het wifi-symbool. Vergeet niet om de lijnsterkte aan te passen en de gehele vorm te groeperen.
5. Knoppen maken en tekst aanpassen
Om een knop te maken, teken je een rechthoek en kies je een geschikte kleur of verloop daarvoor. Voeg vervolgens een tekstvak toe om de knop een label te geven. Vergeet niet dat tekstwijzigingen niet globaal op alle knoppen worden toegepast als ze als symbool zijn opgeslagen.
6. Symbolen maken en opslaan
Om symbolen te maken, selecteer je de elementen die je als symbool wilt gebruiken en gebruik je de sneltoets Command (Control) + K om ze naar de symbolenbalk over te brengen. Hierdoor kun je dezelfde elementen meerdere keren gebruiken zonder ze bij elke keer opnieuw te hoeven maken.
7. Vaardigheden voor het bewerken van symbolen gebruiken
Als je een symbool in je ontwerp wilt wijzigen, maar niet wilt dat de wijziging globaal is, kun je de groepering van het symbool opheffen of het converteren naar een normale vorm. Dit maakt het mogelijk om het individueel aan te passen zonder invloed op andere instanties van het symbool.
8. Handige zoekfunctie gebruiken
Als je veel elementen in je ontwerp hebt, stelt de zoekfunctie in de symbolenbalk je in staat om snel een bepaald symbool te vinden. Gebruik hiervoor eenvoudig de filter om de symbolen door te zoeken en ze gemakkelijker te beheren.
Samenvatting - Adobe XD: Symbolen en vormen effectief gebruiken
Samenvattend kan worden gezegd dat Adobe XD je de tools biedt om vormen en symbolen efficiënt te maken en te beheren. Met de gepresenteerde technieken en sneltoetsen ben je in staat om je ontwerpprocessen te optimaliseren en consistente ontwerpen te maken.
Veelgestelde Vragen
Hoe maak ik een nieuw symbool in Adobe XD?Selecteer het gewenste element en druk op Command (Control) + K om het in de symbolenbalk op te slaan.
Wat gebeurt er als ik een symbool uit de symbolenbalk verwijder?Het symbool wordt uit de bibliotheek verwijderd, maar blijft zichtbaar op het artboard.
Kan ik de grootte van een reeds gemaakt symbool wijzigen?Ja, als je de lijnsterkte aanpast, veranderen alle instanties van het symbool automatisch.
Hoe kan ik meerdere instanties van een symbool bewerken zonder ze globaal te wijzigen?Heff de groepering met een rechtermuisklik op of gebruik de sneltoets Command (Shift) + G.
Werken teksten in symbolen hetzelfde als andere elementen?Nee, wijzigingen aan de tekst van een symbool hebben alleen effect op de specifieke instantie en niet op andere.
