Alle berichten van Mark Van_Heck

Mark van Heck is sinds zijn jeugd altijd geïnteresseerd geweest in het leren, proberen en gebruiken van nieuwe creatieve technologie. Hij vervulde verschillende functies in ICT en onderwijs. Sinds 2007 is Mark onafhankelijke professional op beide gebieden. Hij bouwt websites, digitale leeromgevingen, interactieve leermiddelen, interactieve boeken en apps. Daarnaast geeft hij trainingen en schrijft hij inhoud voor digitale en traditionele lesmethodes, lespakketten en ander leermateriaal over ICT en andere onderwerpen. De boeken van Mark vind je hier

Kleurmodellen en kleurdiepte in Affinity Designer

Grafische ontwerpen en illustraties kunnen niet zonder kleur. In Affinity Designer kunt u met miljoenen kleuren werken, kleuren op verschillende manieren mengen en selecteren, paletten maken, een palet automatisch genereren op basis van een bestaand document of een bestaande afbeelding en veel meer. In dit artikel Kleurmodellen en kleurdiepte in Affinity Designer – een uittreksel uit mijn boek Zo werkt Affinity Designer– leert u meer over kleurmodellen en kleurdiepte.

Om een kleur op te slaan, moet een computer deze eerst omzetten in een getal. De relatie tussen getallen en kleuren is het zogeheten kleurmodel. Affinity kan met verschillende kleurmodellen werken, maar niet elk model is geschikt voor elke toepassing. Hoewel u prachtig grafisch werk kunt maken zonder deze achtergrondkennis, is het, ook voor de terminologie in de rest van dit hoofdstuk, handig als u de verschillen kent.

KLEURMODELLEN

Een kleur wordt opgeslagen in drie of vier getallen, die we kanalen noemen. Dat kan op verschillende manieren

RGB: er zijn drie kanalen voor de hoeveelheid rood, groen en blauw licht. Elk getal kan de waarden 0 tot en met 255 krijgen. Zo is 0,0,0 zwart (geen licht), 255,0,0 knalrood (alleen rood licht) en 255,255,255 wit (alle kleuren licht). RGB is gebaseerd op de manier waarop beeldschermen werken en is dan ook de standaard voor digitale beelden. RGB kent 256 x 256 x 256 ongeveer 16,8 – miljoen kleuren.

RGB hex of RGB#: als RGB, maar dan weergegeven in hexadecimale getallen.

Kleurmodellen en kleurdiepte

HSL: ook drie kanalen: het eerste geeft de kleur aan als richting op een kleurenwiel (hue) van 0°tot 360°. Het tweede is de kleurverzadiging (saturation), die van 0% (geen kleur: grijs) tot 100% (maximale kleurverzadiging) loopt. Het derde getal bepaalt de helderheid (lightness), ook van 0% (zwart) via de kleur naar 100% (wit). HSL en RGB bevatten dezelfde informatie en zijn volledig uitwisselbaar.

CMYK: de standaard voor drukwerk. CMYK bestaat uit vier kanalen die getallen van 0 tot 255 bevatten. Elke waarde hoort bij één kleur. De kleuren zijn afgeleid van de vier drukinkten: cyaan, magenta, geel (yellow) en zwart (key). Hoe hoger de waarde, des te meer inkt. 0,0,0,0 (geen inkt) is hier wit. CMYK biedt andere mogelijkheden dan RGB. CMYK wordt gebruikt voor (professioneel) drukwerk en veel kleurenlaserprinters.

LAB: benadert de manier waarop het menselijk oog werkt. Het eerste kanaal is de helderheid (lightness) van 0 tot 100. Het tweede kanaal is de positie op een as van het kleurenwiel, van -128 (groen) via 0 (grijs) naar 127 (rood). Het derde kanaal is de andere as, van blauw naar geel.

Grey, greyscale: Het document gebruikt geen kleuren, alleen grijstinten.

kleurmodellen en kleurdiepte
In de uitgebreide kleurenkiezer ziet u rechts bij elke kleur de waarde voor RGB, HSL, RGB hex en CMYK.

Kleurmodel kiezen

