Pikselikunst algajatele: rakenduse juhend

Indie arendajatel tuleb sageli täita mitmeid rolle: mängudisainer, programmeerija, helilooja, kunstnik. Ja kui asi puudutab visuaali, valivad paljud pikselikunsti — esmapilgul näib see lihtne. Kuid kaunilt tegemiseks on vaja palju kogemust ja teatud oskusi. Siin on tutvustus neile, kes alles alustavad selle stiili aluste õppimist: spetsiaalse tarkvara ja joonistusmeetodite kirjeldus kahe sprite näitel.

Taust

Pikselikunst on digitaalne kunstivorm, kus muudatused tehakse pikslitasandil. Peamiselt seostatakse seda 80ndate ja 90ndate videomängude graafikaga. Siis pidid kunstnikud arvestama mälupiirangute ja madala eraldusvõimega. Täna on pikselikunst endiselt populaarne mängudes ja kunstistiilina üldiselt, hoolimata realistliku 3D-graafika võimalustest. Miks? Isegi kui nostalgia kõrvale jätta, on külma piiride raames laheda töö loomine meeldiv ja väärt väljakutse.

Sisenemine piksli-maailma on võrreldes traditsioonilise kunsti ja 3D-graafikaga suhteliselt madal, mis meelitab indie-arendajaid. Kuid see ei tähenda, et selle stiili järgi mängu tegemine oleks lihtne. täiendama mängu sel viisil. Olen näinud palju indie-arendajaid piksli-artelementidega metroidvania mänge rahastusplatvormidel. Nad arvasid, et saavad kõik aasta jooksul valmis, kuid tegelikult kulus neil veel kuus aastat.

Metal Slug 3 (Arcade). SNK, 2000. aasta

Pikslikunst, mille tasemele enamus soovib jõuda, võtab palju aega ning lühikesi õpetusi on äärmiselt vähe. 3D mudeliga töötades saad seda pöörata, deformeerida, liikuda eraldi osadega, kopeerida animatsioone ühelt mudelilt teisele ja nii edasi. Kõrge kvaliteediga piksli-kunst võtab enamasti tohutult palju energiat igas kaadris pikslite täpsete kohtade määramiseks.

Ühesõnaga, ma hoiatasin.

Ja nüüd veidi minu stiilist: peamiselt joonustan ma videomängude jaoks pikslikunsti ja seekaudu leian inspiratsiooni. Olen eelkõige Famicom/NES, 16-bitiste konsoolide ja 90ndate arcade mängude fänn. Minu lemmikute mängude pikslikunsti võib kirjeldada kui erksat, enesekindlat ja puhtast (aga mitte liiga), seda ei saa nimetada karjuvaks ja minimalistlikuks. Selles stiilis töötan ma ise, kuid saate kergesti rakendada selle õpetuse ideid ja tehnikat, et luua täiesti erinevaid asju. Uurige erinevate kunstnike loomingut ja looge pikslikunst, mis teile meeldib!

Tarkvara

Pikslikunsti põhiteemad on Suum (Zoom) ja Pliiats (Pencil), et paigutada pikslid. Teile tulevad kasuks ka Joon (Line), Kujund (Shape), Valige (Select), Liiku (Move) ja Täitmine (Paint Bucket). On palju tasuta ja tasulisi tarkvarasid sellise tööriistade komplekti jaoks. Räägin populaarseimatest ja neist, mida ise kasutan.

Paint (tasuta)

Kui teil on Windows, siis sisseehitatud Paint on primitiivne programm, kuid selles on kõik pikslikunsti jaoks vajalikud tööriistad.

Piskel (tasuta)

Üllatavalt funktsionaalne pikslikunsti redaktor, mida käitatakse läbi brauseri. Töötlust saab eksportida PNG või animeeritud GIF formaati. Suurepärane valik algajatele.

GraphigsGale (tasuta)

GraphicsGale on ainus redaktor, millest olen kuulnud, mis on loodud spetsiaalselt pikslikunsti jaoks ja sisaldab animatsiooni tööriistu. Selle lõi Jaapani ettevõte HUMANBALANCE. Alates 2017. aastast jagatakse seda tasuta ja see on endiselt populaarne, hoolimata Aseprite'i kasvavast populaarsusest. Kahjuks töötab see ainult Windowsi süsteemidel.

Aseprite ($)

