Een leesbare dieren sprite maken binnen een limiet van 24×24 pixels

Kies een aanzicht voordat je gaat tekenen: zijaanzicht, vooraanzicht of driekwartaanzicht. Voor een eerste sprite maakt een zijaanzicht het vaak makkelijker om een staart, oren, snavel of snuit los van het lichaam te laten uitkomen. Dat is een praktische ontwerpkeuze, geen regel; kies de hoek die het kenmerk dat je wilt laten opvallen het best toont.

Noteer één primair herkenningskenmerk en hooguit één ondersteunend kenmerk. Voor een kat kunnen dat spitse oren en een staart zijn; voor een vogel een snavel en een compact lichaam; voor een schildpad de vorm van het schild. Deze limiet is een nuttige werkafspraak, geen voorgeschreven standaard. Zo voorkom je dat je pixels besteedt aan algemene textuur voordat duidelijk is om welk dier het gaat.

Open een canvas van 24×24 en houd het pixelraster zichtbaar terwijl je tekent. Een sprite-editor zoals Aseprite behandelt het document als een afbeelding op pixelgrootte, en in de documentatie wordt geïndexeerde kleur beschreven als pixels die naar paletkleuren verwijzen. Met het raster kun je makkelijker inschatten hoeveel rijen of kolommen een kenmerk inneemt. De spritedocumentatie van Aseprite en de gids voor kleurmodi

Houd wat ademruimte aan de randen, vooral op plekken waar oren, hoorns of een staart kunnen worden afgesneden. Blokkeer daarna de grootste vormen: lichaam, kop en eventuele opvallende uitsteeksels. Als illustratief uitgangspunt kun je ongeveer 15×10 pixels reserveren voor lichaam en kop samen, en vervolgens de staart, poten en oren in de resterende ruimte passen. Die getallen zijn geen sjabloon; een lang dier, een rond dier en een dier dat naar voren kijkt hebben verschillende verhoudingen nodig.

Vul het dier in als één effen vorm, in één kleur tegen een contrasterende achtergrond. Laat ogen, markeringen en schaduwen achterwege. Vraag je in dit stadium af of je het bedoelde dier kunt onderscheiden van een willekeurige blob. Zo niet, pas dan de omtrek aan: maak de snuit langer, zet de oren verder uit elkaar, verander de kromming van de rug of geef de staart een duidelijkere richting.

Let op smalle openingen. Een opening van één pixel kan genoeg zijn om een oor van een kop of een poot van een buik te scheiden, maar die kan verdwijnen wanneer je de sprite klein bekijkt of op een drukke achtergrond plaatst. Als twee kenmerken samenvloeien, probeer dan hun hoek of silhouet te veranderen voordat je een omtrekkleur toevoegt. De introductiegids van Lospec benadrukt controle per pixel en verwijst beginners naar tutorials voor het maken van sprites; hier betekent dat in de praktijk dat je afzonderlijke pixelkeuzes beoordeelt in plaats van op automatische verzachting te vertrouwen. Lospec, “Pixel Art: Where to Start”

Zodra het silhouet leesbaar is, plaats je het gezicht en het onderscheidende kenmerk. Bij een piepkleine sprite kan één donker oog al genoeg zijn. Een snuit, snavel, hoorn of rand van een schild kun je vaak suggereren met een kleine verandering in vorm of kleur, in plaats van met een gedetailleerde tekening. Houd gezichtsmarkeringen weg van de omtrek als aanraking ervan de vorm van de kop moeilijker leesbaar maakt.

Voer een snelle verwijdertest uit: verberg tijdelijk elke kleine markering. Als het dier zonder die markering niet minder herkenbaar is en de houding niet onduidelijker wordt, laat de markering dan weg. Dit is een praktische vuistregel voor het bewerken, geen universele artistieke wet. Zo blijft er ruimte over voor de kenmerken die er het meest toe doen.