Gebruik RGB voor digitale beelden. RGB kunt u ook prima afdrukken, maar kleuren zijn dan vaak net wat anders dan op het scherm. Ook kunnen subtiele kleurverschillen verloren gaan. Gebruik voor professioneel drukwerk daarom bij voorkeur CMYK.

kleurmodellen en kleurdiepte
RGB (links) en CMYK (rechts). Bij RGB geldt: hoe meer kleur u combineert, hoe lichter het eindresultaat. Bij CMYK geldt het omgekeerde. De CMYK-cirkels in dit gedrukte boek hebben dezelfde kleuren als op het scherm. De RGB-kleuren wijken sterk af.

KLEURDIEPTE

Voor de meeste kanalen in de kleurmodellen kunt u 256 verschillende waarden instellen. Dat komt omdat er voor deze kanalen acht bits gebruikt worden. Dat is doorgaans ruim voldoende. Met RGB kunt u bijvoorbeeld 256 x 256 x 256, ongeveer 16,8 miljoen kleuren maken. Als u nog meer mogelijkheden wilt, kunt het aantal bits per kanaal ophogen tot 16 of zelfs 32. Voor grafische ontwerpen, logo’s en illustraties is dat meestal niet nodig: uw bestanden worden dan fors groter en u maakt gebruik van een kleurdiepte die vaak niet meer zichtbaar is in de toepassing waar uw werk voor bedoeld is.

kleurmodellen en kleurdiepte

KLEURMODEL EN KLEURDIEPTE INSTELLEN

Als u een nieuw document maakt, kunt u het kleurmodel en de kleurdiepte instellen in het rechterpaneel. U kunt deze instellingen ook in een document aanpassen, via het menu: File, Document setup, Colour.

Het kleurmodel en de kleurdiepte kunt u selecteren in de keuzelijst achter Colour format. U kunt hier kiezen uit vier verschillende modellen (RGB, Grey, CMYK en LAB) met verschillende kleurdieptes. HSL gebruikt hetzelfde model als RGB en is daarom geen aparte optie. Het getal achter het model (bijvoorbeeld RGB/8) geeft het aantal bits per kanaal aan. De standaardinstelling is afhankelijk van het type document: meestal RGB/8, alleen CMYK/8 bij professioneel drukwerk (print ready, architectural).

kleurmodellen en kleurdiepte

Nog meer lezen over het werken met Affinity Designer? We publiceerden op dit blog een aantal uittreksels uit het boek Zo werkt Affinity Designer. Kennismaken met de werkomgeving van Affinity Designer vindt u HIER. Paden en Lijnen in Affinity Designer vindt u HIERBasisvormen in Affinity Designer vindt u HIER.

Zo werkt Affinity Designer

Affinity DesignerIn bovenstaand artikel Kleurmodellen en kleurdiepte in Affinity Designer – een uittreksel uit mijn boek Zo werkt Affinity Designer– heeft u u meer geleerd over kleurmodellen en kleurdiepte. In mijn boek Zo werkt Affinity Designer wordt in de vele mogelijkheden van de uitgebreide software gedoken. Kleurmodellen en kleurdiepte zijn immers maar een aspect van het grote geheel! Wilt u bijvoorbeeld kraakheldere illustraties maken? Logo’s die u net zo scherp op postzegel- als op vrachtwagenformaat kunt gebruiken? Technische tekeningen, schema’s, plattegronden en diagrammen met rekenkundige nauwkeurigheid? Wilt u uw tekeningen bovendien met precisie kunnen bijwerken, combineren met fotografie en zonder kwaliteitsverlies kunnen verwerken? Leer dan hoe Affinity Designer werkt. Affinity Designer is snel, gemakkelijk in gebruik, heeft vele aantrekkelijke extra’s en is goedkoop beschikbaar als eenmalige aanschaf, zonder abonnement.