Tõenäoliselt on see praeguseks kõige populaarsem redaktor. Avaallikas, palju funktsioone, aktiivne toetus, versioonid Windowsi, Maci ja Linuxi jaoks. Kui soovite tõsiselt tegeleda pikslikunstiga ja pole veel sobivat redaktorit leidnud, on see ilmselt õige valik.

GameMaker Studio 2 ($$+)

GameMaker Studio 2 on suurepärane 2D tööriist hea spritiredaktoriga (Sprite Editor). Kui soovite luua pikslikunsti oma mängude jaoks, on kõik ühes programmis tegemine väga mugav. Praegu kasutan seda tarkvara oma projekti " UFO 50, 50 retro mängu kollektsiooni: spritid ja animatsioonid loon GameMakeris, samas kui tile-setid valmistan Photoshopis.

Photoshop ($$$+)

Photoshop — kallis tarkvara, mille levitamine toimub tellimuse alusel, ei sobi pikselkunsti loomiseks. Ei soovita seda osta, kui te ei tegele illustratsioonide joonistamisega kõrge eraldusvõimega või kui teil ei ole vaja teostada keerukaid pildimanipulatsioone, nagu mul. Seal on võimalik luua staatilisi sprite ja pikseltöid, kuid see on üsna keeruline võrreldes spetsialiseeritud tarkvaraga (näiteks GraphicsGale või Aseprite).

Muud

Minu pikselkunsti komplekt. Kõik must, märkasin seda alles nüüd.

Graafikaplaat ($$+)

Soovitan graafikaplaate igasuguste digitaalsete illustratsioonide jaoks, et vältida randme tunneli sündroomi. Seda on palju lihtsam ennetada kui ravida. Ükskord tunnete valu ja see ainult süveneb — hoolitsege enda eest algusest peale. Kuna ma kunagi joonistasin hiirega, on mul nüüd keeruline mängida mänge, kus tuleb klahve vajutada. Praegu kasutan Wacom Intuos Pro S.

Randme tugi ($)

Kui te ei saa tabletti osta, siis ostke vähemalt randme tugitald. Mulle meeldib kõige rohkem Mueller Green Fitted Wrist Brace. Teised on kas liiga pingul või pakuvad ebapiisavat tuge. Tugijalad on mureta online tellitavad.

96×96 pikslit

Final Fight. Capcom, 1989. aasta

Alustame! Hakkame liikuma 96×96 piksliste isiku sprite'iga. Näiteks joonistasin orki ja panin selle Final Fight'i ekraanipiltide (ülemine pilt) peale, et te mõistaksite mõõtmeid. See on suur sprite enamiku retro-mängude jaoks, ekraanipildi suurus: 384×224 pikslit.

Nii suures sprite'is on kergem näidata tehnikat, millest ma soovin rääkida. Samuti näeb pikselivaba joonistamine rohkem välja nagu traditsioonilised kunstivormid (nt joonistamine või maalimine), millega olete võib-olla paremini tuttav. Kui oleme omandanud põhitehnikad, liigume väiksemate sprite'ide juurde.

1. Valime paleti

Piksel on palju sügavam mõiste pikselikunstis kui paljudes teistes digitaalsfäärites. Pikselikunsti määravad selle piirangud, näiteks värvid. Oluline on õigesti valida värvipalett, see aitab määratleda teie stiili. Kuid alguses soovitan mitte mõelda palettele ja valida üks olemasolev (või lihtsalt mõned juhuslikud värvid) — saate seda igal hetkel hõlpsasti muuta.

Selles õpetuses kasutan 32 värvi paletti, mille me lõime UFO 50. Pikselikunstiks koostatakse neid sageli 32 või 16 värvist. Meie palett on välja töötatud väljamõeldud konsoolile, mis võiks ilmneda kuskil Famicomi ja PC Engine'i vahel. Võite kasutada seda või mõnda muud — õpetus ei sõltu valitud paletist.

2. Jooned

Alustame joonistamist Keringiga. Joonistame sketši just nii, nagu me seda teeme tavalise pliiatsi ja paberiga. Loomulikult on pikselkunst ja traditsiooniline kunst omavahel seotud, eriti kui rääkida suurematest sprite'idest. Minu tähelepanekud näitavad, et tugevatel pikselkunstnikele on käeline joonistus oskus vähemalt korralik ja vastupidi. Seega on joonistusoskuste arendamine alati kasulik.

