Categorie: Niveau 2 – Basis

Animatie

Tijd: 30 minuten

In XD kun je beperkt animeren. Je moet dan denken aan hover-effecten, sliders, menu’s, etc. Animeren in de zin van tekenfilms, daar is andere software voor. Er zijn twee manieren waarop je iets kunt animeren in XD: met behulp van Artboards of met behulp van Components.

IntroStap 1Stap 2

We gaan een voetbal animeren op twee verschillende manieren. Uiteindelijk zal je met beide manieren eenzelfde eindproduct hebben dat er ongeveer zo uit zal zien:

  1. Maak in XD een nieuw document aan van 500×200 pixels (bxh).
  2. Plaats hierin de afbeelding van de bal aan de linkerzijde van het artboard.
  3. Selecteer nu het artboard door op de naam te klikken en kopieer deze met CMD-C/CMD-V.
  4. Sleep nu in het tweede Artboard de bal helemaal naar rechts en roteer hem 180 graden. Tip: houd Shift ingedrukt om de bal horizontaal te verplaatsen.

Let op: de naam van de bal moet op beide Artboards hetzelfde zijn.

  1. Ga naar tabblad Prototype en klik op de bal in het eerste Artboard.
  2. Verbindt deze bal aan het tweede Artboard.
  3. Stel de eigenschappen van de interactie in zoals in onderstaande afbeelding.
  4. Herhaal dit voor de bal op het tweede Artboard, waarbij je terugverwijst naar het eerste Artboard.
  5. Druk nu op de play button en test of de Animatie tussen de Artboards werkt.
De interactie van de bal op het eerste Artboard
  1. Maak opnieuw een kopie van het eerste Artboard en plaats deze onder Artboard 1.
  2. Selecteer de bal en kies CMD-K om er een Component van te maken.
  3. Maak nu in het menu een nieuwe ‘state’ aan door op de + te klikken en kies voor de Toggle State.
Een Component met een Toggle State.
  1. Selecteer de Toggle State en dubbelklik op de bal in het component. Als het goed is zie je nu dit in beeld en in je layers panel:

Let op: de naam van de bal moet op beide Artboards hetzelfde zijn.

In het layers paneel zie je dat de Component is opengeklapt en het plaatje is geselecteerd.
  1. Sleep nu de bal naar rechts (met Shift ingedrukt om recht te verplaatsen) en draai de bal 180 graden.
  2. Selecteer nu de Component (met ♦ icoon) in het Layers paneel.
  3. Klik nu rechts in het eigenschappen-paneel afwisselend op de twee States. Als het goed is zie je de bal van links naar rechts verspringen.
  4. Nu gaan we naar tabblad Prototype.
  5. Selecteer de voetbal in de Default State en stel deze interactie in:
Vanuit de Default State naar de Toggle State
  1. Doe nu hetzelfde vanuit de Toggle State terug naar de Default State.
  2. Selecteer het Artboard met de component en druk op de play button.
  3. Test of de Component animatie correct werkt.
  4. Sla je werk op als offline XD bestand met CMD-Option-Shift-S (CTRL-Alt-Shift-S) en lever het in.


Schets van het papier trekken

Tijd: 20 min

Wanneer je schetsen scant en deze in Photoshop bewerkt is het vaak handig om de schets van het papier te halen. Dat wil zeggen: je wilt de schets in een eigen laag, inclusief (half)transparante pixels, maar zonder de witte pixels van het papier.

Lees verder “Schets van het papier trekken”

Smoelenboek

Tijd: 4 uur

Ook al leven we in een digitale omgeving, soms is een print op papier van heel veel waarde. Wanneer je bijvoorbeeld een oude klassenfoto vindt van tien jaar geleden. Of een boekje waaruit je werd voorgelezen.

De games, apps en websites die je nu gebruikt zijn over tien jaar waarschijnlijk helemaal anders. De ervaring die je nu hebt is dan niet meer te beleven, omdat de hardware dan ook allemaal anders is.

Daarom gaan we een print maken. We maken een ‘smoelenboek’ met daarin van iedere klasgenoot een paar foto’s en een verhaaltje. Dit is namelijk over 10 jaar goud waard.

Lees verder “Smoelenboek”

Promo presentatie

Tijd: 8 uur

Deze opdracht is onderdeel van het ED project “e-Commerce” (F2M4). Bij dit project ontwikkel je wekelijks 3 digitale promo-producten voor verschillende media/platforms. Deze producten presenteer je op een passende manier in een webpagina. De stappen die je moet zetten om deze presentatiepagina te maken worden hieronder toegelicht.

Lees verder “Promo presentatie”

Hoorspel

Tijd: 4 uur

Je schrijft een verhaaltje (bijvoorbeeld gebaseerd op een zelfgekozen sprookje). Je gaat dit verhaal vertellen aan de hand van geluiden. Denk aan een voice-over, stem-acteurs, geluidseffecten en muziek. Je werkwijze leg je vast in een vlog, waarin je laat zien hoe je zelf de bijbehorende geluiden maakt.

Lees verder “Hoorspel”

Web Typografie

Tijd: 3 uur

Letters en tekst hebben eigenschappen die je wel kent, zoals bold of italic. Met css kunnen we deze (en nog veel meer) teksteigenschappen aanpassen. In deze oefening nemen we aan de hand van een songtekst een korte duik in de mogelijkheden.

Lees verder “Web Typografie”

Portfolio met FA

Duur: 16u

Headshots van Marilyn Monroe

MV studenten gaan samenwerken met FA studenten. De FA studenten hebben een portfolio in WordPress nodig om zichzelf mee op de markt te zetten. Zij zijn in deze samenwerking de klanten van de MV studenten. Er is dus een duidelijke rolverdeling. De FA studenten zullen als klant een duidelijke vraag formuleren. De MV studenten denken hierin mee en geven advies op gebied van vormgeving en techniek. Het doel is natuurlijk om een mooi portfolio neer te zetten, maar je leert ook samenwerken in de relatie opdrachtgever/opdrachtnemer.

Lees verder “Portfolio met FA”

Tien keer kleur

Duur: 90 min

Er zijn verschillende manieren in Photoshop om kleuren te corrigeren. De beste manier is afhankelijk van de eigenschappen van je foto. Hieronder vindt je een aantal foto’s waar iets mis is met de kleuren.

Lees verder “Tien keer kleur”