Afbeeldingen maken met Adobe XD: een beginnershandleiding

Adobe XD is een krachtige tool waarmee je UI/UX-ontwerpen kunt maken voor software, apps, websites en meer. Dit omvat ook het maken van mockups, prototypes en aangepaste UI-componenten voor een interface. U kunt zowel eenvoudige als complexe ontwerpen maken met Adobe XD.

Hier zullen we beschrijven hoe u eenvoudige afbeeldingen, waaronder vormen, afbeeldingen en tekst, kunt toevoegen aan een nieuw Adobe XD-project. Dit wordt gevolgd door een handleiding over hoe u een groep vormen in componenten kunt omzetten en hoe u die componenten op de pagina opnieuw kunt gebruiken. Ten slotte wordt in het artikel ook beschreven hoe u uw afbeeldingen kunt exporteren. Laten we er meteen in springen.

Een Adobe XD-project maken

Wanneer u een nieuw Adobe XD-project maakt, moet u een lay-outgrootte voor uw project selecteren. Het biedt een aantal sjablonen waaruit u kunt kiezen op basis van een aantal populaire apparaten.

Enkele voorbeelden hiervan zijn de iPhone X/XS/11 Pro (375px bij 812px), iPad (768px bij 1024px) of Web 1920 (1920px bij 1080px). Als alternatief heeft u ook de mogelijkheid om een ​​aangepaste breedte en hoogte voor uw project te selecteren.

Nadat u een nieuw project hebt gemaakt, opent Adobe XD een lege pagina. Hier kunt u beginnen met het toevoegen van afbeeldingen, vormen, tekst of andere ontwerpelementen. Afhankelijk van welke Adobe XD-versie u heeft, kunt u wellicht: ontdek enkele van de nieuwe functies die Adobe XD biedt.

Het ontwerpelement op het hoogste niveau is de canvaspagina zelf. Als u het markeert, kunt u het rechterdeelvenster gebruiken om enkele eigenschappen rechtstreeks te wijzigen, zoals de breedte of hoogte van het canvas.

Afbeeldingen toevoegen

Er zijn meerdere manieren waarop u afbeeldingen aan uw Adobe XD-project kunt toevoegen.

• De eerste optie is om te klikken op de Hamburger menupictogram bovenaan de linkerkolom. Klik op Importerenen open het bestand dat u wilt toevoegen.
• Een andere optie is om naar uw afbeelding te navigeren in de bestandsverkenner en het bestand rechtstreeks naar Adobe XD te slepen.
• Een derde optie is om je afbeelding te kopiëren en te plakken als je deze in een andere software hebt geopend, zoals Microsoft Word.

Het formaat en de positie van een afbeelding wijzigen

U kunt herpositioneren en formaat van een afbeelding wijzigen ofwel rechtstreeks op het canvas of door de eigenschappen ervan te wijzigen.

1. Markeer de afbeelding. Wanneer u een ontwerpelement op het canvas markeert, kunt u de eigenschappen ervan in het rechterdeelvenster zien.
2. Wijzig de breedte en hoogte van de afbeelding. Deze worden vertegenwoordigd door de W en H velden.
3. U kunt ook de X en ja coördinaten van waar de linkerbovenhoek van de afbeelding begint.
4. Als u de afbeelding wilt verplaatsen, klikt en sleept u de afbeelding over het canvas.
5. Om het formaat te wijzigen, sleept u de punten aan de randen van de afbeelding.

De randen van een afbeelding aanpassen

U kunt de hoeken van de afbeelding aanpassen om de vorm te wijzigen.

1. Markeer de afbeelding.
2. U ziet enkele punten rond de afbeelding. Daarnaast zijn er ook enkele punten in de hoeken van de afbeelding.
3. Klik en sleep op een punt in de afbeelding. Hierdoor krijgt de afbeelding langzaam een ​​andere vorm.

Andere effecten aan de afbeelding toevoegen

U kunt de afbeelding verder manipuleren door effecten toe te voegen. Dit omvat dekking, randen, vervagingseffecten en meer.

