Inleiding.
In dit artikel ga ik verder waar het basis artikel over pixel art gebleven is. Het onderwerp van dit artikel is lijnwerk. Ik bespreek kort wat lijnwerk inhoudt. Dan beschrijf ik het proces en de verschillende onderdelen binnen lijnwerk. Tot slot zal ik een paar problemen aanstippen waar je tegenaan kan lopen met het maken van lijnwerk. Naarmate ik beter wordt in pixel art en meer projecten af heb zal ik ook meer illustraties aan dit artikel toevoegen. Voor nu staan er vooral praktische afbeeldingen die dienen als voorbeeld.
Let’s pixel!
Wat is lijnwerk?
Lijnwerk is het fundament van elke pixel art sprite. Alle objecten bestaan uit lijnwerk. De achtergrond is de uitzondering omdat je die vaak met wat grotere penstreken maakt en de achtergrond minder goed te plannen is in de beginfase. Lijnwerk zijn de lijnen die de buitenkant van de silhouetten vormen van de sprites. Meestal plan je de pixel art in je hoofd of met schetsen. Werken aan de hand van een referentie (schets of een afbeelding) maakt het hele proces wat gemakkelijker. En als je een groter stuk met meerdere sprites maakt dan wordt het proces ook veel overzichtelijker.
Lijnwerk heeft wel gelijk een impact op de stijl van je project omdat je pixel art hebt met omlijningen en zonder omlijningen. Dat is een keuze die je het beste in de planfase kan maken want anders wordt al je lijnwerk anders. Een omlijnde sprite is immers een pixel dikker en dat neemt extra ruimte in binnen het canvas. Dus of je een lijn toevoegt nadat je de sprite maakt of deze gelijk in de silhouetten verwerkt het is een factor waar je rekening mee moet houden in de planfase van je pixel art project.
Hoe ziet een vloeiende pixel lijn eruit?
Een lijn kan je natuurlijk horizontaal en verticaal trekken. Een rechte verticale lijn bestaat in pixel art uit vierkante blokjes boven op elkaar en lijkt dus op een rechte lijn. Hetzelfde geldt voor een horizontale rechte lijn. Het grote verschil met pixel art in vergelijking tot andere art is hoe een schuine lijn eruit ziet. Want een schuine lijn bestaat in pixel art ook uit vierkantjes. Dus afhankelijk van hoe de lijn precies loopt zal een deel van de lijn bestaan uit diagonale vierkantjes. En daarom is het trekken van een schuine lijn of een curve die mooi loopt soms erg lastig. Ik zal een aantal voorbeelden geven.
Zoals te zien is de lijn in de eerste afbeelding telkens twee pixels naast elkaar en dan twee pixels diagonaal boven de vorige twee. Dit is voor pixel art een vloeiende lijn, constant en prettig om naar te kijken.
De andere twee voorbeelden laten duidelijke problemen zien. De tweede heeft dubbele pixels die ik ter illustratie rood heb gemaakt genaamd ‘doubles’. De derde heeft een probleem genaamd ‘jaggies.’ Deze twee problemen krijgen hieronder aandacht in hun eigen kopjes.
Bij een curve zal een groter aantal kleine stappen leiden tot een meer vloeiend uitziende curve. En een groter aantal grote stappen zal leiden tot een minder vloeiende curve.
Maar eerst even dit.
Voor ik verder ga wil ik even een belangrijke opmerking maken. Er zijn geen echte regels te aanzien van lijnwerk. Ja sommige lijnen kunnen vreemd lijken. Dit kan opzet zijn of misschien is het de enige manier in de context van de rest van het lijnwerk (dat laatste is natuurlijk iets wat je hoopt te vermijden). Of misschien vond de maker het juist wel goed lijken.
Mijn punt is dat er geen echte regels zijn, het gaat om creativiteit en kunst. Wat de een mooi vind kan de ander niks vinden. Maar er is wel een heersende opinie en dat zorgt ervoor dat veel mensen je werk wel of niet mooi vinden. Vandaar dat ik doubles en jaggies ga bespreken in de volgende kopjes, maar het is niet mijn bedoeling te suggereren dat er echt harde regels zijn.
Doubles.
Doubles zijn de extra pixels die je soms krijgt als je schuine lijn of curve maakt tussen twee punten. Doordat je op een raster met vierkantjes tekent met een muis of stylus kan je al gauw een aantal dubbele pixels op de lijn hebben zitten. Dat zijn pixels die niet per se nodig zijn om een vloeiende lijn te maken, wat er dus gebeurt is dat die pixels de lijn onnodig dik maken of onnodig veel aandacht vestigen op dat deel van de lijn. Een vloeiende lijn bestaat uit precies het aantal enkele pixels dat je nodig hebt om die lijn aaneengesloten te maken. Hieronder een voorbeeld.
De afbeeldingen zijn twee keer van dezelfde identieke lijn. De blauwe pixels in het tweede voorbeeld geven de doubles aan. Dus als je het lijnwerk van een project aan het perfectioneren bent is het belangrijk goed te kijken naar doubles. Deze kan je dan verwijderen met een gum functie in de software die je gebruikt.
Ook in een curve kan je tegen doubles aanlopen. Doubles in een curve zorgen ervoor dat je curve niet vloeiend loopt.
De doubles zijn te zien in het tweede voorbeeld.
Sommige software dat specifiek ontwikkeld is om pixel art mee te maken heeft een optie die voorkomt dat doubles ontstaan als je een lijn tekent. Dit is bijvoorbeeld mogelijk in Aseprite met de ‘pixel perfect’ optie en in Pyxel edit heb je de optie ‘clean one pixel line.’
Maar als je zoals ik met Photoshop werkt zal je hier helaas zelf goed op moeten letten.
Jaggies.
Jaggies verwijst in pixel art naar een lijn die niet vloeiend loopt. Dit komt voor als delen van de lijn niet een consequent herhalend patroon volgen. Zie het volgende voorbeeld.
Zoals je kan zien loopt het eerste deel in een oneven patroon. Hierdoor krijg je een jagged effect, jagged in het engels betekent scherp en oneven. Je krijgt dus rare scherpe hoeken en oneven stukken in de lijn. Hierdoor loopt de lijn niet vloeiend. Het tweede deel van de lijn loopt weliswaar in een gelijk patroon, een stukje van twee pixels volgt telkens een stukje van een enkele pixel op maar ook dit is geen vloeiende lijn. De twee pixels en dan een enkele opvolgende pixel
Om dit te voorkomen is het goed een bepaald patroon aan te houden met een gelijk aantal pixels voor de gehele lijn. Met uitzondering van die keren dat je juist een scherpe hoek wilt natuurlijk.
Het patroon in kwestie bepaalt natuurlijk de manier waarop de lijn loopt. Zie hieronder een aantal voorbeelden.
Ditzelfde probleem bestaat als je een curve wilt tekenen. Vloeiende curves zijn en blijven lastig in pixel art. Hieronder eerst een voorbeeld.
Je kan zien dat de ronding niet helemaal vloeiend loopt. Ook hier is de oorzaak een oneven patroon in de manier waarop de pixels in de lijn geplaatst zijn.
Met een vast op of aflopend patroon krijg je een curve die wel goed loopt. Bijvoorbeeld door lijnen van 4 pixels naar 3, 2 pixels naar 1 pixel en dan weer opbouwend op dezelfde manier.
Het patroon bepaald je natuurlijk helemaal zelf en is afhankelijk van de context, het bepaalt wel de scherpte van de curve.
Pixel hoeken maken.
De manier waarop je een lijn verbindt bepaalt de scherpte van een hoek. Hoe meer pixels je toevoegt in het verbindpunt hoe minder scherp de hoek zal worden. Zie de volgende voorbeelden.
Je kan een hoek die verbonden is met een pixel ook opbreken door die ene pixel weg te halen. Zo wordt een hoek minder scherp.
Cirkels in pixel art.
Cirkels in pixel art maak je natuurlijk met curves die je verbind. Het is dus belangrijk om hetzelfde afbouwend en opbouwend patroon aan te houden zoals we besproken hebben bij het onderwerp curves.
Met cirkels kan je ook gebruik maken van de potlood functie in je software en het aantal pixels dat je met een klik plaatst kan je vergroten afhankelijk van de dikte van de potlood die je instelt. Op die manier kan je bij bepaalde eenheden een cirkel maken als je de binnenkant weghaalt en de omlijning overhoudt. Je kan variëren in hoe je de cirkels opbouwt. Zie het volgende voorbeeld.
Voor wie Photoshop gebruikt, ik heb een artikel geschreven over de functies die je nodig hebt om pixel art te maken met Photoshop, waaronder de potlood functie. In ieder geval bespreek ik daar de nodige functies zodat je de basis onder de knie hebt. Hieronder vind je een link naar dat artikel.
Anti aliasing.
Een korte opmerking bij dit onderwerp.
Anti aliasing is een gevorderd concept in pixel art. Ik begrijp de essentie maar heb te weinig ervaring en kennis om met dit onderwerp in de diepte te gaan. Ik zal me beperken tot een stukje theorie. Mogelijk maak ik later een uitgebreider artikel over dit onderwerp. Maar voor nu denk ik dat je als beginner in ieder geval van het bestaan ervan af moet weten. Om er later echt in te duiken. Anti aliasing komt ook terug bij een artikel dat ik in de planning heb; licht en schaduw.
Anti aliasing is een hulpmiddel om een lijn wat vloeiender te maken, sinds je alleen met vierkantjes kan werken. Wat je doet is een aantal pixels rond de lijn te plaatsen met dezelfde kleur als de pixels van de lijn, maar die pixels zijn 50% transparant. De pixels kan je plaatsen aan beide kanten van een lijn, maar zeker aan de buitenkant kan het de vorm van een sprite aanpassen. Zie het volgende voorbeeld.
Je kan het gebruiken om jaggies te verhelpen. Om een curve te helpen zoals in het voorbeeld of om omlijningen te verzachten. Met dat laatste bedoel ik het contrast tussen de kleuren te verzachten. En je kan het gebruiken om subtiele details toe te voegen in een sprite.
Twee dingen om te onthouden zijn om consequent te zijn in de toepassing en minder is meer. Zoals ze zeggen, dus gebruik het spaarzaam.
Pixel art omlijning.
Zoals ik eerder al aangaf is omlijning van sprites een stijlkeuze. Maar zodra je dat wel of niet doet is het belangrijk om consequent te zijn anders lijkt het alsof er een verzameling van onsamenhangende sprites op je canvas staan. Stijlkeuzes mixen op hetzelfde canvas kan zeker, maar alleen als je weet wat je doet en dan nog maar spaarzaam. Het beste is om een stijl te kiezen en daar aan vast te houden voor dat canvas/project.
Omlijningen kunnen gebruikt worden om de aandacht vestigen op bepaalde sprites of hele delen van je canvas. Vaak is er een verhaal te zien op het canvas, of wil je een boodschap overbrengen. Waar je de aandacht naartoe leidt kan een grote rol spelen in het overbrengen daarvan.
Omlijning stijlen komen in vele soorten en maten. Ik zal hieronder een aantal beschrijven.
Donkere omlijning.
Een donkere omlijning bestaat uit een omlijning rond de sprite in een donkere kleur. Soms is het zwart of een tint van zwart, ook kan gekozen worden voor donkerbruin of een andere donkere kleur. Hierdoor is de sprite duidelijk te onderscheiden van de rest van het canvas. Donkere omlijningen zijn binnen de omlijnde stijl toch wel de meest voorkomende keuze.
Lichte omlijning.
Een lichte omlijning doet hetzelfde als een donkere omlijning maar zoals het woord al doet raden bestaat de omlijning uit een lichte kleur.
Omlijning opgebroken op bepaalde plekken.
Je kan ervoor kiezen om omlijningen te breken op bepaalde punten. Dit kan je doen door de omlijning achterwege te laten. Bijvoorbeeld als een object de grond raakt kan je ervoor kiezen om het deel dat de grond raakt niet te omlijnen. Zo verbind je als het ware het object met de achtergrond en dit kan het idee geven of ondersteunen dat het object beter samengaat met de rest van het canvas.
Ook kan je ervoor kiezen om een een elke pixel hier en daar in de omlijning een tint in de kleur van de aangrenzende pixels van de sprite te geven. Dan doorbreek je een klein deel van die omlijning. Op die manier kan je bijvoorbeeld hoeken verzachten, delen van de sprite benadrukken of juist minder in het oog laten springen. Je kan veel kanten uit met dit soort variaties en afhankelijk van het gebruik in de context van de sprite kan het vele effecten hebben. Kwestie van uitproberen dus.
Het mooie aan het opbreken van omlijningen is dat het niet zo opvalt. Het bepaalt niet gelijk de hele stijl. Zolang je er niet teveel gebruik van maakt en het niet doet op zo’n manier dat het erg opvalt natuurlijk. Dit is dus iets om te overwegen welke stijl je ook gebruikt. Het kan net dat beetje verschil maken terwijl het de meeste mensen misschien niet eens opvalt.
Omlijning in een tint van de kleur van nabijgelegen pixels.
Je kan ervoor kiezen om de omlijningen tot op zekere hoogte te laten opgaan in je sprite. Dan wordt het dus een tussenvorm van omlijning en deel van de sprite zelf. De variatie mogelijkheid binnen deze soort is enorm en afhankelijk van hoe je het toepast kan het de stijl op minimale of enorme mate beïnvloeden.
‘Standaard’ omlijning variaties. Hoeken wel/niet.
Met standaard omlijning bedoel ik een lijn van pixels om de sprite heen, één rij dik. Maar je kan ervoor kiezen om op bepaalde hoeken de lijn achterwege te laten, dus dan krijg je een diagonaal deel in de omlijning. Ik zal een voorbeeld geven.
Let niet op mijn gebrek aan ervaring met schaduw en licht alstublieft! De slime voelt zich al genoeg bekeken.
Het eerste voorbeeld heeft een aaneengesloten omlijning terwijl in het tweede voorbeeld op bepaalde plekken pixels in de omlijning achterwege zijn gelaten. Veel pixel art artiesten zien het tweede voorbeeld als de standaard en betere methode. Of de eerste manier zelfs als fout. Maar je kan een hoek verscherpen of verzachten afhankelijk van de methode, zij het dat de tweede methode een efficiënter gebruik van ruimte tot gevolg heeft. Persoonlijk zou ik in de meeste gevallen voor de tweede methode gaan, omdat ik het zelf beter vind lijken.
Er zijn uiteraard voorbeelden te geven waarbij het duidelijk is dat er iets niet klopt en dat je met doubles te maken hebt. Maar dit moet je per geval bepalen, geen zorgen je wordt er beter in naarmate je meer oefent en door middel van de analyse van sprites van ervaren pixel art artiesten.
Een uitzondering is natuurlijk op z’n plaats als de pixel in kwestie bepaalde delen van de sprite verbind of juist meer uit elkaar haalt. Het hangt helemaal af van de context en wat jij wilt dat de sprite overbrengt. De kracht van een enkele pixel kan dus enorm zijn.
Het is al met al zeer lastig om klip en klaar aan te geven wat goed en fout is. Soms lijkt iets echt niet helemaal te kloppen en soms is het simpelweg een persoonlijke voorkeur van de artiest in kwestie. Een beperkt aantal uitersten met groot grijs gebied in het midden dus. Daar kan ik helaas geen betere orde in scheppen. Maar minder orde en dus meer variaties geven ook juist weer meer ruimte voor creativiteit.
Omlijningen die doorlopen in de sprite.
Je kan ervoor kiezen om een deel van de omlijning, ongeacht welke kleur of stijl, in de sprite zelf te laten doorlopen. Dan doorbreek je dus als het ware de buitenrand van de sprite zelf. Dit kan je doen om een bepaald deel van een sprite te benadrukken, bijvoorbeeld door zo scherpe hoeken te maken. Dit is een wat zeldzamere manier van omlijnen omdat je in de planfase het lijnwerk zelf al maakt. En dan is het logisch om het silhouette van een sprite simpelweg aan te passen in plaats van in een latere fase de omlijning in de sprite te betrekken.
Maar het is nooit te laat om aanpassingen te maken en misschien heeft dat simpelweg het gewenste effect. Het is digitale art en je hebt immers een undo button. Geen pixel is permanent.
Slot.
Oké, dat was een boel info. Maar geen zorgen, het is een kwestie van oefenen. Ik heb ook veel informatie opgezocht voor ik de theorie van de basis onder de knie heb. Ik durf nog niet te beweren dat ik de basis echt onder de knie heb maar begrijpen doe ik het in ieder geval wel. En jij hopelijk nu ook iets meer.
Dat was wat ik wilde vertellen over het onderwerp lijnwerk binnen Pixel art. Hopelijk was dit artikel behulpzaam. Er zullen nog een aantal artikelen volgen in mijn pixel art serie dus hou m’n blog in de gaten mocht je interesse hebben.
En kijk eens rond op mijn pixel art portfolio (zodra ik die aangemaakt heb in ieder geval), bedankt voor het lezen van mijn blog en tot ziens! Maar vooral veel pixel plezier.
