• Tooltip termen

    tooltiptest1
    tooltiptest2
    tooltiptest3
    tooltiptest4
    tooltiptest5
    tooltiptest6
    tooltiptest7
    tooltiptest8
    tooltiptest9
    tooltiptest10
    tooltiptest11
    tooltiptest12
    tooltiptest13
    tooltiptest14
    tooltiptest15
    tooltiptest16
    tooltiptest17
    tooltiptest18
    tooltiptest19
    tooltiptest20
    tooltiptest21
    tooltiptest22
    tooltiptest23
    tooltiptest24
    tooltiptest25
    tooltiptest26
    tooltiptest27
    tooltiptest28
    tooltiptest29
    tooltiptest30
    tooltiptest31
    tooltiptest32
    tooltiptest33
    tooltiptest34
    tooltiptest35
    tooltiptest36
    tooltiptest37
    tooltiptest38
    tooltiptest39
    tooltiptest40
    tooltiptest41
    tooltiptest42
    tooltiptest43
    tooltiptest44
    tooltiptest45
    tooltiptest46
    tooltiptest47
    tooltiptest48
    tooltiptest49
    tooltiptest50
    tooltiptest51
    tooltiptest52
    tooltiptest53
    tooltiptest54
    tooltiptest55
    tooltiptest56
    tooltiptest57
    tooltiptest58
    tooltiptest59
    tooltiptest60
    tooltiptest61
    tooltiptest62
    tooltiptest63
    tooltiptest64
    tooltiptest65
    tooltiptest66
    tooltiptest67
    tooltiptest68
    tooltiptest69
    tooltiptest70
    tooltiptest71
    tooltiptest72
    tooltiptest73
    tooltiptest74
    tooltiptest75
    tooltiptest76
    tooltiptest77
    tooltiptest78
    tooltiptest79
    tooltiptest80
    tooltiptest81
    tooltiptest82
    tooltiptest83
    tooltiptest84
    tooltiptest85
    tooltiptest86
    tooltiptest87
    tooltiptest88
    tooltiptest89
    tooltiptest90
    tooltiptest91
    tooltiptest92
    tooltiptest93
    tooltiptest94
    tooltiptest95
    tooltiptest96
    tooltiptest97
    tooltiptest98
    tooltiptest99
    tooltiptest100

  • Ansichtkaart maken

    In deze opdracht leer je de basisbeginselen van het gratis online alternatief van Adobe Indesign. In deze opdracht leer je hoe je een ansichtkaart maakt met het programma.

    Tutorial

  • Apple oplader ontwerpen in Fusion 360

    In deze tutorial leer ik je hoe je heel makkelijk in Fusion 360 een iPad Apple stroomadapter kan nabouwen. Fusion 360 is een toegankelijk CAD programma dat gratis is voor de educatieve markt! Ik leer je in deze tutorial hoe je kan werken met sketches, extrude, fillets, mirror tool, Dimension tool, Combine tool, en nog veel meer! Door goed te meten kan je als je mee doet met deze tutorial met weinig moeite complexe objecten nabouwen voor 3d print!

    Tutorial

  • Colafles ontwerpen en 3D printen in Fusion 360

    In deze tutorial leer je hoe je in Fusion 360 een holle colafles kan ontwerpen waar je ook echt cola in kan gieten zodra je hem hebt 3D geprint! In deze tutorial leer je omgaan met de image canvas functionaliteit. Op de afbeelding van het flesje gaan we een sketch maken die we met de revolve tool tot cola-flesje gaan maken! Vervolgens geven we groeven aan het flesje met de rotate-grid functie en uiteindelijk maken we het flesje ook nog hol.

    Tutorial

  • Basis tools en technieken van Fusion 360.

    In deze tutorial leer je alle basis tools en technieken van Fusion 360. Je leert hoe het programma werkt en hoe je dingen kan opslaan. Ik laat je zien hoe de sketches en designgeschiedenis-tijdlijn werken in Fusion. Hoe je sketches kan extruden, hoe je gaten kan maken in een object of juist vormen uit een object kan laten komen. Ook leer je hoe je mooie rondingen of schuine hoeken op randen krijgt. Je leert ook hoe je vormen kan maken door te meten i.p.v. te gokken. Als laatste leer je hoe je twee objecten weer kan splitsen. Kortom: alles wat je nodig hebt om geavanceerde vormen te maken en te 3d printen!

    Tutorial

  • 3D model klaarmaken om te printen met Ultimaker Cura

    In deze tutorial leer je hoe je in Ultimaker cura jouw project kan ‘slicen’. Dit is de techniek van het omzetten van jouw 3d model dat je bijvoorbeeld hebt ontworpen in apps als Tinkercad of het gedownload van www.thingiverse.com of www.myminifactory.com.

    Wat leer je?

    In deze opdracht leer je de volgende dingen:

    • Downloaden van het STL 3d bestand uit Tinkercad
    • Importeren van STL bestand in Cura
    • Plaatsen van STL bestand in Cura:
      Verplaatsen, vergroten, draaien, verdubbelen
    • ‘Custom’ instellingen wijzigen van de 3D printer:
      -Werken en kiezen met support en tree-support
      -Werken en kiezen van Bed Adhesion instellingen (zodat je print niet krom gaat trekken)
      -Kiezen van print-temperatuur
    • Ontwerp ‘slicen’ in Cura – omzetten van 3D bestand naar GCODE print bestand
    • Naam veranderen van het project. Opslaan van 3D printer bestand op de microSD

    Tutorial

    Doe lekker mee met de tutorial en je print binnen no-time de mooiste (zelf gemaakte!) dingen!

  • Thuisbezorging-app interactief maken

    Een gekke tijd zo tijdens een pandemie. Steeds meer van ons leven speelt online af, nu we niet meer naar fysieke winkels kunnen. Dit heeft er voor gezorgd dat er een heleboel bezorgplatformen zijn ontstaan. Hun enige concurrentiemiddel? Hoe goed en hoe mooi de app werkt! Jij als ontwerper bent dus heel belangrijk, want jouw ontwerpen zorgen er voor dat de apps makkelijk en aantrekkelijk zijn om te gebruiken. Beter design = meer geld!

    In deze lessenserie ontwerp je jouw eigen thuisbezorgd geïnspireerde app.

    In deze opdracht leer je de hoe je jouw app van ontwerp naar interactief prototype kan omvormen!

    Na het volgen van deze opdracht met tutorial kan je het volgende in Adobe XD:


    • Je kan met de prototype functie werken in Adobe XD
    • Je leert hoe je elementen scrollbaar kan maken en hoe je elementen kan vastzetten
    • Je kan jouw app in de voorvertoning laten zien
    • Je kan overweg met de auto-animatie functie in Adobe XD

    Tutorial

    Doe lekker mee met de tutorial en je hebt binnen no-time een prachtige app!

  • Thuisbezorging-app vullen met inhoud

    Een gekke tijd zo tijdens een pandemie. Steeds meer van ons leven speelt online af, nu we niet meer naar fysieke winkels kunnen. Dit heeft er voor gezorgd dat er een heleboel bezorgplatformen zijn ontstaan. Hun enige concurrentiemiddel? Hoe goed en hoe mooi de app werkt! Jij als ontwerper bent dus heel belangrijk, want jouw ontwerpen zorgen er voor dat de apps makkelijk en aantrekkelijk zijn om te gebruiken. Beter design = meer geld!

    In deze lessenserie ontwerp je jouw eigen thuisbezorgd geïnspireerde app.

    In deze opdracht leer je de hoe je op allerlei slimme manieren jouw app kan vullen met inhoud en foto’s. Zo lijkt het net echt op je app werkt in real life!

    Na het volgen van deze opdracht met tutorial kan je het volgende in Adobe XD:


    • Gebruik maken van de Repeat Grid functie
    • Afbeeldingen vullen met inhoud met de adobe XD plugin Repetor
    • Tekst vullen met inhoud met de adobe XD plugin Repetor
    • Afbeelding plaatsen in vorm in Adobe XD
    • Vrijstaand maken van een gedownloade afbeelding met Photoshop en deze plaatsen in Adobe XD

    Tutorial

    Doe lekker mee met de tutorial en je hebt binnen no-time een prachtige app!

  • Thuisbezorging-app ontwerpen

    Een gekke tijd zo tijdens een pandemie. Steeds meer van ons leven speelt online af, nu we niet meer naar fysieke winkels kunnen. Dit heeft er voor gezorgd dat er een heleboel bezorgplatformen zijn ontstaan. Hun enige concurrentiemiddel? Hoe goed en hoe mooi de app werkt! Jij als ontwerper bent dus heel belangrijk, want jouw ontwerpen zorgen er voor dat de apps makkelijk en aantrekkelijk zijn om te gebruiken. Beter design = meer geld!

    In deze lessenserie ontwerp je jouw eigen thuisbezorgd geïnspireerde app.

    In deze opdracht leer je de basics van Adobe XD, het user-experience design programma.

    Na het volgen van deze opdracht met tutorial kan je het volgende in Adobe XD:


    • Een XD projectbestand aanmaken
    • Tekst toevoegen en vormgeven
    • Vormen toevoegen en vormgeven (ronde hoeken, transformeren en schalen)
    • Objectstijlen kopiëren en plakken
    • (Beeld)elementen groeperen en de naam van deze groepen aanpassen
    • SVG iconen en andere afbeeldingsbestanden importeren en plaatsen in Adobe XD
    • Tekengebieden aanmaken en dupliceren
    • Effecten zoals slagschaduw toevoegen
    • Adobe XD projectbestand lokaal opslaan

    Tutorial

    Doe lekker mee met de tutorial en je hebt binnen no-time een prachtige app!

  • Flat Design Landschap – Gravit Designer

    Flat Design Landschap

    Vele websites, apps en games zijn tegenwoordig gemaakt door gebruik van flat design. Dit is engels voor ‘plat ontwerp’.

    Flat design kenmerkt zich dus door abstracte vormen en illustraties zonder details. Daarmee is het ideaal om illustrator mee te oefenen!

    • Vandaag ga je een landschap maken waarin je laat zien hoe jij flat design toepast.In het voorbeeld filmpje hebben ze bijvoorbeeld een super gave woestijn!

    Let er op: in flat design creëer je diepte door atmosferisch perspectief. De achtergrond bestaat uit wel 6 lagen! (voorplan, middenplan, achterplan, etc)

    Atmosferisch Perspectief

    Hoe verder weg een laag staat, hoe lichter deze wordt! (en meer lijkt op de kleur van de lucht)

    Productie-eisen

    BB/KBL
    Vier plannen met elk een andere kleur
    – Een luchtplan met maan of zon
    – Elk plan heeft een gevarieerd berglandschap
    Netjes gewerkt
    – Plannen sluiten aan volgens productie-eisen

    GL/TL/Havo
    Gevuld Landschap met begroeiing en een vorm van bewoning
    Vier plannen vervagend qua kleur (atmosferisch perspectief)
    Een luchtplan met maan of zon + vogels of andere objecten
    – Elk plan heeft een gevarieerd berglandschap
    – Voorplan is met meer detail uitgewerkt (schaduwen, lichten)
    Netjes gewerkt
    – Plannen sluiten aan volgens productie-eisen

    Tutorial

    Werkbestanden

    In deze tutorial maken we gebruik van een werkbestand. In dit bestand staan de eisen in de kantlijn aangegeven. Download dit bestand om in de les of thuis aan te werken!

    DOWNLOAD (dit kan alleen met de PRO versie van Gravit Design): Flat Design landschap.ai

    Atmosferisch perspectief uitleg

    Inleveren op Magister.me

    Sla je bestand op als .ai en als .PDF.

    Lever de .pdf in op Magister.me.

  • Dieren opbouwen uit vorm – Gravit Designer

    Introductie

    • Bij deze opdracht ga je een zelfgekozen dier tekenen in Gravit met de basisvormen.
    • Je gaat de ankerpunten van de basisvormen aanpassen, om zo elke vorm te maken die je maar wilt!

    Tijdens deze opdracht gebruik je de volgende (nieuwe) gereedschappen:

    • De zwarte pijl
      Hiermee kun je vormen selecteren en transformeren
    • De witte pijl
      Hiermee kun je losse ankerpunten selecteren
    • Het basisvormen gereedschap Hiermee kun je vaste vormen maken. Onder het kleine pijltje in de hoek kan je nog meer vormen kiezen. Zoals vierkant, ovaal, veelhoek, ster etc.
    • Pengereedschap (ankerpunt toevoegen en ankerpunt verwijderen)
      Met het pengereedschap kan je ankerpunten toevoegen of juist verwijderen uit een vorm.
    • Rechtermuisknop > Transformeren > Spiegelen
      Hiermee kan je elke vorm horizontaal of verticaal spiegelen
    • Laag naar achtergrond verplaatsen

      Wil je een laag achter een andere laag plaatsen, i.p.v. ervoor? Rechtermuisknop > Schikken > naar voor/achtergrond. Hiermee kan je elke vorm naar de voorgrond of de achtergrond verplaatsen

    Eindresultaat

    Aan het einde van deze opdracht heb je een dier gemaakt dat hierop lijkt:

    Eisen

    Voor deze opdracht kan je een voldoende of onvoldoende scoren.

    De opdracht is voldoende afgerond als het ten minste het volgende bevat:

    • Basisvorm: Je gaat de ankerpunten van de basisvorm aanpassen
    • Kleur: De vormen zijn gevuld met verschillende lijn- en vullingkleuren
    • Compleetheid: Je moet natuurlijk wel jouw dier afmaken :-)!
    • Magister.me > PDF: Het bestand is ingeleverd op Magister.me als een Adobe PDF
    • Magister.me > Naam: Het bestand heeft de juiste bestandsnaam (opdracht5_jouwnaam_jouwklas.pdf

    Stappenplan

    Voor het stappenplan raad ik je aan de video-tutorial gebruiken in de linkerbovenhoek! (niet zichtbaar op mobiel)

    Stap 1 – Dier kiezen

    Kies één dier uit die je wil gaan namaken, let er op dat je het niet te moeilijk voor jezelf maakt! Elk dier mag, in de tutorial heb ik de Gray wolf nagemaakt.

    Stap 2 – Afbeelding downloaden

    Bovenaan deze pagina zie je een .zip bestand. Deze kan je downloaden op je computer. Open de zip door er dubbel op te klikken. Zoek het dier van jouw keuze op in de map die je hebt gedownload.

    Stap 3 – Je dier in een nieuw bestand plaatsen + laag op slot zetten

    • We gaan de afbeelding in een nieuw bestand van Gravit Design plaatsen.
    • Ga naar Gravit Design in je internetbrowser.
    • Maak een nieuw ontwerp aan: papierformaat A4, staand
    • Ga in je nieuwe document bovenaan naar bestand > importeren > afbeelding plaatsen
      Je kan ook de afbeelding van je gekozen dier in je venster slepen vanuit je downloadmap.
    • We gaan nu de laag van het dier dat je net hebt geopend op slot zetten, zodat hij niet meer in de weg zit.
    • Nu maak je een nieuwe laag aan. Dit is de laag waar je het nieuwe dier in gaat natekenen. Zorg dat deze boven de laag sleept die je op slot hebt gezet.

    Stap 4 – Vormen maken met pen-gereedschap

    VORMEN MAKEN – Maak met je pengereedschap de eerste vorm door ankerpunten neer te zetten.

    VORM AANPASSEN – Is je vorm niet helemaal passend?
    Klik het witte selectiepijltje (direct selecteren) aan in je gereedschappen en selecteer nu één ankerpunt (deze kleurt blauw als het is geselecteerd). Je kan dit ankerpunt nu verslepen, om jouw gewenste vorm te krijgen!

    Stap 5 – Vorm aanpassen of verbeteren

    VORM AANPASSEN – Is je vorm niet helemaal passend?
    Klik het witte selectiepijltje (direct selecteren) aan in je gereedschappen en selecteer nu één ankerpunt (deze kleurt blauw als het is geselecteerd). Je kan dit ankerpunt nu verslepen, om jouw gewenste vorm te krijgen!

    ANKERPUNTEN VERWIJDEREN OF TOEVOEGEN – Dit doe je door je vorm te selecteren met je zwarte pijltje > dan ga je naar je pengereedschap > vervolgens ga je met je pennetje op de lijn staan waar je een ankerpunt wil bijvoegen of op het ankerpunt welke je wil weghalen. Dan verschijnt er een + of – naast je pengereedschap.

    Stap 6 – Geef je dier kleur! (vulling)

    Kleuren geven

    Maak nu de vormen van de rest van jouw dier af!
    We gaan kleur geven aan het dier. Selecteer het vlak wat je gaat inkleuren! Geef je vlak rechts bij ‘vulling’ een kleur. Je kan zelf een kleur bedenken of je neemt een kleur over met het pipetje. Zorg er ook voor dat je de rand (omlijning) weghaalt door op het prullenbakje te klikken.

    Pipetje

    We kunnen ook met het pipetje de kleur opzoeken die de afbeelding heeft! Klik bij vulling op het kleine pipetje wat erbij staat. Dan kan je met het verschenen rondje ergens in je beeld klikken op de kleur die je wil overnemen.

     

    Tip:

    Als je andere kleuren leuker vind voor je dier kan dat natuurlijk altijd! 

    Dekking of transparantie aanpassen

    Handig: zet jouw dekking op 50%

    Zo kan je veel beter zien wat je doet, en welke vorm je van het dier overtrekt!

     

    Stap 7 – Vormen spiegelen en verplaatsen naar voorgrond

    Spiegelen

    Laag spiegelen

    Elke vorm kan je ook spiegelen!
    Rechtermuisknop > Transformeren > horizontaal omkeren
    Let op: kopieer of dupliceer de vorm eerst even. Hiervoor zijn 3 manieren:
    1. Dat kan bovenaan bij ‘bewerken’ > ‘dupliceren’
    2. Bewerken > kopiëren>bewerken > plakken
    3. De ‘option/alt’ toets ingedrukt houden terwijl je het vlak sleept.

    Laag naar de achtergrond verplaatsen

    Verplaatsen naar voorgrond of achtergrond
    Elke vorm kan je naar de voorgrond of de achtergrond verplaatsen. Dat doe je door:
    Rechtermuisknop > schikken > naar voor/achtergrond

    Stap 8 – Laatste stap: opslaan als PDF!

    Je dierenkop is klaar! Je kan nu de laag die je op slot hebt gezet met de afbeelding weghalen.

    • Je slaat eerst je document op als een ‘open’ bestand, zodat je deze nog een keer kan bewerken. Maar om het in te leveren op Magister.me moet het PDF zijn. Dat doe je altijd volgens de onderstaande stappen.

    PDF is erg belangrijk omdat het een klein document wordt en iedereen het bestand kan bekijken.

    Belangrijk:

    Niet als PDF ingeleverd = geen cijfer/onvoldoende

    Volg de stappen hieronder.

    Stap 1 Ga naar ‘bestand’ > naar ‘Cloud opslaan als’ (als je een account hebt)
    Of ga naar ‘bestand’ > bestand downloaden (dit bestandsformaat kan je alleen online in Gravit Designer openen)

    Stap 2  Ga nu het bestand opslaan als .pdf
    Bestand > Exporteren > PDF-document > 150dpi
    Je bestanden komen op je computer in je downloadmap te staan.
Verplaats deze bestanden naar je map mvi en geef ze een duidelijke naam.
 Dan kan je ze later makkelijk terugvinden.

    Bestand inleveren op Magister.me

    Lever daarna altijd meteen je werk in op Magister.me.

    Volg hiervoor de stappen in dit filmpje:

     

    Al klaar?

     

    • Je kan één van deze, moeilijkere dieren proberen! Meer uitdaging, maar ook een mooi resultaat!
    • Of je kan kijken of je een achtergrond kan toevoegen aan jouw dier:

    Hier heb je wat inspiratie:

    Tip!

    Kopieër en plak deze afbeeldingen in Illustrator. Vergeet ze niet op slot te zetten zoals je net hebt geleerd!

    Meer inspiratie? zoek op ‘low poly’ + jouw eigen zoekterm (in het engels!).

    Bijvoorbeeld: low poly landscape

     

     

     

  • Bestand aanmaken + Vaste vormen in Gravit

    LEERDOEL: In deze introductieopdracht leer je hoe het vaste vormen gereedschap werkt. Met het vaste vormen gereedschap kan je geometrische vormen maken, welke we hier ook wel basisvormen noemen. Deze kunnen als basis dienen voor eventueel uitgebreidere vormen.

    OPDRACHT: Je gaat een Mondriaan vlag maken!

    Tijdens deze opdracht gebruik je de volgende (nieuwe) gereedschappen:

    • De zwarte pijl
      Hiermee kun je vormen selecteren en transformeren
    • Het basisvormen gereedschap
      Hiermee kun je vaste vormen maken. Onder het kleine pijltje in de hoek kan je nog meer vormen kiezen. Zoals vierkant, ovaal, veelhoek, ster etc.
    • Nieuwe begrippen: Vulling en omlijning

    Eindresultaat

    Aan het einde van deze opdracht heb je een beeld gemaakt dat lijkt op een schilderij van Piet Mondriaan, maar mét een eigen twist!

     

    Eisen

    Voor deze opdracht kan je een voldoende of onvoldoende scoren.

    De opdracht is voldoende afgerond als het ten minste het volgende bevat:

    • Beeld: Het hele beeld is gevuld met rechthoeken
    • Kleur: De vormen zijn gevuld met zowel lijnkleuren als vullingskleuren
    • 3 Basisvormen: Het beeld bevat ten minste 3 verschillende basisvormen
      (ster, ovaal, driehoek, rechthoek, etc.)
    • Inleveren: Magister.me. Het bestand is ingeleverd op magister.me als een Adobe PDF
    • Bestandsnaam: Magister.me. Het bestand heeft de juiste bestandsnaam:  opdracht1_jouwnaam_jouwklas.pdf

     

    Tutorial

    Account aanmaken in Gravit Designer

    Nieuw bestand aanmaken in Gravit Designer

    Mondriaan vlag maken

    Bestand inleveren op Magister.me

    Lever daarna altijd meteen je werk in op Magister.me.

    Volg hiervoor de stappen in dit filmpje:

     

  • Vormen Samenvoegen – Skyline in Gravit

    LEERDOEL: In deze introductieopdracht leer je hoe het samengestelde vorm gereedschap werkt. Met het samengestelde vorm gereedschap kan je vormen samenvoegen en de ene vorm uit de andere uitknippen.

    Opdracht: Je gaat een skyline maken! 

    Tijdens deze opdracht gebruik je de volgende (nieuwe) gereedschappen:

    • De zwarte pijl
      Hiermee kun je vormen selecteren en transformeren
    • Het basisvormen gereedschap
      Hiermee kun je vaste vormen maken. Onder het kleine pijltje in de hoek kan je nog meer vormen kiezen. Zoals vierkant, ovaal, veelhoek, ster etc.
    • Samengestelde vorm maken
      Met twee vormen geselecteerd kan je vormen samenvoegen of de bovenste vorm uit de onderste vorm knippen.

    Eindresultaat

    Aan het einde van deze opdracht heb je iets gemaakt dat hierop lijkt:

     

    Eisen

    Voor deze opdracht kan je een voldoende of onvoldoende scoren.

    De opdracht is voldoende afgerond als het ten minste het volgende bevat:

    • Beeld: Je hebt de skyline gemaakt, die het hele beeld vult (liggend document)
    • Kleur: De vormen zijn gevuld met verschillende lijn- en vullingkleuren
    • 3 Basisvormen: Het beeld bestaat is opgebouwd uit basisvormen
    • Samengevoegde vormen: De skyline gebouwen en daken zijn gemaakt uit samengevoegde vormen
    • Magister.me > PDF: Het bestand is ingeleverd op Magister.me als een Adobe PDF
    • Magister.me > Naam: Het bestand heeft de juiste bestandsnaam opdracht3_jouwnaam_jouwklas.pdf

    Tutorial

    Bestand inleveren op Magister.me

    Lever daarna altijd meteen je werk in op Magister.me.

    Volg hiervoor de stappen in dit filmpje:

     

  • Animeer jouw naam

    In deze laatste tutorial-reeks ga je leren hoe je allerlei eigenschappen van een object kan tweenen. We gaan dit doen door de letters van jouw naam allemaal afzonderlijk een eigen effect te geven. Dit effect ga je tweenen, zodat je uiteindelijk een animatie hebt waarin al jouw letters apart bewegen!

    Zet jouw oortjes in de computer en bekijk de tutorials en doe mee!

    We gaan de naam helemaal in Animate maken

    Productie-eisen

    Je moet alle drie de tutorials hebben bekeken

    Elke letter van jouw naam moet geanimeerd zijn

    Er mogen maximaal twee letters hetzelfde geanimeerd zijn

    Je moet minimaal de volgende effecten hebben gebruikt:

    • Kleureffect (Tutorial 3.1)
    • Schalen (Tutorial 3.2)
    • Rotatie (Tuturial 3.3)
    • Één ander effect van Tutorial 3.3 (Slagschaduw, vervaging, gloed, etc)

    Sla op in jouw leerling map!

    Eindresultaat

    Jouw eindresultaat kan hier op lijken:

    3.1 Kleureffecten toevoegen

    In deze tutorial leer je hoe je kleuren kan aanpassen van een object.

    Voorbeelden

    Kleureffect met bewegingstween

     

    3.2 Schalen

    In deze tutorial leer je hoe je vormen en symbolen kan schalen van klein naar groot

    Voorbeelden

    Schalen met bewegingstween

    Draaien, transparantie, slagschaduw en gloed

    In deze tutorial leer hoe je extra effecten toevoegen aan jouw symbool. Deze effecten kan je ook tweenen! Zo leer je hoe je vormen kan laten draaien, de transparantie kan aanpassen of bijvoorbeeld een slagschaduw en gloed toevoegen!

    Voorbeelden

    Vervagingseffect met tween

    Slagschaduw met bewegingstween

    Transparantieeffect met bewegingstween

    Rotatie

  • Maak een wolk en een berg en animeer deze

    In deze oefenopdracht gaan we kennismaken met Adobe Illustrator en Adobe Animate.

    In deze opdracht gaan we het volgende doen:

    1. We gaan een wolk ontwerpen in Adobe Illustrator
    2. We gaan een berg ontwerpen in Adobe Illustrator

    3. We gaan deze twee in Adobe Animate importeren en door te bewegings-tweenen in Adobe Animate.

    Video tutorials

    2.1 Wolk ontwerpen in Adobe Illustrator

    Eerst gaan we een wolk ontwerpen.

    Bij deze opdracht oefenen we het gebruik van de Pathfinder

    2.2 Berg ontwerpen in Adobe Illustrator

    Daarna gaan we een berg ontwerpen. Denk je goed aan de overlap en de pieken?

    Bij deze opdracht oefenen we het gebruik van het Pen-gereedschap en het kleurverloop gereedschap.

    2.3 Berg en zon animeren in Adobe Illustrator

     

  • Interactief storyboard animatie maken in Adobe XD

    Interactief storyboard maken met de Auto-Animate functie in Adobe XD

    In Adobe XD zit een fantastische animatie functie die je kan gebruiken om prototypes van interactieve producten te maken. Deze mini-les is bedoeld om te integreren in grotere lessen waarbij leerlingen bezig gaan met het produceren van interactieve producten. De mini-les is te combineren met de uitleg op MVI-plein.nl. Met de kennis

    Wat is Auto-Animate?

    Het is super simpel: de functie ‘auto-animate’ herkent vormen die voorkomen op meerdere schermen. Als Adobe XD deze zelfde vormen herkent zal XD een tween-animatie tussen maken.

    De tween start op positie van het object op scherm 1 en eindigt op de positie en vorm zoals op scherm op scherm 2. Deze animatie kan je zelfs op meerdere manieren laten triggeren. Onder andere door het klikken op een object (afbeelding onderaan).

    Inspiratie

    De opdracht is geinspireerd op het tweenen in Animate. Het tweenen in Animate werkt met ‘keyframes’, waar Animate een beginpositie en een eindpositie nodig heeft. Je kan met een auto-animatie in Adobe XD weliswaar minder geavanceerde tween-bewegingen maken, maar het is wel een stuk gebruiksvriendelijker.

    Eindresultaten

    Aan het eind van deze opdracht lever je de volgende producten in:

    Wat Productie-eisen
    Een ontwerp dat digitaal interactief kan animeren in Adobe XD. Als basis-bestand gaan we in deze mini-les een grafiek animeren. ·       Er is gewerkt met de auto-animate functie van Adobe XD

    ·       Het bestand heeft ten minste 1000 x 1000 pixels

    ·       Het bestand heeft ten minste twee artboards

    ·       Er is een auto-animate overgang toegevoegd op het moment dat je op één object klikt

    ·       Beide artboards bevatten identieke objecten, maar de objecten hoeven niet op dezelfde positie of rotatie te staan.

    Tutorial

    Stap voor stap

    1. Open Adobe XD en log in
      Je gaat Adobe XD openen. Je moet waarschijnlijk inloggen. Dit kan met jouw Google account, of misschien zelfs wel met jouw school account!
    2. Maak een nieuw document aan volgens de productie-eisen
      Vraag aan jouw docent wat het formaat van jouw document moet zijn.
    3. Importeren van de bestanden.Je wil iets interactiefs maken. Hiervoor moet Adobe XD wel weten wat er interactief gemaakt moet worden! Dit kunnen zelfontworpen afbeeldingen zijn, of van internet gevonden. Je kan in Adobe XD zelfs vectortekeningen importeren.Exporteer alles wat je nodig hebt in een mappenstructuur. (Bijvoorbeeld ‘Adobe XD Interactief product’ > ‘afbeeldingen’) zodat je het bij de volgende stap kan importeren in Adobe XD.
    4. Importeren
      Importeer alle bestanden die jij wil animeren. Deze plaats je op het eerste scherm (jouw artboard). Zet de bestanden hoe je ze wil!

     

    Ontwerpen in Adobe XD

    1. Opzetten van het eerste scherm
      Zet nu alle bestanden op de juiste plaats. Als je met de tutorial van mvi-plein.nl meedoet betekend dit dat de trein, de palen en de hekken op de juiste plaats staan in jouw scherm.Je kan uiteraard ook nog tekst en andere vormen toevoegen door gebruik te maken van de gereedschappen in Adobe XD. Afhankelijk van jullie opdracht ga je iets bouwen. Dit kan zijn een menukaart, een app-concept een nieuwsbrief een DVD-menu, etc.
    2. Dupliceer het scherm 1 of 2x (nu heb je twee of drie schermen)
      Je gaat het scherm dupliceren (verdubbelen). Nu heb je kopieën van de schermen! Adobe XD herkent dat je twee dezelfde vormen en/of afbeeldingen op twee losse schermen hebt. Als je in de volgende stap nu de vormen of afbeeldingen gaat verslepen, dan zal Adobe XD daartussen kunnen animeren.
    3. Verplaatsen om te animeren
      Je wil een geïmporteerde afbeelding laten bewegen. Dit kan heel makkelijk door in het eerste scherm de afbeelding links in het scherm te hebben. En dan in het tweede scherm dezelfde gedupliceerde afbeelding en stuk naar rechts te verplaatsen. Adobe XD herkent dat je twee dezelfde vormen en/of afbeeldingen op twee losse schermen hebt en zal daartussen kunnen animeren.Je kan in deze stap ook al een 3e scherm maken, waar je weer wat in verplaats
    4. De animatie laten afspelen met de prototype functie van XD
      De animatie moet worden geactiveerd door op bijvoorbeeld een afbeelding of vorm te drukken. In Adobe XD kan je dus van alles een knop maken! Bekijk de tutorial op mvi-plein hoe je dat moet doen. Schakel over naar de prototype weergave. Verbind nu de bij stap 5 gemaakte knop uit scherm 1 met scherm 2.
      Stel in het rechtervenster in dat de ‘type’ overgang ‘auto-animate’ is.

    5. Experimenteer!

    Je kan echt helemaal los gaan hiermee! Je zou bijvoorbeeld ook meerdere schermen kunnen maken waartussen steeds één stapje van de animatie zit. Je kan er ook bijvoorbeeld voor kiezen om in plaats van de animatie te starten na een klik, dat hij start na een bepaalde verstreken tijd.

    Voeg geluid toe
    Voeg nu geluid toe aan jouw animatie. Zoek op google naar ‘free sound effects’ en download een paar geluidseffecten. Dit moet .wav of .mp3 zijn. Volg de tutorial op mvi-plein.nl en voeg de geluidseffecten toe als een extra ‘action’ bij de animatie!

    Afsluiting

    1. Sla het bestand op.Altijd handig om eerst even jouw bestand op te slaan. Klik op CMD + S op jouw toetsenbord, of doe het via de menubalk
    2. Testen in de voorvertoning
      Klik op voorvertoning om jouw interactief ontwerp met animate in de voorvertoning zien. Vraag een klasgenoot om jouw prototype animatie te testen!
    3. Scherm opnemen
      Adobe XD heeft in de voorvertoning een hele handige ‘preview opnemen’ functie. Klik op het opname icoon als je begint. Dan kan je jouw app-prototype laten zien! Als je klaar bent klik je weer op de opname knop. XD zal je dan vragen waar je jouw bestand wil.
    4. Inleveren
      Lever het Adobe XD-bestand en jouw voorvertoning opname in op de door de docent aangewezen wijze.
  • Oefening – Flat Design Potten

    In deze opdracht ga je oefenen met de volgende tools

    • de basisvormen werken en kunnen deze toepassen
    • vormen moeten dupliceren en groeperen
    • De pathfinder werkt en kunnen deze toepassen
    • Het pen-gereedschap en pen-kromming werken en kunnen toepassen

    De Tutorial

  • Attributen ontwerpen

    Jouw game heeft attributen nodig die jouw hoofdrolspeler kan oppakken. Deze ga jij In pixel-art ontwerpen voor jouw game! Maar een stilstaand attribuut is wat saai, daarom geven we die in Piskel een animatie, die we straks kunnen gebruiken in de game.

    In deze opdracht leer je hoe je je attributen kan ontwerpen in Piskel

    Ook leer je hoe je dit doet in verschillende lagen, zodat je later deze lagen makkelijk kan animeren.

    Uitleg

    Kijk de uitleg over hoe je attributen kan ontwerpen in Piskel in deze video-tutorial:

    Voorbeeldbestand

    Download het bovenstaand .piskel bestand en open die in www.piskelapp.com als je wil zien hoe ik het bestand heb gemaakt.

    Belangrijke stappen

    Onion skin

    1. Gebruik de onion-skin functie om makkelijk het vorige frame heel licht over het nieuwe frame te leggen. Dit kan je gebruiken om het volgende frame sneller te kunnen tekenen.

    Inspiratie

    Hieronder staan walking cycles van bekende games. Zo zie je maar, met 3 frames kan je toch mooi animeren!

    Attributen voorbeelden

  • Log in in Piskel met Google

    We werken bij Game-Design met het online pixel-art programma Piskel.app.

    Deze online app heeft allerlei handige tools om jouw pixel-art animaties zo makkelijk en mooi mogelijk te maken!

    Inloggen in Piskel met Google

    Je hoeft geen account te hebben om in Piskel.app te werken, maar wil je jouw bestanden opslaan moet je inloggen met Google.

    1. Ga naar www.piskelapp.com
    2. Klik rechtsboven op ‘sign in’
    3. Log in met jouw google account, of maak een google account aan.
    4. Je bent ingelogd in Piskel!

     

  • Titelscherm maken

    In deze opdracht leer je alles wat je moet weten om het titelscherm te vervangen in Construct 3.

    We hebben in opdracht 4.6 onze eigen titelscherm en startknop gemaakt. Deze gaan we in deze opdracht toevoegen aan de game!

    Uitleg

    In deze video-tutorial leer je:

    • Hoe je de achtergrondafbeelding kan veranderen in het titelscherm
    • Hoe het titelscherm werkt in het game_code tabblad
    • Hoe je de startknop verandert

    [text-blocks id=”6152″ slug=”game-design-gebruik-startproject”]

    Belangrijke technieken

    Sinus gedrag aanpassen

    Om het titelscherm een stuk gaver te maken hebben we een sinus-gedrag toegevoegd aan de start-knop en aan de achtergrondafbeelding in het TitelScherm tabblad.

    Sinus-gedrag

    Wat is een sinus-golf? En hoe bepaalt dat beweging? Een Sinus-golf is een wiskundig principe die door een golf een steeds herhalende beweging kan berekenen.

     

    1. Klik op jouw startknop en verander de instellingen van het sinus-gedrag in de linker-eigenschappen kolom
       Kijk eventjes het filmpje voor wat je in het sinusgedrag kan veranderen!

    Afbeeldingen aanpassen

    1. Klik op het de beide sprites (achtergrond en startknop) en sleep jouw eigen, in opdracht 4.6 ontworpen titelscherm hier in.
  • Achtergrond vervangen

    In deze opdracht leer je alles wat je moet weten om de achtergrond te vervangen in Construct 3.

    We hebben in opdracht 4.5 onze eigen attributen getekend en geëxporteerd als Sprite-sheet. Deze gaan we in deze opdracht toevoegen aan de game!

    Uitleg

    In deze video-tutorial leer je:

    • Hoe je de achtergrond kan importeren en veranderen met jouw eigen ontworpen achtergrond
    • Hoe je de grootte van jouw level verandert

    [text-blocks id=”6152″ slug=”game-design-gebruik-startproject”]

    Belangrijke technieken

    Sprites vervangen

    1. Dubbelklik op jouw achtergrond en sleep jouw zelf gemaakte frame er in
    2. Sleep nu jouw in opdracht 4.5 ontworpen achtergrond er in
    3. Herhaal dit voor de ondergrond laag

    Document vergroten

    1. Klik op een grijs, leeg gedeelte in jouw game-laag  en  voer een  nieuwe  grootte  in
  • Attributen plaatsen

    In deze opdracht leer je alles wat je moet weten om attributen te plaatsen

    We hebben in opdracht 4.4 onze eigen attributen getekend en geëxporteerd als Sprite-sheet. Deze gaan we in deze opdracht toevoegen aan de game!

    Uitleg

    In deze video-tutorial leer je:

    • Hoe je muntjes en hartjes plaatst in Construct 3
    • Hoe je de levens en muntentellers werken in Construct

    [text-blocks id=”6152″ slug=”game-design-gebruik-startproject”]

    Belangrijke technieken

    Muntjes en hartjes plaatsen in de game

    1. Selecteer de game-laag en sleep het muntjes of hartje in de game
  • Vijanden en Afgaan

    In deze opdracht leer je alles wat je moet weten om de vijand aan te passen in Construct 3

    We hebben in opdracht 4.3 onze eigen vijand getekend en geëxporteerd als Sprite-sheet. Deze gaan we in deze opdracht interactief maken

    Uitleg

    In deze video-tutorial leer je:

    • hoe je het gedrag van de vijand kan aanpassen
    • hoe de code van de vijand werkt

    Belangrijke technieken

    Gebruik het startproject

    1. In deze opdracht maken we gebruik van het startproject. In Opdracht 5 heb je deze opgeslagen op jouw Google Drive. Open het startproject eerst voordat je verder gaat!
      Heb je dit niet gedaan? Ga dan eerst terug naar opdracht 5
    2. Ga naar www.editor.construct.net
    3. Klik op Open (op klein scherm)of Cloud (op groot scherm)

    4. Klik op Google Drive als Service en selecteer het Game-design-startproject

  • Level met jouw tegels tekenen

    In deze opdracht leer je alles wat je moet weten om een level te tekenen die je als level-tegels hebt ontworpen in Piskel.

    We hebben in opdracht 4.2 onze eigen level-tegels getekend en geëxporteerd als Sprite-sheet. Deze gaan we in deze opdracht gebruiken als een borstel, waarmee we ons eigen level kunnen tekenen in construct 3!

    Uitleg

    In deze video-tutorial leer je:

    • hoe je jouw level-tegels die je hebt gemaakt in Piskel kan exporteren als sprite-sheet
    • hoe je jouw level-tegels die je hebt gemaakt in Piskel kan importeren in Construct 3
    • Hoe je een level kan tekenen met de tegelkaart-tools in Construct

    [text-blocks id=”6152″ slug=”game-design-gebruik-startproject”]

    Belangrijke technieken

    Importeer jouw eigen level-tegels

    We gaan natuurlijk niet de standaard level-tegels gebruiken in jouw game, we gaan jouw eigen ontworpen level-tegels importeren in Construct 3!

    1. Exporteer jouw level-tegels in Piskel als spritesheet
      Schilderij-icoon > PNG tabblad > Sprite file export Piskel maakt dan automatisch een afbeelding waarin al jouw frames naast elkaar staan. Dit is jouw tilemap die je kan gebruiken in Construct! 
    2. Sleep jouw level-tegel spritesheet naar de level-tegel venster in Construct

    Borstel aanpassen en level tekenen

    In Construct 3 kan je jouw level tekenen met de borstel

    1. Klik het getekende level aan in Construct 3
    2. Klik op het pijltje naar onderen > borstel aanpassen
    3. Pas de borstel aan met jouw level-tegels zoals je in de tutorial van deze opdracht hebt gezien
    4. Selecteer de borstel
    5. Teken jouw level!
  • Sprites vervangen

    In deze opdracht leer je alles wat je moet weten om alle sprites aan te passen in jouw game.

    We hebben in opdracht 4.1, 4,2 en 4,3 onze eigen hoofdrolspeler, vijand en attributen getekend en geëxporteerd als Sprite-sheet. Deze gaan we in deze opdracht toevoegen aan de game!

    Uitleg

    In deze video-tutorial leer je:

    • hoe je de sprites en spriteanimaties vervangt van de hoofdrolspeler, de vijand en de hartjes

    [text-blocks id=”6152″ slug=”game-design-gebruik-startproject”]

    Belangrijke technieken

    Sprite-Animatie toevoegen in Construct

    1. In 4.1, 4,2 en 4,3 heb je jouw sprites in Piskel als een spritesheet geëxporteerd.
      Deze ga je nu importeren in Construct door het bestand vanuit jouw downloads naar het venster te slepen dat nu open staat. > importeer als afbeeldingreeks
    2. Kijk goed naar jouw bestand, in hoeveel kolommen en rijen is jouw tile-map opgemaakt? Dit kan je in piskel zien, maar je kan ook tellen. In dit voorbeeld hebben we 5 horizontale en 4 verticale ‘cellen’. Voer dit getal in.Hierbij is het handig om het vinkje ‘volledig animatie vervangen’ aan te hebben staan.


    3. Je hebt nu jouw animatie in construct gezet! Klik nu op de andere animatie en doe hetzelfde.
  • Beginnen met het startproject

    We gaan onze game interactief maken in de Game-engine Construct 3.
    Dit betekend dat je jouw ontwerpen straks kan besturen in een echte game!


    Game Engine

    Construct 3 is de game-engine die wij gebruiken om onze game te maken.

    Een game-enige is een programma waarmee je jouw game werkend maakt. Je kan bijvoorbeeld van een stilstaand beeld een bewegend game-karakter maken die ook echt reageert op een besturing! 

    Uitleg

    In deze tutorial leg ik alle basics uit hoe het startproject werkt en wat er in het startproject zit. Ik leer je wat het verschil is tussen het game-ontwerp en de game-code blad. In de komende opdrachten ga ik je leren hoe je jouw game startproject helemaal kan aanpassen naar jouw eigen ontwerp!

    Open het startproject

    Dit is dezelfde uitleg als je hebt gezien in Opdracht 5 – een account aanmaken

    Download het game-startproject

    Zoals je in opdracht 5 hebben gelezen maken we gebruik van het startproject bij Game Design. Dit is een Construct 3 .c3p bestand. Deze kan je hierboven downloaden en openen in Construct 3!

    Het mooie van dit bestand is dat alles al in principe werkt, je gaat vervolgens in opdracht 7 t/m 13 de tutorials volgen waarin ik je leer hoe je jouw eigen ontworpen game bestanden uit Piskel (opdracht 4.1 t/m 4.6)

    Log in in Construct 3

    1. Ga naar www.editor.construct.net
    2. Log in in Construct 3. Klik rechtsbovenin op [gratis versie] gast en klik op login

    Open het Startproject

    We gaan nu het startproject openen in Construct 3

    1. Klik op ‘Bestand’
    2. Selecteer het gedownloade game-design-startproject.c3p en klik op ‘open’

     

  • Maak account in Construct 3

    We werken bij Game-Design met het ‘start-project’ dit is een Construct 3 project waar alle interactieve functionaliteiten die nodig zijn voor een pixel-platform game al in zitten! Download bovenstaand bestand en bekijk de tutorial hoe je deze in Construct kan openen.

    Game Engine

    Construct 3 is de game-engine die wij gebruiken om onze game te maken.

    Een game-enige is een programma waarmee je jouw game werkend maakt. Je kan bijvoorbeeld van een stilstaand beeld een bewegend game-karakter maken die ook echt reageert op een besturing! 


    Uitleg

    Stappen uitgeschreven

    1. Ga naar www.editor.construct.com
    2. Klik op guest > ‘register’Maak nu jouw account aan: tip: gebruik je x11-emailadres! Vink alle vakjes aan!
    3. Ga opnieuw naar www.editor.construct.com en klik op guest > log-in. Log nu in met jouw gebruikersnaam en wachtwoord dat je net hebt aangemaakt.

    Jouw account koppelen aan een google drive voor opslag

    Je kan jouw bestand op twee manieren opslaan in Construct 3. De makkelijkste manier is via de Cloud, bijvoorbeeld in jouw google drive! 

    1. In het hoofdvenster van Construct klik je op de cloud knop