Indie-ontwikkelaars moeten vaak meerdere rollen tegelijk combineren: game-ontwerper, programmeur, componist, kunstenaar. En als het op visuals aankomt, kiezen veel mensen voor pixelkunst - op het eerste gezicht lijkt het eenvoudig. Maar om het mooi te doen, heb je veel ervaring en bepaalde vaardigheden nodig. Ik heb een tutorial gevonden voor degenen die net de basis van deze stijl beginnen te begrijpen: met een beschrijving van speciale software en tekentechnieken met twee sprites als voorbeeld.
achtergrond
Pixelkunst is een vorm van digitale kunst waarbij veranderingen op pixelniveau worden aangebracht. Het wordt voornamelijk geassocieerd met videogamegraphics uit de jaren 80 en 90. Destijds moesten kunstenaars rekening houden met geheugenbeperkingen en een lage resolutie. Tegenwoordig is pixelkunst nog steeds populair in games en als kunststijl in het algemeen, ondanks de mogelijkheid om realistische 3D-graphics te creëren. Waarom? Afgezien van de nostalgie is het creëren van cool werk binnen zo'n strak kader een leuke en lonende uitdaging.
De drempel voor toegang tot pixelkunst is relatief laag vergeleken met traditionele kunst en 3D-graphics, wat indie-ontwikkelaars aantrekt. Maar dat betekent niet dat het gemakkelijk zal zijn af hebben spel in deze stijl. Ik heb veel indie-ontwikkelaars gezien met pixelart-metroidvania's op crowdfundingplatforms. Ze dachten alles in een jaar af te ronden, maar in werkelijkheid hadden ze nog eens zes jaar nodig.
Metal Slug 3 (Arcade). SNK, 2000
Pixelkunst op het niveau waarop de meeste mensen het willen maken, kost veel tijd en er zijn maar heel weinig korte tutorials. Wanneer u met een 3D-model werkt, kunt u het roteren, vervormen, de afzonderlijke onderdelen ervan verplaatsen, animaties van het ene model naar het andere kopiëren, enzovoort. Pixelkunst op hoog niveau kost bijna altijd veel moeite om pixels zorgvuldig op elk frame te plaatsen.
Over het algemeen heb ik je gewaarschuwd.
En nu iets over mijn stijl: ik teken voornamelijk pixelkunst voor videogames en vind er inspiratie in. Ik ben vooral fan van de Famicom/NES, 16-bit consoles en arcadespellen uit de jaren 90. De pixelkunst van mijn favoriete games uit die tijd kan worden omschreven als helder, zelfverzekerd en schoon (maar niet te schoon), in plaats van strak en minimalistisch. Dit is de stijl waarin ik zelf werk, maar je kunt de ideeën en technieken uit deze tutorial eenvoudig toepassen om totaal andere dingen te creëren. Ontdek het werk van verschillende kunstenaars en maak pixelkunst die je leuk vindt!
zacht
De digitale basishulpmiddelen voor pixelkunst zijn zoom en potlood om de pixels te plaatsen. Ook Lijn, Vorm, Selecteren, Verplaatsen en Verfemmer zijn handig. Er zijn veel gratis en betaalde software met een dergelijke set tools. Ik zal je vertellen over de meest populaire en degene die ik zelf gebruik.
Verf (gratis)
Als je Windows hebt, is de ingebouwde Paint een primitief programma, maar het heeft alle tools voor pixelkunst.
(is gratis)
Een onverwacht functionele pixelart-editor die via de browser draait. U kunt uw werk exporteren als PNG of geanimeerde GIF. Een uitstekende optie voor beginners.
(is gratis)
GraphicsGale is de enige editor waarvan ik heb gehoord die speciaal is ontworpen voor pixelkunst en animatietools bevat. Het is gemaakt door het Japanse bedrijf HUMANBALANCE. Het is sinds 2017 gratis beschikbaar en er is nog steeds veel vraag naar, ondanks de stijgende populariteit van Aseprite. Helaas werkt het alleen op Windows.
($)
Misschien wel de meest populaire editor van dit moment. , veel functies, actieve ondersteuning, versies voor Windows, Mac en Linux. Als je serieus bezig bent met pixelkunst en nog steeds niet de juiste editor hebt gevonden, is dit misschien degene die je nodig hebt.
($$+)
GameMaker Studio 2 is een uitstekende 2D-tool met een goede Sprite-editor. Als je pixelart voor je eigen games wilt maken, is het erg handig om alles in één programma te doen. Nu gebruik ik deze software terwijl ik aan het werken ben , een verzameling van 50 retrogames: ik maak sprites en animaties in GameMaker, en tegelsets in Photoshop.
($$$+)
Photoshop is dure software, gedistribueerd via een abonnement, en niet ontworpen voor pixelkunst. Ik raad aan om het niet te kopen, tenzij je betrokken bent bij het weergeven van illustraties in hoge resolutie, of als je geen complexe manipulaties met de afbeelding hoeft uit te voeren, zoals ik. Je kunt er statische sprites en pixelkunst in maken, maar het is behoorlijk complex vergeleken met gespecialiseerde software (bijvoorbeeld GraphicsGale of Aseprite).
Ander
Mijn pixelart-kit. Alles is zwart, ik merkte het nu pas.
Grafisch tablet ($$+)
Ik raad grafische tablets aan voor elk digitaal illustratiewerk om carpaal tunnel syndroom te voorkomen. Het is veel gemakkelijker te voorkomen dan te genezen. Op een dag zul je pijn voelen en deze zal alleen maar toenemen. Zorg vanaf het allereerste begin voor jezelf. Omdat ik vroeger met een muis tekende, kan ik nu moeilijk spelletjes spelen waarbij ik op toetsen moet drukken. Ik gebruik momenteel Wacom Intuos Pro S.
Polssteun ($)
Als u geen tablet kunt krijgen, zorg dan in ieder geval voor een polssteun. Mijn favoriet is de Mueller Green Fitted Polsbrace. De rest is te strak of biedt niet genoeg ondersteuning. Remklauwen kunt u zonder problemen online bestellen.
96 × 96 pixels
Laatste gevecht. Capcom, 1989
Laten we beginnen! Laten we beginnen met een karaktersprite van 96x96 pixels. Als voorbeeld heb ik een orc getekend en deze op een screenshot van Final Fight (foto hierboven) geplaatst, zodat je de schaal kunt begrijpen. Dit большой sprite voor de meeste retrogames, schermgrootte: 384x224 pixels.
Op zo'n grote sprite zal het gemakkelijker zijn om de techniek te laten zien waarover ik het wil hebben. Weergave per pixel lijkt ook meer op traditionele kunstvormen (zoals tekenen of schilderen) waarmee u wellicht meer vertrouwd bent. Nadat we de basistechnieken onder de knie hebben, gaan we verder met kleinere sprites.
1. Kies een palet
Pixel is een veel dieper concept in pixelkunst dan in enig ander digitaal domein. Pixelkunst wordt gedefinieerd door zijn beperkingen, zoals kleuren. Het is belangrijk om het juiste palet te kiezen, het zal je stijl helpen bepalen. Maar in het begin raad ik aan om niet aan paletten te denken en een van de bestaande te kiezen (of slechts een paar willekeurige kleuren) - je kunt deze in elk stadium gemakkelijk wijzigen.
Voor deze tutorial gebruik ik het 32 kleurenpalet waarvoor we hebben gemaakt . Voor pixelkunst worden ze vaak samengesteld uit 32 of 16 kleuren. Die van ons is ontworpen voor een fictieve console die ergens tussen de Famicom en de PC Engine zou verschijnen. Je kunt het of een ander nemen - de tutorial is helemaal niet afhankelijk van het geselecteerde palet.
2. Ruwe contouren
Laten we beginnen met tekenen met het gereedschap Potlood. Laten we een schets maken op dezelfde manier als met gewone pen en papier. Natuurlijk overlappen pixelkunst en traditionele kunst elkaar, vooral als het om zulke grote sprites gaat. Uit mijn observaties blijkt dat sterke pixelkunstkunstenaars op zijn minst goed zijn in het tekenen met de hand en omgekeerd. Het is dus altijd handig om je tekenvaardigheden te ontwikkelen.
3. Uitwerken van contouren
We verfijnen de contouren: verwijderen extra pixels en reduceren de dikte van elke lijn tot één pixel. Maar wat wordt precies als overbodig beschouwd? Om deze vraag te beantwoorden, moet je pixellijnen en onregelmatigheden begrijpen.
Onregelmatigheden
Je moet leren hoe je twee basislijnen in pixelkunst tekent: recht en gebogen. Bij pen en papier draait het allemaal om spiercontrole, maar wij werken met kleine kleurblokjes.
De sleutel tot het tekenen van correcte pixellijnen zijn onregelmatigheden. Dit zijn enkele pixels of kleine segmenten die de vloeiendheid van de lijn vernietigen. Zoals ik al eerder zei, maakt een enkele pixel een enorm verschil in pixelkunst, dus oneffenheden kunnen de hele esthetiek verpesten. Stel je voor dat je een rechte lijn op papier tekent en plotseling iemand op tafel valt: de hobbels in pixelkunst zien eruit als een willekeurig kronkeltje.
Voorbeelden:
Direct
Rondingen
Onregelmatigheden verschijnen in curven wanneer de lengte van lijnsegmenten niet geleidelijk toeneemt of afneemt.
Het is onmogelijk om hobbels volledig te vermijden; al je favoriete retrogames hebben ze (tenzij de pixelkunst natuurlijk uitsluitend uit eenvoudige vormen bestaat). Doel: Oneffenheden tot een minimum beperken en toch alles laten zien wat nodig is.
4. Breng de eerste kleuren aan
Kleur je personage met vulling of een ander geschikt hulpmiddel. Het palet zal dit deel van het werk vereenvoudigen. Als de software niet in het gebruik van paletten voorziet, kunt u deze direct in de afbeelding plaatsen, zoals in het bovenstaande voorbeeld, en kleuren selecteren met een pipet.
In de linker benedenhoek tekende ik onze vriend, ontmoet, dit is Ball. Het zal het gemakkelijker maken om te begrijpen wat er precies gebeurt in elke fase.
5. Schaduw
Het is tijd om de schaduwen weer te geven. Voeg gewoon donkerdere kleuren toe aan de sprite. Hierdoor ziet de afbeelding er driedimensionaal uit. Laten we aannemen dat we één lichtbron hebben die zich links boven de orc bevindt. Dit betekent dat alles wat zich boven en voor ons karakter bevindt, verlicht zal worden. Voeg rechtsonder schaduwen toe.
Vorm en volume
Als deze stap een uitdaging voor je is, beschouw je tekening dan als driedimensionale vormen in plaats van alleen maar lijnen en kleuren. Vormen bestaan in een driedimensionale ruimte en kunnen volume hebben, dat we opbouwen met behulp van schaduwen. Dit zal je helpen het personage zonder details te visualiseren en je voor te stellen dat hij van klei is gemaakt en niet van pixels. Shading is niet alleen het toevoegen van nieuwe kleuren, het is het proces van het bouwen van een vorm. Bij een goed ontworpen personage verbergen de details de onderliggende vormen niet: als je je ogen samenknijpt, zie je enkele grote clusters van licht en schaduw.
Anti-aliasing (anti-aliasing)
Elke keer dat ik een nieuwe kleur gebruik, pas ik anti-aliasing (AA) toe. Het helpt de pixels gladder te maken door tussenkleuren toe te voegen op de hoeken waar twee lijnsegmenten samenkomen:
Grijze pixels verzachten de “pauzes” in de lijn. Hoe langer het lijnsegment, hoe langer het AA-segment.
Zo ziet AA eruit op de schouder van een ork. Het is nodig om de lijnen glad te strijken die de ronding van zijn spieren laten zien
Anti-aliasing mag niet verder reiken dan de sprite die in het spel zal worden gebruikt of op een achtergrond waarvan de kleur onbekend is. Als u AA bijvoorbeeld op een lichte achtergrond toepast, ziet de anti-aliasing er op een donkere achtergrond lelijk uit.
6. Selectieve schets
Voorheen waren de contouren volledig zwart, waardoor de sprite er erg cartoonachtig uitzag. Het beeld leek in segmenten te zijn verdeeld. Zwarte lijnen op een arm zorgen bijvoorbeeld voor te veel contrast met de spieren, waardoor het personage er minder samenhangend uitziet.
Als de sprite natuurlijker wordt en de segmentatie minder voor de hand ligt, zullen de basisvormen van het personage gemakkelijker te lezen zijn. Om dit te doen, kunt u een selectieve omtrek gebruiken - vervang de zwarte omtrek gedeeltelijk door een lichtere. Op het verlichte deel van de sprite kun je de lichtste kleuren gebruiken, of, waar de sprite een negatieve ruimte raakt, kun je de omtrek volledig verwijderen. In plaats van zwart moet je de kleur gebruiken die voor de schaduw is gekozen - op deze manier blijft de segmentatie behouden (om onderscheid te maken tussen spieren, vacht, enzovoort).
Ik heb in dit stadium ook donkerdere schaduwen toegevoegd. Het resultaat was drie gradaties groen op de huid van de ork. De donkerste groene kleur kan worden gebruikt voor selectieve contouren en AA.
7. Laatste hand
Ten slotte is het de moeite waard om highlights (de lichtste plekken op de sprite), details (oorbellen, studs, littekens) en andere verbeteringen toe te voegen totdat het personage klaar is of totdat je door moet naar het volgende.
Er zijn verschillende nuttige technieken die in dit stadium kunnen worden toegepast. Roteer de tekening horizontaal, dit helpt vaak om fouten in proporties en schaduwwerking te identificeren. Je kunt de kleur ook verwijderen - stel de verzadiging in op nul om te begrijpen waar je de schaduwen moet veranderen.
Ruis creëren (dithering, dithering)
Tot nu toe hebben we vooral grote, effen schaduwvlakken gebruikt. Maar er is nog een techniek: dithering, waarmee je van de ene kleur naar de andere kunt gaan zonder een derde toe te voegen. Kijk naar het onderstaande voorbeeld.
De bovenste donker naar licht gradiënt gebruikt honderden verschillende tinten blauw.
Het gemiddelde verloop gebruikt slechts negen kleuren, maar er zijn nog steeds te veel tinten van dezelfde kleur. Er ontstaat een zogenaamde banding (van het Engelse band – stripe), waarbij door dikke uniforme strepen het oog zich richt op de raakpunten van de kleuren, in plaats van op de kleuren zelf.
Op het onderste verloop hebben we dithering toegepast, waardoor strepen worden vermeden en slechts twee kleuren worden gebruikt. We creëren ruis van verschillende intensiteit om kleurgradaties te simuleren. Deze techniek lijkt sterk op halftoon (halftoonafbeelding) die bij het afdrukken wordt gebruikt; evenals stippelingen (korrelig beeld) - in illustraties en strips.
Op de orc aarzelde ik nogal wat om textuur over te brengen. Sommige pixelartiesten gebruiken het helemaal niet, anderen zijn integendeel niet verlegen en doen het zeer vakkundig. Ik vind dat dither er het beste uitziet op grote gebieden gevuld met een enkele kleur (kijk naar de lucht in de Metal Slug-screenshot hierboven) of op gebieden die er ruw en oneffen uit moeten zien (zoals vuil). Bepaal zelf hoe u het gebruikt.
Als je een voorbeeld wilt zien van grootschalige en hoogwaardige dithering, bekijk dan de games van The Bitmap Brothers, een Britse studio uit de jaren 80, of de games op de PC-98 computer. Houd er rekening mee dat ze allemaal NSFW zijn.
Kakyusei (PC-98). Elf, 1996
Er zijn slechts 16 kleuren in deze afbeelding!
8. Laatste blik
Een van de gevaren van pixelkunst is dat het gemakkelijk en eenvoudig lijkt (vanwege de structuur- en stijlbeperkingen). Maar uiteindelijk zul je enorm veel tijd besteden aan het verfijnen van je sprites. Het is als een puzzel die moet worden opgelost. Daarom trekt pixelkunst perfectionisten aan. Onthoud dat één sprite niet te veel tijd in beslag mag nemen; het is slechts een klein stukje van een uiterst complexe verzameling stukjes. Het is belangrijk om het grote geheel niet uit het oog te verliezen.
Zelfs als je pixelkunst niet bedoeld is voor gamen, is het soms de moeite waard om tegen jezelf te zeggen: "Het is al goed genoeg!" En ga verder. De beste manier om je vaardigheden te ontwikkelen is door het hele proces zo vaak mogelijk van begin tot eind te doorlopen, waarbij je zoveel mogelijk onderwerpen gebruikt.
En soms is het handig om een sprite even te laten staan, zodat je er later met frisse ogen naar kunt kijken.
32×32 pixels
We hebben eerst een grote sprite van 96x96 pixels gemaakt, omdat het bij dat formaat meer op tekenen of schilderen lijkt, maar dan met pixels. Hoe kleiner de sprite, hoe minder hij lijkt op wat hij zou moeten weergeven, en hoe belangrijker elke pixel is.
In Super Mario Bros. Mario's oog bestaat uit slechts twee pixels, de een boven op de ander. En zijn oor ook. Karaktermaker Shigeru Miyamoto zei dat de snor nodig was om de neus van de rest van het gezicht te scheiden. Een van de belangrijkste kenmerken van Mario is dus niet alleen een karakterontwerp, maar een pragmatische truc. Wat de oude wijsheid bevestigt: “noodzaak is de moeder van de uitvinding.”
De belangrijkste fasen van het maken van een sprite van 32x32 pixels zijn ons al bekend: schets, kleur, schaduwen, verdere verfijning. Maar in dergelijke omstandigheden selecteer ik als eerste schets gekleurde vormen in plaats van contouren te tekenen vanwege het kleine formaat. Kleur speelt een belangrijkere rol bij het definiëren van een karakter dan omtrek. Kijk nog eens naar Mario, hij heeft helemaal geen contouren. Het is niet alleen de snor die interessant is. Zijn bakkebaarden bepalen de vorm van zijn oren, zijn mouwen laten zijn armen zien, en zijn algehele vorm laat min of meer duidelijk zijn hele lichaam zien.
Het maken van kleine sprites is een voortdurend compromis. Als u een lijn toevoegt, verliest u mogelijk ruimte voor de schaduw. Als je personage duidelijk zichtbare armen en benen heeft, zou het hoofd waarschijnlijk niet erg groot moeten zijn. Als u kleur, selectieve lijnen en anti-aliasing effectief gebruikt, zal het gerenderde object groter lijken dan het in werkelijkheid is.
Voor kleine sprites hou ik van de chibi-stijl: de personages zien er heel schattig uit, ze hebben grote hoofden en ogen. Een geweldige manier om in een beperkte ruimte een kleurrijk karakter te creëren, en over het algemeen een hele mooie stijl. Maar misschien moet je de mobiliteit of kracht van een personage laten zien, dan kun je het hoofd minder ruimte geven om het lichaam krachtiger te laten lijken. Het hangt allemaal af van uw voorkeuren en doelen.
Het hele team is samengesteld!
Bestandsformaten
Dit resultaat kan elke pixelkunstenaar nerveus maken
De afbeelding die u ziet is het resultaat van het opslaan van de afbeelding in JPG. Sommige gegevens zijn verloren gegaan als gevolg van algoritmen voor bestandscompressie. Pixelkunst van hoge kwaliteit zal er uiteindelijk slecht uitzien en het zal niet eenvoudig zijn om het terug te brengen naar het oorspronkelijke palet.
Als u een statische afbeelding wilt opslaan zonder kwaliteitsverlies, gebruikt u het PNG-formaat. Voor animaties - GIF.
Hoe je pixelkunst op de juiste manier deelt
Het delen van pixelkunst op sociale netwerken is een geweldige manier om feedback te krijgen en andere artiesten te ontmoeten die in dezelfde stijl werken. Vergeet niet de hashtag #pixelart te gebruiken. Helaas converteren sociale netwerken PNG vaak zonder te vragen naar JPG, waardoor uw ervaring slechter wordt. Bovendien is het niet altijd duidelijk waarom je afbeelding is geconverteerd.
Er zijn verschillende tips om pixelkunst in de vereiste kwaliteit op te slaan voor verschillende sociale netwerken.
Als je je PNG-bestand op Twitter ongewijzigd wilt laten, gebruik dan minder dan 256 kleuren of dat uw bestand aan de langste zijde minder dan 900 pixels groot is. Ik zou de bestandsgrootte vergroten tot minimaal 512x512 pixels. En zodat de schaling een veelvoud van 100 is (200%, niet 250%) en scherpe randen behouden blijven (Nearest Neighbor in Photoshop).
Geanimeerde GIF's voor Twitter-berichten weegt niet meer dan 15 MB. De afbeelding moet minimaal 800x800 pixels groot zijn, de looping-animatie moet drie keer worden herhaald en het laatste frame moet half zo lang zijn als alle andere - de meest populaire theorie. Het is echter onduidelijk in hoeverre aan deze eisen moet worden voldaan, aangezien Twitter voortdurend zijn algoritmen voor beeldweergave verandert.
Voor zover ik weet is het onmogelijk om een foto op Instagram te plaatsen zonder kwaliteitsverlies. Maar het zal er zeker beter uitzien als je het vergroot tot minimaal 512x512 pixels.
Bron: www.habr.com