1. Markeer de afbeelding en verander de Opaciteit in het rechterdeelvenster.
2. Verander, terwijl u zich nog in het rechterdeelvenster bevindt, de kleur van de Bvolgorde. Hier kunt u ook de dikte, streepjesstijl, en hoekstijl van de grens.
3. Voeg een vervagingseffect toe aan de afbeelding en wijzig de Hoeveelheid objectvervaging om de intensiteit van de vervaging te verhogen of te verlagen.

Vormen toevoegen

U kunt vormen toevoegen in Adobe XD via het linkerdeelvenster.

1. In het linkerdeelvenster kunt u ervoor kiezen om meerdere basisvormen te maken, waaronder een rechthoek, cirkel, driehoek en lijn. Selecteer de vorm die u wilt tekenen.
2. Klik op een willekeurig punt op het canvas en sleep de cursor om de vorm te maken.

Aangepaste vormen toevoegen

U kunt de aangepaste vormtool gebruiken om uw eigen vorm te maken.

1. Selecteer in het linkerdeelvenster de pen icoon.
2. Klik ergens op het canvas om uw eerste punt, of "hoek", voor de vorm toe te voegen. Klik voor elk punt van de vorm op het canvas op het gebied waar u het wilt hebben.
3. Als u klaar bent met het maken van de vorm, drukt u op de Esc toets op uw toetsenbord.

Hoe de kleur van een vorm te veranderen

U kunt de kleur van de vorm wijzigen met behulp van het rechterdeelvenster.

1. Markeer de vorm.
2. Wijzig in het rechterdeelvenster de Fziek.
3. Bovendien kunt u op dezelfde manier als afbeeldingen randen toevoegen, effecten vervagen en de dekking van de vorm wijzigen.

Tekst toevoegen

Je kan ook tekst toevoegen en bewerken op dezelfde manier waarop u vormen toevoegt.

1. Klik op de Tekst pictogram in het linkerdeelvenster.
2. Klik ergens op het canvas om een ​​nieuw tekstvak toe te voegen. Typ uw gewenste tekst in het tekstvak.
3. Gebruik het rechterdeelvenster om de maat, lettertype familie, en uitlijning velden.

Componenten maken

Een component is een groep ontwerpelementen die hergebruikt kan worden. Om een ​​component te maken en te gebruiken, moet u eerst een groep vormen of andere ontwerpobjecten hebben.

1. Markeer de groep vormen in het canvas. Klik met de rechtermuisknop op de groep en selecteer Component maken.
2. Klik onderaan het linkerdeelvenster op Activa. Er wordt een nieuw menu geopend met een lijst van alle activa die u heeft, inclusief het onderdeel dat u zojuist hebt toegevoegd.
3. Klik en sleep het onderdeel uit de lijst met onderdelen naar het canvas. Als u dit doet, wordt exact dezelfde groep elementen gemaakt.

Artikelen exporteren

U kunt zowel afzonderlijke items als de hele pagina exporteren.

1. Als u een enkel item wilt exporteren, markeert u het item dat u wilt exporteren.
2. Klik op de Hamburger menuicon bovenaan de linkerkolom.
3. Selecteer Exporterenen klik vervolgens op Geselecteerd.
4. Als u de hele pagina (of alle pagina's) wilt exporteren, selecteert u Alle tekengebieden in plaats van.
5. U kunt het bestandsformaat specificeren (PNG, JPG, SVG of PDF), waarvoor het geëxporteerde item zal zijn (zoals web of iOS) en waar u uw bestand wilt opslaan.

Word bekwaam in Adobe XD

Dit zijn slechts de basis. Enkele andere functies zijn de mogelijkheid om hyperlinks, symbolen, app-integraties en UI-kits toe te voegen. Adobe XD brengt ook zo nu en dan nieuwe functies uit om het maken van uw mockups en aangepaste UI-ontwerpen te helpen verbeteren en stroomlijnen.

Er zijn meerdere cursussen online beschikbaar om je nieuwe ontwerpvaardigheden naar een hoger niveau te tillen.

Deze Adobe-cursussen zullen je veranderen in een Creative Cloud Master

Lees volgende

Over de auteur