In dit boek neemt de auteur u mee op ontdekkingsreis door Affinity Designer. U maakt kennis met de gebruikersomgeving en de gereedschappen, leert te werken met vector- en rasterafbeeldingen en u ontdekt de kracht van lagen. Tot de behandelde onderwerpen behoren verder:

  • Paden en lijnen tekenen
  • Vormen maken en bewerken
  • Werken met kleur en kleurmodellen
  • Objecten schikken, stapelen en verdelen
  • Werken met artistieke en kadertekst
  • Afbeeldingen importeren en bewerken
  • Lagen aanpassen
  • Afbeeldingen geautomatiseerd exporteren

Basisvormen in Affinity Designer

De beschikbare basisvormen in Affinity Designer komen altijd wel van pas voor het een of ander. Bovendien blijken ze flexibel, want aanpasbaar. (De hiernavolgende tekst is afkomstig uit mijn boek Zo werkt Affinity Designer.)

Een manier om vormen te maken en te bewerken zag u in het vorige hoofdstuk:

1 Teken een pad met een van de tekengereedschappen.

2 Selecteer het pad met de Node Tool.

3 Kies de actie Close path in de contextuele menubalk.

Maar het is lastig om op deze manier vormen te maken die precies symmetrisch, perfect rond of op een andere manier heel precies zijn. Dat gaat beter met de standaard basisvormen, die we naar wens kunnen aanpassen. Deze vormen kunnen we met elkaar en met getekende vormen combineren.

basisvormen in Affinity Designer
Deze tekening is opgebouwd uit basisvormen: vooral ellipsen.

Lees verder Basisvormen in Affinity Designer

Paden en lijnen tekenen in Affinity Designer

Paden en lijnen tekenen in Affinity Designer is een van de meest voorkomende basisactiviteiten in dit ontwerp-pakket. Aan de slag dus! (De hiernavolgende tekst is afkomstig uit mijn boek Zo werkt Affinity Designer.)

Elke vectorafbeelding is opgebouwd uit (knoop)punten, paden en vormen. In het Engelstalige Affinity Designer is het handig als u de bijbehorende terminologie kent.

• Knooppunten (nodes) zijn de bouwstenen van elke vectortekening. Een punt is een positie of coördinaat in uw document. In Affinity Designer kunt u de punten zien en bewerken, maar in de uiteindelijke afbeelding zijn ze niet zichtbaar.

• Paden (paths) verbinden de punten met elkaar. Dat kan in een strakke, rechte lijn of in gebogen lijnen (krommen, curves). U kunt een pad van een lijn (stroke) voorzien om het zichtbaar te maken. De lijn krijgt dan een dikte, een kleur en nog andere eigenschappen.

• Er zijn open en gesloten paden. Bij een gesloten pad is het beginpunt hetzelfde als het eindpunt. Denk bijvoorbeeld aan een cirkel of rechthoek. Een gesloten pad is een vorm (shape). Vormen hebben een binnenkant en een buitenkant. Ze hebben niet alleen een pad als begrenzing, maar vaak ook een vulkleur (fill).

Paden en lijnen tekenen in Affinity Designer
Van links naar rechts: een open pad met een stroke, een gesloten pad met een stroke en een gesloten pad met een stroke en een fill. Bij het eerste pad zijn de nodes zichtbaar, omdat dit pad bewerkt wordt.

VRIJ TEKENEN

De eenvoudigste manier om te tekenen in Affinity Designer is met het potlood- of penseelgereedschap. Selecteer het gereedschap en sleep over het canvas: u tekent direct op het scherm.

Paden en lijnen tekenen in Affinity Designer

Paden en lijnen tekenen in Affinity Designer
Pencil Tool (links) en Vector Brush Tool (rechts).

POTLOOD EN PENSEEL

1 Open Affinity Designer en maak een nieuw document (zie hoofdstuk 2). 2 Klik aan de linkerkant van het scherm op de Pencil Tool (potlood): de zesde knop van boven.

3 Teken iets in het document door te slepen. Het potlood is op het papier zolang u de muis ingedrukt houdt.

4 Herhaal de vorige stappen, maar gebruik nu de Vector Brush Tool (penseel). Dit staat direct onder het potlood.

Merk op:

• Het potlood en het penseel werken op ongeveer dezelfde wijze. Terwijl u tekent plaatst het programma de punten op het scherm en verbindt deze met een lijn.

