Categorie: Niveau 2 – Basis

Symbols

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.

IntroOefening 1Oefening 2Oefening 3Theorie
Symbols Panel

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:

  • Symbol Sprayer Tool: Dit gereedschap wordt gebruikt om meerdere exemplaren van een symbool op je kunstwerk te spuiten. Je kunt de dichtheid en grootte van de gespoten symbolen aanpassen.
  • Symbol Shifter Tool: Met dit gereedschap kun je symbolen binnen je kunstwerk verplaatsen.
  • Symbol Scruncher Tool: Hiermee kun je symbolen in elkaar drukken of uitrekken.
  • Symbol Sizer Tool: Dit gereedschap wordt gebruikt om de grootte van symbolen aan te passen.
  • Symbol Spinner Tool: Hiermee kun je symbolen roteren.
  • Symbol Stainer Tool: Dit gereedschap wordt gebruikt om de kleur van symbolen aan te passen.
  • Symbol Screener Tool: Met dit gereedschap kun je de opaciteit van symbolen aanpassen.
  • Symbol Styler Tool: Hiermee kun je grafische stijlen toepassen op symbolen.

Download training_symbols.ai en open dit bestand in Illustrator.

Vul het glas met bubbels zoals in dit voorbeeld:

  1. Maak van de bubbel een symbool door deze in het paneel “Symbols” te slepen (en klik OK om de standaard instelling te gebruiken).
  2. Open het contextmenu in het paneel Symbols en kies Edit Symbol.
  3. Selecteer alle objecten in de bubbel en maak deze kleiner (ongeveer 40×40 px).
  4. Klik linksboven op de pijl terug om het bewerken van de bubbel te verlaten.
  5. Kies de Symbol Sprayer Tool (zie je deze niet? Kies Window > Toolbars > Advanced) en spray bubbels op het water in het glas.
    • Let er op dat je binnen het glas blijft en dat bubbels niet boven het water komen.
    • Je kunt met Alt/Option ingedrukt ‘gummen’.
  6. Onder de Symbol Sprayer Tool vind je nog meer tools. Kies de Symbol Sizer Tool en maak variatie in de grootte van de bubbels (Alt/Option maakt ze kleiner).

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.

Voorbeeld
Verschillende tinten in de haren van de wenkbrauw
  1. Open het contextmenu van het paneel Symbols en kies Open Symbol Library > Hair and Fur.
  2. Kies in dit paneel het eerste symbool (Brown Hair 1) en teken met de Symbol spray brush een flinke hoeveelheid haar bij de wenkbrauw aan de rechterzijde.
  3. Gebruik de Symbol Scruncher en Symbol Move Tool om de haren op een hoopje te krijgen.
  4. Gebruik de Symbol Spinner Tool om de haren in de groeirichting te krijgen. Let op: dit is niet zo intuïtief; je moet niet met de groeirichting mee “kammen”, maar 90 graden zijwaarts op de groeirichting. Je moet ook meerdere malen over dezelfde plek gaan om de haren volledig in de juiste richting te krijgen.
  5. Wanneer je de wenkbrauw helemaal goed hebt, dan kopieer je deze naar de linkerkant en gebruik je Object > Transform > Reflect om deze te spiegelen.
  6. Gebruik nu de Symbol Stainer Tool om de haren verschillende tinten te geven.
  7. Teken een stoppelbaard in een nieuwe Symbol Set. Zet ook hier de haren in de groeirichting.
  8. Maak de stoppels van zijn snor iets kleiner met de Symbol Sizer Tool.

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:

  • Rode tenten (jongeren)
  • Groene tenten (rust)
  • Gele tenten (gezinnen)
  • Blauwe tenten (minder validen)
  • Campers
  • Bomen (3 soorten)

Ontwerp deze iconen:

  • Toilet (10x)
  • Douche (5x)
  • Kassa (5x)
  • Eten en drinken (10x)
  • Informatie-punt (3x)
  • EHBO (3x)
  • Gevonden voorwerpen (3x)
  • Oplaadpunt (10 x)

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:

Voorbeeld

Perspectief

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”

Opacity Masks

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”

WP Navigatie

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.

OpdrachtClassic MenuNavigation BlockElementor

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:

  • Home (link naar je Root URL)
  • Projecten: submenu met je (school)projecten
    • Project A
    • Project B
    • etc
  • Vrij werk: link naar een categorie “Vrij werk”
  • About me
  • Contact

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.

Een menu maken
  1. Klik op Appearance > Menu (Weergave > Menu)
  2. Vul een naam in bij Menu Name (bv. “Hoofdmenu”)
  3. Zet onder Display Location een vinkje bij Primary Menu.
  4. Klik op Create Menu.

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.

Een menu bewerken

Wanneer je een menu hebt aangemaakt kun je deze vullen met de volgende type items:

  • Pages: een lijst met gepubliceerde pagina’s
  • Posts: een lijst met gepubliceerde berichten
  • Landing Pages: een lijst met gepubliceerde landingspagina’s
  • Custom Links: een URL die je zelf invoert
  • Categories: een link naar categorieën waarin je je berichten kan sorteren.

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

Een menu maken
  1. Klik op Appearance > Editor (Weergave > Editor).
  2. Klik op Patterns en selecteer Header. Klik nu op de naam van de header die in beeld verschijnt.
  3. Klik op het potlood naast de header naam. Afhankelijk van je thema zie je nu misschien al een pre-fab menu. In dat geval kun je het menu bewerken door erop te klikken.

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.

Een menu bewerken

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.

Hoe ga je te werk (bij de gratis versie)?
Stap 6: Zoek naar “menu” (1) en je vindt dit blok (2).
  1. Installeer de plugins Elementor en Elementor Header & Footer Builder.
  2. Installeer het thema Hello Elementor.
  3. Maak eerst je pagina’s en berichten aan in Elementor. Zet berichten zonodig in een categorie.
  4. Maak een menu volgens de methode onder tabblad “Classic Menu”.
  5. Maak in de Header & Footer Builder een header aan.
  6. Plaats in deze header het Navigatie element dat de HFB plugin toevoegt.
  7. Selecteer in de instellingen het menu dat je in stap 4 hebt gemaakt.
Instellingen voor de header in de Header & Footer Builder (stap 5)

Lastig om te leren

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.

Multi Me

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”

Sliders

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”

Animatie

Tijd: 30 minuten

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

IntroStap 1Stap 2

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

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

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

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

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

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


Schets van het papier trekken

Tijd: 20 min

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

Lees verder “Schets van het papier trekken”