3. Kontuuride töötlemine

Töötleme kontuure: eemaldame liigsed pikslid ja vähendame iga joone paksuse ühe piksli peale. Aga mida täpselt pidada liigseks? Sellele küsimusele vastamiseks tuleb aru saada pikslijoonte ja ebatasasuste olemusest.

Ebatisasused

Peame õppima joonistama kahte põhijoonte tüüpi pikselkunstis: sirged ja käänulised. Plesti ja paberiga on kõik seotud lihaskontrolliga, kuid meie töötame ju pisikeste värviliste plokkidega.

Õige pikslijoonte joonistamise võti on ebatasasused. Need on ühe piksliga või väikeste segmentidega, mis rikuvad joone sujuvust. Nagu ma juba mainisin, on iga eraldi piksel pikselkunstis ääretult oluline, seega võivad ebatasasused rikkuda kogu esteetika. Kujutage ette, et tõmbate sirget joont paberile ja äkki keegi lööb lauda: ebatasasused pikselkunstist näevad välja just nagu juhuslikud jooned.

Näited:

Sirged

Kõverad

Ebatasasused ilmuvad kõverates, kui joonte segmentide pikkus suureneb või väheneb järsult.

Ebatasasusi on täiesti võimatu vältida — kõikides teie lemmik retro-mängudes on need olemas (kui pikselkunst ei koosne ainult lihtsatest vormidest). Eesmärk: vähendada ebatasasusi minimaalselt, samas näidates kõike vajalikku.

4. Rakendame esimesed värvid

Värvige oma tegelast täitmise või muu sobiva tööriista abil. Värvipalett lihtsustab seda osa tööst. Kui tarkvara ei toeta palettide kasutamist, võib selle otse pildile panna, nagu ülaltoodud näites, ja valida värve pipeti abil.

Vasaku alumises nurgas olen joonistanud meie sõbra, tutvuge, see on — Šaar. Temaga on lihtsam mõista, mis igas etapis toimub.

5. Hämarus

On aeg kujutada varju — lihtsalt lisame sprite'ile tumedamaid toone. Nii näeb pilt välja kolmemõõtmelisena. Kujutame ette, et meil on üks valgusallikas, mis asub orki kohal tema vasakul küljel. Seega on valgustatud kõik, mis on meie tegelasest üleval ja ees. Lisame varjud all paremal.

Kujund ja vorm

Kui see etapp tekitab teile raskusi, kujutage oma joonist nagu kolmemõõtmelisi kujundeid, mitte lihtsalt jooni ja värve. Kujundid eksisteerivad kolmemõõtmelises ruumis ja võivad omada mahtu, mida loome varjudega. See aitab visualiseerida tegelast ilma detailideta ja kujutada, et ta on tehtud savist, mitte pikseldest. Hämarus ei ole lihtsalt uute värvide lisamine, see on vormi loomise protsess. Hästi kujundatud tegelasel ei peida detailid põhivorme: kui pigistate silmi, näete mitmeid suuri valguse ja varju klastreid.

Suumimine (anti-aliasing, anti-aliaseerimine)

Igal korral, kui kasutan uut värvi, rakendan anti-aliasing (AA). See aitab sujuvamaks muuta pikslid, lisades nurkadesse vahepealseid värve, kohtades, kus kaks joone segmenti kokku puutuvad:

Hallid pikslid pehmendavad joonte «katkestusi». Mida pikem on joone segment, seda pikem on AA-segment.

Nii näeb AA välja orkide õlal. See on vajalik, et sujuvamalt kujutada jooni, mis näitavad tema lihaste kõverusi.

Suhkru tasandamine ei tohi ulatuda sprite'ist välja, mida kasutatakse mängus või taustal, mille värv on teadmata. Näiteks, kui rakendate AA heleda tausta jaoks, näeb see tumedal taustal kole välja.

6. Valikuline kontuur

Varem olid kontuurid täielikult mustad, mistõttu sprite nägi välja väga multikaalne. Pilt oli nagu jagatud segmentideks. Näiteks mustad jooned käel kontrastivad liiga palju lihasstruktuuri, ja tegelane näeb vähem ühtne välja.

