Waarom Pixel Art een perfecte trainingsvloer voor grafisch ontwerp kan zijn

Zelfs als je er niet bij was om de wonderen van klassieke videogames van de 1970s tot aan de 1990s te ervaren, is het nooit te laat om een ​​waardering te ontwikkelen voor de unieke kunstvorm die is ontwikkeld om aan de behoeften van deze games te voldoen. Het is een kunstvorm die we tegenwoordig kennen als pixelkunst, en het is een van de beste manieren om je strepen te verdienen in 2D computerondersteund grafisch ontwerp.

De reden hiervoor is dat pixelart zware eisen stelt aan de kunstenaar. Het vereist meer discipline en is meer rigide dan de meeste andere kunstvormen. Pixelkunst dwingt je te focussen en te isoleren wat het belangrijkst is in een afbeelding en alleen dat te gebruiken, zonder de fijnere controle te bieden die je zou kunnen toepassen in een meer gedetailleerde tekenstijl. Het is een "minder is meer" benadering van tekenen en het maakt je beter in tekenen.

Pixelkunst kost tijd om onder de knie te krijgen. Per slot van rekening maakt u uw afbeeldingen één pixel per keer, en elke afbeelding vereist een zorgvuldige planning. Je zult moeten leren werken met een beperkt palet en zonder het voordeel van natuurlijke rondingen. Je zult ook uitsluitend in een 2D-omgeving werken, waar als je een 3D-look nodig hebt, je deze moet maken met behulp van trucs zoals isometrisch perspectief en parallax-scrollen.

Het leren animeren van sprites en achtergronden is ook een uitstekende manier om je programmeervaardigheden te verbeteren als je een volledig gameproject alleen aan het afhandelen bent. Nu mobiele apparaten meer verbonden zijn en nog steeds meestal niet over de mogelijkheid beschikken om langdurig 3D-games te spelen, 2D-spellen maken een opleving, en je kunt deze vaardigheden zelfs gebruiken om wat extra geld te verdienen wanneer het ontwerp niet vrij naar je deur vloeit.

Pixelart vereist geen speciale software. U kunt pixelillustraties maken in elk standaard tekenprogramma. Veel pixelartiesten zijn begonnen met eenvoudige gereedschappen zoals MS Paint, maar het is beter om geavanceerdere software te gebruiken die gebruikmaakt van lagen en aangepaste rasters, zodat je je ontwerpen tot in de perfectie kunt aanpassen. Inkscape is echt goed voor dit doel. Het is gratis, heeft ingebouwde isometrische rasters en werkt perfect voor pixelart.

doc88img02

Wat de hardware betreft, kun je een muis gebruiken, maar ik vind het gemakkelijker om een ​​grafisch tablet te gebruiken omdat ik de neiging heb om 'muishanden' te krijgen bij gedetailleerd kunstwerk, dus ik zou het ten minste aanraden om een ​​eenvoudige grafische tablet te gebruiken.

Waarom pixelart ideaal is

Veel te veel mensen gebruiken de woorden illustrator en designer door elkaar. Echt een illustrator is ver onder het niveau van een ontwerper. Illustratoren tekenen eenvoudig dingen volgens het verzoek van hun klant. Ontwerpers ontwerpen dingen volgens de behoeften van hun klant. Het is een enorm verschil.

Leren om pixelart te maken, betekent dat je leert hoe je creatieve oplossingen kunt innoveren om aan heel specifieke behoeften te voldoen. Het is veel meer dan alleen tekenen. De planning, de aandacht voor detail, het vermogen om te werken binnen de beperkingen van technologie en het bedenken van strategieën om die beperkingen te overwinnen, maakt een geweldige pixelartiest ook een geweldige ontwerper.

De wereld van pixelart

In tegenstelling tot wat je mag verwachten, is de markt voor pixelkunst groot en groeit deze. Verwachtingen waren over het algemeen dat pixelart uitsterft zodra de technologie het punt bereikt waarop het praktischer en haalbaarder was om vectorillustraties en 3D CGI te gebruiken. In werkelijkheid is er nog steeds een grote vraag naar pixelkunst en heeft deze zelfs een breder toepassingsgebied gekregen. Waar pixelkunst zich vroeger voornamelijk beperkte tot gaming, wordt het nu gebruikt in een breed scala aan praktische toepassingen.

Een aantal van de gebieden waar pixelart wordt verkocht, zijn:

  • Mobiele spellen en spellen met een retro-thema
  • Infographics
  • Website ontwerp
  • Interface ontwerp
  • Ontwerpen gebruikt voor kleding, sleutelhangers, etc.
  • Televisiebeelden (bijv .: The IT Crowd, Good Game)
  • Pixel art-comics (bijv .: Diesel Sweeties, Kid Radd)
  • Films (bijv .: Wreck It Ralph, Pixels)
  • Pixeltentoonstellingen en privécollecties

