Pixel art bestaat al sinds de opkomst van de eerste thuiscomputers. Er is zelfs een kunststroming in een ver verleden – late negentiende eeuw – geweest die op hetzelfde principe berustte; het pointillisme.

Als basis wordt een gekleurd puntje – of in het geval van de computer, een zgn. ‘pixel’ – gebruikt als kleinste bouwsteen voor een afbeelding. De vele afzonderlijke puntjes gezamenlijk vormen de illustratie.

Het aantal afzonderlijke pixels loopt vrij snel op, zelfs bij kleine pixel-illustraties, wat pixelen tot een arbeidsintensief proces maakt.

Ik zal je in dit artikel aan de hand van een voorbeeld laten zien hoe je tot een pixel-illustratie kunt komen. De gevolgde manier van werken is geen standaardwerkwijze, maar meer een handleiding hoe je zou kunnen werken. Na een uitleg over hoe je een pixel-illustratie kunt maken volgt een korte handleiding voor het gebruik van pixel-illustraties en zogenaamde bitmap fonts in Flash.

Bezint eer ge begint

Er zijn verschillende manieren en programma’s om pixel art te maken. De één is niet beter en/of professioneler dan de andere. De kwaliteit van je werk zit namelijk niet in de prijs van je computer, tekentablet of het gebruikte programma, maar zit tussen je oren.

Zelf gebruik ik MS Paint van Microsoft (zeer basic, zonder toeters en bellen) en Adobe Photoshop. MS Paint is erg handig, omdat je onder de rechter en linker muisknop (op de pc, uiteraard) een tekenkleur kunt gebruiken. Onder de linker muisknop plaats je de tekenkleur, onder de rechter muisknop de achtergrondkleur. Je kunt zonder toetsenbordhandelingen pixelen en eventueel correcties uitvoeren.

Onderaan deze pagina staat een aantal links met o.a. programma’s die je kunt gebruiken bij het maken van een pixel-illustratie.

Voor pixel-illustraties kun je het beste het bestandsformaat .gif gebruiken. Een .gif-bestand bestaat uit maximaal 256 kleuren. 256 kleuren zijn in veel gevallen ruim voldoende. Een .gif heeft als voordeel dat er geen kwaliteitsverlies optreedt wanneer je minder dan 256 kleuren gebruikt.

Naast .gif is .jpg een veel gebruikt bestandsformaat. Het .jpg-formaat biedt wel meer kleuren, maar leent zich niet voor pixel-illustraties, omdat er kwaliteitsverlies optreedt. Wil je meer dan 256 kleuren gebruiken, gebruik dan het bestandsformaat .png.

Het aantal gebruikte kleuren is van invloed op hoe de afbeelding er uiteindelijk uit komt te zien. Bij gebruik van veel kleuren en kleurverloopjes zal de pixel-illustratie er fotografisch uit gaat zien; een beperkte aantal kleuren levert vaak een wat meer grafisch beeld op. Kijk eens op icontown van Bernd ‘Be’ Holzhausen om inzicht te krijgen in het gebruik van kleuren en verschillende stijlen van pixelen.

Zorg er trouwens voor dat je bij het starten van het maken van een pixel-illustratie het exacte formaat weet. Kom je er achteraf achter dat je illustratie kleiner of groter is dan gewenst, dan heb je een probleem: vergroten of verkleinen van de illustratie betekent het einde van de karakteristieke pixel-eigenschappen.

Illustratie

Het maken van een pixel-illustratie kun je opdelen in een aantal stappen. De eerste stap is het idee. Wat wil je precies gaan maken?

Na het zien van ‘The Good, the Bad and the Ugly’ van Sergio Leone met o.a. Clint Eastwood leek het me aardig om iets met deze film te doen in combinatie met het poppetje dat hier en daar op mijn site – www.drububu.com – opduikt.

Algemeen

Voor het maken van een goede illustratie is er een aantal zaken waar je op moet letten.

Probeer te achterhalen wat bijvoorbeeld een cowboy tot een cowboy maakt en gebruik deze (visuele) eigenschappen. Iemand met een cowboyhoed en een pistool aan z’n heup wordt door iedereen snel herkend als zijnde een cowboy, zelfs wanneer de cowboy, in mijn geval een glimmend synthetisch trainingspak aan heeft. Er zullen ongewtijfeld pacifistische cowboys zijn geweest die een hekel aan hoofddeksels hebben gehad... helaas... niemand zal ze herkennen als ‘echte’ cowboys.

