Inleiding.
In dit artikel over pixel art zal ik het onderwerp kleur in pixel art bespreken. Ik zal onder andere kort een stukje vertellen over kleur theorie, kleurwaarden, grijswaarden, kleurtonen en kleur paletten.
Ik zet vaak een opmerking bij de dingen die ik beschrijf in dit artikel. Op die manier probeer ik zo duidelijk mogelijk te zijn. Dit is een ingewikkeld onderwerp (vind ik tenminste), dus ik heb zoveel mogelijk geprobeerd vragen te beantwoorden die ik had toen ik deze informatie bestudeerde.
Dit artikel is een vervolg op mijn eerdere pixel art – een inleiding artikel. Let’s pixel!
Het belang van kleur in pixel art.
Kleur is alles in pixel art sinds individuele pixels kleur geven het enige is wat je kan doen. Zonder kleur geen pixel art. Met kleur krijgen sprites hun vorm, zijn schaduw en licht te onderscheiden, voeg je details toe en wordt een leeg canvas een kunstwerk. Maar het kiezen van kleuren is niet gemakkelijk, zeker niet voor een beginner.
De verkeerde kleuren naast elkaar zorgen voor een onaangenaam contrast. En met zoveel verschillende kleuren en kleurtonen is een beetje kennis en structuur van belang. Dus ik zal eerst het een en ander zeggen over een aantal verschillende onderwerpen in kleur.
In mijn artikel Logo Design – Kleuren ga ik in op kleur theorie. Het kan handig zijn om na dit artikel wat meer te leren over kleurenharmonie als je bezig gaat met het kiezen van kleuren voor jouw pixel art projecten, mocht je er meer over willen weten dan kan je daar de basis lezen.
Belangrijk is het volgende. Voor een project heb je één of meerdere basiskleuren nodig, je wilt natuurlijk dat deze kleuren goed samengaan en daar komt kleur theorie van pas. Daarnaast kan je een aantal tinten van de basiskleur kiezen, zowel donker als licht, voor schaduw, licht en highligts.
Later in dit artikel bespreek ik in detail hoe je kleurentinten van een basiskleur kiest.
De kleurkiezer in jouw software.
Welke software je ook besluit te gebruiken er is altijd een kleurkiezer. Met de kleurkiezer kan je dus de kleuren voor jouw pixel art project kiezen.
In de afbeeldingen zijn twee variaties te zien van de kleurkiezer. In essentie doen deze twee modus precies hetzelfde en ze hebben dezelfde factoren, welke je gebruikt komt neer op jouw voorkeur. Persoonlijk vind ik de eerste het meest gemakkelijk omdat je de drie belangrijke waarden duidelijk kan onderscheiden met de H S B sliders.
H S en B staan voor hue, saturation en brightness in het engels. Dus tint, kleurverzadiging (dit bepaalt hoe sterk een kleur is) en kleurhelderheid in het Nederlands.
Met deze sliders heb je de volledige controle over welke kleur je precies wilt gebruiken als basiskleur, met de tinten van die kleur voor schaduw en licht of als stijlkeuze.
Kleur tinten van een basiskleur kiezen.
Voor we het onderwerp aansnijden wil ik even duidelijk maken dat er geen harde regels zijn voor het kiezen van kleurtinten. Er zijn factoren waar je rekening mee moet houden en deze komen ook voorbij maar de methodes die ik bespreek zijn maar richtlijnen. Zij het dat veel artiesten er in de praktijk gebruik van maken. Als beginner is het waarschijnlijk een goed idee om deze richtlijnen iets strikter te volgen.
Hue.
De eerste slider regelt de kleur zelf. Dus of je geel, rood, blauw enz wilt.
Belangrijk: Deze slider heet hue/tint. Maar zoals je kan zien kan je er kleuren kiezen. Dit is een wezenlijk verschil met een kleurentint. Een kleurentint is een lichte of donkere tint van een basiskleur.
En een kleurentint kies je met behulp van de sliders.
Dus om verwarring te voorkomen als ik het heb over kleurentint of kleurtint dan heb ik het dus over de tint van een basiskleur, niet over de tint slider zelf.
Neem mij niet kwalijk voor deze verduidelijking mocht dit overbodig zijn, het woord kleurentint is helaas de beste benaming en tint is nou eenmaal hoe de slider heet.
Om verschillende tinten van een basiskleur te maken gebruik je alle drie de sliders samen. Maar het is belangrijk dat ik eerst iets meer vertel over de andere twee sliders.
De andere twee sliders noem ik bij de engelse naam omdat ik dat persoonlijk duidelijker vind dan de nederlandse benaming.
We gaan dus de sliders gebruiken om verschillende kleurtinten te krijgen. Als jij je afvraagt in het komende onderdeel waarom ik een slider nou precies met x aantal verschuif, dan is mijn antwoord omdat ik daarvoor gekozen heb. Er is geen precieze juiste stap die je kan zetten, er is context en jouw motivatie.
Op de meer optimale keuzes kom ik nog terug bij het latere onderwerpen grijswaarden en contrast.
Brightness (kleurhelderheid).
Brightness regelt de helderheid van de kleur. Minder brightness betekent minder licht en dus een donkerder kleur, meer brightness daarentegen betekent meer licht en dus een lichtere kleur. Een heldere kleur valt meer op binnen een canvas. Terwijl een minder heldere kleur dus minder opvalt.
De waarden van de brightness beginnen bij dit voorbeeld links bij de basiskleur op 90 en gaan steeds met stappen van 20 terug tot aan 10.
Saturation (Kleurverzadiging).
Saturation bepaalt hoe sterk een kleur is. Hoe minder saturation hoe verder de kleur vervaagd. Een sterke kleur valt dus erg op binnen een canvas terwijl een minder sterke kleur sneller binnen het geheel wegvalt.
De waarden van de saturation beginnen links bij de basiskleur op 90 en gaan met stappen van 20 terug tot 30.
Verschuiven van de tint of niet?
Bij het kiezen van een kleurtint van een basiskleur kan je ervoor kiezen de tint slider op z’n plek te laten. Op die manier krijg je alleen tinten van die specifieke basiskleur.
Vanuit de rode basiskleur links worden de kleur tinten steeds donkerder naar rechts.
Vanuit de groene basiskleur rechts worden de kleur tinten steeds lichter naar links.
Maar wat je ook kan doen is de (h) tint slider mee veranderen.
Vanuit de rode basiskleur links worden de kleur tinten steeds donkerder naar rechts, maar ook de kleur verandert. (naar paars).
Vanuit de groene basiskleur rechts worden de kleur tinten steeds lichter naar links, maar ook de kleur verandert. (naar geel).
Het gebruik van die tint slider geeft een veel gevarieerder kleurenpalet. Maar of je dat doet is natuurlijk jouw keuze.
Soort licht en de brightness slider.
Brightness gaat over licht en vaak is dat natuurlijk licht. Bij zonlicht, dus bij natuurlijk licht, verschuiven kleuren richting geel. En bij schaduw juist richting paars. Paars is de kleur tegenhanger van geel.
Geel zal uiteindelijk uitkomen bij wit want dat is de meest licht mogelijke kleur, terwijl paars uiteindelijk zal uitkomen bij zwart om dezelfde reden.
Het is ook mogelijk blauw in plaats van paars te gebruiken. Nogmaals, er zijn geen harde regels.
Stel je wilt een lichtere kleur tint van een basiskleur met natuurlijk licht. Dan verschuif je de (h) tint slider iets richting geel, de (s) saturation slider stel je iets naar beneden bij en de (b) brightness slider iets naar boven. Bij een donkerder kleur verschuift de (h) tint slider richting paars, gaat de (s) saturation slider omlaag en de (b) brightness slider omlaag. Zie het volgende voorbeeld en de nadere beschrijving.
Bij de lichtere tinten richting geel:
De (s) saturation slider verschuif je bij een lichtere kleur naar beneden want de saturation zorgt voor een sterkere, fellere kleur en dat is niet wat je wilt met een lichtere kleur tint. Je hebt meer licht bij een lichtere kleur tint en dus gaat de (b) brightness slider omhoog.
Bij de donkere kleur tinten richting paars:
De saturation slider doe je omlaag omdat bij natuurlijk licht een donkere kleur tint niet sterker, meer uitgesproken wordt. En de brightness slider omlaag want er is minder licht.
Een afwijking als stijlkeuze.
Je kan ervoor kiezen om bij de donker wordende kleur tinten de (s) saturation slider juist omhoog te doen, dan krijg je een sterkere, diepere kleur die meer opvalt. Dit is een variatie om te laten zien dat je met de richtlijnen kan spelen.
Hier zie je het verschil tussen het mee omlaag brengen van de (s) saturation slider in het eerste voorbeeld en het omhoog brengen van de (s) saturation slider in het tweede voorbeeld. Met de stappen erbij voor het gemak, nogmaals deze stappen zijn mijn keuze.
Een variatie op hoe je de stappen zet.
Je kan bij een variatie in stappen denken aan de grootte van de stap. van 80 naar 60 brightness bijvoorbeeld. Maar er is ook keuze bij de vraag hoe je geel of paars bereikt.
Stel je hebt een groene kleur die hier staat op de tint (hue) slider:
En je wilt een aantal donkere kleur tinten maken. Dan ga je naar rechts via paars, in hoeveel tint waarden je dit doet bepaalt natuurlijk de grootte in stappen die je neemt naar paars toe.
De kleur tinten worden donkerder via de kleur blauw en dan naar paars.
Je kan ook naar links via geel en dan door rood naar paars.
Rood staat aan het linker uiteinde en het rechter uiteinde, maar zie het meer als een aaneengesloten stuk. Het loopt door, dus als je bij de kleur waarde naar links gaat dan krijg je een donkerder kleuren tint of kleurentinten geel en vervolgens een nog donkerder kleur tint of kleuren tinten rood en dan kom je uit bij paars. Zie het volgende voorbeeld.
De kleur tinten worden wel donkerder maar in plaats van blauw naar paars gaat het via geel en rood naar paars.
De reden dat ik dit laat zien is dat je een keuze hebt hoe je met de slider naar paars toe beweegt. En in dit geval is de route via geel en rood sneller, wat een factor kan zijn binnen die keuze.
Grijswaarden/greyscale.
Inleiding over grijswaarden.
Grijswaarden kan je gebruiken als hulpmiddel bij het selecteren van kleuren en kleur tinten. Het helpt aan te geven of de kleuren die je gebruikt werken met elkaar en of jouw pixel art wel goed leesbaar is.
Je kan met grijswaarden werken voordat je kleuren aan het canvas toevoegt, of je kan op het eind het ingekleurde canvas omzetten naar grijswaarden om zo een idee te krijgen over jouw kleurkeuzes. En met die informatie kan je weer aanpassingen maken zodat het beter klopt.
Maar grijswaarden is zeker niet alles. Het geeft een indicatie die je meeneemt bij jouw beslissing over de kleuren die je gebruikt. Misschien geeft optie B een betere uitkomst qua grijskleurenwaarden maar geeft optie A juist de stijl die je zoekt. Dan kan A in die context de beste optie zijn.
En misschien lijken kleuren met de ‘juiste’ kleurwaarden juist niet helemaal correct.
Gebruik het als richtlijn, niet als regel. Jouw ogen blijven de beste bron van informatie.
Grijswaarden en bestaande kleurenpaletten.
Het mooie van werken met een bestaand kleurenpalet dat gemaakt is door een ervaren artiest is dat je niet zo snel helemaal de fout in zal gaan doordat de kleuren binnen een palet in de regel goed op elkaar afgestemd zijn. Maar niet elke kleur werkt per se goed met elke andere kleur van het palet, dit is iets om over na te denken bij een palet met veel kleuren.
Maar dan geeft een kleurenpalet van bijvoorbeeld 16 kleuren nog steeds veel meer houvast dan de vele mogelijkheden als je zelf met de sliders aan de slag gaat.
Mocht je een bestaand kleurenpalet gebruiken dat veel kleuren heeft dan kan het omzetten van de kleuren naar grijswaarden nog steeds nuttig zijn. Het is immers een hulpmiddel.
Inhoudelijk.
Grijswaarden worden gebruikt om de drie verschillende sliders te reduceren naar alleen (kleurhelderheid) brightness door een kleur om te zetten naar grijswaarden. De grijswaarden brightness is niet hetzelfde als (b) brightness in de HSV slider, deze brightness is anders berekent en komt uit in een percentage. Verschillende kleur tinten hebben dezelfde waarde als je ze omzet naar grijswaarden. De precieze kleur van de kleur tint maak hier niet het verschil sinds het een combinatie is waaruit een kleinere schaal aan waarden ontstaat.
Met deze grijskleuren brightness waarde kan je de sterkte van een kleur bepalen; de kleurwaarde. Deze waarde kan je dan vergelijken met de andere waarden van de kleuren uit je kleurenpalet.
Dit is een voorbeeld waarbij duidelijk wordt dat kleur tinten van verschillende basis kleuren op dezelfde grijswaarde uit kunnen komen. In de eerste rij staan twee kleurentinten met dezelfde grijswaarden, namelijk 93. De tweede en derde rij zijn net verschillend in grijswaarden dus heb ik de kleurtint en de grijswaarde kleur naast elkaar gezet met de waarde ernaast.
Zo kan je zien dat het niet uitmaakt of het een kleur of kleuren tint blauw, rood of geel is. Het gaat om de kleurwaarde die uit de combinatie van de 3 sliders volgt.
Grijswaarden zijn heel nuttig om te zien of een canvas bestaat uit kleuren die goed samengaan. Als je de kleuren op het canvas omzet naar grijswaarden en de sprites/achtergrond en de schaduwen zijn niet langer te onderscheiden dan weet je dat er iets niet klopt in je kleurenpalet. De waarden van de kleuren liggen dan te dicht bij elkaar.
Dit is een voorbeeld van een basiskleur rood (rechts in de eerste rij, links in de tweede rij) en de kleurtinten van die basiskleur die omgezet zijn naar grijswaarden. In totaal 11 verschillende waarden sinds de rode basiskleur in de rechterbovenhoek en de linkerbovenhoek hetzelfde zijn.
Stel je wilt 3 kleur tinten uitkiezen, dan kan het verstandig zijn telkens 2 tot 3 over te slaan zodat je een goede verdeling krijgt.
Een bonus voor wie Photoshop gebruikt.
Als je de bestaande kleuren op je canvas om wilt zetten naar grijswaarden dan doe je dat via de tab afbeelding > modus > grijswaarden.
Daarna zet je de kleurkiezer op grijswaarden door op de opties te klikken (de vier streepjes in de rechterbovenhoek) en de grijswaarden optie aan te klikken. Je kan dan met de pipet functie één van de grijswaarden op het canvas aanklikken om de precieze waarde op de kleurenkiezer te zien.
Hieronder vind je een link naar mijn artikel over pixel art maken met Photoshop. Onder meer komt er de pipet functie aan bod. Mocht je meer willen weten over de functies die je nodig hebt bij pixel art dan kan ik je aanraden dat artikel te lezen.
Als je andere software gebruikt dan kan je vast online vinden hoe je dit in die software kan doen.
Ik geloof dat het (bijna) hetzelfde werkt in Aseprite.
Verder met de inhoud.
Problemen ontstaan dus wanneer de verschillende tinten grijs te dicht bij elkaar liggen en niet goed te onderscheiden zijn. Het is verstandig om de grijswaarden goed te verdelen. En gelijke stappen in die waarden geeft het beste onderscheid, al is dat zeker geen regel die je moet volgen.
Hieronder staan twee voorbeelden.
Als je bestaande kleurtinten omzet naar grijswaarden krijg je waarschijnlijk niet exacte stappen tussen die waarden, dat is geen enkel probleem als de grijswaarden maar naast elkaar te onderscheiden zijn.
En nogmaals misschien wil je juist dat de kleuren niet zo goed te onderscheiden zijn en dan krijg je dus kleine stappen. Het is een balans tussen stijl en leesbaarheid.
Een methode om een project te maken met grijswaarden.
Wat je kan doen is besluiten een project eerst in grijswaarden te maken en daarna kleuren rond die waarden te gebruiken om het in te kleuren. Bijvoorbeeld door de (h) tint slider met gelijke stappen te veranderen voor elke kleur tint van een basiskleur. Zo kies je de precieze kleuren op een manier waarop het niet zo snel fout kan gaan. En daarna kan je altijd kleine aanpassingen maken die jij goed vind lijken.
Het is verstandig om de verschillende kleurentinten die jij wilt toepassen op die grijswaarden zorgvuldig uit te kiezen zodat je weet dat ze goed samengaan.
Een bonus voor wie Photoshop gebruikt.
Stel je wilt een project maken met alleen verschillende kleur tinten van een rode basiskleur, zonder dat je dus de (h) tint slider handmatig verschuift. Je begint met grijswaarden om vervolgens kleur toe te voegen. Je kan dit doen door een nieuwe laag toe te voegen en deze nieuwe laag de basis kleur te geven die je wilt gebruiken, vervolgens plaats je deze laag boven de laag met je canvas. Daarna verander je de optie ‘normaal’ naar de optie ‘kleur.’ Deze optie is te vinden boven de lagen, naast de ‘dekking’ optie.
Ik geloof dat het (bijna) hetzelfde werkt in Aseprite.
Zo krijgen alle grijswaarden op het canvas de bijbehorende kleurentint van de basis kleur.
De (s) saturation en (b) brightness op de laag met de kleur kunnen invloed hebben op de kleuren, hiermee moet je een beetje spelen.
Voor meerdere kleuren moet je iets meer doen. Je gebruikt de ‘magic wand’ functie om het deel van de laag met de grijswaarde die een bepaalde kleurentint moet krijgen te selecteren. Deze selectie kopieer je en plak je je op een nieuwe laag boven de laag met je canvas. Zolang je de selectie niet weg klikt zal het op dezelfde plaats worden geplakt. De ‘normaal’ optie verander je dan wederom naar de ‘kleur’ optie.
Voor elke grijswaarde die dus kleurentint moet worden met een andere basiskleur heb je dan een nieuwe laag nodig.
En zo kan je een canvas inkleuren door middel van het gebruik van grijswaarden zodat je zeker weet dat je canvas goed leesbaar zal zijn.
Als je andere software gebruikt dan kan je vast online vinden hoe je dit in die software kan doen.
Contrast.
(Kleurverzadiging) (s) saturation op een hoog niveau geeft het beste de werking van contrast weer. Want dan krijg je erg sterke kleuren. Als je meerdere kleuren met een hoge kleurverzadiging naast elkaar plaatst krijg je een sterk contrast omdat sterke kleuren minder goed samengaan. Dan wordt het geheel niet plezierig om naar te kijken. Het is dus belangrijk dat je kleuren kiest zonder dat een te sterk contrast ontstaat.
Grijswaarden zijn zoals we al hebben gezien een goede manier om contrast problemen te voorkomen.
Een mogelijke oplossing (als je het niet té bont maakt want dan gaat dit niet werken) daarvoor is anti aliasing, mocht je per se de kleuren die toch niet helemaal samen gaan wel willen gebruiken. Hierover kan je wat meer lezen in mijn Pixel art – lijnwerk artikel.
Contrast kent vele factoren naast kleur sterkte alleen, alle drie de sliders spelen een rol zoals we al zagen bij de grijswaarden. Bepaalde vormen kunnen invloed hebben op het contrast binnen een canvas. Maar denk ook aan een teveel aan details op een bepaalde sprite binnen een canvas.
Contrast is niet per se negatief, je kan het ook gebruiken binnen een canvas.
Als je een project maakt kan je door middel van contrast de aandacht op een sprite of een deel van het canvas vestigen of de aandacht er juist van afleiden. Kleur contrast speelt daar een rol in.
(Dit past eigenlijk niet binnen dit onderwerp maar een voorbeeld van het gebruik van vorm en contrast kan zijn dat de een vloeiende vorm de aandacht vestigt op een sprite doordat jouw ogen de vorm volgen. Dit behandel ik in detail in het artikel; pixel art een achtergrond maken, een link naar dat artikel vind je hieronder.)
Kleurenpalet.
En met al die factoren samen kan je zelf een kleurenpalet samenstellen bestaande uit basiskleuren en kleurtinten van die basiskleuren.
Het samenstellen van een kleurenpalet heeft dus nogal wat voeten in de aarde. Zelf een kleurenpalet maken is zeker mogelijk, misschien ben je er van nature wel goed in en kan je door een beetje met de sliders te spelen een heel goede combinatie maken. Maar voor velen, waaronder ikzelf, is dit lastig. Zeker wanneer je een kleurenpalet nodig hebt voor een project waar veel kleuren en tinten nodig zijn. Vier kleuren is nog daar aan toe maar een palet van 12, 15 of 20. Dat zou mij persoonlijk nu nog te moeilijk zijn, ook met behulp van de informatie in dit artikel.
Gelukkig bestaan er al veel kleurenpaletten die samengesteld zijn door ervaren artiesten. Door gebruik te maken van deze paletten geef je jezelf de ruimte ervaring op te doen en toch gelijk iets te maken wat qua kleur in ieder geval klopt. Een fantastische site om verschillende paletten te vinden is lospec. Lospec is een hub voor onder andere pixel art en heeft vele artikelen, tutorials en hulpmiddelen die je een flinke boost kunnen geven als beginner zijnde. Ik raad de site van harte aan, ook voor de gevorderde pixeler onder ons is er zeker nuttige informatie te vinden.
Palet analyse.
Er zijn twee paletten die ik even wil bespreken. Een van mezelf en een populair palet van lospec.
Dit is een karakter sprite die ik gemaakt heb voor mijn ‘pixel art – karakter sprites maken’ artikel. Het heeft maar een paar basiskleuren en enkele kleur tinten van de basiskleuren. De basiskleur en de kleur tinten van die basiskleur staan naast elkaar. De rechter sprite heeft een enkele zwarte tint minder.
Dit is een vrij eenvoudig palet specifiek gemaakt voor deze karakter sprite. Ik heb geen precieze stappen uitgemeten, de kleuren zijn meer spontaan tot stand genomen.
Nu het palet van lospec genaamd Vinik24.
Dit is een populair palet dat wel degelijk gekozen is met een systeem van gelijke stappen. Het is een groot palet en vaak zal je niet elke kleur toepassen bij elk project, maar de keuze is ruim. Naast een goede variatie kan je ook zien dat de kleuren niet zo sterk zijn. Dit komt omdat het palet bestaat uit pastel colors oftewel pastel kleuren.
Pastel kleuren zijn zachte kleuren doordat de brightness hoog en de saturation laag is. Dus niet zo’n sterke kleur maar wel vrij licht. Het grote voordeel van dit type kleuren is dat ze heel gemakkelijk samengaan. Dat is ook een reden waarom dit palet zo populair is en waarom het zo goed werkt.
Slot.
En daarmee zijn we aan het einde gekomen van dit artikel over kleuren en kleurenpaletten in pixel art. Hopelijk begrijp je de theorie in dit artikel en heb je een beter idee gekregen over hoe jij je eigen kleurenpalet in elkaar kan flansen. Mocht je daar al aan toe zijn.
Dit vind ik persoonlijk een lastig onderwerp, hopelijk heb ik het begrijpelijk beschreven. Maar mocht iets niet duidelijk zijn of heb je een op- of aanmerking laat het mij dan weten in de berichtensectie onder het artikel. Ik schrijf dit artikel omdat pixel art een hobby is geworden en ik hoop dat mijn pixel art blog artikelen mensen inspireren en helpen met hun pixel art. Hoe beter dit artikel hoe meer lezers er iets aan hebben.
Bedankt voor het lezen van mijn blog, ik hoop dat je het een interessant artikel vond. Ik heb een heel aantal andere artikelen geschreven over pixel art mocht je verder willen lezen. Hopelijk tot ziens!