Er kunnen van tijd tot tijd andere potentiële markten zijn die zich voordoen. In sommige opzichten kun je Lego-stenen zelfs zien als een soort pixelkunst en het is eigenlijk mogelijk om 3D-pixelkunst te maken met Lego. Maar dat gaat niet gebeuren, tenzij je eerst een hoofdpixelartiest bent, dus laten we wat meer te weten komen over hoe je dat doet.

Aan de slag in het ontwerp van de pixelkunst

De beste manier om deze wereld binnen te komen, is door er een te betreden Pixelkunstwedstrijden en leer terwijl je gaat. Wanneer we het hebben over competities, bedoelen we natuurlijk die gratis zijn om binnen te komen en die uw werk niet commercieel exploiteren door u te verplichten al uw rechten op de organisatoren van de competitie te ondertekenen.

Goede pixelkunstwedstrijden stellen uitdagingen waarbij je je vaardigheden als innovatieve ontwerper moet gebruiken om het doel te bereiken. Soms is dit eenvoudigweg het thema instellen, maar het kan ook regels bevatten zoals het beperken van het aantal kleuren dat u kunt gebruiken of het instellen van een maximaal aantal pixels. Dit zijn allemaal beperkingen waar gameontwerpers ooit mee moesten werken. Wanneer je dezelfde technieken leert, in dezelfde omstandigheden, ontwikkel je sterke vaardigheden en hopelijk een beter begrip van het hele ontwerpproces.

Training

Er zijn tal van gratis online tutorials en je kunt kopen boeken over pixelart or game ontwerp om je op weg te helpen. Voor een meer diepgaande introductie, zou je kunnen overwegen om een udemy cursus in pixelart. Op slechts $ 35 en onderwezen door een expert game-artiest (Marco Vale, momenteel Art Director bij Indot Studios), het is een zeer goede prijs.

Het pixel-art-proces

Het maken van elk werk van pixelkunst volgt een lineair proces van concept tot voltooiing:

  • Het idee - u beslist wat u gaat creëren of krijgt instructies
  • Planning - u maakt keuzes over hoe u de afbeelding gaat maken
  • Raster selectie - u selecteert het juiste rastertype voor de afbeelding die u aan het maken bent
  • Palet selectie - u stelt een kleurenpalet in voor de afbeelding
  • Prototyping - een optionele stap om u een basiskaderwerk voor de omtrek te geven
  • Overzicht - u maakt de basisomtrek van de belangrijkste delen van de afbeelding
  • Vloeiend maken - u repareert eventuele "rommel" of onregelmatigheden om een ​​beter overzicht te maken
  • Kleuren - u voegt kleuren toe aan de afbeelding met behulp van het palet dat u hebt ingesteld
  • Schaduw - u voegt highlights en schaduwen toe om uw afbeelding realistischer te maken
  • Dithering - een optionele stap om een ​​echt retro gevoel in een beperkte palet-situatie na te bootsen
  • Selectieve outlining - u past effen lijnen toe op geselecteerde delen van de afbeelding om een ​​definitie te geven
  • Anti-aliasing - een laatste afvlakkende stap waarbij u kleur gebruikt om het realisme te verbeteren
  • Instelling - als de afbeelding die u hebt gemaakt een klein onderdeel is van een grotere scène, gaat u naar de instelling ervan

Sommige stappen zoals dithering en anti-aliasing worden mogelijk automatisch afgehandeld door uw tekensoftware. Het hangt af van wat u gebruikt en welke opties u selecteert.

Het idee

Sommige mensen beschouwen dit als de moeilijkste stap in het maken van een nieuw werk, maar dat is het waarschijnlijk ook niet. Het is uw doel om te beslissen wat u gaat maken, of in sommige gevallen om instructie van de klant te krijgen met betrekking tot wat zij willen. Inspiratie kan afkomstig zijn van de echte wereld om je heen, of van films, games, boeken en al het andere dat je kan helpen de objecten te visualiseren die in je scène zullen verschijnen. Voor dit voorbeeld maken we een bloempot die een prop in een grotere scène zou zijn.

Planning

In deze stap weet u al wat u gaat creëren, dus nu denkt u na over hoe u het gaat maken. De eerste belangrijke beslissing zal zijn of je een platte afbeelding gaat ontwerpen of een 3D-perspectief wilt geven. U bepaalt ook hoe gedetailleerd of realistisch de afbeelding moet zijn, of het nu retro-look nodig heeft en andere dingen zoals dat.