Wanneer je illustraties maakt van bestaande voorwerpen of personen, is het belangrijk dat je illustratie ‘klopt’ met de werkelijkheid. In het geval van de cowboy is het belangrijk dat de stand van heupen, schouderbladen etc. er realistisch uitziet.

Wanneer de stand van het lichaam niet goed zou zijn, zullen de meeste mensen je waarschijnlijk niet kunnen vertellen wat er precies niet aan klopt, maar wel dat er iets niet klopt. Een gevleugelde uitspraak in deze is ‘je ziet het niet, maar je voelt het wel’. Wanneer je mensen tekent, is het handig en doeltreffend zelf even de pose aan te nemen om te kijken wat precies de stand van je heupen, armen etc is.

Ik heb besloten de cover van het DVD-hoesje als basis te gebruiken voor een pixel illustratie. De volgende stap is het maken van een schets.

Schetsen

Sommige mensen kunnen erg goed direct tekenen op een computer; ik vind het zelf prettig om eerst handmatig te schetsen voordat ik ga tekenen in de computer. Zo heb ik meer controle over de lijnvoering. Ik gebruik meestal een pen in plaats van een potlood om te schetsen omdat je dan wat krachtiger lijnen krijgt.

De schets hoeft niet heel gedetailleerd te zijn; de details vallen veelal weg tijdens het verkleinen naar het formaat van de pixel-afbeelding. De schets is vooral belangrijk voor de outline van de illustratie.

Na het inscannen verklein ik de schets tot het gewenste formaat voor de pixel-illustratie (zie de linker afbeelding in onderstaande afbeelding). Omdat de ingescande schets na verkleining meestal wat wazig wordt is het handig om de helderheid en het contrast van de ingescande schets aan te passen, zodat de outline wat beter zichtbaar is.

Deze verkleinde versie gebruik ik als basis voor de pixel illustratie.

Pixelen

Ik pixel de outline van de gescande afbeelding met de hand na. Het pixelen kun je het beste doen in een vergrootte weergave, dus op tweehonderd of driehonderd procent van het origineel. Het voordeel hiervan is dat je niet zo heel precies met je muis of digitale tekenpen hoeft te klikken. Bekijk telkens wel de afbeelding op normale groote, want dit is formaat wat de toeschouwer straks gaat zien.

Wanneer je volledig in Photoshop werkt kun je het beste de gescande schets in een aparte layer plaatsen en de outline in een andere layer pixelen. Gebruik je de combinatie MS Paint en Photoshop dan teken je in MS Paint de outline in een afwijkende kleur – bijvoorbeeld rood – direct in de gescande afbeelding. Zodra je in MS Paint de outline af hebt importeer je de afbeelding in Photoshop, je selecteert alleen de outline en kopieert deze weer terug naar MS Paint.

Je hebt nu een hele grove versie van je pixel illustratie (zie de rechter afbeelding hierboven).

Voor het pixelen is het handig om gebruik te maken van lijntjes die telkens met dezelfde hoeveelheid pixels oplopen of aflopen. Lijntjes met onregelmatig verloopjes ogen optisch minder fraai.

Lijntjes kun je het beste met behulp van de teken-lijn optie tekenen in MS Paint of in Photoshop (zet ‘anti-aliased’ onder ‘lijn opties’ uit). Door lijntjes met regelmatige verloopjes onderling te combineren kun je heel snel een zgn. isometrische projectie pixelen (zie onderstaande afbeelding).

Bij een isometrische projectie zie je je onderwerp schuin van boven. Je ziet altijd de voorkant, de bovenkant en de zijkant en er wordt geen perspectief gebruikt. Isometrische projecties worden heel veel gebruikt bij pixel-illustraties, o.a. op habbo hotel en supertotto.

Isometrische projecties en lijntjes die regelmatig verlopen zijn handige hulpmiddelen om pixel-illustraties te maken, maar hebben als nadeel dat pixel illustraties vrij snel te geometrisch en te universeel worden. Je kunt een isometrische projectie goed gebruiken als hulpmiddel bij het opbouwen van een object. In onderstaande afbeelding is zowel het theepotje als het memoblokje opgebouwd m.b.v. een isometrische kubus.

