Docent
Tijd: 4 uur
Wanneer je de gratis versie van Elementor voor WordPress gebruikt kun je geen headers en footers maken. Om dit te omzeilen kun je gebruik maken van de Header en footer plugin. In deze oefening ga je een header maken met behulp van Flexbox containers.
Lees verder “Header in Elementor”Tijd: 2 uur
Symbols kun je opvatten als ’tekeningetjes’ waarvan je er meerdere gebruikt in een illustratie. Bijvoorbeeld icoontjes op een kaart. Of belletjes in een glas. Illustrator heeft een aantal handige tools om hiermee te werken.
Open het Symbol Panel via Window > Symbols. Via de knop links onderin vind je een lijstje met presets (libraries).
Je kunt een symbool zelf maken door een object in het panel te slepen. Je kunt vervolgens via het contextmenu je eigen library opslaan via Save Symbol Library.
Illustrator biedt een aantal tools om met symbolen te werken. Dit zijn de volgende:
Download training_symbols.ai en open dit bestand in Illustrator.
Vul het glas met bubbels zoals in dit voorbeeld:
TIP: Je kunt de Symbol Set veranderen in individuele objecten via Object > Expand. Zo kun je bijvoorbeeld individuele bubbels verplaatsen of bewerken.
Maak de onderstaande gezichtsbeharing na met behulp van symbols. Let op: het resultaat moet er goed uitzien, er mogen geen haren op vreemde plekken zitten en ze moeten in de juiste richting staan.
Bij deze laatste oefening ga je een illustratie van een festival terrein afmaken door slim gebruik te maken van symbolen. Ontwerp graphics en iconen voor de volgende elementen:
Ontwerp deze illustraties:
Ontwerp deze iconen:
Zet de iconen minimaal het aantal keer dat tussen haakjes staat in de afbeelding. Je mag zelf weten waar.
Zet de iconen ook in de legenda met een tekst ernaast, zodat je kunt zien wat alles betekent.
Als laatste plaats je labels boven de verschillende podia en soorten kampeerterreinen.
Bekijk ook het onderstaande voorbeeld ter inspiratie:
Tijd: 2u
Illustrator heeft een aantal tools om met perspectief te werken. De simpelste is gewoon een Transform / Distort tool, zoals je deze misschien ook kent van Photoshop. Maar Illustrator heeft ook een uitgebreide perspectief functie waarbij je je objecten in perspectief kunt plaatsen én tekenen.
Lees verder “Perspectief”Tijd: 1,5 uur
Opacity is Engels voor dekking, oftewel het omgekeerde van transparantie. Een Opacity Mask is dus een ‘masker’ dat de mate van dekking (of transparantie) uitdrukt in zwart/wit. Zwart betekent dat je niets ziet (volledig transparant) en wit betekent dat je alles ziet (volledig dekkend). Dit werkt dus hetzelfde als maskers in Photoshop.
Lees verder “Opacity Masks”Tijd: 1 uur
Sinds versie 5.9 maak je menu’s in WordPress via het zogenaamde Navigation Block. Aangezien dit compleet anders is dan in de voorgaande versies, en er ook nog veel thema’s met de klassieke menu-interface werken wordt in deze les beide varianten uitgelegd. Daarnaast vind je ook een toelichting op het gebruik van de plugin Elementor.
De opdracht is simpel: maak een menu aan in je WordPress site.
Dit betekent in het geval van je portfolio dat je een navigatiestructuur als hieronder zou kunnen opzetten:
Gebruik de informatie in de tabbladen hiernaast om dit voor elkaar te krijgen.
Let op: voordat je een menu kunt maken heb je pagina’s en berichten nodig, welke zijn gepubliceerd (en dus niet in Draft of Concept modus staan). In het geval van berichten raad ik aan om deze ook allemaal in een categorie te zetten, zodat je hier gebruik van kunt maken bij het opzetten van je navigatiemenu.
Als voorbeeld neem ik hier het thema “Twenty Twenty-One”. Dit is een thema dat nog niet met het zogenaamde Navigation block werkt en dat dus een oude menu-interface heeft.
Ook een thema als “Hello Elementor” maakt op dit moment (januari ’24) nog gebruik van de oude menu-interface.
Je hebt nu een leeg menu aangemaakt. Het menu wordt getoond op een plek die in het thema is aangeduid als de locatie voor het “Primary Menu”, meestal in de header.
Wanneer je een menu hebt aangemaakt kun je deze vullen met de volgende type items:
Dit doe je door de betreffende items aan te vinken (1) en dan op Add to Menu te klikken (2). Vervolgens kun je ze ordenen door de items omhoog of omlaag te slepen (3). Je kunt ze ook laten inspringen (ietsje naar rechts slepen) waardoor dit een submenu wordt onder het item dat erboven staat. Bekijk de afbeelding hieronder.
Vergeet niet om na de aanpassingen op Save Menu te klikken.
In de nieuwere thema’s wordt gebruik gemaakt van het zogenaamde Navigation Block. Ik ben persoonlijk nog geen fan en het voelt nog erg beta aan. Toch is het zo dat je met deze nieuwe interface meer kan, en er een aantal problemen mee worden opgelost. Als voorbeeld neem ik hier het thema “Twenty Twenty-Four”.
Nu is het de bedoeling om een Navigation Block toe te voegen aan je header. Dit block kun je vinden onder het blauwe plusje linksboven. Typ in het zoekveld “nav” (1) en sleep het Navigation block (2) naar een plek in de header (3). Zie hieronder.
Bekijk het plaatje hiernaast. Selecteer het Navigation block dat je in de header hebt geplaatst (1) en klik op Edit (2). Je ziet nu aan de rechterkant de inhoud van je menu.
Indien je de bovenstaande stappen hebt gevolgd zit je nu op een plek waar je je menu kunt aanpassen. Mocht je hier later rechtstreeks naartoe willen dan kan dat via het hoofdmenu. Kies Appearance > Navigation > [menunaam] om hier te komen.
De onderdelen van je menu kun je toevoegen door op het plusje onderaan te klikken (1) of in het menu zelf (2). Wanneer je op dit plusje klikt zie je een aantal veel voorkomende menu onderdelen, maar je kunt meer plaatsen door op Browse All te klikken (3).
Je kunt page links en post links toevoegen. Je kunt de volgorde van de menu-items wijzigen door te slepen. Je kunt door te slepen ook “inspringen” (dat plaats je een item niet recht onder een ander item maar iets rechtsonder, zodat het een submenu wordt (zie het plaatje hiernaast).
Wanneer je op een menu-item klikt kun je deze bewerken en stylen. Om vervolgens weer terug te komen bij de lijst met items in je menu moet je het Navigation block in de header selecteren. In de afbeelding hieronder zie je hoe het menu-item “Over mij” is geselecteerd. Mijn pijl hangt boven het Navigation block en deze highlight met een dun blauw lijntje. Door hier te klikken kom ik weer bij mijn lijst met menu items.
Als je werkt met de plugin Elementor heb je de keuze uit de gratis en de betaalde versie van deze plugin. In de betaalde versie heb je toegang tot het Elementor WP Menu block dat je in de header kan zetten. Wanneer je werkt met de gratis versie hebben we een extra plugin nodig: de Elementor Header and Footer Builder. Deze plugin voegt een eigen Navigatie block toe aan Elementor dat je in de header kan plaatsen.
Belangrijk om te weten: zowel de gratis als de betaalde versie van Elementor werkt niet goed samen met thema’s die met de nieuwe WordPress Navigation Block werken.
TIP: gebruik thema “Hello Elementor” wanneer je met Elementor werkt.
Het vergt wat experimenteren om dit in je vingers te krijgen. Gebruik online informatie zoals de WordPress Hulp en video’s op youtube. En vraag je mede-studenten en de docent om het je uit te leggen.
Tijd: 2 uur
In deze oefening leer je om delen van foto’s samen te voegen door middel van maskeren en een beetje kleur correctie. Je maakt een reeks foto’s vanuit één camera positie en alleen het onderwerp staat telkens op een andere plek. Daarna voeg je al deze foto’s samen in één beeld. En het onderwerp? Dat ben je zelf!
Lees verder “Multi Me”Tijd: 4 uur
Wanneer je een logo ontwerpt zijn er veel aspecten om rekening mee te houden, van ontwerp tot techniek. In deze opdracht maak je kennis met de belangrijkste technische eigenschappen van een logo en de juiste werkwijze bij het ontwerpen en opleveren.
Lees verder “Logo Design”Tijd: 1 uur
In User Interface Design (UID) kom je veel de term ‘sliders’ tegen. Dit zijn elementen waarmee je iets instelt door horizontaal te slepen of vegen over het scherm. Denk bijvoorbeeld aan het instellen van de helderheid op je telefoon. De term wordt vaak verward met een slideshow of carrousel, wat een rijtje scrollbare elementen is.
Lees verder “Sliders”Tijd: 30 minuten
In XD kun je beperkt animeren. Je moet dan denken aan hover-effecten, sliders, menu’s, etc. Animeren in de zin van tekenfilms, daar is andere software voor. Er zijn twee manieren waarop je iets kunt animeren in XD: met behulp van Artboards of met behulp van Components.
We gaan een voetbal animeren op twee verschillende manieren. Uiteindelijk zal je met beide manieren eenzelfde eindproduct hebben dat er ongeveer zo uit zal zien:
Let op: de naam van de bal moet op beide Artboards hetzelfde zijn.
Let op: de naam van de bal moet op beide Artboards hetzelfde zijn.
Tijd: 20 min
Wanneer je schetsen scant en deze in Photoshop bewerkt is het vaak handig om de schets van het papier te halen. Dat wil zeggen: je wilt de schets in een eigen laag, inclusief (half)transparante pixels, maar zonder de witte pixels van het papier.
Lees verder “Schets van het papier trekken”