Hoe realistischer je wilt dat de afbeelding is, hoe meer pixels en kleuren je nodig hebt om te gebruiken, en hoe langer het duurt om te maken. Als u ontwerpt voor een wedstrijd, zijn sommige van deze keuzes al voor u gemaakt, maar u moet nog steeds de beste manier bedenken om het resultaat te bereiken.

Het is verstandig om het raster waarmee u gaat werken af ​​te drukken en het te gebruiken om een ​​papieren schets te maken van het voltooide computerbeeld. Dit zal dienen als een referentie voor de bitmap die u maakt, om u te helpen het perspectief en de schaal consistent te houden.

Selectie van rasters

Dit wordt bepaald door de aard van het werk dat u aan het maken bent. Voor platte afbeeldingen gebruikt u een standaardraster waarbij alle lijnen elkaar kruisen in een rechte hoek.

doc88img03

In een 3D-scène kunt u kiezen tussen een isometrisch raster (de meest gebruikelijke keuze) of een schuin raster. Een isometrisch raster heeft lijnen die elkaar kruisen bij 30-graden:

doc88img04

Een schuin raster heeft lijnen die elkaar kruisen bij 45-graden:

doc88img05

Schuine tekeningen zijn goed als u veel fijne details wilt opnemen, maar over het algemeen biedt isometrisch een beter zicht en voelt het realistischer. Het is om een ​​goede reden de meer algemeen gekozen tekenstijl.

Palet selectie

U kunt deze stap verlaten totdat u klaar bent om te kleuren, maar kunt u eigenlijk helpen met de rest van het proces als u uw kleuren al vroeg definieert.

Prototyping

De bloempot in het voorbeeld is in feite een vervormde kegelvorm, en zoals met alle 2D-imitaties van een kegel, maken we die basisvorm door gestapelde ellipsen te gebruiken. Dit bespaart tijd en toont ook de waarde van het gebruik van Inkscape aan, omdat het algoritmen heeft om vloeiendere lijnen op gebogen randen te produceren dan veel andere tekenprogramma's. We moeten er alleen voor zorgen dat de ellipsen goed aansluiten op het raster.

doc88img06

Gebruik dan een paar rechte lijnen om ze te verbinden (licht gebogen lijnen zijn nog realistischer als je het geduld hebt om ze te tekenen).

doc88img07

waarin

In deze stap tekenen we de omtrek van de afbeelding die we willen pixeliseren. Als je een prototype van de afbeelding hebt gemaakt, is dit gedeelte eenvoudig. Maak eerst een nieuwe afbeeldingslaag en stapel deze bovenop de andere laag (in Inkscape heeft de nieuwe laag automatisch een transparante achtergrond). Vergrendel de prototype laag, selecteer vervolgens de nieuwe laag en gebruik deze om je prototype te volgen met de potloodtool. Schakel raster magnetisch uit tijdens het traceren van gebogen lijnen.

doc88img08

Als u problemen ondervindt bij het zien van uw nieuwe lijnen, vermindert u eenvoudig de dekking van de prototypenlaag totdat u gemakkelijker uw omtreklijnlijnen kunt zien. Traceer niet alle lijnen, alleen degene die logisch zouden zijn.

doc88img09

Je kunt de prototypenlaag verwijderen na het voltooien van de omlijning, als je wilt, of gewoon onzichtbaar maken.

doc88img10

smoothing