Curves zijn wat moeilijker te maken, maar heel goed mogelijk in pixel-illustraties. Zorg ervoor dat je net als de lijntjes met een regelmatig verloop de curve ook met regelmatige stapjes varieert; eerst lijntjes van drie pixels, vervolgens een aantal lijntjes van twee pixels etc. Zie voor een voorbeeld de uitvergroting in bovenstaande afbeelding.

De volgende stap is het inkleuren van de outline.

Inkleuren

Probeer met een vast palet van kleuren te werken. Zelf gebruik ik een minimaal palet van vijf of zes kleuren inclusief twee grijstinten, maar je kunt natuurlijk ook met meer kleuren werken. Een palet met dezelfde kleuren is vooral aan te raden wanneer je meer dan één pixel-illustratie maakt binnen een serie. Dit kan bijvoorbeeld zijn wanneer je pixel-illustraties maakt ter ondersteuning de navigatie op een site.

Door consequent dezelfde kleuren te gebruiken krijg je automatisch eenheid in de afzonderlijke illustraties. Naast gebruik van dezelfde kleuren is het van belang dat je erop let dat alle illustraties qua grootte ongeveer gelijk zijn en dat het contrast per pixel-illustratie ongeveer gelijk is.

Om het geheel wat diepte en contrast te geven kun je gebruik maken van wat schaduw en variatie in belichting. Probeer voor jezelf te bedenken waar de fictieve lichtbron of lichtbronnen staan. Dit vereist wat ruimtelijk inzicht. Lukt het niet denkbeeldig, pak dan een voorwerp uit je directe omgeving en zet er een lampje op zodat je wat houvast hebt hoe het licht globaal valt.

Met de plaatsing van de lichtbron kun je allerlei sferen oproepen. De meeste mensen ervaren de lichtbron rechtsboven het voorwerp als de meest natuurlijke plek, wat je natuurlijk niet tegen moet houden om dit vooral niet te doen.

Het is handig om van grof naar fijn te werken. Teken heel globaal de kleurvlakken in de illustratie. Werk vervolgens steeds gedetailleerder en houd rekening met je fictieve lichtbron(nen).

Het is vrij lastig uit te leggen hoe je precies pixelt, hoe je het juiste puntje op de juiste plek zet. Zoals het bij zoveel dingen opgaat, is het een kwestie van oefenen, oefenen en nog eens oefenen.

Finetunen

Het is belangrijk dat je goed kijkt naar wat je gemaakt hebt. Vraag jezelf af of het niet beter kan. Probeer het te verbeteren, maar bewaar wel je voorgaande versie! Blijkt je ‘verbetering’ niet echt een verbetering te zijn, gebruik die dan niet, ook al heeft het je veel tijd gekost. Vraag jezelf af wat er precies niet goed aan is, zodat je de volgende keer van te voren weet of iets wel of niet werkt.

Om te beoordelen of je illustratie er goed uitziet, zijn er wat trucjes die je kunt gebruiken. Spiegel de illustratiebijvoorbeeld eens; bekijk hem in spiegelbeeld. Bekijk je illustratie door je oogharen of van een afstandje. Ziet het er qua vlakverdeling ‘evenwichtig’ uit?

Wanneer je tevreden bent met je pixel-illustratie, laat die dan een paar dagen rusten en kijk er vervolgens nog eens kritisch naar. Is hij werkelijk nog steeds zo goed?

Flash

Het gebruik van pixel-afbeeldingen in Flash lijkt op het eerste gezicht ongebruikelijk, omdat Flash veelal met het gebruik van vector-afbeeldingen geassocieerd wordt.

Je kunt pixel-illustraties echter prima binnen Flash gebruiken. Het grote voordeel bij deze techniek is dat je interactiviteit toe kunt voegen, helemaal als je werkt in combinatie met actionscript. Actionscript vereist wel wat technische kennis, maar het is zeker de moeite waard om hier wat tijd in te investeren.

Pixel-afbeeldingen zijn meestal zeer klein in bestandsgroottes. Actionscripts zijn dat ook. En zo krijg je net zoals bij het gebruik van vector-afbeeldingen hele kleine Flash movies.

Er is een aantal zaken waar je rekening mee moet houden binnen Flash om de karakteristieke pixel-eigenschappen te behouden.

Zorg ervoor dat je Flash movie niet geschaald kan worden. Dit doe je door in het het eerste frame in de root van je movie de volgende regel te plaatsen.

Anti-aliasing kun je binnen Flash aan laten staan; deze setting heeft geen invloed op de weergave van je pixel.

