Artboards en Assets exporteren

uit de cursus Starten met Adobe XD (Experience Design)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Starten met Adobe XD (Experience Design)

perm_identity Belinda | video_library 38 video's | query_builder 02:42:41

Prototyping met Adobe XD

Met Adobe Experience Design kun je snel prototypes ontwerpen van websites en webapp’s. Het programma stelt je eenvoudig in staat om snel pagina’s te ontwerpen, die je direct kunt testen op een smartphone of tablet. En Adobe biedt online publicatie van jouw ontwerp aan, zodat je de productie kunt delen en laten testen door wie je maar wilt.

Experience Design (XD) biedt ontwerpers en vormgevers de mogelijkheid om een werkend ontwerp te maken en te testen op gebruikersvriendelijkheid. Ben jij en de klant tevreden met het ontwerp dan kan de productie sneller en efficiënter gerealiseerd worden door een web- of appbouwer.

Doelgroep van deze cursus

Vormgevers, web- en app-developers die eerst een functionerend prototype willen ontwerpen alvorens deze daadwerkelijk gebouwd zal worden.

Wat ga je leren

Je leert hoe je in Adobe XD responsive web- en app-designs kunt maken. Je leert welke workflow je het beste kunt aanhouden om zo snel en efficiënt mogelijk te kunnen ontwerpen door gebruik te maken van het (repeating)grid, artboards, layers, styles en symbols. Ook leer je hoe je interactiviteit toevoegt aan je ontwerp en hoe je je ontwerp kunt publiceren en (laten) testen.

Vereiste voorkennis en vaardigheden

Je hebt geen specifieke voorkennis of vaardigheden nodig om deze cursus te kunnen volgen.

Als je helemaal klaar bent met je ontwerp kun je de onderdelen ook nog exporteren.

Zodat je deze kunt aanleveren aan de ontwikkelaar van de website of de app.

Selecteer eerst een illustratie uit je ontwerp.

Je kunt ook groepen selecteren of een symbol zoals ik nu heb geselecteerd.

Met de gewenste selectie actief ga je naar File > Export of gebruik je de toetscombinatie Commando E.

Bepaal in dit venster eerst het soort bestandsformaat.

Want de overige opties verschillen per bestandssoort.

Het huidige formaat is SVG.

SVG behoudt vectoren en het voordeel daarvan is dat deze oneindig schaalbaar zijn.

En ook nog eens haarscherp blijven.

Maar als de geselecteerde illustratie een pixel-afbeelding is dan gaat dit niet zomaar op.

Pixels blijven pixels en worden niet zomaar vectoren.

Ik kies voor de huidig geselecteerde illustratie voor PNG.

PNG ondersteunt transparantie, maar zet de illustratie wel altijd om in pixels.

Bij PNG kan ik kiezen voor het soort platvorm waarvoor ik de illustratie wil gaan exporteren.

Per apparaat zijn er namelijk andere aanlevervoorwaarden.

Het fijne is dat je daar nu zelf niet meer over na hoeft te denken.

De exportformaten worden voor jou afgehandeld door Experience Design.

Ik kies voor iOS voor de Mac.

Dan krijg ik straks als het goed is afbeelding van verschillend formaat.

Omdat PNG altijd pixels wegschrijft moeten de formaten precies goed zijn per apparaat.

Apple heeft namelijk verschillende schermresoluties in omloop.

Het retina beeldscherm heeft een hogere resolutie dan de eerdere versies.

En daarom moet de afbeelding ook groter weggeschreven worden.

Je wilt natuurlijk dat de afbeelding mooi scherp blijft.

Wij hebben het ontwerp op de ware grootte ontworpen dus houd de optie 'Designed at:' op x.

Navigeer dan naar de map waar je de bestanden in weg wilt schrijven en klik op Export.

Ik navigeer op mijn buroblad naar deze map.

Hierin staan inderdaad bestanden.

Bij de informatie kun je het formaat aflezen van de afbeeldingen.

De laatste is dus ook de grootste.

En ik keer weer terug naar Experiende Design.

Ik zet mijn ontwerp passend in venster met de toetscombinatie Commando .

Als je niet geselecteerd hebt en je kiest dan bij File voor Export.

Dan exporteer je altijd alle artboards van het ontwerp. Kijk maar, de knop is veranderd in 'Export All Artboards'.

En ik annuleer deze handeling.

Om slechts één of meerdere artboards weg te schrijven.

selecteer je een artboard. Met de Shift-toets ingedrukt kun je dan nog meer tekengebieden erbij selecteren.

Het maken van een PDF kan ook erg handig zijn.

Ik selecteer alle tekengebieden van het desktop ontwerp.

Zorg dat je het selectie-gereedschap geactiveerd hebt.

Trek dan een selectiekader om de gewenste tekengebieden heen.

Ik exporteer de tekengebieden met de toetscombinatie Commando E.

Kies bij format voor PDF.

We hebben nu meerdere tekengebieden geselecteerd.

En willen deze in een boekvorm laten opnemen in een bladerbare PDF.

kies dan voor ’Single PDF file’.

Met Multiple PDF files wordt elk tekengebied bewaard in een apart PDF-bestand.

We klikken nu op Export.

Ik open het bewaarde PDF-bestand.

En dit is wat je dan hebt gekregen. Een bladerbare PDF met op elke pagina een tekengebied.

Dit bestand kun je niet alleen makkelijk printen maar ook digitaal verspreiden.