• Bij het potlood zijn de punten zichtbaar als u de muisknop loslaat. Bij het penseel niet.

• Het potlood tekent een dunne lijn. Het penseel maakt een dikkere lijn.

 

Paden en lijnen tekenen in Affinity Designer
Het is moeilijk om nauwkeurig te tekenen met de Vector Brush Tool. Met een muis (links) gaat het niet. Met een tekentablet (rechts) gaat het beter. Maar Affinity Designer is vooral geschikt om met andere gereedschappen, preciezer te tekenen. Zie bijvoorbeeld pagina 39.

BRUSHES GEBRUIKEN

Met de Pencil Tool tekent u altijd dezelfde soort lijn. Maar aan de Vector Brush Tool kunt u verschillende brushes of kwasten toekennen. U bepaalt daarmee de textuur van de lijn die u tekent. Dat doet u als volgt.

1 Activeer de Vector Brush Tool.

2 Activeer het studiopaneel Brushes. Als dit nog niet geopend is, kunt u dat doen via het menu: View, Studio, Brushes.

3 Kies een brush. Boven in het paneel kunt u, met behulp van een keuzelijst, uit categorieën kiezen. In elke categorie vindt u verschillende brushes.

4 Teken in uw document.

Paden en lijnen tekenen in Affinity Designer
Het studiopaneel Brushes (links) en enkele toegepaste vectorbrushlijnen (rechts).

Paden en lijnen tekenen in Affinity Designer

Zo werkt Affinity Designer

Affinity DesignerIn het boek Zo werkt Affinity Designer van Mark van Heck wordt in de vele mogelijkheden van de uitgebreide software gedoken, want natuurlijk is er veel meer mogelijk dan ‘alleen’ paden en lijnen tekenen in Affinity Designer. Wil je bijvoorbeeld kraakheldere illustraties maken? Logo’s die je net zo scherp op postzegel- als op vrachtwagenformaat kunt gebruiken? Technische tekeningen, schema’s, plattegronden en diagrammen met rekenkundige nauwkeurigheid? Wilt je jouw tekeningen bovendien met precisie kunnen bijwerken, combineren met fotografie en zonder kwaliteitsverlies kunnen verwerken? Leer dan hoe Affinity Designer werkt. Affinity Designer is snel, gemakkelijk in gebruik, heeft vele aantrekkelijke extra’s en is goedkoop beschikbaar als eenmalige aanschaf, zonder abonnement.

In dit kleurrijke boek neemt de auteur je mee op ontdekkingsreis door Affinity Designer. Je maakt kennis met de gebruikersomgeving en de gereedschappen, leert te werken met vector- en rasterafbeeldingen en u ontdekt de kracht van lagen. Tot de behandelde onderwerpen behoren verder:

  • Paden en lijnen tekenen
  • Vormen maken en bewerken
  • Werken met kleur en kleurmodellen
  • Objecten schikken, stapelen en verdelen
  • Werken met artistieke en kadertekst
  • Afbeeldingen importeren en bewerken
  • Lagen aanpassen
  • Afbeeldingen geautomatiseerd exporteren

De werkomgeving van Affinity Designer

Affinity Designer is een uitgebreid vectortekenprogramma, een ontwerpsuite. In vergelijking met soortgelijke software bovendien prettig geprijsd en geen gedoe met abonnementen. De werkomgeving van Affinity Designer is waar u het eerst en meest mee geconfronteerd wordt.

Ontwerp- en vectortekenpakketten zijn over het algemeen tamelijk duur. Bovendien zien we al jaren de vervelende trend dat fabrikanten van dat soort software alles vaak alleen nog op abonnementsbasis aanbieden. Denk aan bijvoorbeeld de software van het welbekende Adobe. Als je niet dagelijks intensief gebruik maakt van je programma’s en er flink geld mee verdient, zijn dergelijke verplichtingen vaak zonde van het geld. Affinity Designer is dan ook een verademing wat alleen dat al betreft. Niks geen duur abonnement, gewoon een eenmalige aanschafprijs en klaar. Heb je de software eenmaal in huis, dan blijkt het allemaal ook nog eens ongekend veelzijdig. Onderstaande tekst is een extract uit het boek Zo werkt Affinity Designer van Mark van Heck.

