• Shading van jouw pixelart

    Videotutorial

    In deze engelse tutorial leer je alles van shading voor jouw pixel art!

     

     

     

     

     

  • Strijp S app in Adobe XD

    Een document aanmaken in Adobe XD

    Een header met navigatieknoppen maken

    Volgpagina’s vullen met content

    Knoppen en navigatiestructuur

    Scroll pagina maken

    Een foto pop-up

    Een plattegrond pop-up

  • 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.


    4. 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
    2. Onder service > klik op ‘google drive’ Helaas werkt de microsoft onedrive koppeling niet met school.
    3. Log in met jouw google account in het venster dat oppopt. Het zou goed kunnen dat je ook met jouw x11 gegevens hier kan inloggen!
    4. Je bent klaar!

    Open het startproject

    Download het game-startproject

    In deze lessenserie maken we gebruik van het startproject. 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

    Log nu in

    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’

     

  • Titelscherm ontwerpen

    Jouw game heeft een titelscherm geïnspireerd op jouw thema van opdracht 2. Deze ga jij In pixel-art of in photoshop ontwerpen voor jouw game!

    In deze opdracht leer je hoe je je een titelscherm kan ontwerpen in Photoshop met bestanden vanuit Piskel er aan toegevoegd.

    Ook gewoon in Piskel te doen!

    Wil je jouw titelscherm maken in Piskel? Dat kan natuurlijk ook! Stel jouw bestand dan groter in

    Uitleg

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

    Belangrijke stappen

    Deze stappen zijn belangrijk in deze opdracht

    Exporteren van een frame uit Piskel

    1. Wil je een frame vanuit Piskel exporteren om te gebruiken in jouw titelscherm in Photoshop?Schilderij-icoon > PNG tabblad > Selected frame export
      Piskel maakt dan automatisch een afbeelding waarin alleen het geselecteerde frame wordt geëxporteerd.

  • Achtergrond ontwerpen

    Achtergrond ontwerpen in Piskel

    Jouw game heeft een achtergrond geïnspireerd op jouw thema van opdracht 2. Deze ga jij In pixel-art ontwerpen voor jouw game!

    In deze opdracht leer je hoe je je een achtergrond kan ontwerpen in Piskel.

    Uitleg

    Kijk de uitleg over hoe je een vijand 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

    Deze stappen zijn belangrijk in deze opdracht

    Tile-mode aanzetten

    1. We  willen de achtergronden zo naadloos mogelijk in elkaar laten overgaan. Zet daarom de Tile Mode in Piskel aan.  Tandrad icoon > Enable Tile Mode
    2. Nu de tile mode aan staan kan je alle randen van jouw ontwerp naadloos in elkaar over laten gaan. Kijk goed!

    Exporteren van een frame uit Piskel

    1. Je zal jouw achtergrond als twee verschillende frames vanuit Piskel moeten exporteren om te gebruiken als jouw achtergrond.
      Schilderij-icoon > PNG tabblad > Selected frame export
      Piskel maakt dan automatisch een afbeelding waarin alleen het geselecteerde frame wordt geëxporteerd.

  • Vijand ontwerpen

    Vijand ontwerpen in Piskel

    Jouw game heeft een vijand. Deze ga jij In pixel-art ontwerpen voor jouw game! Maar een stilstaande vijand 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 een vijand kan ontwerpen in Piskel.

    Uitleg

    Kijk de uitleg over hoe je een vijand 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

    Afbeelding verplaatsen

    Je kan een geselecteerd stuk pixels verplaatsen in Piskel.

    1. Selecteer het gedeelte pixels dat je wil verplaatsen
    2. Verplaats en klik met het handje dit selectiegebied naar een andere plaats terwijl je shift op jouw toetsenbord ingedrukt houd. En laat jouw muisknop los.

    Exporteren

    1. Ben je klaar? Exporteer dan jouw bestand in Piskel als een Spritesheet. (zie gif) Schilderij-icoon > PNG tabblad > Sprite file export
      Piskel maakt dan automatisch een afbeelding waarin al jouw frames naast elkaar staan. Dit is jouw spritesheet die je kan gebruiken in Construct! 

  • Hoofdpersoon ontwerpen

    Hoofdpersoon ontwerpen in Piskel

    Jouw game heeft een held en (of) een vijand. Deze ga jij In pixel-art ontwerpen voor jouw game! Maar een stilstaande character zijn 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 een game-karakter 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 een character 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

    Exporteren

    1. Ben je klaar? Exporteer dan jouw bestand in Piskel als een Spritesheet. (zie gif) Schilderij-icoon > PNG tabblad > Sprite file export
      Piskel maakt dan automatisch een afbeelding waarin al jouw frames naast elkaar staan. Dit is jouw spritesheet die je kan gebruiken in Construct! 

     

    Inspiratie

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

    Lopende animaties (walking cycle)

     

     

    Stilstaande animaties (idle animation)

     

     

  • Level Tegels Ontwerpen

    Je ontwerpt jouw level als een tegel die je later in de game oneindig kan gebruiken.

    In een spritesheet zitten alle afbeeldingen die je nodig hebt om jouw level te tekenen in één afbeelding. Elk onderdeel is een tegeltje van 32 pixels bij 32 pixels (vierkant)! En is zó gemaakt dat je hem naadloos kan doortrekken.

    Uitleg

    Kijk de uitleg over hoe je level-tegels 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

    Maken van de level-tegels

    1. Maak een nieuw bestand aan in Piskel en noem deze iets als ‘Tile Map 1′
    2. Één frame is één tegel!

      Voor elke nieuw level-onderdeel maak je een frame aan (links > + add new frame)


    3. We  willen de level-tegels zo naadloos mogelijk in elkaar laten overgaan. Zet daarom de Tile Mode in Piskel aan.  Tandrad icoon > Enable Tile Mode 
    4. Nu de tile mode aan staan kan je alle randen van jouw ontwerp naadloos in elkaar over laten gaan. Kijk goed!
    5. Ben je klaar? Exporteer dan jouw bestand in Piskel als een Spritesheet. (zie gif) 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! 
      Uiteindelijk download er een bestand:

  • Game exporteren en inleveren

    We gaan de game exporteren als HTML bestanden. Zo kunnen we de game ergens anders online speelbaar maken!

    Uitleg

    Exporteren in Construct 3

    Ga naar jouw game in Construct 3 en volg de komende stappen:

    1. In Construct 3 ga je naar (linksboven): [MENU] > Project > Export
    2. Nu klik je Web (HTML5) als platform aan en klik je op [Next]
    3. We laten verder alle vinkjes uit in de Export Options, klik in dit scherm op Next
    4. Let op: nu klik je op download  naamvangame .c3p aan, dan download hij jouw game als een .zip archief bestand. Deze moet je inleveren via de mail!Pas als je hem hebt gedownload, klik je op OK. Je bent nu klaar!
    5. Lever het .zip bestand van jouw speelbare game nu in zoals de docent heeft aangegeven. (waarschijnlijk stuur je jouw game in een mailtje) Klaar!

  • Verhaal

    Een game moet ook een achtergrond verhaal hebben natuurlijk!

    Opdracht: waar speelt de game zich af?

    Je gaat in een A4’tje vertellen waar de game over gaat en waar de game zich afspeelt. Je gaat dit doen in een tekstverwerker als Google Docs (samenwerken!) of Microsoft Word.

    Game Moodboard

    Baseer jouw game op jouw game-moodboard uit opdracht 1!

    Onderzoek jouw favoriete spel

    Kies jouw favoriete 2d platform-spel. (3d is lastig om te vormen naar 2d)

    Vul het verhaal in van jouw favoriete game in, waar je eventueel jouw game op gaat baseren. Download het word bestand onderaan de pagina!

    Verhaalvragen

    Als inspiratie Vul eerst het schema in op basis van jouw favoriete game.

    Daarna vul je het schema opnieuw in, maar dan verander je het verhaal naar jouw eigen game. Je mag daarvoor het verhaal van jouw favoriete game hergebruiken.

    1. Plaats
      Waar speelt de game zich af? Waarom?
      Bijvoorbeeld: op vakantie, in de jungle, in een kasteel, etc.
    2. Tijd
      Wanneer speelt het verhaal zich af?
      Bijvoorbeeld speelt de game zich af in: de toekomst, het verleden, het nu, etc
    3. Hoofdrollen
      Wie is de hoofdrolspeler en wie is de hoofd vijand?
      Bijvoorbeeld: de hoofdrolspeler heet Link en hij is 1000 jaar in slaap geweest en nu gewekt om de wereld te redden van de vijand Ganondorf
    4. Doel
      Wat moet worden bereikt in de game, waarom?
      Bijvoorbeeld: in de game moet de prinses worden gered van de draak, etc
    5. Attributen
      Wat kan er worden verzameld/opgepakt in de game? Waarom?
      Bijvoorbeeld koopt de held de draak om met muntjes die hij verzameld

    Specificaties

    • Minimaal een A4’tje (+-300 woorden)
    • Lettertype 12
    • Ingeleverd als Microsoft Word of PDF in de MVI inlevermap

  • Moodboard

    Het is belangrijk dat we de sfeer voor onze game bepalen!

    Maak een game-moodboard  in Photoshop. Op basis van dit moodboard ga je uiteindelijk jouw game ontwerpen, dus kijk goed naar hoe andere 2d-pixel platform games het doen!

    Moodboard

    Onderdeel van een creatief proces om de uitstraling van een product in beeld te brengen. Een moodboard geeft de klant een indruk van het toekomstige product. Vaak gemaakt met collage technieken waarbij vaak gebruik wordt gemaakt van overlapping, afsnijdingen, transparantie.

    Verzamel

    1. Verzamel zoveel mogelijk beeldmateriaal voor jouw game.
    2. Gebruik Google, Pinterest, Itch.io, Behance,  etc.

    Jouw game-moodboard bevat

    • Een goed beeld van de plaats en tijd waarin jouw game afspeelt.
    • Ook pixel art (niet alleen 3d!)
    • Voorbeelden van characters
    • Voorbeelden van vijanden / eindbazen
    • Voorbeelden van bestaande games
    • Kleurgebruik van jouw game (bijvoorbeeld droevig, eng of juist vrolijk!)
    • Interface-elementen, zoals:
      – Levensbalken
      – Intro-schermen
      – Attributen, zoals muntjes en hartjes

    Specificaties

    • Formaat liggend A4
    • Opgemaakt in CMYK Kleuren
    • Opgeslagen als PDF
    • Ingeleverd in de inlevermap

  • Gratis AV apps om thuis mee te werken

    Als je thuis moet werken door al het Corona gedoe kan je natuurlijk allerlei gratis programma’s gebruiken om zonder adobe toch thuis wat moois te ontwerpen!

    Hieronder een overzicht met wat gave apps die je thuis kan downloaden en proberen

    Audio Visueel

    iOS

    ‎iMovie
    ‎iMovie

    ‎Met een gestroomlijnd ontwerp en intuïtieve Multi-Touch-gebaren kun je in iMovie trailers met Hollywood-allure en prachtige films maken. Snel magische films aanmaken • Met slechts enkele tikken kun je een prachtige aangepaste video aanmaken en delen • Selecteer een album of groep video's of afbeeld…
    App Store

     

    ‎Splice: Make music now
    ‎Splice: Make music now

    ‎Splice is a royalty-free sample library, trusted and used by your favorite music creators. With Splice Mobile, you now have the power to browse the entire Splice catalog, organize your favorite sounds, discover hidden gems, record your own audio, and start countless new ideas with Create mode—right…
    App Store
    ‎Adobe Premiere Rush：Edit Video
    ‎Adobe Premiere Rush：Edit Video

    ‎Shoot, edit, and share videos anywhere. Feed your channels a steady stream of awesome with Adobe Premiere Rush, the all-in-one app for creating and sharing videos — fast and easy. Powerful tools let you quickly create videos that look and sound professional, just how you want. Share to your favor…
    App Store

     

    Android

    Mac

  • Gratis 2D 3D apps om thuis mee te werken

    Als je thuis moet werken door al het Corona gedoe kan je natuurlijk allerlei gratis programma’s gebruiken om zonder adobe toch thuis wat moois te ontwerpen!

    Hieronder een overzicht met wat gave apps die je thuis kan downloaden en proberen

    2D vormgeving

    iPhone en iPad

    ‎Canva: AI Photo & Video Editor
    ‎Canva: AI Photo & Video Editor

    ‎Canva is an all-in-one visual communication platform that empowers the world to design. It’s a simple way to create beautiful presentations, infographics, videos, t-shirts, websites, social media posts, and more. Canva is for everyone with an idea to share, whether you’re a student, executive, or en…
    App Store
    ‎Linearity Curve Graphic Design
    ‎Linearity Curve Graphic Design

    ‎LINEARITY CURVE: UNLEASH YOUR CREATIVITY Step into the future of vector design with Linearity Curve, the ultimate platform for crafting stunning visuals effortlessly. Whether you’re a seasoned designer or just starting your artistic journey, our intuitive and powerful tools are here to revolutionize…
    App Store

    Google Play Store – Android

    Not Found
    Not Found
    play.google.com play.google.com
    Sketchbook - Apps on Google Play
    Sketchbook - Apps on Google Play

    Sketch and paint on your device with the feel and freedom of drawing on paper
    play.google.com play.google.com
    Not Found
    Not Found
    play.google.com play.google.com

    Windows

    Vectr – AI Logo Maker & Vector Editor | Background Remover & SVG Converter
    Vectr – AI Logo Maker & Vector Editor | Background Remover & SVG Converter

    AI Logo Maker & Vector Editor – Background Remover, AI Image Generator, SVG Converter
    vectr.com vectr.com
    GIMP
    GIMP

    GIMP - The GNU Image Manipulation Program: The Free and Open Source Image Editor
    GIMP GIMP
    Digital Painting. Creative Freedom.
    Digital Painting. Creative Freedom.

    Krita is a professional FREE and open source painting program. It is made by artists that want to see affordable art tools for everyone.
    Krita Krita

    Mac

    GIMP
    GIMP

    GIMP - The GNU Image Manipulation Program: The Free and Open Source Image Editor
    GIMP GIMP
    Digital Painting. Creative Freedom.
    Digital Painting. Creative Freedom.

    Krita is a professional FREE and open source painting program. It is made by artists that want to see affordable art tools for everyone.
    Krita Krita

    3D Vormgeving

    Voor Windows & Mac:

    blender.org - Home of the Blender project - Free and Open 3D Creation Software
    blender.org - Home of the Blender project - Free and Open 3D Creation Software

    The Freedom to Create
    blender.org blender.org
    Tinkercad
    Tinkercad

    Tinkercad is a free, easy-to-use app for 3D design, electronics, and coding.
    Tinkercad Tinkercad

  • 3D model renderen naar hoge kwaliteit photshop afbeelding

    In dit laatste leeronderdeel leer je hoe je jouw ontworpen beeld kan renderen. Dit betekend dat Adobe Dimension het 3D beeld omzet in een afbeelding van hoge resolutie met meer details dan je in de voorvertoning ziet.

    Wat kan je na deze skill?

    Jouw 3d ontwerp uit Adobe Dimension renderen en opslaan als een PSD bestand om verder te bewerken in Photoshop

    3D model renderen naar een hoge kwaliteit Photoshop project

    1. Start Adobe Dimension op als dat nog niet is opgestart en log in, open jouw project.
    2. We gaan eerst de documentgrootte veranderen. Klik met het zwarte pijltje op de grootte linksbovenin jouw document. Het document is nu te vergrootten door de blokjes te verslepen. Je kan rechtsonderin onder ‘Canvas Size’ ook een nieuwe grootte invoeren. Vraag aan jouw docent welke grootte je moet hebben.
    3. Ga linksboven van het ‘Design’ tabblad naar het ‘Render’ tabblad.
    4. In het ‘Render Options’ blad voer je nu de naam van de afbeelding in. Ook kan je hier kiezen waar je het bestand wil opslaan. We kiezen er voor om een PSD op te slaan, zodat alle onderdelen los worden opgeslagen. Zodat we met de laatste opdracht een poster kunnen maken van jouw 3D object!
    5. Klik nu op blauwe ‘Render’ knop. Afhankelijk van de snelheid van jouw computer heb je nu binnen enkele minuten jouw realistisch gerenderde bestand! Je ziet in de voorvertoning jouw ontwerp steeds realistischer worden!

  • 3D vorm in Adobe Dimension matchen aan omgeving

    In het vorige leeronderdeel heb je jouw model geïmporteerd in Adobe Dimension. Je weet nu hoe je materialen kan toevoegen aan jouw model. Nu gaan we kijken of we deze modellen kunnen zetten in een ‘echte’ omgeving.

    Wat kan je na deze skill?

    1. Jouw 3d ontwerp mooi belichten in Adobe Dimension
    2. De camera wijzigen
    3. De camera matchen aan het beeld

    Camera’s en licht in Adobe Dimension matchen

    1. Start Adobe Dimension op als dat nog niet is opgestart en log in, open jouw project.
    2. Scroll in de materialenlijst links helemaal naar beneden totdat je plaatjes ziet van omgevingen. Je kan op één van de plaatjes klikken.
    3. Je zal zien dat de achtergrond wordt toegevoegd van het plaatje. Maar er is meer. Klik nu in het rechtermenu op ‘Match Image’ . Klik daarna op de blauwe OK knop
    4. Nu is Adobe Dimension eventjes aan het nadenken. Je zal zien dat daarna Adobe Dimension het perspectief van jouw model perfect heeft gezet in de omgeving! Hij heeft het perspectief van de camera ook aangepast. Net echt! Je ziet zelf dat de schaduw is meegenomen.

     

  • Materialen toewijzen in Adobe Dimension

    In dit leeronderdeel leer je hoe je in Adobe Dimension jouw 3D ontwerp extra detail kan geven met realistische materialen!

    Wat kan je na deze skill?

    Jouw 3D ontwerp realistische materialen geven

    Materialen toevoegen in Adobe Dimension

    We gaan individuele objecten aparte materialen geven. De gedetailleerdheid van de materialen gaan we vervolgens ook nog aanpasse.

    1. We gaan als eerst de groepsselectie uitzetten (handig voor als je meer dan één materiaal wil toevoegen in jouw ontwerp!) Houdt het pijltje in de linker gereedschappenbalk lang ingedrukt. Nu zie je een menu’tje. Vink hier ‘group selection’ uit.
      Selecteer jouw vorm. Als je per ongeluk de hele vorm selecteert moet je. En scroll nu links waar je alle vormen zit naar ‘materials’. Klik nu op één van de materialen. Je zal zien dat jouw saaie vorm nu opeens heel echt lijkt! Je kan ook materialen slepen naar het object om deze dat materiaal te geven.

    2. Dubbelklik op jouw object waarvan je de instellingen wil veranderen.Het allerbelangrijkste wat je kan aanpassen is de ‘Repeat’ instelling. Dit zegt eigenlijk hoe gedetailleerd jouw hout is (hoeveel nerven, etc). Je kan nog veel meer instellingen aanpassen, speel er lekker mee!

  • Tinkercad project exporteren naar andere programma’s

    Productie-eisen

    Aan het eind van deze opdracht:

    1. Kan je jouw 3d ontwerp uit tinkercad exporteren naar OBJ bestand
    2. Kan je jouw 3d ontwerp importeren in Adobe Dimension

    Tinkercad 3D vorm exporteren naar OBJ bestand

    We gaan jouw 3d ontwerp exporteren

    1. Start tinkercad op als dat nog niet is opgestart en log in, open jouw project.
    2. Selecteer jouw objecten en klik rechtsbovenin op ‘Export’ en klik op .OBJ
    3. Nu download jouw .obj bestand. Bewaar hem op een goede plaats!
    4. Je kan dit .OBJ bestand nu 3D printen in Cura of Renderen in Adobe Dimension

     

  • 3D model importeren in Adobe Dimension

    Wat kan je na deze skill?

    1. Na deze skill kan je jouw 3D ontworpen bestand openen in een Adobe Dimension project bestand.

    3D model importeren in Dimension

    1. OBJ bestand importeren in Adobe Dimension 

      Start Adobe Dimension op. En maak een nieuw document aan door linksbovenin te klikken op ‘Create New’
       

      Sleep nu jouw gedownloade .OBJ bestand in het Adobe Dimension. Je zal jouw TinkerCad ontwerp nu tevoorschijn zien komen!
       

      Draai jouw vorm zodat hij goed staat door aan één van de ronde hendels te draaien om jouw object.

    2. Sla nu jouw Adobe Dimension bestand op op een plaats die je kan herinneren.

  • Vormen verbinden als lego

    Productie-eisen

    Aan het eind van deze opdracht:

    1. Kan je vormen met elkaar verbinden met gebruik van basisvormen
    2. Kan je vormen met elkaar verbinden door gebruik te maken van connectoren

    Vormen verbinden als lego

    We gaan een lego-blokje namaken om zo te leren hoe we twee objecten naadloos op elkaar kunnen laten aansluiten.

    Vormen verbinden met basisvormen

    1. Start tinkercad op als dat nog niet is opgestart en log in.
    2. Sleep één basis-kubus in het werkveld. Maak hier een rechthoek van.
    3. Klik W (van werkveld) op jouw toetsenbord. Klik nu de bovenzijde waar we de lego-noppen op gaan plaatsen.
    4. Plaats 6 lego noppen op de rechthoek. Dit kan ook makkelijk doen door ze met ctrl + D op jouw toetsenbord te dupliceren (zie leeronderdeel 7) Voeg de vormen daarna samen.
    5. Dupliceer nu dit lego-blokje naar boven zodat hij precies bovenop het vorige legoblokje ligt en zodat de noppen in de volgende lego-blok verdwijnt. Maak van het onderste legoblokje een Hole en groepeer beide legoblokjes samen

    6. Als je deze vormen nu 3d-print kan je ze op elkaar klikken. En weet je zeker dat de ene vorm in de andere vorm past! Mocht Je jouw 1e vorm niet kwijt willen raken moet je die van te voren eerst dupliceren met CTRL + D 
Next