Begin met een paar functies: transparante achtergrond, hoofdkleur van het lichaam, een donkerdere tint om delen te scheiden of schaduw aan te geven, en een lichtere tint voor één hooglicht. Voeg alleen een accentkleur toe als die helpt om het dier te herkennen. Voor een sprite van 24×24 bestaat er geen verplicht aantal kleuren. Met minder functies zie je eenvoudiger of kleur de vorm verduidelijkt of juist ruis toevoegt.

Controleer zowel de helderheid als de kleurtinten. Twee kleuren kunnen qua tint verschillen, maar ongeveer even helder zijn, waardoor een vlak op klein formaat moeilijk te onderscheiden is. Bekijk de sprite tijdelijk in grijstinten of vervang de achtergrond door effen middengrijs om te zien of lichaam, gezicht en belangrijkste kenmerk nog steeds van elkaar te onderscheiden zijn. Een tutorial voor het maken van sprites van Pinnguaq raadt ook aan het kleurcontrast en de zichtbaarheid op meerdere achtergronden te beoordelen, al is het canvas in hun voorbeeld groter dan 24×24. Pinnguaq, “Pixel Power: Sprite Creation”

In Aseprite kan in de RGB-modus elke pixel een eigen kleur hebben, terwijl de geïndexeerde modus pixels koppelt aan paletkleuren. Daardoor hebben paletwijzigingen gevolgen voor pixels die die kleuren gebruiken. De geïndexeerde modus kan helpen een klein palet consistent te houden; de RGB-modus is handig bij het verkennen van kleuren. Beide zijn geschikt voor deze taak. De gids voor kleurmodi van Aseprite

Voeg pas schaduw toe als het silhouet en het herkenningskenmerk goed werken. Gebruik een schaduwvlak om een vorm aan te geven of overlappende delen van elkaar te scheiden, niet om elk oppervlak te omlijnen. Een breed, samenhangend vlak is meestal beter leesbaar dan verspreide losse pixels. Plaats spaarzaam hooglichten; op dit formaat kunnen meerdere heldere stipjes eerder op willekeurige ruis dan op textuur lijken.

Als een beschaduwde rand een poot, staart of oor in het lichaam laat samenvloeien, verwijder of verplaats de schaduw dan. Laat het silhouet leidend zijn: interne kleuren moeten de omtrek ondersteunen, niet ermee concurreren.

Inzoomen helpt bij het plaatsen van pixels, maar kan problemen verbergen die op normale grootte zichtbaar zijn. Bekijk de sprite zowel vergroot als op de grootte die deze in de game of interface zal hebben. Controleer op ware grootte drie dingen: herken je het dier? Kun je zien welke kant het op kijkt? Is de houding nog duidelijk tegen de bedoelde achtergrond?

Test de sprite ook op meer dan één effen achtergrond als deze in verschillende scènes kan verschijnen. Als een donkere omtrek tegen een van de achtergronden verdwijnt, pas dan de omtrek aan of voeg een kleine scheidingskleur toe. Als het dier alleen vergroot herkenbaar is, vereenvoudig dan een detail of maak het kenmerk dat de identiteit aangeeft groter. Deze controles zijn praktische hulpmiddelen voor diagnose, geen garantie dat iedereen de afbeelding hetzelfde zal interpreteren.

Werk bij het aanpassen in deze volgorde: silhouet, houding, herkenningskenmerk, verschil in helderheid en daarna versiering. Verander steeds één probleem tegelijk, zodat je kunt zien of de aanpassing heeft geholpen. Als het dier nog steeds onduidelijk is, vergelijk het dan met een tweede, vereenvoudigde versie waarin het kenmerkende detail is uitvergroot. Behoud de versie die op ware grootte het duidelijkst leesbaar is.

De voltooide sprite hoeft niet alle 576 beschikbare pixels of alle kleuren van een palet te gebruiken. Stop wanneer het dier, de kijkrichting en het belangrijkste kenmerk op de bedoelde grootte herkenbaar zijn en extra markeringen die controles niet meer verbeteren.

• Aseprite, “Sprite”

• Aseprite, “Color Mode”

• Lospec, “Pixel Art: Where to Start”

• Pinnguaq, “Pixel Power: Sprite Creation”