Je kunt het beste .gif afbeeldingen gebruiken en deze importeren in Flash. Wanneer je een .gif afbeelding geïmporteerd hebt, anti-alaised Flash automatisch de afbeelding, waardoor je pixel-eigenschappen te niet worden gedaan.

Je kunt dit opheffen door in de library de desbetreffende .gif te dubbelklikken en vervolgens in de bitmap properties popup de optie ‘allow smoothing’ te deselecteren (zie onderstaande afbeelding).

Naast de-selectie van ‘allow smoothing’ zijn er nog twee zaken waar je op moet letten wil je de pixel-eigenschappen behouden.

Flash heeft de neiging de randjes van een afbeelding niet helemaal scherp weer te geven. Deze eigenschap kan je niet opheffen binnen Flash, dus moet je je afbeelding aanpassen in een beeldbewerkingsprogramma.

Zorg ervoor dat je een kader van twee pixels rond je minimale beeldformaat zet. Dit kader maak je vervolgens transparant. Het aangepaste .gif-bestand importeer je vervolgens weer in Flash. Flash laat nu nog steeds een wazige rand zien, maar de rand is nu volledig transparant dus zie je het niet.

De afbeelding moet vervolgens op een zgn. 'integer' positie staan binnen de clip; dit is een positie zonder getallen achter de komma, posities als 10.0, 12.0 etc etc.. (zie de rechter afbeelding hieronder). Zet je de afbeelding op een x en/of y-positie van bijvoorbeeld 226.6, dan zal de afbeelding niet scherp weergegeven worden (zie de linker afbeelding hieronder).

Bitmap fonts

Naast pixel-illustraties kun je ook zgn. bitmap fonts in Flash gebruiken; teksten die niet zichtbaar ge-anti-aliased worden. Er zijn veel fonts beschikbaar die speciaal voor dit doel gemaakt zijn. In veel gevallen zal bij het downloaden van het font een bestandje toegevoegd zijn met daarin een uitleg hoe je het font optimaal in Flash kunt gebruiken.

Het font ‘kroeger’ van craig kroeger leent zich prima als bitmap font. Om een bitmap font niet ge-anti-aliased weer te geven, moet je het font – net als bij gebruik van gifjes – plaatsen op een integer positie en in het geval van het ‘kroeger’ fontje een fontgrootte van 8 pixels of veelvoud daarvan gebruiken.

Linkslijnend wordt het font altijd altijd strak weergeven als je je aan de twee voorgaande voorwaarden houdt. Een goede weergave rechtslijnend is ook mogelijk, maar dan moet je textfield een integer breedte hebben. De breedte van je textfield moet je in Flash handmatig aanpassen door middel van ‘trial and error’. Zorg ervoor dat je de breedte van het tekstveld niet aanpast in de property popup, want dan schaal je het textfield en zal je tekst er altijd wazig uit blijven zien.

Overpeinzingen

Verwacht niet van je eerste pixel illustraties dat ze er zeer gelikt uitzien, anders raak je snel gefrustreerd. Bedenk dat de bekendere pixelartiesten allemaal ooit ook zijn begonnen met niet al te gelikte pixelwerkjes.

Kijk ook niet teveel om je heen wat anderen doen; er zijn altijd heel veel mensen die beter werk maken, maar nog veel meer die minder werk maken of er al helemaal niet aan beginnen.

Probeer ook niet al teveel werk dat je erg mooi vindt na te maken. Probeer een eigen stijl na te streven. Persoonlijk vind ik dat je beter een eigen stijl kan hebben die niet door heel veel mensen gewaardeerd wordt, dan een gekopieerde, niet-eigen stijl.

De basis van je pixelactiviteiten zou moeten zijn dat je het leuk vindt om te doen en jezelf probeert te verrassen met illustraties waarvan je nooit gedacht had ze ooit te maken.

Zoals bij zoveel dingen in het leven is het een kwestie van oefenen, oefenen en nog eens oefenen. Na verloop van tijd zie je steeds meer (on)mogelijkheden en wordt je steeds beter... Succes!

Sites

• drububu (nederland)
• adept vormgeving (nederland)
• panc (nederland)
• icontown
• pixture studio (geweldig)
• quickhoney
• pixelfreak
• eboy
• the iconfactory
• yipyop
• supertotto
• misuya (geweldig)

Programma’s

• microangelo
• photoshop
• iconbuilder pro (mac)

Fonts

• bitmapmania
• miniml

• Home
• Artikelen
• Colofon