Dit is een moeilijke stap. Hiervoor zoom je in op de curven in de afbeelding en probeer je eventuele gekartelde lijnen te corrigeren waardoor de afbeelding er minder natuurlijk uitziet. Afhankelijk van het niveau van de afbeelding, hoeft u dit mogelijk niet te doen (als uw afbeelding 32 × 32 pixels of minder is, kunt u heel weinig doen om de afbeelding te verbeteren door de afbeelding te verzachten.

De eerste manier om uw eerste afvlakkingsrun uit te voeren, is door in te zoomen op de afbeelding, zodat u kunt zien waar de curven niet goed zijn gedefinieerd of waar er onderbrekingen (openingen) in de ononderbroken lijnen zijn. Bij eventuele gaten loopt de kleur op als u een emmervulling gebruikt, dus het is een goed idee om gaten te verwijderen. Bedenk dat u slechts één pixel tegelijk doet, want een tablet maakt het werk een stuk eenvoudiger dan een muis.

doc88img11

Kleur

Dit is wat je vroeger voor de lol deed toen je vijf was, behalve dat het nu een stuk eenvoudiger is. Je kunt grote kleurvlakken opvullen met een emmervulling en met veel tekenprogramma's kun je een verloop instellen dat je al dan niet een realistisch uiterlijk geeft. Anders is het dezelfde deal als vloeiend maken: zoom in en stel je pixels één voor één in. Maak geen afzonderlijke kleurenlaag, omdat uw software mogelijk geen grenzen van een andere laag herkent bij het vullen van een bucket.

doc88img12

shading

Effen kleuren zijn eenvoudig, maar om een ​​realistisch uiterlijk te krijgen, moet u schaduwen gebruiken. Het is gemakkelijker om schaduwen toe te passen op grotere afbeeldingen omdat ze meer pixels hebben om aan te werken. De eerste stap in arcering is om erachter te komen hoe het licht uw object of scène raakt en vervolgens op realistische wijze hoogtepunten en schaduwen toe te passen. In eerste instantie zal dit moeilijk zijn, maar met ervaring en feedback van collega-kunstenaars zul je het onder de knie krijgen. Hier ga ik alleen de achterwand van de pot beschadigen, maar het is beter om enkele highlights op de voormuur aan te brengen.

doc88img13

dithering

Met een beperkt palet kunt u niet altijd alle schakeringen en kleuren krijgen die u maar wilt, en het maken van subtiele wijzigingen tussen aaneengesloten gebieden is moeilijk zonder dithering. Het is niet iets dat vereist is op moderne hardware, maar het wordt vaak toegepast voor situaties waarin je een retro 90s-look wilt of waar je om verschillende redenen met een beperkt palet moet werken. Sommige software kan dithering automatisch voor u regelen, of u moet uw eigen dithering maken. Deze afbeelding is te eenvoudig om enige dithering te gebruiken, maar dit is een zelfstudie dat verklaart hoe je een nep ditheringeffect creëert in Inkscape.

doc88img14

Selectieve outlining

Dit betekent dat zwarte contouren op interne gebieden worden vervangen door een meer natuurlijk ogende kleur en dat alleen die delen worden geschetst die voor de definitie moeten worden geschetst. In het echte leven zijn de aders op een blad niet zwart, dus ze zouden ook niet in je tekening moeten staan.

doc88img15

Anti-aliasing

Dit is vergelijkbaar met vloeiend maken, behalve dat u nauwkeuriger kijkt naar kleurregio's die mogelijk moeten "stoten" om de lijnen wat te verzachten, zodat ze realistischer lijken. Een kleur stoten betekent gewoon een kleurschaduw kiezen voor een pixel tussen de kleuren van de pixels aan weerszijden ervan. Opzettelijk vervagen maakt lijnen minder scherp. Net als met dithering past uw software automatisch anti-aliasing voor u toe.

omgeving

Uw voltooide object in een grotere scène plaatsen, wordt instelling genoemd. U hoeft dit niet te doen met personagesprites of objecten die verplaatsbaar zijn. Dat kan je later doen met code. Gebruik de instelling voor vaste objecten die niet bewegen. Geanimeerde objecten moeten worden omgezet in sprites, wat een onderwerp is voor een andere dag.

Wat te doen als uw afbeelding niet voldoende is gepixeld

Een van de problemen is dat Inkscape en soortgelijke vectorprogramma's gewoon te goed zijn voor een baan met emmervullingen, dus kleuren zien er erg vloeiend en vectorachtig uit. Als u een pixelachtige weergave wilt, moet u de afbeelding exporteren naar png, openen in GIMP en het Pixelize-filter toepassen, dat u vindt in het gedeelte Vervaging. Dit geeft je een resultaat zoals dit (dat je dan misschien tegen anti-alias moet hebben):

doc88img16

Slotopmerkingen

Pixelkunst is nog lang niet dood en goede pixelartiesten krijgen nog steeds veel respect in de ontwerpgemeenschap van degenen die begrijpen dat het een meester is. Leren om afbeeldingen pixel voor pixel te construeren, maakt je een betere ontwerper en mogelijk ook een betere ingenieur. Er is nog steeds een sterke vraag vanuit de markt naar pixelart en relatief weinig getalenteerde pixelartiesten op de grond die aan die behoefte voldoen. Je kunt geld verdienen met pixelkunst, of gewoon gebruiken om je vaardigheden te vergroten. Hoe dan ook, het is leuk en de moeite waard, zeker de moeite waard om te doen.

Bogdan Rancea

Bogdan is een van de oprichters van Inspired Mag en heeft in die periode bijna 6 jarenlange ervaring opgebouwd. In zijn vrije tijd studeert hij graag klassieke muziek en onderzoekt hij beeldende kunst. Hij is ook behoorlijk geobsedeerd door fixies. Hij is al eigenaar van 5.