{"id":54617,"date":"2019-12-30T00:00:00","date_gmt":"2019-12-29T21:00:00","guid":{"rendered":"https:\/\/prohoster.info\/blog\/blog_prohoster\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu"},"modified":"2020-02-18T14:02:39","modified_gmt":"2020-02-18T11:02:39","slug":"piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","status":"publish","type":"post","link":"https:\/\/prohoster.info\/nl\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","title":{"rendered":"Pixel-art voor beginners: gebruiksaanwijzing","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p><img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/00d172ccd0d834f54c3fa1ffe2f03481.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nIndie-ontwikkelaars moeten vaak meerdere rollen combineren: gameontwerper, programmeur, componist, kunstenaar. En als het om visuals gaat, kiezen velen voor pixel art \u2013 het lijkt op het eerste gezicht eenvoudig. Maar om iets moois te maken, heb je veel ervaring en specifieke vaardigheden nodig. Ik heb hier een tutorial gevonden voor degenen die net beginnen met de basisprincipes van deze stijl: met een beschrijving van speciale software en teken technieken, aan de hand van twee sprites.<noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><\/p>\n<h2>Achtergrond<\/h2>\n<p>\nPixel art is een vorm van digitale kunst waarbij wijzigingen op het niveau van pixels worden aangebracht. Het wordt voornamelijk geassocieerd met de graphics van videogames uit de jaren 80 en 90. Toen moesten kunstenaars rekening houden met geheugenbeperkingen en een lage resolutie. Tegenwoordig is pixel art nog steeds populair in games en als kunststijl in het algemeen, ondanks de mogelijkheid om realistische 3D-graphics te cre\u00ebren. Waarom? Zelfs als je de nostalgie niet meerekent, is het cre\u00ebren van een geweldige werk binnen zulke strenge beperkingen een leuke en waardevolle uitdaging.<\/p>\n<p>De drempel om met pixel art te beginnen is relatief laag in vergelijking met traditionele kunst en 3D-graphics, wat indie-ontwikkelaars aantrekt. Maar dat betekent zeker niet dat het eenvoudig zal zijn <b>om<\/b> een game in deze stijl af te ronden. Ik heb veel indie-ontwikkelaars gezien met pixel-art metroidvanias op crowdfundingplatforms. Ze dachten dat ze alles in een jaar zouden afronden, maar in werkelijkheid hadden ze nog zo'n zes jaar nodig. <\/p>\n<p><img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/67c754a18d7483e700e801beec5f2ebc.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Metal Slug 3 (Arcade). SNK, 2000<\/i><\/p>\n<p>Pixel art op het niveau dat de meeste mensen willen cre\u00ebren, kost veel tijd, en er zijn weinig korte tutorials. Bij het werken met een 3D-model kun je het draaien, vervormen, afzonderlijke onderdelen verplaatsen, animaties van het ene model naar het andere kopi\u00ebren, enzovoort. Pixel art van hoge kwaliteit kost bijna altijd veel moeite voor het zorgvuldig plaatsen van pixels in elk frame.<\/p>\n<p>Kortom, ik heb je gewaarschuwd.<\/p>\n<p>En nu wat over mijn stijl: ik maak voornamelijk pixelart voor videogames en vind daar ook inspiratie in. Ik ben vooral een fan van de Famicom\/NES, 16-bit consoles en arcadegames uit de jaren '90. De pixelart van mijn favoriete spellen uit die tijd zou ik beschrijven als levendig, zelfverzekerd en helder (maar niet te), het is niet stijf en minimalistisch. In deze stijl werk ik zelf, maar je kunt gemakkelijk idee\u00ebn en technieken uit deze tutorial gebruiken om totaal andere dingen te maken. Bestudeer het werk van verschillende kunstenaars en maak pixelart die je zelf leuk vindt!<\/p>\n<h2>Software<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/5dc5fa7ebabd2a31b1375cdfc9437b66.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nBasis digitale tools voor pixelart zijn Zoom en Potlood, om pixels te plaatsen. Ook zijn Lijn, Vorm, Selecteren, Verplaatsen en Verf emmer handig. Er is veel gratis en betaalde software met deze set aan tools. Ik zal het hebben over de populairste en diegene die ik zelf gebruik.<\/p>\n<h3>Paint (gratis)<\/h3>\n<p>\nAls je Windows hebt, is de ingebouwde Paint een primitief programma, maar het heeft alle tools voor pixelart.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/www.piskelapp.com\/\">Piskel<\/a><\/noindex> (gratis)<\/h3>\n<p>\nVerrassend functionele pixelart-editor die via de browser draait. Je kunt je werk exporteren als PNG of geanimeerde GIF. Geweldige optie voor beginners.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/graphicsgale.com\/us\/\">GraphicsGale<\/a><\/noindex> (gratis)<\/h3>\n<p>\nGraphicsGale is de enige editor die ik ken, speciaal ontwikkeld voor pixelart en inclusief animatietools. Het is gemaakt door het Japanse bedrijf HUMANBALANCE. Sinds 2017 wordt het gratis verspreid en is het nog steeds populair, ondanks de groeiende populariteit van Aseprite. Helaas werkt het alleen op Windows.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/www.aseprite.org\/\">Aseprite<\/a><\/noindex> ($)<\/h3>\n<p>\nMisschien wel de populairste editor op dit moment. <noindex><a rel=\"nofollow\" href=\"https:\/\/www.aseprite.org\/faq\/#if-aseprite-source-code-is-available-how-is-that-you-are-selling-it\">Open source<\/a><\/noindex>, vol mogelijkheden, actieve ondersteuning, versies voor Windows, Mac en Linux. Als je serieus met pixelart bezig bent en nog geen geschikte editor hebt gevonden, is dit wellicht wat je nodig hebt.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/www.yoyogames.com\/get\">GameMaker Studio 2<\/a><\/noindex> ($$+)<\/h3>\n<p>\nGameMaker Studio 2 is een uitstekende 2D-tool met een goede sprite-editor. Als je pixelart voor je eigen spellen wilt maken, is het heel handig om alles in \u00e9\u00e9n programma te doen. Op dit moment gebruik ik deze software voor mijn werk aan <noindex><a rel=\"nofollow\" href=\"https:\/\/50games.fun\/\">UFO 50<\/a><\/noindex>, een collectie van 50 retro-spellen: ik maak sprites en animaties in GameMaker, en tilesets in Photoshop.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/www.photoshop.com\/\">Photoshop<\/a><\/noindex> ($$$+)<\/h3>\n<p>\nPhotoshop is dure software dat op abonnement wordt aangeboden en niet geschikt is voor pixel-art. Ik raad aan het niet te kopen als je geen hoge resolutie illustraties maakt of complexe bewerkingen uitvoert, zoals ik. Je kunt statische sprites en pixelwerk maken, maar het is behoorlijk ingewikkeld in vergelijking met gespecialiseerde software (zoals GraphicsGale of Aseprite).<\/p>\n<h2>Overige<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/e810f041b931c304b6b65f9895a9f325.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Mijn set voor pixel-art. Alles is zwart, dat is me pas nu opgevallen.<\/i><\/p>\n<h3>Graphic tablet ($$+)<\/h3>\n<p>\nIk raadt graphic tablets aan voor al het werk met digitale illustraties, om het tunnel syndroom van de polsen te vermijden. Het is veel gemakkelijker te voorkomen dan te genezen. Zodra je pijn voelt, zal het alleen maar erger worden \u2014 zorg goed voor jezelf vanaf het begin. Omdat ik ooit met de muis heb getekend, heb ik het nu moeilijk om games te spelen waarin je op knoppen moet drukken. Ik gebruik nu een Wacom Intuos Pro S.<\/p>\n<h3>Polsondersteuning ($)<\/h3>\n<p>\nAls je geen tablet kunt kopen, koop dan op zijn minst een polsondersteuning. Ik hou het meest van de Mueller Green Fitted Wrist Brace. De andere zijn ofwel te strak, of bieden onvoldoende ondersteuning. Steunbanden kunnen gemakkelijk online besteld worden.<\/p>\n<h2>96\u00d796 pixels<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/f8bfaf46d9b833c623bbe1573d40ae64.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Final Fight. Capcom, 1989<\/i><\/p>\n<p>Laten we beginnen! We beginnen met een 96\u00d796 pixels sprite van het personage. Als voorbeeld heb ik een ork getekend en die geplaatst op een screenshot uit Final Fight (bovenstaande afbeelding), zodat je de schaal kunt begrijpen. Dit is <b>groot<\/b> sprite voor de meeste retro-games, screenshotgrootte: 384\u00d7224 pixels.<\/p>\n<p>Met zo'n grote sprite is het gemakkelijker om de techniek te tonen die ik wil bespreken. Bovendien lijkt pixel art meer op traditionele kunstvormen (zoals tekenen of schilderen), waarmee je wellicht beter bekend bent. Zodra je de basistechnieken onder de knie hebt, gaan we over op kleinere sprites.<\/p>\n<h2>1. Kies een palet<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/f99208134b3f107fcdf3f14b8c2216b8.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nPixel is een veel dieper begrip in pixel-art dan in andere digitale gebieden. Pixel-art wordt bepaald door zijn beperkingen, zoals kleuren. Het is belangrijk om de juiste palet te kiezen; dit helpt je stijl te bepalen. Maar in het begin raad ik aan om niet over paletten na te denken en gewoon een van de bestaande te kiezen (of een paar willekeurige kleuren) \u2014 je kunt deze op elk moment gemakkelijk veranderen.<\/p>\n<p>Voor deze tutorial ga ik een palet van 32 kleuren gebruiken, die we hebben gemaakt voor <noindex><a rel=\"nofollow\" href=\"https:\/\/50games.fun\/\">UFO 50<\/a><\/noindex>. Voor pixelart worden ze vaak samengesteld uit 32 of 16 kleuren. Onze is ontwikkeld voor een fictieve console die ergens tussen de Famicom en de PC Engine zou kunnen verschijnen. U kunt het nemen of een andere \u2014 de tutorial is helemaal niet afhankelijk van het gekozen palet.<\/p>\n<h2>2. Grobe omtrekken<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/e8ead988dfafeae4b220ff3dc39093e6.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nLaten we beginnen met het tekenen met het Pijltje. We tekenen een schets zoals we dat met een gewone pen en papier doen. Natuurlijk overlappen pixelart en traditionele kunst elkaar, vooral als het gaat om grotere sprites. Mijn observaties tonen aan dat sterke pixelart kunstenaars minstens goed kunnen tekenen met de hand, en vice versa. Het is altijd nuttig om tekenvaardigheden te ontwikkelen.<\/p>\n<h2>3. Omtrekken verfijnen<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/738dde231295a317d5461b4055e2be61.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nWe verbeteren de omtrekken: we verwijderen overtollige pixels en verkleinen de dikte van elke lijn tot \u00e9\u00e9n pixel. Maar wat beschouwen we precies als overtollig? Om deze vraag te beantwoorden, moeten we de pixel- en onregelmatigheden van lijnen begrijpen.<\/p>\n<h3>Onregelmatigheden<\/h3>\n<p>\nJe moet leren om twee basislijnen in pixelart te tekenen: rechte en kromme. Met een pen en papier draait alles om spierspanning, maar wij werken met piepkleine gekleurde blokken.<\/p>\n<p>De sleutel tot het tekenen van de juiste pixellijnen zijn de onregelmatigheden. Dit zijn enkele pixels of kleine segmenten die de gladheid van de lijn verstoren. Zoals ik al zei, is een individuele pixel van groot belang in pixelart, en onregelmatigheden kunnen de hele esthetiek verstoren. Stel je voor dat je een rechte lijn op papier trekt en onverwachts iemand tegen de tafel stoot: onregelmatigheden in pixelart zien eruit zoals een willekeurige krabbel.<\/p>\n<p>Voorbeelden:<\/p>\n<p><img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/8d873c547fa1fc638d524877599d1788.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Rechtes<\/i><\/p>\n<p><img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/0516dfef0ffc74335de791e16708b90f.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Krommes<\/i><\/p>\n<p>Onregelmatigheden ontstaan bij krommes wanneer de lengte van de lijnsegmenten niet geleidelijk toeneemt of afneemt.<\/p>\n<p>Onmogelijk om onregelmatigheden volledig te vermijden \u2014 al je favoriete retrogames bevatten ze (tenzij pixelart uitsluitend uit eenvoudige vormen bestaat). Het doel: onregelmatigheden tot een minimum verminderen, terwijl je alles noodzakelijks toont.<\/p>\n<h2>4. Toepassen van de eerste kleuren<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/b8b937d95667cff41f1060a77e715acb.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nKleur je karakter in met behulp van vul- of een ander geschikt gereedschap. De kleurenpalet maakt dit deel van het werk eenvoudiger. Als de software het gebruik van paletten niet ondersteunt, kun je deze recht in het beeld plaatsen, zoals in het bovenstaande voorbeeld, en kleuren kiezen met de pipet.<\/p>\n<p>In de linksonderhoek heb ik onze vriend getekend, maak kennis met \u0160ar. Hij zal helpen beter te begrijpen wat er in elke stap gebeurt.<\/p>\n<h2>5. Schaduwwerk<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/2e0793f9ded395337e4da9ede215b9d8.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nHet is tijd om schaduwen te tonen \u2014 we voegen gewoon donkerdere kleuren toe aan de sprite. Hierdoor ziet het beeld er driedimensionaal uit. Laten we aannemen dat we \u00e9\u00e9n lichtbron hebben, boven de orc, iets naar links van hem. Dat betekent dat alles wat zich boven en voor onze karakter bevindt, verlicht is. We voegen schaduwen aan de rechteronderzijde toe.<\/p>\n<h3>Vorm en volume<\/h3>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/1994fcb30789e1601bcae8ce1a50d5e7.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nAls deze stap moeilijk voor je is, stel je tekening dan voor als volumineuze vormen in plaats van alleen maar lijnen en kleur. Vormen bestaan in een driedimensionale ruimte en kunnen volume hebben, die we cre\u00ebren met behulp van schaduwen. Dit helpt om het karakter te visualiseren zonder details en om je voor te stellen dat het uit klei is gemaakt, en niet uit pixels. Schaduwwerk is niet alleen het toevoegen van nieuwe kleuren, het is een proces van het opbouwen van vorm. Bij een goed uitgewerkt karakter verbergen de details de basale vormen niet: als je je ogen dichtknijpt, zie je verschillende grote clusters van licht en schaduw. <\/p>\n<h3>Anti-aliasing<\/h3>\n<p>\nElke keer als ik een nieuwe kleur gebruik, pas ik anti-aliasing (AA) toe. Dit helpt om pixels te verzachten door tussenkleuren toe te voegen op de hoeken, waar twee segmenten van een lijn elkaar raken:<\/p>\n<p><img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/9fc0ab09f076b1de252038c899ada201.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nGrijze pixels verzachten de \"breuken\" in de lijn. Hoe langer het segment van de lijn, hoe langer het AA-segment.<\/p>\n<p><img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/262533d7923415430375d84f58a9d7fa.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Zo ziet AA eruit op de schouder van de orc. Het is nodig om de lijnen die de kromming van zijn spieren weergeven, te verzachten.<\/i><\/p>\n<p>Anti-aliasing mag niet buiten de sprite komen die in het spel of op een achtergrond zal worden gebruikt, waarvan de kleur onbekend is. Bijvoorbeeld, als je AA voor een lichte achtergrond toepast, zal het er op een donkere achtergrond niet goed uitzien.<\/p>\n<h2>6. Selectieve contour<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/32574a815ea81137a948f0a18217c8db.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nVroeger waren de contouren volledig zwart, waardoor de sprite er erg cartoonachtig uitzag. De afbeelding leek in segmenten verdeeld. Bijvoorbeeld, de zwarte lijnen op de arm geven te veel contrast aan de spieren weer, waardoor het karakter minder samenhangend lijkt.<\/p>\n<p>Als de sprite natuurlijker wordt en de segmentatie minder opvallend is, zullen de basisvormen van het personage gemakkelijker te lezen zijn. Hiervoor kan een selectieve contour gebruikt worden \u2014 vervang gedeeltelijk de zwarte contour door een lichtere. Op het verlichte gedeelte van de sprite kunnen de lichtste kleuren worden gebruikt, of waar de sprite in contact komt met negatieve ruimte, kan de contour volledig worden verwijderd. In plaats van zwart moet een kleur worden gebruikt die is gekozen voor de schaduw \u2014 zo blijft de segmentatie behouden (voor het afbakenen van spieren, vacht, enzovoort).<\/p>\n<p>Ook heb ik in deze fase donkerdere schaduwen toegevoegd. Er zijn drie tinten groen op de huid van de ork ontstaan. De donkerste groene kleur kan worden gebruikt voor de selectieve contour en AA.<\/p>\n<h2>7. Laatste handgrijpen<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/196f80b3ed3928d4c1ac7b9b99782fa1.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nAan het einde is het belangrijk om highlights (de helderste plekken op de sprite), details (oorbellen, klinknagels, littekens) en andere verbeteringen toe te voegen, totdat het personage klaar is of totdat het nodig is om door te gaan naar de volgende.<\/p>\n<p>Er zijn verschillende nuttige technieken die in deze fase kunnen worden toegepast. Draai de afbeelding horizontaal, dit helpt vaak om fouten in verhoudingen en schaduwen te ontdekken. U kunt ook de kleur verwijderen \u2014 zet de verzadiging op nul, om te begrijpen waar de schaduwen moeten worden aangepast.<\/p>\n<h3>Het cre\u00ebren van ruis (dithering)<\/h3>\n<p>\nTot nu toe hebben we voornamelijk grote, massieve delen schaduw toegepast. Maar er is ook een andere techniek \u2014 dithering, die het mogelijk maakt om van de ene kleur naar de andere over te gaan zonder een derde toe te voegen. Bekijk het voorbeeld hieronder.<\/p>\n<p><img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/85c2482ab6f83e0eb972d31d50ff0a2e.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nDe bovenste gradient van donkergroen naar lichtgroen gebruikt honderden verschillende tinten blauw. <\/p>\n<p>De middelste gradient gebruikt slechts negen kleuren, maar bevat nog steeds te veel tinten van dezelfde kleur. Er treedt zogenaamde banding op, waarbij door dikke egale banen het oog zich richt op de punten waar de kleuren elkaar raken, in plaats van op de kleuren zelf.<\/p>\n<p>In de onderste gradient hebben we dithering toegepast, wat banding voorkomt en slechts twee kleuren gebruikt. We cre\u00ebren ruis van verschillende intensiteit om een kleurovergang te imiteren. Deze techniek lijkt veel op halftone, dat wordt toegepast bij printing; en ook op stippling \u2014 in illustratie en strips.<\/p>\n<p>In de pixelart heb ik dithering maar heel beperkt gebruikt voor het overbrengen van textuur. Sommige pixelartiesten gebruiken het helemaal niet, terwijl anderen er met veel flair mee omgaan. Ik denk dat dithering het beste tot zijn recht komt op grote delen die in \u00e9\u00e9n kleur zijn gevuld (kijk maar naar de lucht op de screenshot van Metal Slug hierboven) of op plekken die ruw en ongelijk moeten lijken (zoals modder). Beslis zelf hoe je het het beste kunt gebruiken.<\/p>\n<p>Als je een voorbeeld wilt zien van grootschalige en hoogwaardige dithering, bekijk dan de spellen van The Bitmap Brothers, een Britse studio uit de jaren '80, of de spellen op de PC-98. Hou er rekening mee dat ze allemaal NSFW zijn.<\/p>\n<p><img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/25efcc37096d23b0da636b7f04b17e40.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Kakyusei (PC-98). Elf, 1996.<br \/>\nOp dit beeld zijn slechts 16 kleuren!<\/i><\/p>\n<h2>8. Laatste kijk<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/e1cccd845e1bffa32b26fccc011b6560.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nEen van de gevaren van pixelart is dat het eenvoudig en gemakkelijk lijkt (door de structuur en de stijlbeperkingen). Maar uiteindelijk kost het je een enorme hoeveelheid tijd om je sprites af te werken. Het is als het oplossen van een puzzel \u2014 dat is waarom pixelart perfectionisten aantrekt. Vergeet niet dat \u00e9\u00e9n sprite niet te veel tijd moet kosten \u2014 het is slechts een klein onderdeel van een extreem complexe verzameling stukjes. Het is belangrijk om het algemene plaatje niet uit het oog te verliezen.<\/p>\n<p>Zelfs als je pixelart niet voor games is, is het soms goed om jezelf te zeggen: \"Het is al goed genoeg!\" en verder te gaan. De beste manier om vaardigheden te ontwikkelen, is door het hele proces zo vaak mogelijk van begin tot eind door te lopen, met zoveel mogelijk onderwerpen. <\/p>\n<p>En het is soms nuttig om een sprite even te laten liggen, zodat je het later met frisse ogen kunt bekijken. <\/p>\n<h2>32\u00d732 pixels<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/6a4441d7b2cfa580454f6d6b64b7644b.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nWe hebben eerst een grote sprite van 96\u00d796 pixels gemaakt, omdat dit meer lijkt op tekenen of schilderen, maar dan met pixels. Hoe kleiner de sprite, hoe minder deze lijkt op wat hij moet weergeven, en hoe belangrijker elk pixel wordt.<\/p>\n<p><img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/ac13676b156c0e357e690e90d4a9bc5d.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nIn Super Mario Bros. is het oog van Mario maar twee pixels, \u00e9\u00e9n boven de ander. En zijn oor ook. De maker van het personage, Shigeru Miyamoto, zei dat de snor nodig was om de neus van de rest van het gezicht te scheiden. Dus een van de belangrijkste kenmerken van het gezicht van Mario is niet alleen het ontwerp van het personage, maar ook een pragmatische truc. Dit bevestigt de oude wijsheid \u2014 \"nood is de moeder van de uitvinding.\"<\/p>\n<p>De belangrijkste stappen voor het maken van een sprite van 32\u00d732 pixels zijn ons al bekend: schets, kleur, schaduw, verdere uitwerking. In dergelijke omstandigheden kies ik als eerste schets voor gekleurde vormen in plaats van het tekenen van omtrekken vanwege de kleine afmeting. Kleur speelt een belangrijkere rol bij het defini\u00ebren van het personage dan omlijning. Kijk nog eens naar Mario, hij heeft helemaal geen omlijning. Niet alleen zijn snor is interessant. Zijn bakkebaarden bepalen de vorm van zijn oren, de mouwen tonen zijn handen en de algemene vorm geeft meer of minder duidelijk zijn gehele lichaam weer.<\/p>\n<p>Het maken van kleine sprites is voortdurend een kwestie van compromissen. Als je een omlijning toevoegt, loop je misschien ruimte voor schaduw mis. Als de handen en voeten van je personage duidelijk zijn weergegeven, moet het hoofd waarschijnlijk niet te groot zijn. Als je kleur, selectieve omlijning en antialiasing effectief gebruikt, zal het getekende object groter lijken dan het in werkelijkheid is.<\/p>\n<p>Voor kleine sprites houd ik van de chibi-stijl: de personages zien er heel schattig uit, met grote hoofden en ogen. Het is een uitstekende manier om een levendig held te cre\u00ebren in beperkte ruimte, en het is over het algemeen een zeer aangename stijl. Maar misschien moet je de mobiliteit of kracht van het personage laten zien, dan kun je minder ruimte aan het hoofd geven zodat het lichaam krachtiger lijkt. Het hangt allemaal af van je voorkeuren en doelen.<\/p>\n<p><img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/5c32b47afc803e698c9523e183086b9c.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Een heel team is aanwezig!<\/i><\/p>\n<h2>Bestandsformaten<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art voor beginners: gebruiksaanwijzing\" src=\"\/wp-content\/uploads\/2019\/12\/c636145341db38f18a33b8c9708c36bf.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Dit resultaat kan elke pixelart kunstenaar nerveus maken.<\/i><\/p>\n<p>De afbeelding die je ziet, is het resultaat van het opslaan van de tekening in JPG. Een deel van de gegevens is verloren gegaan door de compressie-algoritmen. Kwalitatieve pixel art zal er uiteindelijk slecht uitzien, en het zal moeilijk zijn om de oorspronkelijke palet terug te krijgen.<\/p>\n<p>Gebruik het PNG-formaat voor het opslaan van een statische afbeelding zonder kwaliteitsverlies. Voor animaties \u2014 GIF.<\/p>\n<h2>Hoe je pixelart op de juiste manier kunt delen<\/h2>\n<p>\nHet delen van pixelart op sociale media is een geweldige manier om feedback te krijgen en andere kunstenaars te ontmoeten die in dezelfde stijl werken. Vergeet niet de hashtag #pixelart te gebruiken. Helaas converteren sociale netwerken vaak PNG naar JPG zonder te vragen, waardoor je werk slechter wordt. En het is niet altijd duidelijk waarom je afbeelding is geconverteerd.<\/p>\n<p>Er zijn een paar tips om pixelart in de juiste kwaliteit voor verschillende sociale media te behouden.<\/p>\n<h3>Twitter<\/h3>\n<p>\nOm te voorkomen dat een PNG-bestand in Twitter verandert, gebruik je minder dan 256 kleuren of <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/NolanOBrien\/status\/1199037916019716096\">zorg ervoor<\/a><\/noindex>, dat je bestand minder dan 900 pixels aan de lange kant is. Ik zou de bestandsgrootte minstens verhogen tot 512\u00d7512 pixels. Zorg ervoor dat de schaalvergroting een veelvoud van 100 is (200%, en niet 250%) en dat scherpe randen behouden blijven (Nearest Neighbor in Photoshop).<\/p>\n<p>Geanimeerde GIF-bestanden voor berichten op Twitter <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/cyangmou\/status\/989149918534275072?lang=en\">moeten<\/a><\/noindex> niet groter zijn dan 15 MB. De afbeelding moet minstens 800\u00d7800 pixels zijn, de cyclus moet drie keer herhaald worden, en het laatste frame moet de helft van de tijd duren dan de andere\u2014de meest populaire theorie. Het is echter onduidelijk hoe strikt aan deze eisen moet worden voldaan, gezien Twitter voortdurend zijn algoritmes voor beeldweergave verandert.<\/p>\n<h3>Instagram<\/h3>\n<p>\nVoor zover ik weet, is het onmogelijk om een afbeelding op Instagram te plaatsen zonder kwaliteitsverlies. Maar hij zal er zeker beter uitzien als je hem minstens vergroot tot 512x512 pixels.<br \/>\n<br \/>Bron: <a content=\"nofollow\" rel=\"nofollow\" href=\"https:\/\/habr.com\/ru\/company\/playgendary\/blog\/482536\/\">habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"<p>\u0418\u043d\u0434\u0438-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043e\u0432\u043c\u0435\u0449\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u043e\u043b\u0435\u0439: \u0433\u0435\u0439\u043c\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430, \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430, \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0430, \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u0430. \u0418, \u043a\u043e\u0433\u0434\u0430 \u0434\u0435\u043b\u043e \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u0430, \u043c\u043d\u043e\u0433\u0438\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u044e\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u044c-\u0430\u0440\u0442 \u2014 \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043e\u043d \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c. \u041d\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u043d\u0443\u0436\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u0432\u044b\u043a\u0438. \u041d\u0430\u0448\u0435\u043b \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0430\u043b \u043f\u043e\u0441\u0442\u0438\u0433\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u044b \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u044f: \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0444\u0442\u0430 \u0438 \u0442\u0435\u0445\u043d\u0438\u043a \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f [&hellip;]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[702],"tags":[],"class_list":["post-54617","post","type-post","status-publish","format-standard","hentry","category-news"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.3 - aioseo.com -->\n\t<meta name=\"description\" content=\"\u0418\u043d\u0434\u0438-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Yuri Gagarin\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/prohoster.info\/nl\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.3\" \/>\n\t\t<meta property=\"og:locale\" content=\"nl_NL\" \/>\n\t\t<meta property=\"og:site_name\" content=\"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"\ud83e\udd47\u041f\u0438\u043a\u0441\u0435\u043b\u044c-\u0430\u0440\u0442 \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445: \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043f\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044e | ProHoster\" \/>\n\t\t<meta property=\"og:description\" content=\"\u0418\u043d\u0434\u0438-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/prohoster.info\/nl\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"350\" \/>\n\t\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-12-29T21:00:00+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2020-02-18T11:02:39+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"\ud83e\udd47Pixel-art voor beginners: gebruiksaanwijzing | ProHoster","description":"Onafhankelijke ontwikkelaars komen dit vaak tegen.","canonical_url":"https:\/\/prohoster.info\/nl\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"nl_NL","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47\u041f\u0438\u043a\u0441\u0435\u043b\u044c-\u0430\u0440\u0442 \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445: \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043f\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044e | ProHoster","og:description":"\u0418\u043d\u0434\u0438-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f.","og:url":"https:\/\/prohoster.info\/nl\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2019-12-29T21:00:00+00:00","article:modified_time":"2020-02-18T11:02:39+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"54617","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":"2026-01-24 12:06:19","breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-02-28 20:01:33","updated":"2026-01-24 12:06:19","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/nl\/wp-json\/wp\/v2\/posts\/54617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/nl\/wp-json\/wp\/v2\/comments?post=54617"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/nl\/wp-json\/wp\/v2\/posts\/54617\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/nl\/wp-json\/wp\/v2\/media?parent=54617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/nl\/wp-json\/wp\/v2\/categories?post=54617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/nl\/wp-json\/wp\/v2\/tags?post=54617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}