Lees verder De werkomgeving van Affinity Designer

De 10 meest gestelde vragen over Flutter

Als u programmeert in welke taal dan ook of overweegt daarmee te beginnen, dan heeft u vast van Flutter gehoord. Het relatief nieuwe systeem van Google zou het Zwitsers zakmes onder de ontwikkelplatformen moeten worden: geschikt voor elk platform en elk type applicatie. Maar wat is het nu echt? Hieronder vind je de antwoorden op de 10 meest gestelde vragen over Flutter.

1. Wat is Flutter?
Flutter is een systeem voor het ontwikkelen van apps voor meerdere platformen. De apps maak je in de programmeertaal Dart. Je kunt daarbij verschillende programmeeromgevingen gebruiken, zoals Android Studio, IntelliJ IDEA of Visual Studio Code. Ik adviseer Android Studio omdat het gratis is en veel specifieke Flutter-functies biedt.

2. Waarom heet Flutter zo?
In het Nederlands is de naam wat ongelukkig. Medici duiden met het woord een hartritmestoornis aan. De naam begint met ‘flut’. Dat is geen goed begin. Engelstaligen hebben deze associatie niet. To flutter, betekent fladderen, zoals van een vlinder. Wellicht is het een verwijzing naar de hoge snelheid waarmee Flutter het scherm vernieuwt: 60 keer per seconde, even snel als de vleugelslag van veel vlinders.
Lees verder De 10 meest gestelde vragen over Flutter

Apps programmeren in Flutter-3

Dit is deel 3 van de tutorial het maken van van een eenvoudige app met een menubalk. Op de menubalk bevinden zich drie knoppen waarmee u naar drie verschillende pagina’s navigeert. De pagina’s hebben elk een andere kleur, maar zijn verder nog leeg. Bij een echte app zou u hierop informatie of interactieve onderdelen plaatsen. Deze mini-app geeft een beeld van de wijze waarop u in Flutter een gebruikersinterface maakt. In het eerste deel gingen we aan het werk in Dartpad en maakten we een widget ‘scherm1’. In het tweede deel maakten we meer widgets en creëerden we een basisscherm. In dit derde deel maken we een menubalk en voegen we pagina’s toe.

Stap 7: Een menubalk maken

We voegen een menubalk toe aan Scaffold. Breid de Scaffold widget in de klasse MijnEersteApp uit met de code hieronder. Bespaar u daarbij wat typewerk door gebruik te maken van de keuzelijst die u oproept met ctrl-spatie. Bijvoorbeeld: als de cursor binnen de haakjes van Scaffold staat, kunt u de eerste twee of drie letters van bottomNavigationBar typen. Als u daarna op ctrl-spatie drukt, krijgt u een lijstje met mogelijkheden waarin u de juiste optie kunt selecteren. De lijst bevat alleen opties die in deze widget bruikbaar zijn.
Lees verder Apps programmeren in Flutter-3

Apps programmeren in Flutter-2

Dit is deel 2 van de tutorial het maken van van een eenvoudige app met een menubalk. Op de menubalk bevinden zich drie knoppen waarmee u naar drie verschillende pagina’s navigeert. De pagina’s hebben elk een andere kleur, maar zijn verder nog leeg. Bij een echte app zou u hierop informatie of interactieve onderdelen plaatsen. Deze mini-app geeft een beeld van de wijze waarop u in Flutter een gebruikersinterface maakt. In het eerste deel gingen we aan het werk in Dartpad en maakten we een widget ‘scherm1’. In dit vervolg maken we meer widgets en creëren we een basisscherm.

Stap 4: Meer widgets maken

Ons doel is om een app te maken waarmee de gebruiker tussen drie schermen kan schakelen. Daarom voegen we eerst twee schermen toe. Dat gaat heel eenvoudig.

  • Kopieer de klasse Scherm1: dat is alle code uit stap 3.
  • Plak deze twee keer onder de andere code, na de laatste accolade. U krijgt nu een foutmelding bij de namen van de nieuwe klassen (omdat u vaker dezelfde naam gebruikt).
  • Verander de namen van de laatste twee klassen in Scherm2 en Scherm 3.
  • Verander de kleuren: color: Colors.red wordt color: Colors.blue bij Scherm2 en color:Colors.green bij Scherm3.