Kui spriit muutub loomulikumaks ja segmentatsioon mitte nii selgeks, siis on põhikujud kergemini loetavad. Selleks võib kasutada valikulist kontuuri — osaliselt asendada must kontuur heledama värviga. Valgustatud osa spriiti võib kasutada kõige heledamaid värve või seal, kus spriit puutub kokku negatiivse ruumiga, võib kontuuri täielikult eemaldada. Musta asemel tuleks kasutada värvi, mis on valitud varjuks — nii säilib segmentatsioon (lihase, karvade ja nii edasi eristamiseks).

Samuti lisasin sel etapil tumedamaid varjusid. Õlale on saadud kolm rohelise tooni kihi. Tumedamat roheline värvi võib kasutada valikulise kontuuri ja AA jaoks.

7. Lõplikud detailid

Lõpus tasub lisada sädelemised (kõige heledamad laigud spriidir), detailid (kõrvarõngad, klambrid, armid) ja muud täiustused, kuni isik on valmis või kuni on vaja minna järgmisele.

Sellel etapil on mitmeid kasulikke näpunäiteid, mida rakendada. Pöörake joonist horisontaalselt, see aitab sageli tuvastada proportsioonide ja varjundiga seotud vigu. Samuti on võimalik eemaldada värv — seada küllastus nulli, et mõista, kus varjundeid muuta.

Müra loomine (dithering, dizering)

Senimaani oleme peamiselt kasutanud suuri, ühtlaseid varjualasid. Kuid on olemas ka teine tehnika — dizering, mis võimaldab liikuda ühelt värvilt teisele, lisamata kolmandat. Vaadake allolevat näidet.

Ülemine gradient tumedast heledani kasutab sadu erinevaid sinise toone.

Keskne gradient kasutab vaid üheksat värvi, kuid selles on endiselt liiga palju ühe värvi toone. Nii tekib nn bandid (inglise keeles band — triip), kus paksude ühtlaste triipude tõttu keskendub silm värvide kokkupuutepunktidele, mitte värvidele endile.

Alumise gradienti all rakendasime diserimist, mis aitab vältida bändimist ja kasutab vaid kahte värvi. Loome erineva intensiivsusega müra, et jäljendada värvi gradatsiooni. See tehnika sarnaneb väga halftone'iga, mida kasutatakse trükiste puhul; samuti sarnaneb see stipple'iga, mida kasutatakse illustreerimisel ja koomiksites.

