Indie-ontwikkelaars moet dikwels verskeie rolle gelyktydig kombineer: spelontwerper, programmeerder, komponis, kunstenaar. En wanneer dit kom by beeldmateriaal, kies baie mense pixelkuns – met die eerste oogopslag lyk dit eenvoudig. Maar om dit mooi te maak, het jy baie ondervinding en sekere vaardighede nodig. Ek het 'n tutoriaal gevind vir diegene wat pas die basiese beginsels van hierdie styl begin verstaan: met 'n beskrywing van spesiale sagteware en tekentegnieke deur twee sprites as 'n voorbeeld te gebruik.
agtergrond
Pixelkuns is 'n vorm van digitale kuns waarin veranderinge op pixelvlak gemaak word. Dit word hoofsaaklik geassosieer met videospeletjiegrafika uit die 80's en 90's. Destyds moes kunstenaars geheuebeperkings en lae resolusie in ag neem. Deesdae is pixelkuns steeds gewild in speletjies en as kunsstyl in die algemeen, ten spyte van die vermoë om realistiese 3D-grafika te skep. Hoekom? Afgesien van nostalgie, is dit 'n genotvolle en lonende uitdaging om koel werk binne so 'n nou raamwerk te skep.
Die versperring vir toegang tot pixelkuns is relatief laag in vergelyking met tradisionele kuns en 3D-grafika, wat indie-ontwikkelaars lok. Maar dit beteken nie dat dit maklik sal wees nie klaarmaak spel in hierdie styl. Ek het baie indie-ontwikkelaars met pixel art metroidvanias op crowdfunding-platforms gesien. Hulle het gedink hulle sou alles in 'n jaar klaarmaak, maar eintlik het hulle nog ses jaar nodig gehad.
Metal Slug 3 (Arcade). SNK, jaar 2000
Pixelkuns op die vlak wat die meeste mense wil skep, is tydrowend, en kort tutoriale is min. Wanneer jy met 'n 3D-model werk, kan jy dit draai, vervorm, sy individuele dele skuif, animasies van een model na 'n ander kopieer, ensovoorts. Hoëvlak pixelkuns verg byna altyd baie moeite om pieksels noukeurig op elke raam te plaas.
Oor die algemeen het ek gewaarsku.
En nou 'n bietjie oor my styl: ek teken hoofsaaklik pixel art vir videospeletjies en vind inspirasie daarin. Ek is veral 'n aanhanger van die Famicom/NES, 16-bis-konsoles en 90's-arcade-speletjies. Die pixelkuns van my gunsteling speletjies van die era kan beskryf word as helder, selfversekerd en skoon (maar nie te veel nie), dit is nie moeilik en minimalisties nie. Ek werk self in hierdie styl, maar jy kan maklik die idees en tegnieke uit hierdie tutoriaal toepas om heeltemal ander dinge te skep. Verken die werk van verskillende kunstenaars en skep die pixelkuns waarvan jy hou!
sagte
Basiese digitale gereedskap vir pixelkuns - Zoom (zoem) en potlood (potlood) om pieksels te plaas. Jy sal ook Lyn (Lyn), Figuur (Vorm), Kies (Kies), Beweeg (Beweeg) en Vul (Verf Emmer) benodig. Daar is baie gratis en betaalde sagteware met so 'n stel gereedskap. Ek sal praat oor die gewildste en dié wat ek self gebruik.
Verf (gratis)
As jy Windows het, is Paint daarin ingebou – ’n primitiewe program, maar dit het al die gereedskap vir pixelkuns.
(Is gratis)
'n Onverwags funksionele pixelkunsredigeerder wat deur die blaaier loop. Jy kan jou werk na PNG of geanimeerde GIF uitvoer. Goeie opsie vir beginners.
(Is gratis)
GraphicsGale is die enigste redakteur waarvan ek gehoor het wat spesifiek ontwerp is vir pixelkuns wat animasie-instrumente insluit. Dit is geskep deur die Japannese maatskappy HUMANBALANCE. Sedert 2017 word dit gratis versprei en is dit steeds in aanvraag, ondanks die groeiende gewildheid van Aseprite. Ongelukkig werk dit net op Windows.
($)
Miskien die gewildste redakteur op die oomblik. , tonne funksies, aktiewe ondersteuning, weergawes vir Windows, Mac en Linux. As jy ernstig is oor pixelkuns en steeds nie die regte redigeerder gekry het nie, is dit dalk die een vir jou.
($$+)
GameMaker Studio 2 is 'n uitstekende 2D-instrument met 'n goeie Sprite Editor. As jy pixelkuns vir jou eie speletjies wil skep, is dit baie gerieflik om alles in een program te doen. Nou gebruik ek hierdie sagteware in my werk aan , 'n versameling van 50 retro-speletjies: Ek skep sprites en animasies in GameMaker, en teëlstelle in Photoshop.
($$$+)
Photoshop is duur sagteware, versprei deur intekening, en nie ontwerp vir pixel art nie. Ek beveel nie aan om dit te koop nie, tensy jy betrokke is by die weergawe van illustrasies in hoë resolusie, of jy hoef nie ingewikkelde manipulasies met die beeld uit te voer, soos ek nie. Jy kan statiese sprites en pixelkuns daarin skep, maar dit is redelik kompleks in vergelyking met gespesialiseerde sagteware (byvoorbeeld GraphicsGale of Aseprite).
Ander
My pixel art kit. Alles is swart, het ek net opgemerk.
Grafiese tablet ($$+)
Ek beveel grafiese tablette aan vir enige digitale illustrasiewerk om karpale tonnelsindroom te vermy. Dit is baie makliker om te voorkom as om te genees. Eendag sal jy die pyn voel en dit sal net erger word – sorg van die begin af vir jouself. As gevolg van die feit dat ek voorheen met 'n muis geteken het, sukkel ek nou om speletjies te speel wat vereis dat jy sleutels druk. Ek gebruik tans Wacom Intuos Pro S.
Polssteun ($)
As jy nie 'n tablet kan kry nie, kry ten minste 'n polssteun. My gunsteling is die Mueller Green Fitted Wrist Brace. Die res is óf te styf óf bied nie genoeg ondersteuning nie. Kalibers kan sonder enige probleme aanlyn bestel word.
96 × 96 pixels
finale stryd. Capcom, 1989
Laat ons begin! Kom ons begin met 'n 96x96 px karakter sprite. As voorbeeld het ek 'n ork geteken en dit op die skermkiekie van Final Fight (prent hierbo) geplaas sodat jy die skaal kry. Hierdie большой sprite vir die meeste retro-speletjies, skermkiekiegrootte: 384×224 piksels.
Op so 'n groot sprite sal dit makliker wees om die tegniek te wys waaroor ek wil praat. Ook, pixel-vir-pixel-weergawe is meer soos tradisionele vorme van kuns (soos teken of skilder) waarmee jy dalk meer vertroud is. Nadat ons die basiese tegnieke bemeester het, gaan ons oor na kleiner sprites.
1. Kies 'n palet
Die pixel is 'n baie dieper konsep in pixelkuns as in enige ander digitale realm. Pixelkuns word gedefinieer deur sy beperkings, soos kleure. Dit is belangrik om die regte palet te kies, dit sal help om jou styl te definieer. Maar aan die begin stel ek voor dat jy nie aan palette dink nie en een van die bestaandes kies (of net 'n paar willekeurige kleure) - jy kan dit maklik in enige stadium verander.
Vir hierdie tutoriaal sal ek die 32-kleurpalet gebruik waarvoor ons geskep het . Vir pixelkuns word hulle dikwels uit 32 of 16 kleure saamgestel. Ons s'n is ontwerp vir 'n fiktiewe konsole wat iewers tussen die Famicom en die PC Engine sal verskyn. Jy kan dit of enige ander neem - die tutoriaal hang glad nie van die geselekteerde palet af nie.
2. Rowwe buitelyne
Kom ons begin teken met die Potlood-instrument. Kom ons teken 'n skets op dieselfde manier as wat ons met 'n gewone pen en papier doen. Natuurlik oorvleuel pixelkuns en tradisionele kuns, veral wanneer dit by sulke groot sprites kom. My waarnemings wys dat sterk pixelkunskunstenaars ten minste goed is om met die hand te teken en omgekeerd. Dit is dus altyd nuttig om jou tekenvaardighede te ontwikkel.
3. Kontoervorming
Ons finaliseer die kontoere: verwyder ekstra pixels en verminder die dikte van elke lyn tot een pixel. Maar wat presies is oorbodig? Om hierdie vraag te beantwoord, moet jy die pixellyne en bulte verstaan.
Onreëlmatighede
Jy moet leer hoe om twee basiese lyne in pixelkuns te teken: reguit lyne en kurwes. Met pen en papier gaan dit alles oor spierbeheer, maar ons werk met klein blokkies kleur.
Die sleutel tot die teken van behoorlike pixellyne is grofheid. Dit is enkele pixels of klein segmente wat die gladheid van die lyn vernietig. Soos ek voorheen gesê het, is 'n enkele pixel van groot belang in pixelkuns, so ongelykheid kan die hele estetiese ruïneer. Stel jou voor dat jy 'n reguit lyn op papier trek en skielik tref iemand die tafel: bulte in pixelkuns lyk net soos 'n ewekansige kronkeling.
Voorbeelde:
Rig
Krommes
Skerpheid verskyn op krommes wanneer die lengte van lynsegmente nie geleidelik toeneem of afneem nie.
Dit is onmoontlik om stampe heeltemal te vermy – al jou gunsteling retro-speletjies het dit (tensy die pixelkuns natuurlik uitsluitlik uit eenvoudige vorms bestaan). Doelwit: Hou ongelykheid tot 'n minimum terwyl jy steeds alles wys wat nodig is.
4. Pas die eerste kleure toe
Kleur jou karakter in met vul of ander geskikte hulpmiddel. Die palet sal hierdie deel van die werk vereenvoudig. As die sagteware nie voorsiening maak vir die gebruik van palette nie, kan jy dit direk in die prentjie plaas, soos in die voorbeeld hierbo, en kleure kies met 'n pipet.
In die onderste linkerhoek het ek ons vriend geteken, maak kennis, dit is Shar. Daarmee sal dit makliker wees om te verstaan wat presies in elke stadium gebeur.
5. Skakering
Dit is tyd om skaduwees weer te gee – voeg net donkerder kleure by die sprite. Die beeld sal dus driedimensioneel lyk. Kom ons neem aan dat ons een ligbron het wat bo die ork aan die linkerkant daarvan geleë is. Dit beteken dat alles wat bo en voor ons karakter is, verlig sal word. Voeg skaduwees regs onder.
Vorm en volume
As hierdie stap vir jou moeilik is, stel jou tekening voor as driedimensionele vorms, en nie net lyne en kleur nie. Vorms bestaan in XNUMXD-ruimte en kan volume hê wat ons met skaduwees bou. Dit sal help om die karakter sonder besonderhede te visualiseer en dit te laat lyk asof dit van klei in plaas van pixels gemaak is. Skakering gaan nie net oor die toevoeging van nuwe kleure nie, dit gaan oor die bou van 'n vorm. Op 'n goed gedetailleerde karakter verberg die besonderhede nie die basiese vorms nie: as jy jou oë verkyk, sal jy verskeie groot trosse lig en skadu sien.
Gladmaak (anti-aliasing, anti-aliasing)
Elke keer as ek 'n nuwe kleur gebruik, pas ek anti-aliasing (AA) toe. Dit help om pixels glad te maak deur tussenkleure by die hoeke by te voeg waar twee lynsegmente ontmoet:
Grys pixels versag "breuke" in die lyn. Hoe langer die lynsegment, hoe langer is die AA-segment.
Dit is hoe AA op die ork se skouer lyk. Dit is nodig om die lyne wat die kurwe van sy spiere voorstel, glad te maak.
Anti-aliasing moet nie verder gaan as die sprite wat in die speletjie gebruik sal word of teen 'n agtergrond waarvan die kleur onbekend is nie. Byvoorbeeld, as jy AA op 'n ligte agtergrond toepas, sal anti-aliasing lelik lyk op 'n donker agtergrond.
6. Selektiewe kontoer
Voorheen was die buitelyne heeltemal swart, wat die sprite baie spotprentagtig laat lyk het. Dit het gelyk of die prentjie in segmente verdeel is. Swart lyne op 'n arm verskaf byvoorbeeld te veel kontras met die bespiering, wat die karakter minder samehangend laat lyk.
As die sprite natuurliker word en die segmentering nie so voor die hand liggend is nie, sal die basiese vorms van die karakter makliker leesbaar wees. Om dit te doen, kan jy 'n selektiewe buitelyn gebruik - vervang die swart buitelyn gedeeltelik met 'n ligter een. Op die verligte deel van die sprite kan jy die ligste kleure gebruik, of, waar die sprite negatiewe spasie raak, kan jy die buitelyn heeltemal verwyder. In plaas van swart, moet jy die kleur gebruik wat vir die skaduwee gekies is - op hierdie manier sal die segmentering behoue bly (om tussen spiere, pels, ensovoorts te onderskei).
Ook op hierdie stadium het ek donkerder skaduwees bygevoeg. Dit blyk drie gradasies van groen op die vel van 'n ork. Die donkerste groen kleur kan gebruik word vir selektiewe kontoer en AA.
7. Afronding
Aan die einde is dit die moeite werd om hoogtepunte (die ligste kolle op die sprite), besonderhede (oorbelle, studs, letsels) en ander verbeterings by te voeg totdat die karakter gereed is of totdat jy moet aanbeweeg na die volgende een.
Daar is verskeie nuttige truuks wat op hierdie stadium toegepas kan word. Draai die tekening horisontaal, dit help dikwels om foute in verhoudings en skadu te openbaar. Jy kan ook die kleur verwyder - stel die versadiging op nul om te verstaan waar jy die skaduwees moet verander.
Skep geraas (dithering, dithering)
Tot dusver het ons meestal groot, soliede kolle skaduwees gebruik. Maar daar is 'n ander tegniek - dithering, wat jou toelaat om van een kleur na 'n ander te gaan sonder om 'n derde by te voeg. Kyk na die voorbeeld hieronder.
Die boonste donker tot ligte gradiënt gebruik honderde verskillende skakerings van blou.
Die gemiddelde gradiënt gebruik slegs nege kleure, maar daar is steeds te veel skakerings van dieselfde kleur. 'n Sogenaamde banding ontstaan (van die Engelse band - stripe), waarin die oog, as gevolg van dik eenvormige strepe, fokus op die raakpunte van die kleure, in plaas van die kleure self.
Op die onderste gradiënt het ons 'n dither toegepas wat bandvorming vermy en slegs twee kleure gebruik. Ons skep geraas van verskillende intensiteit om kleurgradasie te simuleer. Hierdie tegniek is baie soortgelyk aan die halftoon wat in drukwerk gebruik word; asook stippel (stippling - korrelbeeld) - in illustrasie en strokiesprente.
Op die ork het ek nogal gedroog om die tekstuur oor te dra. Sommige pixelkunstenaars gebruik dit glad nie, terwyl ander nie skaam is nie en dit baie vaardig doen. Ek vind dithering lyk die beste op groot areas gevul met 'n enkele kleur (kyk na die lug in die Metal Slug-skermkiekie hierbo) of areas wat grof en ongelyk moet lyk (soos vuilheid). Besluit self hoe om dit te gebruik.
As jy 'n voorbeeld wil sien van grootskaalse en hoëgehalte-dithering, kyk na die speletjies van The Bitmap Brothers, 'n Britse ateljee uit die 80's, of speletjies op die PC-98-rekenaar. Hou net in gedagte dat hulle almal NSFW is.
Kakyusei (PC-98). Elf, 1996
Daar is slegs 16 kleure in hierdie prent!
8. Laaste kyk
Een van die gevare van pixelkuns is dat dit maklik en eenvoudig lyk (as gevolg van sy struktuur en stylbeperkings). Maar jy sal uiteindelik 'n groot hoeveelheid tyd spandeer om jou sprites te verfyn. Dit is soos 'n legkaart wat opgelos moet word - daarom lok pixelkuns perfeksioniste. Onthou dat een sprite nie te veel tyd moet in beslag neem nie - dit is net 'n klein stukkie van 'n uiters komplekse versameling stukke. Dit is belangrik om nie die groot prentjie uit die oog te verloor nie.
Selfs as jou pixelkuns nie vir speletjies is nie, is dit soms die moeite werd om vir jouself te sê: "Dit is reeds goed genoeg!" En gaan aan. Die beste manier om vaardighede te ontwikkel, is om soveel keer as moontlik deur die hele proses van begin tot einde te gaan en soveel moontlik onderwerpe te gebruik.
En soms is dit nuttig om 'n sprite vir 'n rukkie te los sodat jy 'n bietjie later met vars oë daarna kan kyk.
32×32 piksels
Ons het eers die groot 96x96 pixel sprite geskep, want by daardie grootte is dit meer soos teken of verf, maar gepixel. Hoe kleiner die sprite, hoe minder lyk dit soos dit moet vertoon, en hoe belangriker is elke pixel.
In Super Mario Bros. Mario se oog is net twee pixels wat bo mekaar gestapel is. En sy oor ook. Karakterskepper Shigeru Miyamoto het gesê die snor is nodig om die neus van die res van die gesig te skei. Een van die hoofkenmerke van Mario se gesig is dus nie net 'n karakterontwerp nie, maar ook 'n pragmatiese truuk. Wat die ou wysheid bevestig - "behoefte is die moeder van vernuf."
Ons is reeds vertroud met die hoofstadia van die skep van 'n 32 × 32 pixel sprite: skets, kleur, skaduwees, verdere verfyning. Maar in sulke toestande, as 'n aanvanklike skets, tel ek gekleurde vorms op in plaas daarvan om buitelyne te teken weens die klein grootte. Kleur speel 'n belangriker rol in karakterdefinisie as buitelyne. Kyk weer na Mario, hy het glad nie kontoere nie. Nie net snorre is interessant nie. Sy bakkebaarde definieer die vorm van sy ore, die moue wys sy arms, en die algehele vorm weerspieël min of meer duidelik sy hele liggaam.
Die skep van klein sprites is 'n konstante afruil. As jy 'n beroerte byvoeg, kan jy spasie vir die skadu verloor. As jou karakter duidelik gedefinieerde arms en bene het, is die kop waarskynlik nie baie groot nie. Deur kleur, selektiewe streling en anti-aliasing effektief te gebruik, sal die gelewerde voorwerp groter laat lyk as wat dit werklik is.
Vir klein sprites hou ek van die chibi-styl: die karakters lyk baie oulik, hulle het groot koppe en oë. 'N Goeie manier om 'n helder karakter in 'n beperkte ruimte te skep, en in die algemeen, 'n baie aangename styl. Maar miskien moet jy die beweeglikheid of krag van die karakter wys, dan kan jy minder spasie aan die kop gee om die liggaam kragtiger te laat lyk. Dit hang alles af van jou voorkeure en doelwitte.
Die hele span is bymekaar!
Lêerformate
So 'n resultaat kan enige pixelkunstenaar senuweeagtig maak
Die prent wat jy sien is die resultaat van die stoor van die prent as 'n JPG. 'n Deel van die data het verlore gegaan as gevolg van lêerkompressiealgoritmes. Piekselkuns van hoë gehalte sal uiteindelik sleg lyk, en dit sal nie maklik wees om dit terug te keer na sy oorspronklike palet nie.
Gebruik die PNG-formaat om 'n statiese beeld te stoor sonder om kwaliteit te verloor. Vir animasies - GIF.
Hoe om pixelkuns op die regte manier te deel
Om pixelkuns op sosiale media te deel is 'n goeie manier om terugvoer te kry en ander kunstenaars te ontmoet wat in dieselfde styl werk. Moenie vergeet om die hutsmerk #pixelart te gebruik nie. Ongelukkig skakel sosiale netwerke dikwels PNG na JPG om sonder om te vra, wat jou werk vererger. En dit is nie altyd duidelik hoekom jou prentjie omgeskakel is nie.
Daar is 'n paar wenke oor hoe om pixelkuns in die regte gehalte vir verskeie sosiale netwerke te stoor.
Om jou PNG-lêer onveranderd op Twitter te hou, gebruik minder as 256 kleure of dat jou lêer minder as 900 pixels aan die langste kant is. Ek sal die lêergrootte tot ten minste 512x512 pixels vergroot. En sodat die skaal 'n veelvoud van 100 is (200%, nie 250%) en skerp kante behoue bly (Nearest Neighbor in Photoshop).
Geanimeerde GIF's vir Twitter-plasings weeg nie meer as 15 MB nie. Die prentjie moet ten minste 800x800 pixels wees, die lus-animasie moet drie keer herhaal word, en die laaste raam moet die helfte van die tyd van al die ander wees - die gewildste teorie. Dit is egter nie duidelik in watter mate hierdie vereistes nagekom moet word nie, aangesien Twitter voortdurend sy beeldvertoningsalgoritmes verander.
Sover ek weet, is dit nie moontlik om 'n foto op Instagram te plaas sonder kwaliteitverlies nie. Maar dit sal beslis beter lyk as jy dit vergroot tot minstens 512x512 pixels.
Bron: will.com