Lees verder Apps programmeren in Flutter-2

Apps programmeren in Flutter in de online-omgeving van Dartpad

Probeer het zonder installatie van software

Het programmeren van professionele apps is natuurlijk geen sinecure. Maar eenvoudige apps maakt u gemakkelijker dan u wellicht denkt. De eerste stappen zijn soms wat intimiderend: voor u één regel code schrijft, moet u een programmeer- en testomgeving downloaden, installeren en leren gebruiken. In deze tutorial slaan we deze stappen helemaal over. In de online-omgeving Dartpad kunt u gratis, snel en gemakkelijk experimenteren met het app-ontwikkelsysteem Flutter en de programmeertaal Dart. Probeer het zelf met behulp van deze drie-delige tutorial. Dit is deel 1.

Als u wilt beginnen met het maken van apps, dan is dit het ideale moment. Niet eerder was het zo gemakkelijk om native apps te maken en te testen voor zowel Android als Apple. Dat is mogelijk dankzij Flutter, het relatief nieuwe ontwikkelplatform van Google. Flutter is laagdrempeliger dan andere systemen, maar biedt toch eindeloze mogelijkheden om professionele apps te bouwen: grote bedrijven vertrouwen erop voor hun essentiële apps.

In het boek ‘Apps ontwikkelen met Flutter‘ leest u hoe u met Flutter begint. Zoals in de meeste programmeerboeken, gaat het eerste deel over de installatie van de onderdelen die u nodig heeft. Deze onderdelen zijn gratis, maar de installatie is wel een drempel voor mensen die eerst eens willen uitproberen wat Flutter nu eigenlijk is en of zij er mee aan de slag willen. Voor deze mensen is er de online-applicatie Dartpad. Daar kunt u met Flutter beginnen zonder iets te installeren. Er zijn beperkingen: als u een echte app van de code wilt maken of als u aanvullende Flutter-modules wilt gebruiken, dan heeft u echt ontwikkelsoftware nodig. Maar Dartpad is ideaal als u gewoon eens wilt proberen wat Flutter is en hoe u hierin onderdelen bouwt met Dart (de programmeertaal van Flutter). Dat gaan we doen in deze tutorial. Lees verder Apps programmeren in Flutter in de online-omgeving van Dartpad

Apps ontwikkelen met Flutter

Apps ontwikkelen met Flutter

Flutter: een mijlpaal in app-ontwikkeling

Ze hebben bij Google vast goed nagedacht over een naam die associaties oproept met snelheid, lichtvoetigheid, schoonheid en elegantie. Als de vleugelslag van een vlinder. Het werd het Engelse woord voor fladderen: ‘flutter’. Een naam die begint met ‘flut’ is in het Nederlands een slecht begin. Ik krijg dan ook meewarige blikken als ik zeg dat Flutter met afstand het beste systeem is dat ik ooit zag om apps te maken. Toch denk ik dat Flutter op dit moment het beste systeem is om apps te ontwikkelen voor zowel iOS als Android.

Boek

Apps ontwikkelen met FlutterJe vermoedde het al, dus ik noem het gelijk maar even: ik schrijf dit stuk naar aanleiding van Apps ontwikkelen met Flutter, een boek dat ik over Flutter schreef. Maar voor je nu denkt dat verkoopdrang de drijvende kracht is achter mijn enthousiasme: zo zit het niet. Het is andersom. Met een decennialange ervaring in programmeren en ontwikkelen voor het web, maakte ik begin 2019 kennis met Flutter. Het systeem fascineerde me zo dat ik mijn bestaande apps hierin heb omgebouwd en het nu gebruik voor alles wat met appontwikkeling te maken heeft. Terwijl ik het systeem leerde kennen, verbaasde ik me over de eenvoud, de elegantie en de snelheid ervan. Dat was voor mij aanleiding om met dit onderwerp naar een uitgever te stappen. Lees verder Apps ontwikkelen met Flutter