Orkil rakendasin diserimist vaid veidi, et edastada tekstuuri. Mõned pikselkunstnikud kasutavad seda peaaegu üldse, teised ei häbene ja saavad sellega hästi hakkama. Minu arvates näeb diserimine kõige paremini välja suurtes ühtlaselt värvitud alades (vaadake taevast Metal Slug'i ekraanipildil, mis oli ülalpool) või kohtades, mis peaksid nägema karedate ja ebaühtlastena (näiteks muda). Otsustage ise, kuidas seda kasutada.

Kui soovite näha näidet laiaulatusliku ja kvaliteetse diserimisega, uurige The Bitmap Brothers'i mänge, 80ndate Briti stuudiot, või PC-98 arvutimänge. Arvestage, et kõik need on NSFW.

Kakyusei (PC-98). Elf, 1996.
Sellel pildil on vaid 16 värvi!

8. Viimane pilk

Üks oht, mis on seotud pikselkunsti loomisega, on see, et see tundub kerge ja lihtne (tänu oma struktuurile ja stiili piirangutele). Kuid lõpuks kulutate selle täiendamiseks tohutult aega. See sarnaneb mõistatusega, mille pead lahendama — seetõttu tõmbab pikselkunst perfektsioniste. Pea meeles, et üks sprait ei peaks võtma liiga palju aega — see on vaid tilluke osa äärmiselt keerulisest tükkide kogumist. Oluline on mitte kaotada suuremat pilti silme eest.

Isegi kui teie pikselkunst ei ole mängudeks, on vahel mõistlik endale öelda: "Kõik on juba piisavalt hea!" Ja liikuda edasi. Parim viis oskuste arendamiseks on minna kogu protsess läbi nii palju kordi kui võimalik, kasutades võimalikult palju teemasid.

Ja mõnikord on kasulik sprait hetkeks välja jätta, et hiljem sellele värskelt vaadata.

32×32 pikslit

Loomiseks alustasime suure spraidiga 96×96 pikslit, kuna see suurus sarnaneb rohkem maalimisega või joonistamisega, kuid ainult pikslitega. Mida väiksem on sprait, seda vähem ta meenutab seda, mida ta peaks kujutama, ja seetõttu muutub iga piksel tähtsamaks.

Super Mario Bros. mängus on Mario silm vaid kaks pikslit, mis asuvad üksteise peal. Samuti on tema kõrv. Iseloomu looja Shigeru Miyamoto ütles, et vuntsid olid vajalikud nina eristamiseks näost. Niisiis, üks Mario näo peamisi jooni ei ole mitte ainult tegelaskuju disain, vaid ka pragmaatiline nipp. See kinnitab vanasõna — "vajadus on leiutise ema."

Sprite loomise peamised etapid 32×32 pikslis on meile juba tuttavad: visand, värv, varjud ja edasine töötlemine. Kuid nendes tingimustes valin ma esialgse visandi jaoks värvilised kujundid, mitte kontuuride joonistamise, kuna suurus on nii väike. Värvil on tegelase määratlemisel olulisem roll kui kontuuridel. Vaadake Mario't veel kord; tal pole ega olegi kontuure. Huvid ei ole ainult vuntsides. Tema põskhaned määravad kõrvade kuju, varrukad näitavad käsi, ja üldine kuju peegeldab enam-vähem selgelt kogu tema keha.

Väikeste sprite'ide loomine on pidev kompromiss. Kui lisate äärise, võite kaotada ruumi varju jaoks. Kui teie tegelasel on selgelt kuvatud käed ja jalad, peaks pea tõenäoliselt olema mitte liiga suur. Kui kasutada efektiivselt värve, valikulisi ääriseid ja pehmendamist, näeb joonistatud objekt välja suurem, kui ta tegelikult on.

Väikeste sprite'ide puhul meeldib mulle chibi stiil: tegelased näevad väga armsad välja, neil on suured pead ja silmad. Suurepärane viis luua erksat kangelast piiratud ruumis, ja ühtlasi on see väga meeldiv stiil. Ent kui peate võib-olla näitama tegelase liikumatust või jõudu, siis võite pea jaoks vähem ruumi jätta, et keha näeks välja tugevam. Kõik sõltub teie eelistustest ja eesmärkidest.

Kogu meeskond on koos!

Failiformaadid

Selline tulemus võib panna närvile iga pikslikunstniku.

Kujutis, mida näete, on saadud joonise salvestamise teel JPG formaati. Osa andmeid kadus faili kokkusurutud algoritmide tõttu. Kvaliteetne pikselkunstid lõpuks ei näe head välja ja selle algse paleti taastamine on keeruline.

Kvaliteetsete staatiliste piltide säilitamiseks kasutage PNG formaati. Animatsioonide jaoks valige GIF.

Kuidas õigesti jagada pikselkunsti

Pikselkunsti jagamine sotsiaalmeedias on suurepärane viis tagasiside saamiseks ja teiste samas stiilis kunstnikega tutvumiseks. Ärge unustage lisada sildile #pixelart. Kahjuks konverteerivad sotsiaalmeedia platvormid tihti PNG-d JPG-ks ilma teie nõusolekuta, halvendades teie tööd. Samuti ei ole alati selge, miks teie pilt on konverteeritud.

Siin on mõned näpunäited, kuidas hoida pikselkunsti soovitud kvaliteedis erinevates sotsiaalmeediates.

Twitter

Kuna PNG-fail ei muutu Twitteris, kasutage vähem kui 256 värvi või veenduge, et teie fail on vähem kui 900 pikslit pikemas küljes. Soovitan suurendada faili vähemalt 512×512 pikslini. Ja veenduge, et suurendamine oleks kordne 100 (200%, mitte 250%) ning teravad servad jäävad alles (Nearest Neighbor Photoshopis).

Animatsioonifailid Twitteri postitustele peavad kandma mitte rohkem kui 15 MB. Pilt peab olema vähemalt 800×800 pikslit, tsükliline animatsioon peab korduma kolm korda ja viimane kaader peab olema poole lühem ajaliselt kui kõik ülejäänud — see on kõige levinum teooria. Siiski pole selge, kui täpselt on nende nõuete järgimine vajalik, kuna Twitter muudab pidevalt oma piltide kuvamise algoritme.

Instagram

Kuidas mina tean, on Instagramis pildi postitamine kvaliteedikaotusega paratamatu. Kuid pilt näeb kindlasti parem välja, kui suurendate selle vähemalt 512×512 pikslini.

Allikas: habr.com